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

zw2004

<script language="javascript" type="text/javascript">& V4 Y. ~& t, N; b5 s+ P, ^7 I
<!--8 c9 t7 M+ |1 {6 d6 `, l. o
// convert a single digit (0 - 16) into hex+ u9 p8 u. z* \/ W$ i5 i
function enHex(aDigit)
: o, f- C" A5 `- i) E{
* g/ V( A1 I( G  Q) {' L    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
% w8 S. \- v8 n; S, E  a" ^4 j}
" u: B* W  X' M2 O" J/ v5 c! l7 K// convert a hex digit into decimal4 n# g( @+ l% `' S5 W; E7 F. `
function deHex(aDigit)6 F2 t1 r  r( `. K( i: `0 _
{
3 ]& ~: t: ^& r! r$ R% A    return("0123456789ABCDEF".indexOf(aDigit))1 @2 i  o* d+ p5 N
}
: v! E( Z6 v4 l- Z: t
& i" {" ^' m' H1 z// Convert a 24bit number to hex
+ H! G  g  A. a3 H5 U1 qfunction toHex(n)! p" t* m' g& c  a2 v
{; U! _5 ?& d& ?5 ?# ]) P
    return (enHex((0xf00000 & n) >> 20) ++ S9 `+ v* I4 y
            enHex((0x0f0000 & n) >> 16) +' |- B9 Z, v. R2 d1 T7 j
            enHex((0x00f000 & n) >> 12) +
; N3 M7 h! Z3 g            enHex((0x000f00 & n) >>  8) +
) P. {1 D/ w2 b5 p, x" I! [            enHex((0x0000f0 & n) >>  4) +
& _' m* {! W4 X! i            enHex((0x00000f & n) >>  0))
( N5 A  b. r& Z0 ?! B( {2 Y- j/ W. E}
6 O. r. M- b) c$ S2 U; L// Convert a six character hex to decimal% U& `$ T5 Z3 S: l! ]
function toDecimal(hexNum)
3 l' ^/ ?. i) j# ]5 k- ^{  Y" y( L. A/ T) ]
           var tmp = ""+hexNum.toUpperCase()
% k2 g  ^+ R" g8 y% P) j    while (tmp.length < 6) tmp = "0"+tmp" Y4 g6 Q7 T$ X3 E2 E! o8 A
           return ((deHex(tmp.substring(0,1)) << 20) +
: x) G7 }4 f9 R* a6 k                   (deHex(tmp.substring(1,2)) << 16) + 0 K) C; L" F# L
            (deHex(tmp.substring(2,3)) << 12) +
9 u" [4 m: N7 z) ]) ^7 b            (deHex(tmp.substring(3,4)) << 8) +# ~) ?0 ^* O! l. n9 f6 ?
            (deHex(tmp.substring(4,5)) << 4) +
" _  ^# C, F! ^$ w1 [2 C' n8 q4 H                   (deHex(tmp.substring(5,6))))
( e, K, u, s3 A}
: t+ i8 ~) [8 S7 X7 p- y4 s' V///////////////////Shimmering Links/////////////////////
. S1 q- q1 R8 [+ a$ Z8 W) \1 j//global variables
7 L8 V5 S8 _  O7 U  |6 c! Avar hoverColour! c/ x. ?  d8 K) R' T' E7 j! M5 \9 g
var numLinks;- i1 k* P4 a4 H; s5 E
var rate;7 c. a; ?' Y7 U4 Q* |
var numFadeLevels;
8 G/ U, l! r  s- p9 a3 I9 Cvar bgR;
5 H! s! J0 s5 Z. ?$ E. uvar bgG;+ ^3 x9 V; o9 ?9 q! l  v' A' s
var bgB;
8 R1 n( j7 o) G0 Z+ Y+ _var currR;' M2 k7 S$ f" k! m
var currG;7 r5 N5 P# v; P3 d9 x# @
var currB;6 j  I. c& e. B* `
var count;3 @- r! c1 t& k
var fadeOut;1 G5 {! F' K$ H; g" E+ y% J
var continuous;
( t  X# V. _& Y% d& ?7 M& Z! k' c$ i) Zvar newColour;9 c6 o- l0 ?0 @8 z" U% q
var tID;
1 Q4 Z! u0 J* w1 ~5 nvar redInterval;9 S7 q1 C) J5 G& a+ Y' j% Q
var greenInterval;
: E/ i+ ~5 k( }* ?( Mvar blueInterval;
+ ~& d! P% O! A' A& o8 E4 s' X% Mfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, j* ]1 E: B+ z( b$ G{; x& R; _* W; r  s
        hoverColour = mouseOverColour;
4 j7 W$ j: Q* ^! y        numLinks = numberOfLinks;
1 E$ f3 G' y2 X0 L+ G" E$ ^        rate = 1;
% f6 I$ Z* y" Z9 z" c7 {3 n$ ?) @: I" c        numFadeLevels = 30;
( w- V, N  ]3 H* {0 O7 q( B+ T        function initArray(theArray, length, val)5 i5 P$ _  }8 A0 k
        {* Y, P7 ^. C: S- O4 l9 L
                for(i=0;i<length;i++)# U8 Y+ Z0 j1 L6 u4 {- t
                {
0 _; p/ E' Y- _5 U                        theArray = val;6 p5 W* `5 w* p8 C% a# l/ C
                }
' h4 o* C3 J3 `5 U. P# A! Y8 ~( t        }. ]# k1 m6 u! s. Y+ k( Q' b
        bgR = '0000' + fadeOutColour.substring(1,3)
  i& |9 ]! s  g& B        bgG = '0000' + fadeOutColour.substring(3,5)
2 U6 T: t+ D( o. Y, L        bgB = '0000' + fadeOutColour.substring(5,7)
' I: ?9 a+ y. ?6 N3 w        currR = new Array(numLinks);, A7 J8 {0 P7 Q0 _  L) ^
        currG = new Array(numLinks);
4 {# ^6 {' `2 l9 i! g7 E! i        currB = new Array(numLinks);
. G! Z4 J1 S+ Z, a        count = new Array(numLinks);  w( v( r" c% ~% l
        fadeOut = new Array(numLinks);1 H" L. [, [; Y. ?, J- ]
        continuous = new Array(numLinks);
- f0 O- l" n; @        newColour = new Array(numLinks);: C; Z7 S' d7 [# l
        tID = new Array(numLinks);
  U3 ~6 O  H5 a4 ~4 R2 W        redInterval = toDecimal(bgR) / numFadeLevels;
1 E% i% ?! L- d+ B7 e- ^  E        greenInterval = toDecimal(bgG) / numFadeLevels;5 F$ U/ a9 S+ m& |# A" Q) i
        blueInterval = toDecimal(bgB) / numFadeLevels;
0 d) D% M& Y, M& M% R        initArray(currR,numLinks,0);
' I1 H$ t  E7 E( I        initArray(currG,numLinks,0);
7 L/ e1 V( P# \9 B' ~        initArray(currB,numLinks,0);: Z& ]% c& L3 R" O: g
        initArray(count,numLinks,0);
( q$ r$ c7 ^& |- _        initArray(fadeOut,numLinks,true);
6 Q; i2 E+ t2 V7 K- Z        initArray(continuous,numLinks,true);1 C' d( I  V7 t9 w7 Q& t' s
}       
8 p! y' p# ?- a$ l) W' T1 kfunction startFade(id), m' x$ d& S! R& M
{$ a( |+ N0 J/ t4 l* m8 E. _* |
        if(fadeOut[id] == true)
- b8 A+ K1 J6 Y( U" w' c# m5 `        { /*move colour towards background colour (increment)*/& H& d' G% s; U6 O1 B
                currR[id] += redInterval;5 H1 L6 o: p" ^; I( k
                currG[id] += greenInterval;3 A7 t0 n) _3 ?: r
                currB[id] += blueInterval;# n3 \. Y1 D9 [7 V5 _
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- {5 G" t' L: T
                if(++count[id] == numFadeLevels)
0 p" n% _/ u" [% r# [4 X8 q& ^1 P                {& K- y  ]/ v) j/ e
                        fadeOut[id] = false;
! X! d1 H2 c: L& A4 [) \                }
% c+ U6 r( N: E# V        }
/ a! f& `& e2 {8 b* o' k' n        else0 [) `$ y" f3 p/ I) D# b5 A0 A4 i+ M9 _
        {
& Y/ I* K. ~0 s& \                currR[id] -= redInterval;: \$ q4 [" ]  \4 S- }9 p

, u3 x1 f, I) ?+ ]; \2 b7 ~& l                currG[id] -= greenInterval;
& h5 N8 F) m: S( h) ~* v& B  T" F& Y6 ~! m+ c3 r- I
                currB[id] -= blueInterval;
2 i( M) s- J8 i( v* j) I0 _, [3 p' H  u5 ^( q, S
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 |# `$ n1 |1 g( O2 ~! @0 c. i

2 ^: R, k& v6 t' b5 Z" B4 `                if(--count[id] == 0)
7 z. K1 ]! H* G6 m' b4 e% _% X/ {' s+ l3 [: T/ d2 Y6 d, M
                {+ n' d* ], M% I0 d2 i
+ o6 }  e" y+ i: S- w" {' M  K" o+ G
                        fadeOut[id] = true;
/ {: J* G( \. K6 }! k  b1 U( l4 D7 V7 m
                }
( e  i* Z% Y5 Z6 ?" P4 G: O  Q' M( v' a/ H; G5 U4 u
        }
; v0 o% ]: E* V0 n$ Y% f
" @) g& m6 f3 D# k/ L7 r        if(continuous[id] == true)
' @" ^+ i# U- }& O0 _& i; p5 G! R( B, v& H! p+ l( {4 W; F0 w" w
        {
$ Z. I7 E. P; n9 [$ ^* A
- i% q' V1 D+ x                document.getElementById(id).style.color = newColour[id];               
1 o# W7 G5 D. D" d3 K
4 X" f( e1 i% Z  Z7 j7 k, }- T, v- g1 Q        }
% v0 t+ f; z; U8 |# O  X7 d; q/ K; ~, o# l. `. E/ L
        else5 Z( P. M9 i" x* B& I8 \' M+ M( s
, `' E! x. ]  C/ z4 T( r
        {$ i  d/ r$ U( g7 z& _7 m

; O1 c/ c1 Z9 J1 @7 {, q8 @" N9 ~                document.getElementById(id).style.color = hoverColour;
# |- B. s% z/ S- Y1 m( y1 ?* [4 D0 |  n5 M+ I) g( V
        }( t% p7 P4 i0 Y

, G# |/ o# k  J: N        clearTimeout(tID[id]);" _# _% {$ G/ [$ u, N: A

7 h. G+ a4 U+ W  I        tID[id]=setTimeout('startFade(' + id + ')', rate);! {5 U1 x. ?' E" R$ Q" Q: a
! |( R! [) f8 c/ I9 e
}5 E# T- {+ ^2 Z

3 r# H5 ^, O' i! [6 qfunction continueFade(id)2 x7 H- j* P( ~6 v
9 _# f# z. B) I% {% f: |& s
{+ z9 m) [+ i$ M; H! m% r7 k  B

0 A7 m$ D/ m: c5 j) a6 A        continuous[id] = true;/ W4 S6 c' |  M2 A8 H
; ?( b- O7 S2 V5 W: v4 ]
}! W3 \" W- g' s; S8 _6 Z- z) _

' E5 V$ Z. m) f3 Q$ d  y, j' Kfunction stopFade(id)
+ Q, }6 J9 ^# |0 q$ U5 e) r) _0 Q7 K4 i
{
, e' F1 S' N" u- O% l* Y/ y* j  S( _1 X8 c+ T
        continuous[id] = false;" Y! y3 U& h$ D8 B- C, i

2 D0 @1 x5 O6 I}
' H# U% W! o# S3 }" y- a$ c" V3 l
( h0 D$ x: E1 Xfunction StartTimers()% o5 n1 P, O4 h( A: Y8 O

* h! l0 w" H5 p7 A- i{        //set up an initial set of timers to start the shimmering effect: P3 ~* M3 R( A  `( l2 n
3 s, [. R! D7 |9 z1 C0 B
        for(id=0; id<numLinks; id++)6 @+ J: s- I0 i

. n# C. U2 U' V; N4 @        {
6 L, q+ X  Z4 [- b
1 j* D% G8 h5 D$ Z, b                t=setTimeout('startFade(' + id + ')', id*100);% \+ X* z6 d, L) ]

5 d# g; q  v. x; m        }
) T% z& m9 f7 N/ G% [5 f5 x) y" ~4 e: u
}
; y( U  r% H# y) V# z$ p/ A2 e7 b( G4 C- B
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ A/ H6 _. S$ L" L

4 v4 T5 @4 T9 T2 c: y3 e* GinitLinks('#FF0000', 6, '#FFCC77');
9 K! \# |/ t  ^( }; F6 _5 L! H
. ~+ T& b7 |9 m1 D. ?! X//-->5 Q  C4 p# |" o' W* }

7 i( K- `% T/ B3 W" j6 U</script># \- q+ ~3 s, \
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ e. [4 p" w( W  I8 l</a>9 p9 M0 k! a) P* y8 ]9 E% t) K- u
<br>
/ _/ Z; p" T( w& G<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>" L6 p, D- T8 H( }
<br>" ~: D; ^6 C4 ^' O7 h9 `
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>) s! I+ m: R& u" q' c. a5 o
<br>        ' q$ a+ Z5 `8 V# ~+ Q" a
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
# P' e8 N2 F0 Y. Q/ R9 W2 h<br>
, P, a. t2 j5 i<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>, B" `! u8 ?) N# z7 H$ v  J
<br>
5 X! @, k7 i: v<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 M2 s; l8 w/ E% ^2 g<script language="javascript" type="text/javascript">" Z6 m/ _3 E+ i
<!--/ O+ s( }: e, a# _3 [" [$ Q- I4 b
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering: h5 U; W" W$ l  M: d
//-->
4 D3 k/ F/ B6 {2 Q( M; v</script>