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

zw2004

<script language="javascript" type="text/javascript">
$ h: D' D4 z) D, v$ U<!--
! x( U0 l1 n; n; g( g// convert a single digit (0 - 16) into hex" t* T5 Y, N% Q9 W" R
function enHex(aDigit)- h" e$ y) A0 O3 h
{
+ A; k# v$ U7 x    return("0123456789ABCDEF".substring(aDigit, aDigit+1))2 Z1 Q& ]7 X  H3 O
}
. J7 ~4 D" A4 v, r' G// convert a hex digit into decimal
/ X# d+ L+ o  L: N! Efunction deHex(aDigit)( _8 X* x% V3 Q3 n& u& }
{9 B5 K3 \$ H& a% v8 T7 A
    return("0123456789ABCDEF".indexOf(aDigit))
# _2 ?/ F9 I9 b6 }2 @" O}
% F, `2 D1 x; Y) u
3 ^! g  U$ f; M$ ]; J. G// Convert a 24bit number to hex* p5 h  D8 i% Z" n+ V! M) z
function toHex(n)
8 S3 R  g; L& H{
* z1 b  P! S0 R6 {2 s    return (enHex((0xf00000 & n) >> 20) +" S5 T6 t7 Y- i/ l  K
            enHex((0x0f0000 & n) >> 16) +
" ?' M) Q2 \: k0 o( ]% R            enHex((0x00f000 & n) >> 12) +$ Y7 ?, G( y' o% ]1 E
            enHex((0x000f00 & n) >>  8) +$ v+ M2 r# B/ @8 b. C4 {/ Y
            enHex((0x0000f0 & n) >>  4) +4 S* O& O# S/ r) U
            enHex((0x00000f & n) >>  0))
1 r# G: Y- s9 _. S( C}+ z# _# z3 l% N
// Convert a six character hex to decimal
* \5 `4 o" G0 E0 x* m2 afunction toDecimal(hexNum)
  X; w9 H/ M# `% s. `& D{
/ W9 L8 _+ f2 O8 m# D! j           var tmp = ""+hexNum.toUpperCase()4 `* f+ x7 L0 r. K
    while (tmp.length < 6) tmp = "0"+tmp
' d8 M% u6 K# B4 ]; {; Y4 K           return ((deHex(tmp.substring(0,1)) << 20) +. G( A3 Y9 f( t$ W9 a. Q* l2 Z, C
                   (deHex(tmp.substring(1,2)) << 16) + ) y; U3 v  R6 a+ M8 D, \
            (deHex(tmp.substring(2,3)) << 12) +# D9 u5 ^' t- Z+ Y
            (deHex(tmp.substring(3,4)) << 8) +/ P9 e4 `" T3 n0 s4 Y0 L7 ~
            (deHex(tmp.substring(4,5)) << 4) +2 k9 u+ I0 f7 c5 h
                   (deHex(tmp.substring(5,6))))
. M9 a* H& C8 V& c( I: T+ S: w& G$ w}
/ m: E6 T/ H1 J& r; L# I) k///////////////////Shimmering Links/////////////////////8 b& t5 d; G: F+ o, V
//global variables; Z( w1 j9 e6 W# u& P! r
var hoverColour1 b) I' I5 ^1 t
var numLinks;0 g9 _' D' A& x2 |3 J5 j8 X
var rate;8 h+ t; n% K. l+ Z3 Z
var numFadeLevels;/ R1 F/ }3 j/ Q. v& l
var bgR;
$ u4 I7 z& s# Z4 Z' Evar bgG;+ O0 A& [8 m9 I' T
var bgB;: ?3 A" G  F. `  O
var currR;  W, ]( l& k9 r) P+ g$ y: H
var currG;
5 J3 ~+ a/ C: b+ O8 X: e7 k! Ivar currB;
9 U% k3 P5 K( u) P  W7 Evar count;
8 ~  W! n8 y/ m7 Fvar fadeOut;
" A; }% l* p) R1 x; Q- F5 Mvar continuous;
$ g% U: ?. ]+ S8 X. }( jvar newColour;$ k- d8 u, D2 V& U* B
var tID;0 W0 u1 s4 _$ {6 e+ R
var redInterval;5 M  F1 Z0 ]3 ?) K% u
var greenInterval;
6 O/ ]0 d& R# r5 uvar blueInterval;
2 t& H. w6 k% h, Rfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)8 X# m# q- X5 L2 A$ I
{4 h( t# x) o9 x1 _5 \# Y+ P( `
        hoverColour = mouseOverColour;7 C# E, j3 ?2 W
        numLinks = numberOfLinks;& c3 G+ f8 P2 P- ~, T6 j! C
        rate = 1;3 v* v+ y: N2 P7 ]+ K7 \2 E
        numFadeLevels = 30;4 d5 [$ D$ D* ~2 L5 C5 _# `& T1 q) q
        function initArray(theArray, length, val)
1 X9 X2 t' H; b% _0 P0 J        {
& O: I6 `- K' v                for(i=0;i<length;i++)
" P( S) T& e. R) P0 G                {+ k8 [3 Q* |/ r( B. X
                        theArray = val;
; y; R3 [! Q9 ]5 p' ~# e                }% Z- |; H1 ~2 ~( i/ q: T
        }
! }6 M' _. D1 ~+ ?. r        bgR = '0000' + fadeOutColour.substring(1,3)) k+ t0 i6 G3 n9 f1 _, Z$ ]. I" ?
        bgG = '0000' + fadeOutColour.substring(3,5)- Y. U* ~$ ~$ @/ h% f
        bgB = '0000' + fadeOutColour.substring(5,7)
; B  l: \4 I" Z7 q7 S        currR = new Array(numLinks);
- o: N; M- p* W+ f( }        currG = new Array(numLinks);! Q1 L# z, a) G0 j
        currB = new Array(numLinks);+ A9 m/ E) \  l
        count = new Array(numLinks);
, y8 O1 \' e+ ?  P4 o  P2 x        fadeOut = new Array(numLinks);
/ Y5 z; t5 O# G4 ^        continuous = new Array(numLinks);
# m  x, i9 ?  Q1 |/ g        newColour = new Array(numLinks);
# M9 _$ c/ E* S# ^        tID = new Array(numLinks);2 U2 y* g  A' h5 l/ Y: Q
        redInterval = toDecimal(bgR) / numFadeLevels;5 M/ U- O+ P: e
        greenInterval = toDecimal(bgG) / numFadeLevels;
# m/ Z& M7 w, x) l% L! a        blueInterval = toDecimal(bgB) / numFadeLevels;
  T+ s1 Y: d6 z7 }0 b  ~0 c; V        initArray(currR,numLinks,0);1 g" P9 i0 x( W  _$ m$ X; Z
        initArray(currG,numLinks,0);4 }: F8 m5 w! Q# [# Z& b# \; k' @
        initArray(currB,numLinks,0);3 |) e3 \0 x$ c* t
        initArray(count,numLinks,0);
+ ?) R& F& b' F- k- o/ _        initArray(fadeOut,numLinks,true);
1 S( d/ p' k. Q# c9 R        initArray(continuous,numLinks,true);
% [( L  Y% ^' C8 {4 X) w}       
5 W" g; ^# B) E8 o- j. kfunction startFade(id): F( q% j0 B# {& q9 f
{
. l: j3 P  v( I: Y* G8 N1 P5 q7 m        if(fadeOut[id] == true)6 x4 T0 m3 K5 E, S6 z" N6 `4 L- C# \
        { /*move colour towards background colour (increment)*/8 S1 V9 ]5 o4 n5 ]6 N( K5 G' y
                currR[id] += redInterval;
) b: a) `! u, ?* S                currG[id] += greenInterval;
; r; u. G$ I( q  r                currB[id] += blueInterval;
: ~0 G  X: a8 D                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# j1 Z- ?5 R8 t- p# ^/ N  ^+ ~! V
                if(++count[id] == numFadeLevels)& R/ b0 K3 O6 O1 ~! A& f" J) M7 d
                {
2 L9 b: u  s$ u. P( R' r1 Z" M                        fadeOut[id] = false;6 b  l  g( }4 J" s6 D( i) }
                }1 m  f- o9 z( F0 y7 E6 P
        }% q  n1 }/ j/ E( y' U- u
        else! A% @0 V6 a) N- n, ^
        {
) y6 A9 i$ H+ t0 t/ m* g+ z+ O; f. {                currR[id] -= redInterval;
/ q  [" z" D* ^4 h
* n, h$ H4 h5 z+ T                currG[id] -= greenInterval;
( Q' I  h0 F/ {) J+ Z! W, U3 I3 O+ Z
                currB[id] -= blueInterval;
& I6 e% Y, z, G0 l, A. J) x( L5 P9 k: \* g% z/ S# s! _. W( v+ |
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% d3 E, C% h6 }9 V
# K+ _: U$ c3 r' d
                if(--count[id] == 0)4 U; [$ o: b# f* J5 ^% N

; m! ?) W/ o5 b2 k9 I0 c5 Q) P                {
% n5 p! J' B. i1 ]8 u" Q
# n3 D6 B9 Q5 N8 \8 J                        fadeOut[id] = true;* D% k2 N2 i5 M( J7 h
7 E+ ?! S2 [8 Z5 q3 d/ a% h
                }
8 C3 d8 V' f; ~! Y1 {7 O9 |0 |3 w  @# L5 f. ^) g0 y: I1 L
        }5 w) l9 @1 a$ S  K% @) W. Y

0 u/ b6 E4 t* M# B' O        if(continuous[id] == true)
0 e, v3 Y6 C" C. j
1 \% }* t% d( x# a+ a        {
& d. }( T* p: k+ J1 z0 T5 S! R2 A% q& t0 q3 q* ]: n$ v
                document.getElementById(id).style.color = newColour[id];               
* b9 W+ Z( D; m1 f/ @/ [
- Y$ ^) z! {+ V6 f3 T        }
. B% G% n( `" c# E, n1 U% G" Z
# I% p& G' d1 ?4 E        else
+ I8 R* l' T6 A8 ^- x1 }1 P: A  ]0 z' o  k7 _
        {
8 }( Y3 F3 P! T: I5 S
' ?% L2 S( a( w; w9 D8 J3 }' e                document.getElementById(id).style.color = hoverColour;, k' y) J4 k1 k

! h1 }/ o( R1 k* O        }
1 Z/ T( S  g: X5 e7 w
( I* K1 G+ Y8 I. |        clearTimeout(tID[id]);
+ s5 \5 z5 i7 F" N
$ q5 Q6 F; C' F( m. e( A        tID[id]=setTimeout('startFade(' + id + ')', rate);- f% g+ y2 _8 {, u5 x" ~4 V# }

4 A, t1 o/ U; z5 z# D% c8 `}
: G- c0 H/ o- X
0 Z2 d3 l% A! g0 |/ B- mfunction continueFade(id)' b( ]0 T: ]) l; }& X" o) T0 n: _2 z
# ^, p/ v8 U/ f
{& J+ ?6 X4 M5 ?7 ^. `+ k* a. [
: f4 [" I0 t% T1 n! m8 a+ p
        continuous[id] = true;
  {& Y3 J9 }+ }
# l. I7 c) p5 J! u9 X( w4 f; [}) T- J; y# v: `: j" {+ b& m
/ ?1 O  U6 g, U0 E3 ]
function stopFade(id)
5 v: C8 t4 G; _( s$ \2 k
8 _! s. U9 b) S  s+ O4 y( L{* F8 z6 ]- O3 d9 D

' w! y5 w$ l6 \8 X/ R' }        continuous[id] = false;
# H, t0 U' h" b6 V: b4 K
: v7 Z! p, }( q( T}6 u: O$ V% V+ M) W& z: I, L

5 l6 r4 R3 q8 p4 ?function StartTimers(). W* p9 d6 k9 c! j% c

% a' z' T% |, v. ~1 u& ^{        //set up an initial set of timers to start the shimmering effect
6 _, u( j( X" H* C0 O/ l- X. F5 X" f
1 L: m) r3 X) K$ r+ `8 N/ e        for(id=0; id<numLinks; id++)1 m8 `( n- T' b; z. d& F& `6 S

7 o4 `) o3 b1 k+ u1 a* w        {; H( N9 j7 Q9 v" Y; |! d
% {: g7 \0 S# I
                t=setTimeout('startFade(' + id + ')', id*100);
8 Z2 Q0 P$ c9 ]  Z3 [0 m6 B; G0 e  z( [8 {( x' q0 L
        }4 [# @9 k: Y9 f3 p* n6 V2 [
/ J5 u4 R# W) g1 _* Q) W# }3 z
}
5 F0 e6 u% C: x; z+ D& A1 n* `. a' K, Y
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ ?8 k6 ]* o$ f
7 t! {7 E- a' c, TinitLinks('#FF0000', 6, '#FFCC77');
* ^+ }2 u4 h" K9 |, Y  `$ W
7 ]  p. d$ b8 H8 ]- q$ |$ D//-->
/ o+ s2 T( a6 u% |5 f% c/ ^6 i0 F0 T
1 f& q. D& }: H: V; y/ H</script>& f8 |7 t4 i' `
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
- f8 T) S! _% _0 b</a>$ Q6 p! J& Q7 ~6 G7 c
<br>
( }* P2 g  A/ a# v: w; g<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>3 L+ s# q: Y% I
<br>
4 Q  r% I& f' t# p<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>; B* e0 g0 U$ U
<br>       
; [: g: }/ s) I<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>8 G& |% d7 M$ ?. d; c
<br>
1 w; r# s" H. R3 `% {6 E) P3 |/ {<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>( k5 D0 v/ B+ p* w' N$ @$ j% U
<br>
4 n/ x6 W- Y# R7 b1 e* D) T! M& W; ~<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>' S+ J  ?: S5 o8 O) i
<script language="javascript" type="text/javascript">5 A0 d, i0 l4 W( b, t7 Z* C
<!--
5 b3 |1 U2 ^+ M3 j  _setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
7 n9 _# ~; y- y) S. H//-->8 A7 F) f# m7 g8 c
</script>