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

zw2004

<script language="javascript" type="text/javascript">0 J3 i( E. p  E8 D" s9 E
<!--6 `1 z, r6 x# }7 J8 e. ~4 p2 H
// convert a single digit (0 - 16) into hex& f3 w4 G7 n* s5 p
function enHex(aDigit)0 }8 T( F6 K' O0 L6 s" G$ j
{5 B; h$ M1 o) c2 D& q$ }
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))" t7 T9 x8 J3 b2 `  M$ T* l
}& w6 j& [  }& `9 j
// convert a hex digit into decimal. I8 Y( Q& j  k
function deHex(aDigit)
: L4 k; {3 w9 n/ `+ f9 G, ]" t{
2 k4 D2 i9 `" J5 a' U% o7 ]8 o, Y, ?    return("0123456789ABCDEF".indexOf(aDigit))# s7 `+ R9 G# R
}
' o! U2 R4 E' D5 t7 }+ a; F4 p
/ p& t' R9 P  s+ J// Convert a 24bit number to hex
3 |- U. d3 _4 ]7 x9 X: gfunction toHex(n)
+ S4 u4 K" n3 ]6 \2 N  q{3 A6 m5 h6 V' M7 |- Z
    return (enHex((0xf00000 & n) >> 20) +
  _5 B3 ]$ h+ @" H; b. A            enHex((0x0f0000 & n) >> 16) +9 g" f& [6 ]" R5 P+ s+ |9 V7 G
            enHex((0x00f000 & n) >> 12) +/ i& O5 I5 A  s0 ^- p% N. W
            enHex((0x000f00 & n) >>  8) +& d. a  A9 c6 E$ \0 }8 ?
            enHex((0x0000f0 & n) >>  4) +
& u6 Z7 O7 q2 g, X$ w; t) \            enHex((0x00000f & n) >>  0))' M4 p  Z9 o. _& p' {# b
}
0 d  K- B, ^+ Y1 x7 ?// Convert a six character hex to decimal' u7 ]% Y6 {. t3 z! E% B
function toDecimal(hexNum), R: i, |; S, N: P+ A- X# P; M, r
{  w; n- R. }' t
           var tmp = ""+hexNum.toUpperCase()2 t2 k. w& x" i/ C6 T
    while (tmp.length < 6) tmp = "0"+tmp( }6 |: @/ n" J: A
           return ((deHex(tmp.substring(0,1)) << 20) +; N8 W) b3 J9 F  y1 ?
                   (deHex(tmp.substring(1,2)) << 16) +
% q, \9 z% g/ O& W7 {7 w, W: \            (deHex(tmp.substring(2,3)) << 12) +
) h, j( w4 k& @/ L; G            (deHex(tmp.substring(3,4)) << 8) +
! @' J4 g- a" i6 d1 K+ F            (deHex(tmp.substring(4,5)) << 4) +2 `; m% V4 I3 _1 q, K
                   (deHex(tmp.substring(5,6))))  i5 |  D9 L- e( ^+ v
}' g$ K& ?( q* q  h1 G4 w2 t
///////////////////Shimmering Links/////////////////////
. ?% l" k% l: E; o2 f7 A# m//global variables
4 a" _! X/ i) @- e; \var hoverColour" i5 [; W2 ]& w2 ?* U, t' k; ~- L
var numLinks;
: k$ s9 v- o% n% p. X) `5 P/ tvar rate;1 x# r, o" ?! R8 S2 u; |2 \
var numFadeLevels;
4 o  u% _$ d2 ]; {var bgR;
4 Q3 z3 H  N/ ]( t' q' m) e  uvar bgG;
3 K' i( W* m; X7 w5 }var bgB;
. a. ?  d' o4 ?3 A$ ]0 vvar currR;
5 I$ W# Z& x/ T' S3 qvar currG;
& A. I  n5 d" W' hvar currB;
* I" z' y$ ~- H6 Svar count;( B, W+ @- e( f( Q) H, R
var fadeOut;7 P2 R9 {' @5 v9 R2 t
var continuous;
4 l0 z) {5 e1 K) g2 J* R7 qvar newColour;
+ O4 C, x- W' v: t) z' y  lvar tID;# @8 G: o! ]: M( Y( \
var redInterval;
# k- f# @( L2 N  M  F% Z4 R9 yvar greenInterval;- V! V! P( m# @: E4 r  p  E
var blueInterval;
  A6 ~7 {0 c8 ?' |function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! [' B/ Q3 K; S; G* O; P
{
$ V' b4 J3 g. U  ^8 V' ]        hoverColour = mouseOverColour;
6 N: e- z2 n* Z: a        numLinks = numberOfLinks;+ [$ q& t6 d7 h- a+ M6 |
        rate = 1;% N7 g; F$ w6 v7 W% W
        numFadeLevels = 30;: P  c7 c$ E. x, M1 Y
        function initArray(theArray, length, val)
2 n1 z5 F; \* m' n' e" g8 G        {; _) f5 W. X* o- a! B, F( }
                for(i=0;i<length;i++)
/ A6 s4 E3 l8 k. O  f                {) a1 v$ S' l7 E5 X# r4 k2 Z' L7 w
                        theArray = val;( c+ ^2 E3 @+ f9 l- k
                }
" m. F# c  }3 @# n; P* Z. h        }+ `8 H' K  H7 ^  u
        bgR = '0000' + fadeOutColour.substring(1,3)% W& h/ @& `* E
        bgG = '0000' + fadeOutColour.substring(3,5)
: [# F6 p" n% @& d) T/ a        bgB = '0000' + fadeOutColour.substring(5,7)' C0 f4 d% f/ B
        currR = new Array(numLinks);' I1 Y% L" f# ~9 w( S5 s% H
        currG = new Array(numLinks);3 t+ o& K' A7 Y# G2 K+ H0 q
        currB = new Array(numLinks);
6 V- `( c- F- s& s! s( W$ m$ E2 c        count = new Array(numLinks);
- X" D9 W& _9 s! Y. ?        fadeOut = new Array(numLinks);
  j5 m1 _# w# @( a3 B        continuous = new Array(numLinks);  b' X1 T7 q9 r
        newColour = new Array(numLinks);
1 q) ^5 ]' X* O        tID = new Array(numLinks);  o  f( m& O7 Y5 F0 E
        redInterval = toDecimal(bgR) / numFadeLevels;  N& w( R; {5 Q- L( G6 Q' m/ Q- c
        greenInterval = toDecimal(bgG) / numFadeLevels;
& m; i8 L: P9 d) `+ ]% P        blueInterval = toDecimal(bgB) / numFadeLevels;
* {. V+ ~/ R, J! }; x        initArray(currR,numLinks,0);
2 l3 {6 g1 s& t& c0 m; b) i        initArray(currG,numLinks,0);. {/ X1 s* q, ?3 `4 U
        initArray(currB,numLinks,0);
6 H  b5 J$ }$ ?$ G" Q2 @% L% ~        initArray(count,numLinks,0);
$ _! }& w/ P8 u0 Y% S        initArray(fadeOut,numLinks,true);
  Z; x" {9 M* O% R! Q% x        initArray(continuous,numLinks,true);  P3 L/ f7 X+ U) r& n6 _6 {0 L
}       
$ I. H2 ?8 h. a; wfunction startFade(id)
7 G4 u7 p- D; m/ w- |) P$ y" y{2 J3 r9 P  J2 [/ L$ q
        if(fadeOut[id] == true)7 z' m  m: }* D7 H4 t$ a
        { /*move colour towards background colour (increment)*/
! w4 }2 `) t, Q% G( B4 m                currR[id] += redInterval;7 l0 b; \* `8 T; p3 d* l
                currG[id] += greenInterval;  S9 x# I' K) O
                currB[id] += blueInterval;; V, n& e- t7 [: V& g7 U
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 E6 J! g8 l7 U) C6 r/ O+ Z
                if(++count[id] == numFadeLevels)
+ ?" j2 I! ~5 Q8 X7 U1 m                {
& h- F- {( G2 b4 N                        fadeOut[id] = false;
) w6 y  I/ ^* _) ^                }
) d8 ~4 u/ R8 [' {, z        }
! W" j$ p$ M$ i& E% z) `( z        else
8 `; v% w. d% [0 p% ~) w- s$ Z        {
/ v# t+ {- q" G                currR[id] -= redInterval;' V' Z$ w& _4 ?3 T! q4 U
( ]% I9 c. G1 ?% T2 x
                currG[id] -= greenInterval;) n- r6 T. C+ k( E& V

; o9 l9 l& L3 @& z" q: v                currB[id] -= blueInterval;
1 I( F  c/ E7 n2 _
+ t- R) E. c: g# ]6 K. Q/ ?# y; j                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 M5 G3 Q  k5 |/ c  F* P
0 R2 C3 K, u5 i% c                if(--count[id] == 0)8 d; c+ `2 Z6 C5 c& h" L

8 {% x. q9 j: o8 V7 E                {
$ q8 k  v' ]! M- e: f3 {  ^) n8 I
                        fadeOut[id] = true;
  N5 I, q/ n" U. {) d  C; C
# A  _( |% b6 f  P                }( [8 R+ K7 N6 c# m9 z" }

' t7 a) x# ?$ {        }0 I4 ^4 V9 ~2 w9 x. Q" z
/ L" [* J, b5 C5 \/ O9 h& a) O
        if(continuous[id] == true)$ ^$ a  y: {& |, r" p4 J
3 y+ Q& Z" v! V3 C) a
        {) f3 d* h+ {7 p: }

' W. j* ^' e& [8 S& Q$ J5 U" ?5 B                document.getElementById(id).style.color = newColour[id];                1 ~5 p6 ]& S6 f
2 M! M2 I7 |2 J3 Z
        }) ?: O5 N5 F$ t# c! @8 I- D

$ N! ?1 T  P: J6 h+ w        else2 N; ]( q5 T. t

) `. |3 ~9 e7 I: @        {
3 p- Q; O1 x/ g/ u/ G: f  W
. J' g- N& P, i* ~3 J& z5 Q2 b6 c                document.getElementById(id).style.color = hoverColour;1 U! t* p( D9 X0 G
* V5 F  }: ]) i9 }0 K8 |; y2 }
        }0 a6 u( t3 u2 R# W6 R& Z3 k
$ I1 O/ v. J% A- w# n, h
        clearTimeout(tID[id]);4 ~* Z- }+ \: {) H6 R9 a( X( I

- j# {. a$ W: _6 S        tID[id]=setTimeout('startFade(' + id + ')', rate);
5 j, V* e% y2 f/ w
; O& l5 u/ b) t. ], Q}) |2 z8 Q/ l3 _# P

9 ~3 B5 X! K) W, `function continueFade(id)
# m4 S* g" s% ]1 g/ v: }. Z- p2 O/ s& O, Y: L( @
{& K/ l2 D. m' v0 |2 Z

3 R1 B, a' K7 t: U+ N        continuous[id] = true;  t- l; r1 b/ A0 K1 W: O
: u- O- R! T; @: l3 ]" R3 O+ s4 x
}+ `) f' a- ~/ B/ G
3 G" d& n( q) ?! m1 U
function stopFade(id)
2 G1 D, s& \3 t/ B. L( {
. F! c: U) H3 Z- p{5 Z& ]0 Q  H# y* n. ^

+ q7 S& k7 t$ a- k4 ~3 t6 N# ~        continuous[id] = false;4 ~' _+ z, k! l0 N" S

+ n4 C1 ]% [. C- t6 A}
# D! E4 J/ |% o2 k- `, [& [2 B" @; _* ~, r
function StartTimers()( d  Y& G. c0 x) V0 g8 h
3 K9 ]8 n* R' e7 [
{        //set up an initial set of timers to start the shimmering effect. m/ E# \( I* g  h5 |3 W

" r# N: U3 [2 H5 M- L& f        for(id=0; id<numLinks; id++). m! d5 ^9 K# d5 o; ~
6 p3 v' w  I  R2 e' e; h8 u
        {! }1 L* }6 T# J, I$ [
9 \+ ~3 s8 A5 V+ k+ R' T
                t=setTimeout('startFade(' + id + ')', id*100);/ R" q1 o; ]5 W
5 }8 h: ?1 s1 J( s2 h4 [
        }
0 P2 H  |9 y$ ^4 v, O1 ~2 ?/ r( u
}
8 R7 O3 A; y5 l. z0 N( p: ^( a
7 L+ i: D5 b6 H& ]! m//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')+ P  c  C) a+ U& H/ v

$ f) L% R  {" u( xinitLinks('#FF0000', 6, '#FFCC77');
5 x: G$ `1 P; d: G: W+ S4 g
3 R/ w* c. q1 B7 v) Q9 F9 ]6 A//-->: n/ C% c0 L/ Q/ ]$ R
5 o$ j6 y. C* Q" f8 e, F4 K/ V+ M
</script>
- \2 }  n9 B( I% h1 ?; C7 T<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
4 R5 s. j! p1 ^% y& m) d</a>
2 Z: C8 ]" o( [9 ^) ?% k<br>5 G% h' S" K3 U) E; Y
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a># {& b" E5 s3 i+ K5 k7 A5 P* K; v
<br>
% z. w+ ?7 Q" B; z6 z8 ^9 a<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
4 d3 s, M0 O/ P: y3 \<br>        - j5 j# O/ E4 H& G( W& d6 ^
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
3 ?! r" [: e+ d<br>
1 \! q% a5 w/ |6 F4 s4 y<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
, @/ t6 Z9 r9 s9 R, o+ l" ~<br># I* F0 V+ @- R5 |3 u7 {( |2 [
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
" D! L- I" o" L5 A$ q+ t<script language="javascript" type="text/javascript">
; q5 W( F! h8 V. E: t9 ?& {<!--4 t: Y) r  ?5 v4 k( ?% S5 ~
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering. g5 H& T1 v' I3 K, F  O4 H
//-->. m6 z3 p, j, }! J! O9 P6 k  e
</script>