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

zw2004

<script language="javascript" type="text/javascript"># a9 g0 c* X, q8 w* K8 I* H, e% l$ a
<!--( E0 ~6 g4 u: n+ H& P1 n( z% K
// convert a single digit (0 - 16) into hex+ H# P5 r9 M: F7 V# T0 a; T
function enHex(aDigit)# k  O# ?. Q. Y+ D8 i2 K% R3 |
{
0 g; J3 G* O( ?3 M+ {) c4 c    return("0123456789ABCDEF".substring(aDigit, aDigit+1))9 T" r' l/ w1 R  s& m% X/ ?/ ]: x
}+ \) G) p/ l9 |% X
// convert a hex digit into decimal
3 u6 T9 U& K  p8 e$ L% Rfunction deHex(aDigit)
( Q' O0 A; l+ t# Q/ q1 n{
" y9 \$ b) z6 R8 I    return("0123456789ABCDEF".indexOf(aDigit))) M0 R9 Q& n" C/ p
}* e( m- M9 A. E% r" v; n

2 {3 y) _  J3 t: _7 }1 D// Convert a 24bit number to hex
5 p' g2 T6 r$ C+ W; v1 F7 z1 q, Ofunction toHex(n)" `7 Y) Q( o2 ^* }7 x, K2 t
{
0 b, y+ t: z5 e    return (enHex((0xf00000 & n) >> 20) +' h; K" l1 [. A
            enHex((0x0f0000 & n) >> 16) +2 X- U6 k5 H3 y1 w2 T9 C
            enHex((0x00f000 & n) >> 12) +
2 g2 e* ]+ S7 p" W! t" F* V$ E            enHex((0x000f00 & n) >>  8) +
0 p* I$ ~* k1 @- R6 G# S            enHex((0x0000f0 & n) >>  4) +* S; \, z9 [: w  @8 ?8 Z& R
            enHex((0x00000f & n) >>  0))) _7 c, T+ z% T( t! ?
}
  R3 H7 Z- }' Y' [; ~( ]8 k9 K// Convert a six character hex to decimal
0 M6 G7 T4 i% m5 ~/ Q& U5 Q2 Ofunction toDecimal(hexNum)( j6 H9 v. G1 j  G& y* P$ e
{' R0 k' v( `) V& e
           var tmp = ""+hexNum.toUpperCase()
7 `# z- ]; w/ e- u/ F    while (tmp.length < 6) tmp = "0"+tmp6 J% W$ x- J# {
           return ((deHex(tmp.substring(0,1)) << 20) +
: M4 N% U: b  X5 |2 N% M+ j$ L                   (deHex(tmp.substring(1,2)) << 16) +
* `: q6 Y" }' ~            (deHex(tmp.substring(2,3)) << 12) +0 T* j' G" n( n2 H" x: t
            (deHex(tmp.substring(3,4)) << 8) +
! @9 x, V1 ~0 V5 n            (deHex(tmp.substring(4,5)) << 4) +
1 N" W2 ]1 Z+ o: Z                   (deHex(tmp.substring(5,6))))
% L7 F" @9 p0 D& W. n2 z}4 I. B4 R+ C4 t+ B$ p
///////////////////Shimmering Links/////////////////////7 ~, ]  [; i; x0 Z0 q+ k5 N
//global variables
% x# Z0 G8 L- i1 d6 w' hvar hoverColour
0 [7 D0 M7 M' d/ v2 Gvar numLinks;1 S1 W7 G5 W0 g9 S2 ?9 v7 @
var rate;
( N! T9 Q5 u+ c4 z* m8 `7 g4 [3 Jvar numFadeLevels;
) a' T; A: Q9 J" I0 v. \6 Gvar bgR;" S2 b/ w4 `" a% @* F1 @3 n" A% ]
var bgG;
6 w7 P! a$ _; \1 I+ w- U0 Ovar bgB;
" I, l' u, c9 _  K4 L# kvar currR;
! G5 E, |4 D# wvar currG;
" n5 W. t# N; l: p7 Mvar currB;
% _+ N0 S& m* L$ }1 E' ]var count;
' Z$ t" o) j+ C$ L5 b* s  Z# p$ |3 uvar fadeOut;" x5 Q: D. T8 }( _' C
var continuous;2 \0 [$ M; A. a3 E  f6 ~
var newColour;
' {  d" V* T6 H6 j9 y9 A, Avar tID;
2 u. j6 g8 B5 hvar redInterval;
6 N8 w& r6 H: m* C3 Bvar greenInterval;
' @. u) d% ~* f9 ~& K2 Ivar blueInterval;$ |/ `7 n. g' ?" L5 `
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)) e, M5 y, d* s8 f# s& _
{
) {% E7 x8 u- Q        hoverColour = mouseOverColour;
% f# F" E1 E0 B2 D1 V        numLinks = numberOfLinks;$ e6 f% I2 l+ ~" p& }! y% S* p
        rate = 1;
% h6 H$ d8 z4 i  P& f# ~+ D9 m        numFadeLevels = 30;
/ J4 P: [! B( l; E( n1 u2 k        function initArray(theArray, length, val)( o3 ]4 c! O4 @) d7 N
        {
& d) W6 s8 P2 u9 K0 d+ S                for(i=0;i<length;i++)6 z: Y2 }0 T' o6 k/ w7 }
                {
7 U7 e9 N* [$ M& K( w                        theArray = val;- l6 s" r. _3 w. Y0 M
                }
$ M, r* \- B, P3 ]( C        }8 V; X) O" L* y) \: L% s& [2 r
        bgR = '0000' + fadeOutColour.substring(1,3)
+ {: E2 E+ t- g! V: F; M4 b        bgG = '0000' + fadeOutColour.substring(3,5)" [9 `) i5 g. n5 r6 d. M( u
        bgB = '0000' + fadeOutColour.substring(5,7)
/ X2 ?$ {1 S  o% x+ T        currR = new Array(numLinks);7 S' t1 a0 e" C7 |6 b! w
        currG = new Array(numLinks);
2 j) s' z0 k+ i  n$ S        currB = new Array(numLinks);
& ?7 f9 g4 \  D* U' b        count = new Array(numLinks);
7 T  Y3 V6 }, m; w% L1 f        fadeOut = new Array(numLinks);
6 [" V0 C% \' R        continuous = new Array(numLinks);
! x' l. S& T/ n2 s$ a' L        newColour = new Array(numLinks);1 L2 C& W( k* S8 `' V, @
        tID = new Array(numLinks);
5 U  k4 F( q* q8 A' I3 g+ v        redInterval = toDecimal(bgR) / numFadeLevels;
; X/ u1 Q& s: {  S5 {: f        greenInterval = toDecimal(bgG) / numFadeLevels;+ u* n1 V; g7 b( o
        blueInterval = toDecimal(bgB) / numFadeLevels;: [% Y. ?; N+ o
        initArray(currR,numLinks,0);
4 s3 h5 f$ p+ j; ^; u        initArray(currG,numLinks,0);6 D, E3 e, a9 T) I6 _
        initArray(currB,numLinks,0);" k5 ~7 Z  G7 X, C1 C& N) N3 C" P
        initArray(count,numLinks,0);
3 @% Y3 d( x" V/ x+ I; C. J! h0 Q        initArray(fadeOut,numLinks,true);0 d# J/ L5 h5 G8 x
        initArray(continuous,numLinks,true);# }2 \! ]1 b$ [- ~; i3 r# O
}        ; P% l5 s0 a1 z) _& n8 b
function startFade(id)
2 i. I0 m0 e0 q: z1 l' d/ l{5 B* w1 j: P/ U4 J1 G
        if(fadeOut[id] == true), r' R8 z" b- O. D+ w, U
        { /*move colour towards background colour (increment)*/
: u9 [2 u7 r3 C( ^! o                currR[id] += redInterval;
3 `: T+ k9 k: g1 z  K$ E1 |. u                currG[id] += greenInterval;, y3 t3 I) a0 u& W
                currB[id] += blueInterval;
' r, b& }( ?# ^! U. p4 P" Q                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
. G, d# }0 R6 }$ Q, x7 ~- l( Q3 [                if(++count[id] == numFadeLevels)# c" E! P3 k# n0 g
                {+ N; y# i( \. h! P
                        fadeOut[id] = false;- B4 {9 B2 U% {, F8 h8 o
                }
8 D! W6 n6 }3 e3 L9 Q        }
0 A/ _$ p, s& g. x        else
1 s3 Y  {; T# p( N6 `9 v9 G        {& D6 s' v4 \- l  d1 P: Q: s1 Y
                currR[id] -= redInterval;2 E- d! t* P8 E8 a4 k9 j9 p- H& S3 O
' o/ G% {# X6 C, |9 d3 n' D
                currG[id] -= greenInterval;
  g9 B2 g. H9 N1 T, k9 k8 D* P4 q6 L2 w+ Y6 R& C
                currB[id] -= blueInterval;7 f2 z+ i9 o3 n5 b# _: [

% {2 |2 X# W5 p                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);$ t4 P# G2 @" y/ _: x

3 a2 Y5 N0 s7 w0 y% x/ G                if(--count[id] == 0)
0 U" F' M) b/ ?9 t- F# M
0 }  T" i: B5 T! L                {( P- A  v7 b. L5 `* ]# g
/ ?4 N/ b# C. B0 Z. S8 W1 ?, a  e3 a% _
                        fadeOut[id] = true;
9 A& ^1 C) @; n
8 Z1 F6 U. \! w& Y2 u$ i                }. a0 ~3 q- g. O* Z( G

' C6 l1 ^1 y6 ~2 K7 O        }8 H: O! v: f/ S2 o. ?5 x# k4 L

0 v. P, `6 k0 ]        if(continuous[id] == true)
: ]/ ^: ?5 t$ G; P! h; U6 `1 R6 z% i7 m0 l3 G! n  f8 q
        {6 ]8 u! v+ e9 ^+ h' O. }

1 F8 U- R6 b( V. Q                document.getElementById(id).style.color = newColour[id];               
0 ]+ f) f; e2 w2 D$ B
/ x/ p' {# T! W' Q# l        }
, t' F0 U1 L) J" m+ u; _
& {+ c( b% E( B9 K7 x& W        else
5 K9 {, J8 [9 [- u( R" I" v" h7 J# J! c& P
        {
# O% h9 Q( _9 Z- B) J9 ]* @2 K, L/ T  ]" l' S% @( ~
                document.getElementById(id).style.color = hoverColour;4 H. s: r8 R( t

& _0 w% p; p; l' E1 f  c        }0 u9 T; Z. U' I

' g* |- n2 _- ?" S" a  U3 b7 }        clearTimeout(tID[id]);! O# f" u: s9 M. o

+ j" s. F. @, F. B1 ^% v# `- P        tID[id]=setTimeout('startFade(' + id + ')', rate);
0 |! J3 [! r% u* Z; }1 v0 P) v/ F2 Y3 \0 `  `. k( U
}
+ R) z8 S  {( ^* y3 B0 z1 {( P8 Q9 Y6 v  T- R
function continueFade(id)% M3 L& p+ Y3 P6 O

& i3 m4 X$ t" p9 M9 |{2 e/ U( S' y# A* ]

  i( Q# ]) |( x- g& a7 O) D: s        continuous[id] = true;
! i+ G! u. h4 ^  C" y. W
$ L% u; P2 L# f; D% Y0 P}8 S1 c  |+ o, x) ~
) T8 P5 b% }& C3 i( L# p# F" M
function stopFade(id)0 }- C) {" U+ k. m$ g# A" j
  n3 G: n: v4 q/ z
{  T2 R* Q2 v% q1 }4 ?
7 z# u. I3 E# ^( b; m) n* s7 A  \
        continuous[id] = false;* z' i6 D2 V; V- V( I! s+ A2 x

! e+ g8 f) ~) F) R}7 P( z: R. f2 q+ y' f& e

" ]' T# J* ~' nfunction StartTimers()
. d. R. q) R- r" E# y
1 j0 `, b$ Q9 x! @+ g{        //set up an initial set of timers to start the shimmering effect
& _- S! x. F* X+ Y# n! [( c) r, }) Y6 P/ h* [& m9 f
        for(id=0; id<numLinks; id++)
/ y$ a) a! i9 m$ D+ K, Z1 o( P9 j# c/ A, R/ }- Q/ k3 g! Z- W
        {
8 M; w! ~# E0 K- s0 Z$ t& m) i8 R* e
                t=setTimeout('startFade(' + id + ')', id*100);" M. b$ n* R5 N
: x' j- r  K$ F1 B- _+ u4 D
        }
) a( _5 R9 Z, F
1 u* I& t7 M( l3 @0 k/ ^, b" G; |}* t/ d( D: ]( v0 j

! U* Q* @1 o0 B; s( ~3 i//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
9 D% t2 G" ?5 a
2 b. C9 |7 X2 ^: q' a, j1 l; YinitLinks('#FF0000', 6, '#FFCC77');. f* W( }  [' q+ H
% q8 j8 O+ n: d8 l
//-->
4 ~% B% M" d" K. N- H' k
- T( d8 E" F- ?7 i' d, t</script>
9 h; i. V7 e) F<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元( ^, ]3 H$ p! v* v0 m0 C; p% H+ ^
</a>* z, }" t% C1 K9 M
<br>  u* D0 @6 d# i9 d" L6 K
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>* L( _+ i/ G% _( f0 |
<br>
9 z, I  p+ N5 H<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>6 w! L  L/ E  ?; K4 k
<br>          x1 B% [7 B* F
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
# N/ O0 A6 |) ^( |<br>/ d. n9 L4 k& |9 r8 |" o: o
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>4 v1 Q/ r1 V9 |, D. ?
<br>% Q$ l; A& X. \4 I6 F
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
0 }$ N( Q  _5 l" K$ J4 ~! D<script language="javascript" type="text/javascript">
4 g! U% ^/ q! ~/ x# B+ \<!--
% n) y* Q, e5 {/ o" E/ u) E9 S1 B5 OsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering$ [8 c; |& N& E9 E  G3 W5 w) c) C
//-->
7 o" d9 n+ D5 q! Y/ \2 g1 ~& L+ X</script>