|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">; V+ F9 R/ n/ T$ [
<!--- }( W6 Y: q/ C0 W* J4 t" I
// convert a single digit (0 - 16) into hex: D+ K8 \. Y. I# ~8 |
function enHex(aDigit)9 r: t: w+ Z, p* c5 `
{
4 f" ]% C$ @( k return("0123456789ABCDEF".substring(aDigit, aDigit+1))9 A1 c. O' J: F
}* L: ^6 ^+ {+ R$ z* J
// convert a hex digit into decimal
q& f# ~5 p4 @( P( h1 v( y+ lfunction deHex(aDigit)
8 [0 Y+ T- {6 `0 w{
! v& ~; T i- \! F' o return("0123456789ABCDEF".indexOf(aDigit))2 C' q+ ^3 x' Y1 `/ d3 u+ C7 D. g
}% X& Y7 R3 h5 S1 ?; X
5 A! K- R9 t: h8 r5 c( p
// Convert a 24bit number to hex' }& m" s J$ j1 T+ m9 L4 ~) F5 k* u' P
function toHex(n)& Y4 d9 A0 m, w' b9 r, M
{
- L4 z/ }* N+ {: U& Z return (enHex((0xf00000 & n) >> 20) +
- @9 |, P' X' \2 I) V enHex((0x0f0000 & n) >> 16) +' u4 F) o8 ]" w
enHex((0x00f000 & n) >> 12) +
3 V! f6 _7 f( }2 C2 z enHex((0x000f00 & n) >> 8) +
7 {5 I: U( f/ H3 j# S# C& J enHex((0x0000f0 & n) >> 4) ++ z2 U0 H# @. [& w/ n
enHex((0x00000f & n) >> 0))& a5 |7 L2 ^* f/ a9 F
}
9 W0 I+ m9 d7 a// Convert a six character hex to decimal
0 q3 n2 K" w7 H, b+ k8 bfunction toDecimal(hexNum) S. C* s/ l2 o4 |7 L* a- j. k8 R" C
{
: g4 ?- i+ I. O$ N7 }& N Z var tmp = ""+hexNum.toUpperCase()
) u# P7 V. H( e0 X3 ^! g3 ~ while (tmp.length < 6) tmp = "0"+tmp
! J& X. W7 e1 i- H9 ?0 n& m! ~ return ((deHex(tmp.substring(0,1)) << 20) +
^1 o# m( ~+ z (deHex(tmp.substring(1,2)) << 16) +
" _: B7 q, v4 Q {, N* B3 ? (deHex(tmp.substring(2,3)) << 12) +
) L' L( D+ C- R( ^3 j* \ (deHex(tmp.substring(3,4)) << 8) +
, Y9 k4 U3 O( b8 q; {) [: S4 I (deHex(tmp.substring(4,5)) << 4) +. P* r; h& ?5 O+ P5 j, g/ B
(deHex(tmp.substring(5,6))))
0 N0 l7 d' W) c0 N) V+ w" R2 H}. W( x7 _( x3 r9 r9 Z8 f5 O
///////////////////Shimmering Links/////////////////////
5 p: L6 d% L" a- m//global variables) q. R5 M# O( {5 f
var hoverColour2 \- G. j+ z: a @1 C5 {6 b
var numLinks;! R1 _% N+ F' b5 }- A
var rate;
) J- } Y% v+ ?& Y, ?; _var numFadeLevels;0 e; z; Z2 c0 p7 m
var bgR;
" ^7 k h' ]4 H% d* d' U% L3 Uvar bgG;
- A/ e. h* }# ^) lvar bgB;8 f) a8 D! f) w! M3 _7 i
var currR;
* Z; |9 I- n6 ~; d+ Tvar currG;0 h+ D" q2 M# z3 ^4 c
var currB;
/ h% b" |# W, j3 Lvar count;
6 u# b3 Z7 S) ]$ h5 Jvar fadeOut;5 ?7 P/ q3 o5 o# S! i% D9 R
var continuous;2 {5 M ?$ v: p1 K
var newColour;5 j6 v# W) a# c- ?# W; f
var tID;5 y( b$ s/ v1 C9 }$ I) m' q
var redInterval;
1 ^- p3 O4 B$ a) R: W/ F0 Qvar greenInterval;# m- X! g7 ^6 g
var blueInterval;
* j. i( ?% J! c" }function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
$ G! F7 U9 w4 T& v{& E d* _9 ]$ _
hoverColour = mouseOverColour;
- a x$ ?& j/ V/ ^ numLinks = numberOfLinks;
; ~$ |( \* ^% R! g1 T8 } rate = 1;
5 V% H3 N5 Y& A: T numFadeLevels = 30;% d N/ w: H- i6 E# t: J
function initArray(theArray, length, val)1 a& `0 b; ~+ d; A" `: q; J) Q, o6 M8 \
{
8 _" e9 j6 _) D9 h2 V" I( ^4 U& a for(i=0;i<length;i++)( G% k- U9 a( Z5 n7 e' I: c' z/ g* D1 `
{5 A2 i1 {! C$ ^8 e2 f% L$ m
theArray = val;
" |7 l* w6 g) n$ F3 \% e7 l3 o! B }: e, e) a9 v/ L% d/ J
}
- v O, b5 M& X, g6 ` bgR = '0000' + fadeOutColour.substring(1,3), O) r+ ~1 Z z4 h' U( f6 R! @, {
bgG = '0000' + fadeOutColour.substring(3,5)% R% `$ g# m# W; d- ]
bgB = '0000' + fadeOutColour.substring(5,7)' ?5 E" `( p( i! P$ J5 d0 M
currR = new Array(numLinks);" `, g; r$ \& @4 a) N& I8 P: W/ X8 X
currG = new Array(numLinks);4 l2 ]" M, ]; V9 l5 I; |: F# U
currB = new Array(numLinks);+ Q! `7 H' d" R* ^
count = new Array(numLinks);
* P- H. J2 m' B; K# e fadeOut = new Array(numLinks);
8 m7 L6 A2 R$ Q+ G continuous = new Array(numLinks);
! d/ M z8 k; c+ @* p! r5 ^ newColour = new Array(numLinks);
6 o/ y9 d& D8 u$ B1 l$ h tID = new Array(numLinks);9 `* f( n! r! _* T( C k
redInterval = toDecimal(bgR) / numFadeLevels;8 |7 U0 s& v5 I+ g b& I& d. }
greenInterval = toDecimal(bgG) / numFadeLevels;
9 [5 e, }+ V* a blueInterval = toDecimal(bgB) / numFadeLevels; Z* W4 {+ o6 `4 p8 n
initArray(currR,numLinks,0);
3 W, \9 M6 m* ?1 G% B; z2 E) n initArray(currG,numLinks,0);0 {7 X/ V. J. j1 i
initArray(currB,numLinks,0);
4 T& Z6 \* n" h3 |& T$ f3 B# i+ w initArray(count,numLinks,0);
4 o4 M) m* k8 S0 B t# ^5 w initArray(fadeOut,numLinks,true);6 B5 i6 H* S5 H2 A3 W
initArray(continuous,numLinks,true);; Q" S& ?* ]+ s$ [4 R1 }
}
( K# ]: A0 p! L& V' dfunction startFade(id)
9 R2 o4 t* l* J9 L" s8 q- i{
+ f5 B8 U& y2 G2 L8 z if(fadeOut[id] == true): H- ~) a; b5 ]; K( @* ~
{ /*move colour towards background colour (increment)*/
+ m- O' M7 s: T# z2 a7 {$ Y currR[id] += redInterval;+ ]" P3 a" N! y3 l4 Z v x
currG[id] += greenInterval;6 M1 {# [- W1 N" F
currB[id] += blueInterval;4 u# Y f. L3 d
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);0 e! l/ @ \6 B8 B
if(++count[id] == numFadeLevels)
; t% p2 Z8 s3 q' T8 u4 D) m9 X {
0 G! i9 [6 h8 k+ b- @ fadeOut[id] = false;( l, F% L& `8 `$ p3 z$ G
}/ o" @% g9 K3 [/ @9 E' h+ B3 w
}
' P2 _ J) c& X" U3 `& }2 W else+ @4 m0 I! w' K l8 ~8 c
{' P; f5 K7 ]. v8 s) x$ ~1 h
currR[id] -= redInterval;
# C2 U6 `+ D& }; i) V: f9 ]; |+ N2 q: E3 J! a7 C: n2 x
currG[id] -= greenInterval;
`. w* | H5 V3 u- a; T1 c) A
currB[id] -= blueInterval;
# F& o9 U7 n8 o' k& f$ P5 v
$ B- d4 M: s# Q9 C! ^2 @1 M newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 \3 s: o; y* E" e& c" ~
2 L2 }7 H$ ~# i# c" t1 a
if(--count[id] == 0)
/ e7 ~- k+ m0 K: d7 a
) O" S- V, r& ~, M. Q {( r# o) B0 W/ g2 W
1 r. ?7 k% K+ ^; W2 m fadeOut[id] = true;
0 F4 Q: S7 ~! O% g/ s" ^, z* j* x
}
; j7 C0 o+ V1 I6 ]2 }
5 @) {8 W8 m/ F: b }
* J* j- d' Y. n' @2 Z, `+ n0 J0 s
7 H6 n+ v8 ~" a/ E if(continuous[id] == true)
) v: c G3 g) H( s
9 _% _: A, S6 g6 d! O {
# K; I3 [) ~* `6 V) S+ B/ q) C
# y) a/ q; V2 p; P7 O! d document.getElementById(id).style.color = newColour[id];
( S! t1 P" z3 f( T7 F# R1 b4 Q I) G1 @' l- _
}
! `) p& W3 ?) ~9 Z) P) p
, f3 ~/ M# g/ n" k2 y8 J else
* X- d7 G: m8 j0 i/ [$ M. b6 e
5 A/ n, k- n6 d9 p) J {$ \: J7 m. p f' r8 @' k
& A' o0 C' C9 ^' s- E: C; h! W7 L. l
document.getElementById(id).style.color = hoverColour;. U; \7 D2 M0 C* w
: A# a+ }9 ^/ M) `
}: M. T$ ]* S3 Z* z! A* ? L& @. J
* x, J' l& W6 T
clearTimeout(tID[id]);
$ ~3 l0 l3 S4 T" K( {
! [9 H b2 n5 O! H4 A tID[id]=setTimeout('startFade(' + id + ')', rate);) v# ?, v4 {5 D9 a9 W. O
4 P( m# l- ~; v+ v3 }; n4 ~+ R
}8 O( R# y' `# S- R
# p y1 M8 L- }" Pfunction continueFade(id)
; ^2 m" Z* r, {
! x% y! q( r/ J* q, y" I- v{: F+ P0 E9 S* F4 b; i1 [
4 b" N9 [ V4 w! r+ d8 Q
continuous[id] = true;
' l' U) q5 T* M4 Z/ F7 U) X2 o0 ^9 f8 x
}
& g! A7 X5 A9 x! A8 m6 N* Z) ~1 C; |! X. |2 x
function stopFade(id)6 d/ F4 T6 ]: v, u; K
+ Z) l! g7 E2 \. D$ u7 a( ]; k
{
0 X/ v! a# h1 a8 @
! I j/ l( V# J1 o0 J7 D$ A continuous[id] = false;. C( A7 n T+ ^' W4 p# g
9 c8 j2 H: I8 x. F}
! K6 { a: R. v% d$ C d$ h+ J& s, R x. @( _# l6 c
function StartTimers()
% A9 Z( |1 Z" E6 s' b# I; }' P! R' q9 M# Y
{ //set up an initial set of timers to start the shimmering effect
, I0 F7 {2 o2 g4 p: G& `: }6 |- ?; D3 }% b7 `; m
for(id=0; id<numLinks; id++)
: a* e# E) Q2 X4 K$ h) Y
- }' Z2 s2 V* l! I7 v {
v1 d* d. D: C+ G2 z
# P8 h7 ~& s8 G5 E5 T. s t=setTimeout('startFade(' + id + ')', id*100);
; D3 e: f3 W3 B
& z- y5 C e+ v9 g }+ E p4 s! U6 g4 Z2 P
. ]( f( ~3 Y. I/ i& f e
}
, B) q% l- h' W2 x4 ]# F6 ]6 a
) u; J) A$ P- x1 x. n" e//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
4 ~4 E& H, C4 P/ m; t
. I' Z3 O& W! U- HinitLinks('#FF0000', 6, '#FFCC77');
2 C7 h3 P( J8 H: X6 M. W2 b
! w6 Y: o D/ ]. T( E6 x) T//-->
^, K0 N/ z Q3 ^7 ]
# O/ \, q: R% s3 d9 Y</script>
1 n4 a0 z. F3 K& j; g<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
: }! {# S8 X7 Q" ~: q# {</a>
( Q- e0 D5 K7 I# W7 {<br>0 P$ N' A( B% A
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>0 F2 u" P2 I& h) l6 z3 S( Y8 T
<br>/ C) q) X. Q$ o# a; S
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- e4 J: P# e ^8 `5 \<br>
9 q" S; W& V" ?" K' s9 t0 z<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>- R. D& W; ~9 l# o$ X
<br>
! Y6 Y2 ?0 u4 p5 g0 u2 t1 V; P<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" Q! j& c/ c, i* u<br>0 z, H+ W- @4 _' L2 _( q7 S
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ y3 Q9 |* Y( n( B# O# C( r
<script language="javascript" type="text/javascript">
+ N* q A* Q; h6 }<!--; O9 Z& P+ n% I9 Z, o
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering$ R W, T% W5 K. Q& ], k6 \
//-->
% z; s6 x" E+ G- m2 _, \6 q( V</script> |
|