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

zw2004

<script language="javascript" type="text/javascript">  A" j( N( i+ E
<!--' Y7 j* p: h6 n9 t( K. X! B# o
// convert a single digit (0 - 16) into hex+ ?% l" o' t% f" B) N
function enHex(aDigit)1 V  G$ b+ v$ R3 R- D1 h/ Y
{3 ?3 }; S* J9 Y2 U$ `2 ~
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))) Y' L. ~# ^7 r5 t1 {9 V$ \
}$ x! S( U  l4 q* J0 E4 u  s4 Q
// convert a hex digit into decimal
1 j/ S. m. P" Y4 z7 N/ xfunction deHex(aDigit)
6 d3 P$ _/ Z4 k: @) R3 y& }8 x& s{
8 q0 D, ?/ y; r) K# B    return("0123456789ABCDEF".indexOf(aDigit))1 L' d1 [9 `9 _# m, [$ X% k1 m
}! y5 x* Y# |6 [) X: U7 y

  s; X+ g# ?; S/ X% f( V# h// Convert a 24bit number to hex+ f" x+ s9 u- z  x, Z
function toHex(n)
- v0 S  n* v/ X$ q% Y1 b9 @{
6 ^; k! a& s" ^  }! M; o3 c    return (enHex((0xf00000 & n) >> 20) +9 }. k# v; n# @0 q
            enHex((0x0f0000 & n) >> 16) +; r: ^$ L* R* F- m1 r+ P- G
            enHex((0x00f000 & n) >> 12) +; h3 c( x$ @5 l( K
            enHex((0x000f00 & n) >>  8) +
" b( ~  l6 q/ w+ w+ l: i; t            enHex((0x0000f0 & n) >>  4) +
1 {' U1 @! X; F  o8 C            enHex((0x00000f & n) >>  0))1 H" l/ C: C) W3 B/ _3 u/ ^
}
- x& O$ w7 C& ^% F8 f6 X// Convert a six character hex to decimal; A8 \, M6 H+ i: G/ E1 \0 j% i0 q
function toDecimal(hexNum)7 Q! i* E! f: B3 s. F- N
{
' Y: o8 C0 h2 p1 P           var tmp = ""+hexNum.toUpperCase()
$ [: l9 A; U4 T8 l    while (tmp.length < 6) tmp = "0"+tmp' F$ d7 h  v5 o' o0 [) O
           return ((deHex(tmp.substring(0,1)) << 20) +
- Y) }$ l: y2 I: o1 H/ v% o9 U                   (deHex(tmp.substring(1,2)) << 16) + 5 n& p' E2 H2 l! I. M
            (deHex(tmp.substring(2,3)) << 12) +
/ f2 H4 t) Y( F            (deHex(tmp.substring(3,4)) << 8) +# r& Y1 u( z. _, @# _. ~
            (deHex(tmp.substring(4,5)) << 4) +/ T. n1 N7 n7 t0 o) C
                   (deHex(tmp.substring(5,6))))
% J1 @6 f# b' F* n0 C}: F" Z  F/ z8 d3 a
///////////////////Shimmering Links/////////////////////8 g! `6 D7 m; }9 A, {
//global variables! v  }/ V/ f! r# ~8 e
var hoverColour+ l. K- H9 V' q; R
var numLinks;2 H/ |0 _6 o2 f
var rate;
6 j4 ~! C7 a( M4 |- g  Vvar numFadeLevels;# [2 e! H( V3 }# e8 D
var bgR;
1 \# D) U" v8 V3 a" Ivar bgG;
# E- W) l& `" ]/ b+ P# ]4 Rvar bgB;6 t, y- e* q' ]$ g; M1 N
var currR;/ h2 Z' Z- P8 a) z1 U% Y
var currG;8 m( {) U( j% E6 Y" \, h
var currB;
$ h  D. S! e3 M6 j8 N8 h+ y& Nvar count;) V/ ^. o& ~, C3 x. n" \" `
var fadeOut;7 h' J+ U( E8 A7 e( X
var continuous;
7 J& t1 `) F+ M; C$ X! C( nvar newColour;
1 w; H4 d9 u. E6 uvar tID;; U7 U. r( c( o9 ]1 W! o4 b- Q
var redInterval;6 B$ b( M8 s% }9 C5 e: o1 W: V. n
var greenInterval;
: `& A. K6 i. w, kvar blueInterval;$ f9 h, {( c# e" t% U
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)$ J7 e( E/ A/ c+ r4 y
{$ V. F9 v! Q( ?6 O7 K+ J
        hoverColour = mouseOverColour;$ d/ M0 j0 i  u
        numLinks = numberOfLinks;" Y/ M( ~/ g* |( W
        rate = 1;
6 u; j* D9 [% n) ^, D0 {0 ^        numFadeLevels = 30;
1 J4 R$ U; b7 X+ M2 D        function initArray(theArray, length, val)( v$ B; O" d3 d, T, Y
        {# Y5 V9 N8 R  U" {: A& g- m  R0 ~
                for(i=0;i<length;i++)
3 }+ b" @  b" R3 X, Y0 Q                {) Z/ a5 d0 f1 T8 x1 i2 j: d
                        theArray = val;1 ?, V( _5 y3 N( U
                }
- n" s3 a. t; o        }
5 Q8 L8 P0 ~; Z; Z        bgR = '0000' + fadeOutColour.substring(1,3)
* I' ~& h( i+ A' ^1 T$ ?        bgG = '0000' + fadeOutColour.substring(3,5)0 j8 H4 j% D0 f( {0 t
        bgB = '0000' + fadeOutColour.substring(5,7)2 O5 x* s9 C+ b& K' E4 K- I
        currR = new Array(numLinks);
, R; k4 \( n4 L6 |0 l        currG = new Array(numLinks);% D6 U7 c  j4 j4 z  j
        currB = new Array(numLinks);
4 W3 P- V' J+ `6 h7 z        count = new Array(numLinks);
* J: A- G6 |/ B$ G+ s% B        fadeOut = new Array(numLinks);7 G- D0 ~- T" O
        continuous = new Array(numLinks);
+ Q" k' z$ H5 X        newColour = new Array(numLinks);- \- ^. p1 c. i, `$ r6 I
        tID = new Array(numLinks);
2 q. _# m# Y9 z4 n9 @        redInterval = toDecimal(bgR) / numFadeLevels;& G. |4 B' r, Y
        greenInterval = toDecimal(bgG) / numFadeLevels;3 m2 u( f/ ~+ t  e9 B
        blueInterval = toDecimal(bgB) / numFadeLevels;: X8 z) v/ c0 q+ x+ U
        initArray(currR,numLinks,0);
) y  F4 l5 S" Q8 d        initArray(currG,numLinks,0);
3 ]3 |6 O) s0 p: ~  g5 Z* k        initArray(currB,numLinks,0);1 ?+ Q' `. U: }6 U4 E
        initArray(count,numLinks,0);  U/ H2 g1 I1 |
        initArray(fadeOut,numLinks,true);
) I* {2 A' b2 e: k        initArray(continuous,numLinks,true);
. k( f& G8 }- q( V8 A6 O1 O) r}       
3 q/ ^9 j5 F) z! t9 sfunction startFade(id)$ |! I, L& L* G0 k
{- r+ n7 [" h# U: L
        if(fadeOut[id] == true)
/ R7 D, A$ O4 W. p- k( S, ]" w" u        { /*move colour towards background colour (increment)*/7 J& x3 {% b/ I# N) E# o! [  o
                currR[id] += redInterval;* ~; A9 q8 ~! O0 T8 T, b' S& Z
                currG[id] += greenInterval;
$ {$ m, W3 _2 p& n                currB[id] += blueInterval;4 f  {6 f& \2 R1 s8 f
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 I( U% T9 l1 M3 j' w5 O
                if(++count[id] == numFadeLevels)/ f7 U% X! V! a
                {4 Y8 H1 Q! `5 X+ z, h5 V
                        fadeOut[id] = false;
* K8 T# y3 O: T6 @2 K5 a, _                }
% l  o* @  _- n7 C; W  b) ~( l1 ]        }0 h4 \0 G) I4 x4 Q' u
        else
. O, P1 A+ j, ~: W/ [, ?6 A- O        {9 ]1 h5 v! `' c
                currR[id] -= redInterval;
" `/ v8 C, \  Q4 w* P3 Z+ V' D1 ?% W( y
                currG[id] -= greenInterval;
" o& u0 h" V) F! Z; X6 R
7 B" {$ J7 i1 [$ F" @$ I( r' L                currB[id] -= blueInterval;' P9 V# Y; O0 Q. Z' }+ m

& q% ?8 P5 n  W* N                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( k: \8 U/ H% e
6 n4 y% L/ Y% A" v1 u3 Q                if(--count[id] == 0)$ K: q5 D0 V% _( K: J

3 i; Y6 Q/ u! N4 [! E. O  Y                {1 T( G  j2 d/ i% u8 I4 f, V
# V* A" b+ H" G! a& y- n/ t
                        fadeOut[id] = true;5 S" ]' e# F; r8 A! \0 [

  L; j- T% \1 d                }
9 R4 A" b. |) p- |7 @5 K: w1 s8 V; {% P5 U
        }) p/ Z; p7 B4 K1 n& f. H, ]
& E& r5 i* X7 q/ ~  f
        if(continuous[id] == true)1 h0 F* X* @' Z9 ?' P) V

0 G$ j2 F3 W3 g. G& d# x        {% _& m+ `! L2 i1 v8 |

( R, H, B& W" X" Z- A                document.getElementById(id).style.color = newColour[id];               
5 G: F- m( r& G5 \/ Y2 _6 s( K* L3 W3 e  r- h0 V
        }* o! K) M) t7 Z3 W4 L- [

" }2 @1 J, L& q4 {) W        else
- p0 M2 g  N/ V' ]& q! _0 h0 X8 X. a5 F! ?, \
        {! A9 Y1 ^) `( \3 q3 |* p4 Q* e
3 H, A" v% i4 a5 |* H- f. q. ~
                document.getElementById(id).style.color = hoverColour;$ X/ M) p& i, j6 L; _
! u3 v' ?* s$ J
        }- g1 E& M" k/ x4 _
8 m# y2 W5 a: i( j& z
        clearTimeout(tID[id]);1 v+ F, {# ]+ M0 a9 Z' J3 F
( f8 w; }5 a% x0 z
        tID[id]=setTimeout('startFade(' + id + ')', rate);8 P& H% o; H+ x/ D
. b# ]1 [4 l' I' q. F1 ]; P2 }
}
! Z2 n: X$ U  k% a( |! n, `1 z
. S2 n$ X) }" W: A' i8 g$ Bfunction continueFade(id)
, r1 m; @* V0 y3 L6 c  i9 f) I& Z1 ~7 N9 B& y9 J" D
{
, y8 [; l% g& V* m! M9 J2 q) }8 f) P- @5 M
        continuous[id] = true;2 C$ d3 y, h) C, v- ]1 k; `
4 J' y/ q# Z% D
}4 D7 x$ w8 j/ ?0 d
2 _/ G6 n6 i- r% I5 ?7 Y' l
function stopFade(id)! L. v! e5 m9 ?$ s  E! X4 ?/ r

: }( D9 d/ Z: X8 Q+ E3 J$ e{# q- U& f8 ~  u( ?5 {
5 {4 Y% @. z* q- F7 o
        continuous[id] = false;* Q* y# U9 ~8 ~% [- H; Q* D
4 P8 _7 L  ~& J1 a# B. t
}1 t5 K7 M& r' p

8 A6 }1 F/ q& @& z7 d. h! xfunction StartTimers()$ q5 L) z2 t6 c

- ^/ n8 Q4 }$ {{        //set up an initial set of timers to start the shimmering effect
  B) z1 K  e$ m; ~
4 X) ?: m- A' R& s% b9 @: M        for(id=0; id<numLinks; id++)* h' F# U( f# i
2 j$ |4 |, {/ X+ ^. A* K5 X; W
        {( p) _0 a2 |6 H

. }. _( n  S6 t3 t% R# N# Q                t=setTimeout('startFade(' + id + ')', id*100);
2 I4 }$ |+ @! Z, ?7 ]$ B+ m6 N8 _& h# _) C: Z: F
        }# ~  c+ l, l4 N9 ]% p* Z& J- f
% [7 j' [% M* |/ |* C/ o
}
5 \( K0 Y' A4 V8 N. P$ \# G, C- `5 e# m
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, p  ~8 Z' S. n8 c# b1 t: ~7 b% D7 O& S  k
initLinks('#FF0000', 6, '#FFCC77');% F- W2 {8 T7 r1 a" P/ ]" U
2 `1 f2 t& R/ F" ~* _; }
//-->
2 R1 o1 \3 \* {9 d. ]9 v3 r
2 ?3 Y& c$ ]  \! o; k, k9 T</script># }; s% p, a/ N% e. S
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
9 S$ U3 ^4 n) F# u4 U, ^</a>
- C3 f/ i0 k6 _9 W4 }( b<br>7 D( F+ m% H$ c! h: o, R& `
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
$ m/ Y7 h, E( k! O7 I9 b<br>5 X! f. ~1 K1 W. r' H' I( x
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
) ^1 r  F. x+ j: U$ g; l8 z1 d9 t2 U<br>        : J1 b# t' q) f8 H
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' v. o6 Z2 P) T: U5 ]
<br>
; v6 F. x8 W' O; s- H$ A9 b<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
0 T' X" f/ z; }0 ?<br>% C) m' v9 w& Q/ C7 h+ `
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( e" S1 ]9 n) h, B; G
<script language="javascript" type="text/javascript">
4 E$ {6 k6 R8 A! N! q2 X$ y* {<!--- s" I6 m+ f7 O* o! B. m0 f* y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering9 s# h* g, C/ x0 F
//-->$ R3 b8 x8 O" [6 w* F) R' a( j
</script>