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

zw2004

<script language="javascript" type="text/javascript">8 I' m+ f0 O  [& O: ^! x6 i
<!--4 U: j" T0 t1 u2 z2 z
// convert a single digit (0 - 16) into hex! P7 m8 B$ V# M! f
function enHex(aDigit)  J3 V. i2 P9 m' c' c4 h' R9 x! p2 X
{
. n+ t0 t$ H, r/ U/ G9 `; T2 M    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 m+ }' W7 h) d% G% Y1 y}/ n/ L! y& \3 X: l# E; x
// convert a hex digit into decimal0 h; @( S7 Q/ t( F) O1 K: z6 V0 ]# q
function deHex(aDigit); f) e) {, e0 _
{( r, N* Y7 X0 ]' O: c
    return("0123456789ABCDEF".indexOf(aDigit)); s$ a& |# [1 E" S4 k; ^7 V( O
}6 W+ z1 n8 U5 N$ l# p7 d; C# \
! h9 o6 o/ ]( c( t6 d6 \
// Convert a 24bit number to hex: [9 M' c, e# V
function toHex(n)
: E" q. n0 B7 {3 G' R3 p{: _: l# u" g4 N' f  w' j. Y
    return (enHex((0xf00000 & n) >> 20) +
4 }, ?+ D2 h! H1 x" U7 v( z, g            enHex((0x0f0000 & n) >> 16) +
( y0 @' T( b; x+ C- [4 E# U. B! ?            enHex((0x00f000 & n) >> 12) +9 t3 c/ @4 Y1 G$ `7 J
            enHex((0x000f00 & n) >>  8) +0 S$ k6 g& \0 S$ F4 y7 \# c# D
            enHex((0x0000f0 & n) >>  4) +9 l( n; ?0 `8 @+ f* I
            enHex((0x00000f & n) >>  0)); _" e6 D/ ^0 ?; B& W  @9 J
}- U0 I4 u# N' e) L& R9 W3 ]
// Convert a six character hex to decimal- A2 `3 v) N5 d$ A' S1 s
function toDecimal(hexNum)
1 H4 l% m1 r2 \" L& t{
" T1 ^' B* k, S5 }9 L  R           var tmp = ""+hexNum.toUpperCase()" }4 t0 P: E, y! Z
    while (tmp.length < 6) tmp = "0"+tmp/ L" ?# Z7 q2 H7 v3 s  w5 m
           return ((deHex(tmp.substring(0,1)) << 20) +4 ]7 \8 `! V7 a8 j$ H) j8 Z; S
                   (deHex(tmp.substring(1,2)) << 16) +
3 x  J0 l/ D8 \' M            (deHex(tmp.substring(2,3)) << 12) +
- `( Z( d4 `) A            (deHex(tmp.substring(3,4)) << 8) +
+ M" }. B( i& Z0 H; C; P            (deHex(tmp.substring(4,5)) << 4) +
  X+ t. N  _% y$ J                   (deHex(tmp.substring(5,6))))
* B0 Y+ H; ~& }: D* q9 y: E}2 ?  I/ g" g2 P1 S
///////////////////Shimmering Links/////////////////////
$ T7 _$ ~& s( i//global variables
1 k7 e( C) Y8 c9 J" O6 Mvar hoverColour
: z# n- ~  `2 ?var numLinks;- D; ?1 |, I0 |
var rate;
2 T' T% k7 F" F. ?var numFadeLevels;
% v9 C! H! n" |, V- U+ \var bgR;
; k7 P' Z, {+ t% _6 fvar bgG;
, [  v- B/ j7 c/ k) I8 nvar bgB;' @: E: }* v2 U6 g8 z
var currR;
/ H) b3 {2 H* \1 Qvar currG;! n  P- ^# a) e% @1 Z
var currB;- Y6 {! U2 Z/ S% q
var count;
: i8 n2 f( a: n) q7 ~7 t( evar fadeOut;
) a( B  y2 L: n- Z2 Avar continuous;- K5 q$ E) ^' C! l3 m+ K  v
var newColour;
+ Z) J+ |1 O( J4 g7 \: l6 S! fvar tID;5 k, i6 D+ _( A4 |
var redInterval;6 r- p( K6 a  N
var greenInterval;# a1 m/ O9 p4 {* b
var blueInterval;" J% Q  Y" _' p+ |3 F: P* ]- B9 Z
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
$ {; B2 t' N0 ]' U% R{; c4 d* L. q9 T- n5 c
        hoverColour = mouseOverColour;. K, @$ r4 Y+ x9 y( f
        numLinks = numberOfLinks;; z1 D/ B3 k5 Z6 k6 ~& O
        rate = 1;# ~7 q" a: Q- N/ }9 X- @- Z9 i
        numFadeLevels = 30;
$ Z5 V" [2 f8 W( A0 ~+ u) W        function initArray(theArray, length, val)' S3 K/ C8 S9 _
        {
0 q' G2 N2 A- ^9 H" O# @# m" C                for(i=0;i<length;i++)/ \: o: U4 G/ g( a$ O; Z
                {: C/ A/ o& c& ]& R
                        theArray = val;% A! C0 A( D3 H+ W4 b
                }  s. ^8 e, W! m
        }
9 m  b. ~$ M5 i' a3 R+ I  f        bgR = '0000' + fadeOutColour.substring(1,3)& k( M/ u0 W5 H% k" ?
        bgG = '0000' + fadeOutColour.substring(3,5)
1 I5 I% _; R2 {7 s0 ?! l% C5 V4 v        bgB = '0000' + fadeOutColour.substring(5,7)- A  L/ O- F8 @3 ~7 M% t
        currR = new Array(numLinks);
( ~; T1 s" q! Z        currG = new Array(numLinks);
; k. {! D7 k$ Z" g        currB = new Array(numLinks);9 E" V) `' y( E
        count = new Array(numLinks);
, B' n7 s4 q: W9 z1 m& _% f- y        fadeOut = new Array(numLinks);
. M$ U+ z  {5 K) ?6 O4 Z9 J, t        continuous = new Array(numLinks);
7 o! u2 K" m+ W. g* q        newColour = new Array(numLinks);
- C" {& u+ c8 e4 w8 Q7 o: X        tID = new Array(numLinks);' i# X& b* C! s) @9 Q' q7 h# x
        redInterval = toDecimal(bgR) / numFadeLevels;
: h; ]. i$ @: Z& m! S9 u: u9 \        greenInterval = toDecimal(bgG) / numFadeLevels;
  D( @6 ~8 m1 E, i! e        blueInterval = toDecimal(bgB) / numFadeLevels;; i) S/ J6 H, x  q% B  O
        initArray(currR,numLinks,0);8 b# W' u- S! K
        initArray(currG,numLinks,0);; P- J0 r, ^+ f6 E0 {9 s
        initArray(currB,numLinks,0);
! Z' d6 B2 M3 g- H. T& `' Y) @        initArray(count,numLinks,0);
/ \% d- r* u6 s        initArray(fadeOut,numLinks,true);! g- k) G* m3 x+ [' v
        initArray(continuous,numLinks,true);! o) E% H) X( H# j
}       
: \1 L# w: e6 Q0 e9 |$ Z3 ufunction startFade(id)' |/ X$ t( z/ ?' N' o$ A8 T
{
% P* ?' `" d  Y        if(fadeOut[id] == true)
% {% x- r6 {' f0 @% N        { /*move colour towards background colour (increment)*/' S! q( Q, r8 C, _) W2 g
                currR[id] += redInterval;
; L, M( Y) F$ C& P1 G                currG[id] += greenInterval;( l9 X) R1 C# z* d, K4 L+ @) w8 l
                currB[id] += blueInterval;
$ s: l% q, H: K- O! I1 W                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 `  o% U# S/ K; y' b) T# c+ K6 X9 i' K                if(++count[id] == numFadeLevels), z1 z4 h$ ?' C1 J
                {1 \2 I1 n# E  D+ z
                        fadeOut[id] = false;7 t" O6 f; G, Z! Q' L! {
                }+ F) H  H& c8 ~
        }. q0 C7 h; h1 R, W7 G4 J
        else( _- N2 B( ^3 @/ _9 ]2 N1 E
        {# I6 e2 H  \, B' [" U% L" L5 e
                currR[id] -= redInterval;
% w2 A& A& b" _$ |5 ?# }8 G( ^0 z* ?" D3 x5 M; {5 o" a/ Y; L% x- M( ]
                currG[id] -= greenInterval;
5 {/ b2 J. u9 l. C& f5 K/ x- f1 |
6 m- {) z0 S2 g& E( x                currB[id] -= blueInterval;+ y* E' g5 X) P, i
" V5 B4 F7 M5 g, u  d+ E
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 q' [* }9 d4 x" i& ?
/ |8 t6 t4 x/ L  w                if(--count[id] == 0)/ p& e% l4 }9 f  l

( W$ E: q  |0 n" v% ~) e                {+ O$ O/ f( O2 x0 b
7 Z- h/ i, L6 m( _6 M
                        fadeOut[id] = true;: A  I2 L1 {2 r

! Q" k$ r) v" D                }# A0 L0 m0 I3 Y+ p6 F) N* v4 x# I

. O4 {$ J6 F% B7 v; F        }* e- j  o& q9 @( @
' ?- [1 s' d2 g6 p& j$ J8 D7 o9 B! t
        if(continuous[id] == true)6 Y: @1 S/ T3 b4 R9 @$ y1 S9 O. P

+ P. W2 A- C9 j( H; o5 z1 ~) |        {0 f) g1 h% l! ^3 ^  c& t
( i( K. V$ `4 T% Y7 j* b- Y
                document.getElementById(id).style.color = newColour[id];               
6 B1 g, a6 l: k6 }( I4 k$ v) W! ?; P  p' X
        }; ^8 Q: p# N$ N; e; J
4 k$ h) g# ~! P" i' z# a# ?
        else
. j( M0 }% K, o+ }% ?! \+ Y8 {+ F' y
        {' p) S+ b" H& I8 Z5 i! U; D

" f, E' r  V1 R6 G                document.getElementById(id).style.color = hoverColour;
# A' l0 a6 a5 Z
. a$ c6 [% Q& J, Z% t        }8 c+ R7 Y0 v/ G  I0 I' F: \
& D8 y4 B/ k; e- w
        clearTimeout(tID[id]);
3 I& z9 i* R7 l6 W* T, R( b- D( g; G" U* A9 Q3 X* D1 Q9 b
        tID[id]=setTimeout('startFade(' + id + ')', rate);
8 ?6 H4 J9 y0 D
  V+ \/ w1 K$ W9 x. ]}0 R- p* D. K+ Q3 ~/ g' \7 ?

) D/ h8 \7 w, z! s6 U% D: rfunction continueFade(id)8 z# o% w3 b, }& [+ R
! s. y9 F  d6 o# a% j( _
{
3 e7 K5 b, K% `5 v; P# Z& c; h( C& Z. }7 n
        continuous[id] = true;  u5 d0 b1 B' y0 p

1 c  g3 a7 l7 n% C6 P+ u8 _; T}
9 x& H: j+ Z- I9 A7 _/ y1 K) i: y& t0 \
function stopFade(id)5 \& t1 O7 l# Z7 M# X1 g: V
/ `' t  L8 E2 r- p  H1 }
{& D8 S- P  @4 h5 ~" I+ I
& e) q4 u( w* l+ i
        continuous[id] = false;
) s) L& {7 q* S# }
4 G  [" C& Q8 j5 Q+ _}+ P7 L2 Q( `# Y  S9 @' d9 @" z
7 @& n3 w* Y- E6 [3 v2 P
function StartTimers()9 `" X5 ~* B$ B0 r0 P$ X7 r9 @

1 o3 s" H+ D5 ~# i4 s. v{        //set up an initial set of timers to start the shimmering effect$ }9 Z) Y9 Z/ Z! r
; i6 I9 I8 S* q# Z' |4 A& R
        for(id=0; id<numLinks; id++)
- i! r- p% c! @5 m4 [5 R( \- g! o( R& @
        {( w2 F& s- q! f3 N1 Y$ ?

, V2 P8 R4 F9 P2 {: G                t=setTimeout('startFade(' + id + ')', id*100);* A2 ~5 N) j7 Q4 i+ b# V+ U* p% X

3 }' }0 K4 b6 C9 ?* o: D        }
; h- B- M4 X0 q& T3 A
, N+ Y1 r; U3 @. N& Q}5 h  z" S! e2 V6 b$ M. H

0 M6 W" t# Z- U. e, ]# l  P//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, ~  O, r- `3 B3 h; C' n! }
# [# A/ [; o1 r; X. i9 `9 }% DinitLinks('#FF0000', 6, '#FFCC77');& y2 z% r" w- S# c  a, a1 G9 M

6 S4 H$ D, z& m6 ]' Y# w4 n//-->
7 ~2 t* V4 a, I1 w0 G
4 |0 ]8 r2 l+ J+ S% p& L</script>
3 \) B) `+ H0 z$ |2 W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
3 `# B) I- H- D$ j6 K* T: e/ r/ x</a>& h4 T( ~5 p$ R' r
<br>: n1 v4 R$ |7 X5 C2 X7 t
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
. w  V1 O2 S0 p7 @4 o( b$ o<br>0 l: i$ ^+ _) E2 J. A" U7 `7 f, x
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* o$ x0 x6 U9 P2 }  y+ u<br>        / D; E: `7 n0 m) `. B
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
) B1 o* A+ G$ U( i$ x1 P<br>( ]" r5 H- @, x* x* b
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ o/ P1 L+ f# p- o' m; f
<br>
; R/ ]) K/ Q. n' R9 P1 [<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& o" u8 s& p0 h/ _  Q4 p! ^
<script language="javascript" type="text/javascript">
! M" }, ^/ U- k8 T7 W! s7 j<!--+ w4 Y8 ~( j1 |& c7 a% Q, e4 k
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering+ L/ L# {* l3 K' }3 f
//-->, U! ^9 r8 {8 d" K
</script>