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

zw2004

<script language="javascript" type="text/javascript">
  I% i' V* R# o% I<!--) W, Q" S. c, h' s9 J# K" ~* j
// convert a single digit (0 - 16) into hex2 u6 u: q  H# \/ ?; l
function enHex(aDigit)
2 D0 [! e  E$ |  A) M8 q{. @5 G% D! A( g% `- K/ i4 L
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ `7 L* B* d9 Q" S4 @1 N8 p
}
( `  @5 ?3 \2 ?8 V8 G2 [# y( z// convert a hex digit into decimal; S# F2 e+ g# O' p' P5 N9 U4 H
function deHex(aDigit)
: ~" l9 E2 }5 S. d/ n* A{
' s, Q! `( G" I4 _    return("0123456789ABCDEF".indexOf(aDigit))1 i& n, a/ l% ]. u, S# v0 E3 U
}; Q& S, u: ~5 w3 O

/ k' L* v* D2 o7 a* c- C2 T// Convert a 24bit number to hex
8 n! T! B$ U" l. W/ pfunction toHex(n)
2 c5 m1 ]1 w/ g3 e" V$ C  @  i{. b4 n7 y# h+ D# \
    return (enHex((0xf00000 & n) >> 20) +- x, {# s8 Z* S1 ?1 R1 i
            enHex((0x0f0000 & n) >> 16) +
. w6 }- |* m# B$ Q. o9 [/ c            enHex((0x00f000 & n) >> 12) +( K) e% v/ L# O9 e2 _
            enHex((0x000f00 & n) >>  8) +1 s6 t3 q7 M0 H. P4 j6 ]
            enHex((0x0000f0 & n) >>  4) +" I2 Y/ s5 `* ^2 t; f
            enHex((0x00000f & n) >>  0)). S0 d  f- v9 M1 w
}0 `, E/ q+ i* g
// Convert a six character hex to decimal9 t7 b7 X6 t5 ~; W
function toDecimal(hexNum)
0 c. ^0 _  N1 H5 F/ {{
' k+ h9 T: ^2 ~           var tmp = ""+hexNum.toUpperCase(); T; Z3 [0 b7 x8 j
    while (tmp.length < 6) tmp = "0"+tmp
$ S  x; j' ]% o1 n+ A$ f           return ((deHex(tmp.substring(0,1)) << 20) +
% H5 s. E, O1 ?" J8 ]! Q: y! }                   (deHex(tmp.substring(1,2)) << 16) +
$ Q6 I. `8 n0 u0 l& Q7 j9 @7 ]            (deHex(tmp.substring(2,3)) << 12) +$ x' J9 q2 L  s/ l- ~2 K8 ]
            (deHex(tmp.substring(3,4)) << 8) +
' K% a+ u8 W6 F, C" c            (deHex(tmp.substring(4,5)) << 4) +
5 p* K) \2 M* d  H8 P+ ~                   (deHex(tmp.substring(5,6))))
7 u5 J4 z# D: T( }7 Z' u! @# N}
+ W8 p8 t1 F" }$ F; s0 \///////////////////Shimmering Links/////////////////////
7 n$ `# h2 ^& p4 T$ H% c//global variables4 T0 o0 ], L7 c6 V" \
var hoverColour
% O# p3 U9 W7 Q+ k3 P( S9 Kvar numLinks;
# s9 J, L- m5 }" L4 h5 uvar rate;
( t, n" {  j  Cvar numFadeLevels;
6 L  Z" d+ d! N; jvar bgR;; y9 s) H1 g) K" E, b
var bgG;% C! }) C) k' B- y. L4 @4 F$ X
var bgB;
7 ]( l+ K) X, g" d0 uvar currR;
; b, D" D+ D& ?/ ?. N8 I  pvar currG;
4 b! O% V  ^: p& zvar currB;
! @0 ~8 h# g- y) z+ v1 Pvar count;* F8 w! [: }/ T3 o' K
var fadeOut;5 o; N7 D$ P" b& O# X) m
var continuous;
+ \1 c, m. h! V% Gvar newColour;2 [$ ]. e6 R$ h
var tID;
. Z( i, |( S% ]  g) J; Jvar redInterval;0 x2 k6 b7 P2 S1 S& b
var greenInterval;2 l# d1 u* F) ~
var blueInterval;
, {& l2 J: A( }$ x- g: v- P/ Cfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)( n6 B: E& j' N* Q& T; w+ j- k
{
# E/ z0 j8 q( F/ B) R' M% \0 @; ^; ?0 h        hoverColour = mouseOverColour;6 S- V" ^# S4 c7 P/ Q
        numLinks = numberOfLinks;, q6 Y5 L% N. t. ^0 o4 e# h
        rate = 1;
9 Z; O$ }" D( [9 I6 E( A) S        numFadeLevels = 30;+ E& z: B  j8 l+ Q
        function initArray(theArray, length, val)
$ G  w, |1 ~( s" F        {
$ `0 |- r* b, z7 `& l                for(i=0;i<length;i++)5 |1 s, `) r; m/ U
                {9 O3 d5 u/ o% [5 ?/ N" O! q
                        theArray = val;
  {/ ?# s) y  H6 Y1 s0 Y                }
& L& }: U9 W# Q        }- P. U$ ^4 e: P) a7 D
        bgR = '0000' + fadeOutColour.substring(1,3)! e) T/ m" _# F7 Z
        bgG = '0000' + fadeOutColour.substring(3,5)
# \6 k& d+ N+ Q0 ~- y        bgB = '0000' + fadeOutColour.substring(5,7)
+ S( Q- ^+ Y7 G# v6 W# Y        currR = new Array(numLinks);
: P. k; x; t# W" T        currG = new Array(numLinks);. g5 A* m6 G4 T. W8 L+ r% v
        currB = new Array(numLinks);
' Y3 r/ @3 ?2 P4 y        count = new Array(numLinks);
; @# u2 M" u( _6 `9 Y        fadeOut = new Array(numLinks);! ~# z$ m2 @% I, X
        continuous = new Array(numLinks);
( V. `7 G0 a% i% {7 L$ C3 U" [        newColour = new Array(numLinks);
* t  E: E1 B6 d# g8 u! b" }( J        tID = new Array(numLinks);- V- r/ K. F* C- W
        redInterval = toDecimal(bgR) / numFadeLevels;) T$ q6 s) w6 P0 o; x
        greenInterval = toDecimal(bgG) / numFadeLevels;
4 e+ N9 Z/ y% A$ v/ O2 {+ d        blueInterval = toDecimal(bgB) / numFadeLevels;
3 s+ x2 ^' i0 u! Z3 ]( I        initArray(currR,numLinks,0);
( C3 y( X$ F: ~1 J) K$ M        initArray(currG,numLinks,0);
1 {& V7 L. C' e7 G        initArray(currB,numLinks,0);
( N& D/ R8 i3 L3 [; ?3 W        initArray(count,numLinks,0);
0 ?# \' y' y6 J0 O  B        initArray(fadeOut,numLinks,true);# T0 E! q* |  [. ?9 [6 M7 ]
        initArray(continuous,numLinks,true);
- m* d9 [- t2 \- d}       
: h, _1 R. z! J/ B! _1 Xfunction startFade(id)
5 v- G; K! D- _% Z% ~; w{
4 ^, q' a  S+ |  K( p" j  b( \        if(fadeOut[id] == true)
  u3 Q; W( I! }* _  w: b$ n        { /*move colour towards background colour (increment)*/
  T9 @+ z5 ^$ u/ G* m- U                currR[id] += redInterval;
" c* @$ X! [4 H) n- z                currG[id] += greenInterval;
: ^& i" y/ P5 g                currB[id] += blueInterval;
3 F3 d$ u, |" s$ K                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% z! O6 \  p9 ?$ o! K5 w0 ?! v                if(++count[id] == numFadeLevels)
5 W  C. N1 R( m% W1 ]                {
8 s. J+ h4 Q: @2 ]8 P' }                        fadeOut[id] = false;
% S9 H1 b) C5 ]3 v6 Z5 H3 v                }
$ X- {+ _' K( _2 U  y' {. J        }& s) |" h& j4 x* \& u# j8 Q5 m9 _
        else
8 [0 e' i: k' Y5 y6 L1 _: k4 W        {
/ t4 a- R6 a% ~" _                currR[id] -= redInterval;
4 C+ C4 r" w% A0 f/ m8 \' u1 c/ J8 e, ^: _# E
                currG[id] -= greenInterval;4 u" N! [4 p' Y, r3 d) r& U
3 W9 W$ n% |; d# y( h
                currB[id] -= blueInterval;/ p* l# v. j3 k  s& c. I  G
5 n& f1 k, e1 b  R% l8 e& D
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- p: j2 w2 G/ F

# m3 N) p/ v$ `  v) G  M% Y                if(--count[id] == 0)3 B0 i# O* B  p4 A

! c9 m3 F2 N: W                {5 ]4 F3 m3 s7 M
0 E& s: l* o" @1 U
                        fadeOut[id] = true;7 k# F" o4 k$ Q  y0 n
$ ~; v, C# C, Z
                }
. ?4 L0 o/ {. R. O' A% t4 W- F: P0 y9 p. u* E+ q
        }6 V9 k) l, k+ e( l

9 H, z9 {" s2 u        if(continuous[id] == true)
( v9 e; R: R3 f3 B
. l* h  A2 d1 j0 z. p        {
! [# `. W6 C: `( z5 u  M9 U5 [6 ?; w" [
                document.getElementById(id).style.color = newColour[id];                ! I# L5 E' h7 u, i

8 ]; q) `2 C/ T7 A& d  C        }
7 c! @% I, e8 E* H6 o4 @
/ M0 g* p- x* {9 C3 O, V$ ]        else& |- h. G" {; V
0 S( G4 ^1 S1 \$ h0 u
        {/ N+ k. _' u' f9 Z" X0 T

4 c' b7 q! c3 Q% l; G0 |- N, s+ N7 N                document.getElementById(id).style.color = hoverColour;
; Y, H' }9 G4 j! U
: M- @+ G5 S5 g, U! }        }/ z. u3 _! B' J4 I3 K
# H' L- Q, r0 R# W
        clearTimeout(tID[id]);& t$ u$ n3 U6 N$ X# }! J3 W% ^, u
( G+ v0 w* j- F# R
        tID[id]=setTimeout('startFade(' + id + ')', rate);
7 J: k7 t% G; D3 v& }  C% J5 V1 r' ^  F* S3 a: K
}1 @2 m/ n$ j2 x
! `% A. k/ _( w4 f" l; h
function continueFade(id)
; l4 ~) I  G( l- C7 N  B9 z$ w; S# S& }0 v4 s1 g- ]* s
{
& U6 l4 I8 ?. P7 P: N5 t' R4 _/ L3 G" L8 _* \# {' a- U
        continuous[id] = true;/ s' |# k  D1 b( ?

+ g& c' ?* J4 u}( @# `6 [" Q2 d) e" f

1 [- A" ^- M' \$ qfunction stopFade(id)
+ p2 |8 o- P3 R) h9 h2 ?! M+ X5 E8 G
* c+ _6 G# q: X{
% ~/ F( |8 A/ r: L- {5 k$ v- Z8 S- ]' q" ?+ C
        continuous[id] = false;
8 P8 O5 ^: t7 u4 G% w2 i4 S2 ~- u  p, a7 @. S9 e5 F9 C  e
}
' ~2 `% J; D% D6 w3 G/ u5 z! I1 x+ w4 i6 S
function StartTimers()
  y+ a% B) K4 p+ T  Q( D& J. B# L6 F+ y1 a* d
{        //set up an initial set of timers to start the shimmering effect& P7 @+ v- V& R/ N: i
* F  q8 k, O- Q
        for(id=0; id<numLinks; id++)% l9 |6 u; D* H+ h( A# Z8 ]
) I& M' T9 {: t% s
        {. q- T) F$ p% V1 K# S

3 ~; p8 Q8 C! D2 a" E5 L- L# \' ]. p                t=setTimeout('startFade(' + id + ')', id*100);9 w+ r# B* K9 a, }8 r: S
. J! y# k' u1 [. G' h( A
        }2 N" F7 x) g2 l
) {) s9 m2 y  Q3 `8 |5 S9 ]( p% Z
}
7 f8 S# |& ?% T" w' R
5 @% I, Y" e* t9 a. Q//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ i# S  ~, k$ B9 t
: T$ ?% @$ q, y, b6 _# o
initLinks('#FF0000', 6, '#FFCC77');! o( g8 y4 A- W% w* G. F

: p3 b5 o4 v6 D3 {( F/ r/ u//-->
* s1 ?( n$ ^- g# w7 a
; L4 ?( ?+ C9 B0 Z6 d2 C3 \# c</script>
5 i% l0 X+ b" w% e" @<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元3 \0 d- I4 r7 h* E) \
</a>2 n3 o/ D) E# j  u+ }% R0 t+ D
<br>
( H) u9 a6 Q2 B1 N0 r' s<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
9 ~: \9 ~' @) p- }8 j) D$ G<br>) {& h* O3 {# H+ W& e
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
& `+ K) E! e6 \<br>        , E4 p) p& N0 q& @
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 V; m9 a4 R  s; o) M<br>
3 w: `. X( W) {7 m; H1 a<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
. Z3 n  ?) m& B# `<br>; |  C2 G) \# ~& O+ N' V
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>8 ]/ l1 f3 _0 ~+ E' o
<script language="javascript" type="text/javascript">* j6 c) }; ]6 V: W! c3 l
<!--* y, L, ~  C" e* A
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering, v; a6 F/ \$ K9 _
//-->" x9 O4 z: }' u: w* u
</script>