网页之文字的循环闪动特效

zw2004

<script language="javascript" type="text/javascript">' b' Y0 c  G/ V' P
<!--$ G" a, X& t7 [( P' k; @
// convert a single digit (0 - 16) into hex; P6 m7 W* w1 u! ]* Z
function enHex(aDigit)
5 P  J1 h- T5 j! I{3 I( h3 z: @# Y' \; p  P! N- N
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 l" t$ c  H, t0 C
}& R+ G) H3 U2 l' N) e3 I
// convert a hex digit into decimal
3 x0 Q( l9 F9 e5 Z$ vfunction deHex(aDigit); b  Z2 J, i' |( I$ i
{* L* p0 N0 y) y: M2 f
    return("0123456789ABCDEF".indexOf(aDigit))  a0 L- k4 J2 A3 s8 `6 F1 H5 n& d: ~
}
$ E! N, A" T' @9 d$ v) Y  R, i1 ~
// Convert a 24bit number to hex
! N, Y' }) A+ r* I7 Sfunction toHex(n)
' T4 s" u# G3 t+ q! s, t! F, {; B{
6 `+ Z5 ~2 E, o9 B0 P" y    return (enHex((0xf00000 & n) >> 20) +
- @6 s4 T# D1 E0 q2 E# h4 D: g            enHex((0x0f0000 & n) >> 16) +
0 o( X6 V% @3 j/ C            enHex((0x00f000 & n) >> 12) +4 v3 V: x2 L& M# @+ s
            enHex((0x000f00 & n) >>  8) +8 L! z: d  S0 N$ k+ L
            enHex((0x0000f0 & n) >>  4) +' \4 S7 e7 p8 a( k
            enHex((0x00000f & n) >>  0))
- ^+ c1 }' i" x( N( i: p4 V7 Z}
' H  i7 x" c. ?6 f  a5 w: ?/ K// Convert a six character hex to decimal1 i9 h7 R  w/ z0 M1 S+ h
function toDecimal(hexNum)/ j: o+ l; N% W& w  `0 p
{
* S+ y( u( c5 x           var tmp = ""+hexNum.toUpperCase()
/ K! a7 f0 M% P2 x5 L) T    while (tmp.length < 6) tmp = "0"+tmp6 {  }9 s' N( T# F. }2 F
           return ((deHex(tmp.substring(0,1)) << 20) +
. h1 N* t# T# u4 }0 r% K                   (deHex(tmp.substring(1,2)) << 16) + 8 i$ {* ^$ @0 X/ ?' S  D. x
            (deHex(tmp.substring(2,3)) << 12) +
' R) P, @1 z! z1 ^' l' }; u            (deHex(tmp.substring(3,4)) << 8) +  C: Z4 a. [! G8 `: N5 {
            (deHex(tmp.substring(4,5)) << 4) +. n' K( ?0 c0 Y& q6 `" L* S* Q! N
                   (deHex(tmp.substring(5,6))))  p$ l, Z3 b0 ~- E$ E
}
/ @2 F( n, P0 J) u2 f6 c///////////////////Shimmering Links/////////////////////% i" ?0 h! k2 C; S9 h) d5 j: |- K" }
//global variables
) g7 ^+ A) o- y( ^, i2 Avar hoverColour
+ ?& ~8 M% m+ v& i0 e8 |; s5 ^var numLinks;
  L- Z& R. k" _, y/ t. A* rvar rate;5 o( G. p( k3 ~/ o3 T3 _
var numFadeLevels;  [) e! w8 q" g
var bgR;
0 n$ N) ~. h/ g% X& w8 R) Tvar bgG;9 T7 p% g$ \! F/ X' M0 U
var bgB;  j6 A$ U6 Q7 W
var currR;0 a) e% o6 J# e; Y
var currG;% U4 C4 F4 I, x5 a4 m& O0 u
var currB;& e6 e# a) L5 `+ |
var count;
- R3 w) O/ D8 z7 {* Lvar fadeOut;# }! [% a( R8 ^) k8 Q, X
var continuous;
! o& V- B8 r1 }( G6 f: F5 S6 Dvar newColour;
$ d. E& Z# a; ?" v: D; E. r7 \: \/ Y, ^var tID;
) P) I  `* z7 kvar redInterval;
; F* e- [: b- Q3 p: s% {" t; Qvar greenInterval;
% d& Z8 S; n* |4 ^0 N) V; a) ^3 E+ |var blueInterval;( Y$ B- s. G3 [% U
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)- q. h1 E$ i$ L6 r2 z  e' X
{) L  l( Q9 {; h+ `1 o- x
        hoverColour = mouseOverColour;- ^( H3 E( Z! C* w0 j1 W
        numLinks = numberOfLinks;% }  [6 [3 q# P7 z4 W
        rate = 1;
+ K# X0 o: W8 }        numFadeLevels = 30;# s( z* Y, s2 C& O( C6 P/ u0 D
        function initArray(theArray, length, val)
7 B, J; g' O5 p& t' D; |        {  J4 \% y3 l) \; n) d! _
                for(i=0;i<length;i++), d' Q" L* k. A" `# _  r
                {
  d5 m" b; x9 [6 a7 q) Y& L2 I                        theArray = val;
9 F, e# C3 v) P# h! Y+ [/ h! a: F                }
5 F( Z" ~( x, n" X7 x        }, r: Y0 I- w7 c  k" H8 V
        bgR = '0000' + fadeOutColour.substring(1,3)$ E' L& b. L7 a0 ^6 N+ T
        bgG = '0000' + fadeOutColour.substring(3,5)) @5 s; W4 k" e  h7 z% u) k, N
        bgB = '0000' + fadeOutColour.substring(5,7)6 q* o0 z2 D+ j# B% }
        currR = new Array(numLinks);$ [4 Z  S9 q6 d
        currG = new Array(numLinks);' |& h9 s' i' l& S
        currB = new Array(numLinks);2 s+ ^+ |( k$ K0 }& k! @- j* t
        count = new Array(numLinks);9 p: U" a- E2 J: X$ e
        fadeOut = new Array(numLinks);
0 \3 w  \* j/ P. a( }        continuous = new Array(numLinks);2 Y$ S6 k# B2 @$ }' k$ R
        newColour = new Array(numLinks);
5 z. \( S% f% F        tID = new Array(numLinks);' F/ |2 k& U7 S( H
        redInterval = toDecimal(bgR) / numFadeLevels;9 d! H" m. u$ `3 H
        greenInterval = toDecimal(bgG) / numFadeLevels;, k, Q' A1 C$ R, o$ ~3 C! o
        blueInterval = toDecimal(bgB) / numFadeLevels;0 O/ {& \  [0 T/ ]* R% G
        initArray(currR,numLinks,0);: a. R: O% @( Q; Q! x
        initArray(currG,numLinks,0);5 n9 H' @+ P$ J
        initArray(currB,numLinks,0);7 L5 s4 p% `8 s6 n8 J( m4 [
        initArray(count,numLinks,0);
3 K) o/ O* z6 j. J% G! W        initArray(fadeOut,numLinks,true);
! K2 O% E& o! b! U1 K1 n        initArray(continuous,numLinks,true);! m. s) V" v! X) a# G# @2 ]1 X2 d4 U
}       
8 D1 u/ e& i$ P4 I8 b6 f8 h" O; }function startFade(id)
) U) w. T2 x+ w4 Y. l- z9 [9 k4 u{; Y# j7 a% e! c& b/ ~
        if(fadeOut[id] == true)5 }, @8 z+ S5 p" H+ L+ F+ G1 T
        { /*move colour towards background colour (increment)*/
3 [$ m2 C1 L2 m; O2 P% l) k" d                currR[id] += redInterval;2 |# }+ v7 z3 g
                currG[id] += greenInterval;
- {& g' v& m4 i. _                currB[id] += blueInterval;6 x( [( z; E- z3 ~) Q
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% R1 Z1 m  X) `, \: T2 v                if(++count[id] == numFadeLevels)
0 Q' X# Z' A/ \- d" R& X                {6 E2 W5 z' ]4 ]2 Z# x
                        fadeOut[id] = false;
9 ^2 x/ p) w4 F8 Q+ G. z' L# w                }: x4 l, v3 e- r' Z
        }
: k  B1 H% k. I0 M& j# N; u, u        else
) k* ]9 f8 e8 @0 j        {
7 a; L2 a, s9 B' U8 q                currR[id] -= redInterval;, y, D+ a: h; ~4 g

# W! t7 T* m" U+ y3 E3 t                currG[id] -= greenInterval;
8 P7 B( f9 d8 ^2 m# c( i8 ~9 y+ |* P" Y, Z$ f+ n3 B8 e% z; u7 M
                currB[id] -= blueInterval;
3 n" ^; ]- i+ a4 r% }# C; {' A# z" D5 Y" F- a/ {( e5 o
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ z1 J4 s# V6 d9 i9 S% m1 F  X" S3 @# e" u6 Q
                if(--count[id] == 0)# f; w& c; X" [7 n% T3 z
# @$ b1 @" v9 m+ {# |; N4 |$ S" M
                {7 h1 m+ X$ g! C: o: Q

0 O, @0 P' K0 C1 ]3 q" }9 Q                        fadeOut[id] = true;
4 ?+ e6 k4 g- |, `
- P: o. I' c# k, N                }9 a4 q$ V1 D# ~. h( m! V: c2 {' l

& P8 I6 ?; x6 d' @+ [        }" K. o, }3 Z$ J6 E# p
# U0 i7 b+ T- {7 A
        if(continuous[id] == true)0 D, m6 _5 n/ R1 u8 c
) T4 E/ g* ?/ ~0 i* q8 `7 z4 v2 ?- @! t
        {
0 L$ N+ N4 Q7 P  v* |( @$ W# `
4 ]; l; _" I; s- m3 u, o0 x/ B                document.getElementById(id).style.color = newColour[id];                % E1 n- m" u5 Y" I+ ~6 y! m

+ V" V1 D6 A* A5 F        }
% d$ M  @+ X% ]- z, @" g0 Q( M; C0 c. Q0 F& c
        else
& s' b" ]" O# w3 U4 b
$ |+ H* X, e$ s        {2 X5 k% f. Y" G; z

) X) o5 a/ E8 K% N                document.getElementById(id).style.color = hoverColour;5 W2 s! e8 K( G0 o7 y9 {
! h3 `( \/ |( R5 g
        }
. E' S: j6 y5 R* J1 @
: Y) G, a5 u* R8 ^# l  @4 n* W        clearTimeout(tID[id]);" h# }2 g1 f% Z" n5 T1 S# b! \
' u) ?% c& E, i
        tID[id]=setTimeout('startFade(' + id + ')', rate);; ?+ ~8 |. n( u. h

9 p* u& [7 B; ~- p6 `8 Z# ?8 e' {: ~}" R9 S* E4 e' E) c2 n3 \

, U3 h, |+ p% X- cfunction continueFade(id)
+ L/ B- M9 H& ]. `+ ?
$ }3 B( W, J1 x  u# ~{  ]* I* z  A1 q

5 u/ p1 y4 X" O9 K5 N% j# t        continuous[id] = true;3 z1 U, D+ R6 U- ]

  t. F- h8 `& @/ ~}
3 H/ U" y0 U. L4 P* w$ d. F/ J9 K6 m
, f5 r. I# B) P8 w2 Efunction stopFade(id)
" l6 U) b5 q6 \& B) w7 O4 t8 m; }; s( j
{% ]2 u5 v8 M2 @7 G4 O5 {' c
. l/ T' p) q# I. H, m
        continuous[id] = false;8 I0 f) p6 {! ]2 a

# w4 r. i4 i  X/ {4 t}
8 X! h8 I) y" n& u
4 G$ U5 J* z6 J9 Nfunction StartTimers()
4 y, |0 M, E# q
: @% p! W! f# u6 m& V2 a1 r{        //set up an initial set of timers to start the shimmering effect
- |! n: m& h7 P5 }1 s" M
7 w  L0 ~% i  m$ R        for(id=0; id<numLinks; id++)
8 C+ K' z! ?5 ^& U( {5 g; T7 f' c. b; {. u
        {
, k! |1 U& E% i6 R4 [
1 o& X$ V* R. j6 e. p0 l6 M/ B5 w                t=setTimeout('startFade(' + id + ')', id*100);7 l4 k8 b4 @1 |( v( C- l
* q7 ^  f" c* {, a1 o# N
        }
2 Q/ ^5 Q; B: k9 f6 [
8 q2 N4 q# ~7 k2 H) P4 m}5 C3 b/ W3 ]( W( [

& f+ e- N( k% e+ X. ^//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')4 j6 z" F9 p/ u' M+ \
7 ]( ^0 q7 K3 T- u2 u6 B' C6 w
initLinks('#FF0000', 6, '#FFCC77');2 |  [% e1 m, ~" X1 D+ \
. W" ~4 s& R. `. y) K5 t! h
//-->. @5 u* [! l9 n, k( }$ I% s+ A8 n
& O) A- m$ A7 @+ [0 C9 X2 c
</script>$ g" X2 d2 E4 y' o6 ^! e
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' W, @4 v+ L7 |
</a># O! `, D" W* a8 g$ u- O
<br>+ {) _# V! S( s
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>' \- W! h  D& ^( r4 B
<br>
& S9 ?0 ^( P7 u* [( p2 o  f<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ l+ l# Q8 G" X<br>       
/ [  I* l/ U% s. A% C& k' k/ B/ x<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
- R" g7 N2 K) E7 r9 N' j* B<br>
$ L/ }+ F5 d* A: m6 E; \<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ E" u' d# X2 `- W' W
<br>- m& {$ B% x6 N  I. D& p3 d
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* U6 o2 o+ w$ V7 g* e) @
<script language="javascript" type="text/javascript">
. C3 W  ]% w' v6 V! w; L- j3 B<!--
2 F) y- D& _+ R3 I2 \7 ZsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# j) v5 x1 ], v
//-->2 B  O7 J9 V) P- z
</script>