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

zw2004

<script language="javascript" type="text/javascript">$ e. U4 @$ D- C1 K% s
<!--7 h# y2 g. P1 {+ t) p0 _. S, z" ?1 k
// convert a single digit (0 - 16) into hex
3 a. D' P1 v- J  Z5 m0 pfunction enHex(aDigit): z. i: \' C4 W
{
* e% E* j  P: v- }& ~- A8 D* s6 \    return("0123456789ABCDEF".substring(aDigit, aDigit+1))' v4 s& J$ i2 \/ C: s
}) i4 r6 [5 B, [: X6 m- d6 M" M
// convert a hex digit into decimal+ Z9 Y, j+ d. M' ]
function deHex(aDigit)3 W6 E" D: @! b7 V  r3 s
{
0 J% s  p" w! o+ e+ X    return("0123456789ABCDEF".indexOf(aDigit))" c2 t# o- u6 V; s* \7 ]
}8 g5 q+ F% I- j- F' e

0 b7 ~2 M1 o/ J# ^0 A// Convert a 24bit number to hex. H* S+ ^2 [0 Q3 S5 P
function toHex(n)4 W* J7 V9 n" W1 W+ Y! p
{. j7 W: t3 \- g/ S
    return (enHex((0xf00000 & n) >> 20) +1 B7 g! @) z! ^  I( g* O
            enHex((0x0f0000 & n) >> 16) +
1 [9 K7 K: y- Q) F  m) X6 y% {            enHex((0x00f000 & n) >> 12) +
. K; W; j/ V* k+ ]! Y6 Z            enHex((0x000f00 & n) >>  8) +
$ e; i6 S, J+ O, Q) }4 p            enHex((0x0000f0 & n) >>  4) +
9 O8 T0 H  R5 Y; r- m            enHex((0x00000f & n) >>  0)); G3 ?8 N' k7 [$ J
}
8 J/ t  }( r! t. S. f) e8 @// Convert a six character hex to decimal
- c, G9 S# i( Zfunction toDecimal(hexNum)
# s& A. u+ ~9 A, q" \{- O0 h. n1 o) _& o' n4 o5 O
           var tmp = ""+hexNum.toUpperCase()& k, u8 N/ B3 b9 j2 K. o
    while (tmp.length < 6) tmp = "0"+tmp
3 H) j( w- Q. a( E           return ((deHex(tmp.substring(0,1)) << 20) +
% j5 U; C! X& Z4 D, T; m                   (deHex(tmp.substring(1,2)) << 16) + % ]: \2 s' z: \/ }0 q9 `0 E
            (deHex(tmp.substring(2,3)) << 12) +
+ ?! x1 w  \& L/ y5 Q8 J6 J" l( B5 d            (deHex(tmp.substring(3,4)) << 8) +
5 |* o: b6 c" _% y& n  ]            (deHex(tmp.substring(4,5)) << 4) +# _" v, m! \/ [: J% ?* {
                   (deHex(tmp.substring(5,6)))): B, Z6 _: h$ [# ?8 x
}9 p  n; E! C5 N1 ~
///////////////////Shimmering Links/////////////////////; X/ [6 E6 g3 U1 z* q' P- y
//global variables  I8 v) W) V; T3 C
var hoverColour
5 E; X/ o0 x) gvar numLinks;
( E) f7 \/ f" H; F7 ]var rate;
4 ~' V# l4 g  K% kvar numFadeLevels;
8 m7 m4 G$ R0 U  Kvar bgR;
; _1 d6 L" x( H1 T% j$ kvar bgG;2 I8 N1 J( V" q
var bgB;
0 J' d5 }" {( B! {- _: [+ O2 h; gvar currR;: @6 N( B# P- w, C+ e/ P
var currG;% G3 F5 r2 [% L4 c2 m6 z- D
var currB;
! C! ^3 A; ^; s6 o3 n( _: ]% q! hvar count;
0 _  Y8 j% F2 h& pvar fadeOut;
" @# W  ?- |, S9 ?/ k+ v' M: Ovar continuous;
+ Q3 J+ e3 O  D5 n- N1 Dvar newColour;3 ~- B  M, D1 Z
var tID;
6 x) ]* H: z% i% H) Mvar redInterval;; B& z. S: N2 F$ m9 W) m# u
var greenInterval;0 i' K5 P, Y) [' e, j4 s
var blueInterval;
) Y0 M- I& d( C; Q: ]function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' V# ^. \" F0 }! X+ }( [; a
{
. P* k; [0 R8 x0 x9 N  H        hoverColour = mouseOverColour;' H! I( i; k( ^3 n  G' y7 G
        numLinks = numberOfLinks;
2 a' T, O6 u/ R# e, q( \        rate = 1;
" r+ ]# _; p, h% B        numFadeLevels = 30;
2 m8 f8 h; c! @' j% z1 Y: C        function initArray(theArray, length, val)
, C5 B5 q3 z) c6 b        {
7 L) [2 o4 f% H; Q4 h$ Y                for(i=0;i<length;i++)
( n7 P6 }1 z) ^# G( h3 `7 E9 [                {7 E1 [1 W+ I# a$ i" v* A+ W
                        theArray = val;% {7 c5 c% h' [9 n
                }
6 F4 w: u2 j; [: n4 W1 ]        }
6 q1 y& n: t9 Q9 C. P9 F        bgR = '0000' + fadeOutColour.substring(1,3)
2 O, {# \5 a( B        bgG = '0000' + fadeOutColour.substring(3,5)
" G( b1 n2 z3 `+ r7 u1 b        bgB = '0000' + fadeOutColour.substring(5,7)
. K: B( v& a, K* P        currR = new Array(numLinks);- h2 \' a$ H; m$ [8 T) V8 `
        currG = new Array(numLinks);
; y. L8 d, F( t- i+ }: d        currB = new Array(numLinks);
4 G# q1 ~6 J; O0 e# _        count = new Array(numLinks);9 }% A1 \, d7 v5 u5 l
        fadeOut = new Array(numLinks);* H5 h  B. E$ @* W4 N
        continuous = new Array(numLinks);
- j& n" I& t  {3 g* q        newColour = new Array(numLinks);5 L) {% k" Z7 J4 k  d
        tID = new Array(numLinks);
+ s% g" k/ J. c) e+ ^; _. m, m        redInterval = toDecimal(bgR) / numFadeLevels;
/ O3 Y* W5 \1 U  S        greenInterval = toDecimal(bgG) / numFadeLevels;
8 S/ X; Z* N. q) L        blueInterval = toDecimal(bgB) / numFadeLevels;
6 q6 P0 Y# A0 z        initArray(currR,numLinks,0);; t% z+ q; j0 w+ X& p% z1 ^
        initArray(currG,numLinks,0);
1 H6 [6 w/ H8 _- R% L# {% U        initArray(currB,numLinks,0);) o8 R5 l& ]! p7 D/ I% o" \  l
        initArray(count,numLinks,0);9 ?! ?; J! q! h0 t3 X
        initArray(fadeOut,numLinks,true);) a! G$ `0 g; A. F; \6 P
        initArray(continuous,numLinks,true);
; T8 v. ?  g/ C) i: K: b' r! }% Z}       
0 T2 {- T: e$ J3 X& Nfunction startFade(id)( O+ {. |+ S) N
{, Z) u3 M6 l) r+ L* [2 d
        if(fadeOut[id] == true)3 c! ^6 U* R3 @. {' K% F, \/ f: @9 F
        { /*move colour towards background colour (increment)*/+ v0 H! x, X$ |. a5 F
                currR[id] += redInterval;6 f  @! E+ j3 f0 H* a* z
                currG[id] += greenInterval;/ e( _9 ^; o1 m8 v7 F
                currB[id] += blueInterval;
* h+ J) a1 P' t7 l  K- q                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 m2 }3 x8 G' `1 j/ I+ t' ^                if(++count[id] == numFadeLevels)8 s$ V. z  \  A3 `1 b  a5 D
                {1 Y7 R. g% v, r1 R  |
                        fadeOut[id] = false;7 N' ~" D; Z' b. d3 n/ ]
                }
- q  d: U- Z# ?3 W        }9 A$ ^1 |! H& n5 ]: w# H' p. Y. Q
        else
8 a1 l% _0 \- C        {8 P5 u: V5 a0 _4 A6 X
                currR[id] -= redInterval;8 q$ I# l5 K% @9 q, v

* G7 i- a0 i$ U* O1 V' @                currG[id] -= greenInterval;
+ t: ]% }( V9 p" S/ Z/ A
9 B, y3 f6 c' W- |8 q( F                currB[id] -= blueInterval;8 a5 s: F3 z2 g+ [: x

0 A# O" ~6 h  w7 O$ r- f                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 s+ b  ~" L9 m/ M0 ?

5 f9 `( [- |7 \+ T5 s( ]                if(--count[id] == 0)' _# A+ q$ L8 T5 V: D0 q! ?

& u; Z& v1 c# S! i0 y                {+ }8 u8 |2 y+ D4 V1 G
* C' Q8 C/ E" n  A4 a  e
                        fadeOut[id] = true;
  U* T1 w7 y' Y% i9 f% B; Y, C7 b1 c% c" s
                }3 e; Q) z& ]$ q# e' K3 Q+ w

+ L" A. g* I, R9 X        }* x5 c" J0 w, s

" i$ V5 E6 N1 b0 e; j        if(continuous[id] == true). S1 C0 ~4 u! ^' J  A5 g

. O* r- N1 e0 `7 s        {
1 c/ t4 `4 r% p6 L1 l; u7 P/ Q+ S+ K; g" ]1 N0 G
                document.getElementById(id).style.color = newColour[id];               
) A3 \$ H0 o1 ^. \5 z+ p4 x
$ S9 E% N- E# h9 e        }" q' O& s9 q( k9 R- N

7 B* g$ l* G% G% L+ G: u/ ?        else6 P$ b& J; ?  ^1 d: O2 L+ m7 Z2 \
0 V  H9 x+ @: |' ]- J. B3 l
        {
* O) `* Z4 v0 q  X/ U* M" P6 o# k. K7 B* k! a- u1 G: m4 ?
                document.getElementById(id).style.color = hoverColour;
" ]& F/ W2 D, T# p: |$ ?5 }5 M  b! ^6 e  K, t/ z
        }3 {5 n, ~. `1 V+ M( S  a

  X. G+ L3 b3 g! O! I8 x( i3 m        clearTimeout(tID[id]);8 z' v' m2 [( b& X8 B- _6 }
8 h$ G; X, k* S
        tID[id]=setTimeout('startFade(' + id + ')', rate);2 m. e0 q$ P. Y0 N0 c( X8 L

# C2 \. ]+ m+ f5 [}  Z8 d4 @5 C! G4 k( w1 c# Q/ c

5 A, f& e7 F% S7 y& [  n; Ufunction continueFade(id)
5 E) P4 \) h! C  B" j
; a$ m( P, t1 g9 y% g& O9 s) t. u{" q' Z( ^/ Y/ R, d; o

2 P, T- a' S+ M" Y9 w. K+ b5 R2 m        continuous[id] = true;
: r% }  r: l. K: b0 W( @/ O2 ?  i# v+ @, R7 ]6 H
}
6 \& K; y4 n2 v7 N- a, c
3 H9 k9 m* ]: o3 Y1 ^$ l6 c7 ^) Lfunction stopFade(id), U  Q  a8 k0 I/ g
1 G8 u& n2 O" r( l$ R- L; d
{7 L2 e7 |$ |$ m+ g% ^( s$ }8 c

/ B& w  S  P9 A  ^, W        continuous[id] = false;
4 [7 L. L8 T. u6 z8 y2 X
' f+ M% Z5 q' ]2 S}& g$ u( S: v1 p6 y/ a5 s% L# v2 ~

# g/ T+ t$ ]  M. Y% Ufunction StartTimers()$ ~1 ^4 G# n& H# I9 b) W
. _/ G7 x1 C/ V8 v' Q
{        //set up an initial set of timers to start the shimmering effect' l/ F9 O- J. W8 `2 K' A# a

) d5 b4 W$ Z5 |2 G0 H        for(id=0; id<numLinks; id++)# ~: t  W) [( M$ v3 v$ w0 [. n

/ N* ?& {) W! i- V; h+ {+ o        {
, O! k/ |' a) o: w0 _+ O
1 W$ i& i0 E2 P) r' A; ]                t=setTimeout('startFade(' + id + ')', id*100);
- _+ \: J3 @  Q8 K6 N6 ]2 O$ A5 n5 S( E# E6 B/ r
        }
: A) l- b" }3 y: ?  x9 j, i2 U$ d9 E6 Z
}+ @5 R. h- D$ {

: t4 M5 [. N3 `3 s7 M" p, a//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')& P& Y1 S5 O' T0 [2 h# l

& j7 X; Q7 @6 X- Z, k" Y- x+ linitLinks('#FF0000', 6, '#FFCC77');
( g$ q0 [* N( ^+ i  u% f# C' s; W3 N6 d* ?3 u# C
//-->
2 `, I& C0 z  S+ m0 U& `* X! d% C& L5 f) A
</script>5 }8 X% S4 Q; Q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' i7 }3 M3 u' h& j5 }# f
</a>
" I) O! ~' L0 F7 s6 {<br>) c/ e1 z! s2 @' F
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
. f. u7 o! z# R2 @! ?2 N$ a<br>3 |9 I3 f" D, d3 g  v% l0 I, ~
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
: v+ T( N& z7 G3 c6 T<br>        " l! v5 @. i6 ]# L1 \
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
$ }% k0 p" Y9 M- x" Z<br>
! z  b) h2 K/ h3 z. ^0 z<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' @, t6 R# r- b1 ^: c: y9 F* ~; N" u9 c<br>8 P$ {5 ~* o% M# s) e
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
/ {% c9 W' }; v; H<script language="javascript" type="text/javascript">
8 _5 e, p5 l0 U& u5 |<!--, ~; Q% e$ z% l- V
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
+ I1 ?! k- G% R//-->3 T3 @4 C6 O+ v1 ^3 V( k- Q
</script>