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

zw2004

<script language="javascript" type="text/javascript">1 e( b+ W- s8 P
<!--
( X( ~2 `: V! \& J// convert a single digit (0 - 16) into hex
; j* \' [) l5 c. p$ Vfunction enHex(aDigit)& t* U$ ]) ?7 T8 S' n
{2 t8 v$ D2 j$ f
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ C% y& x$ g0 O6 V
}
9 V% G  m7 }: }( l# B// convert a hex digit into decimal
9 v0 C# X) t- Nfunction deHex(aDigit)
! o9 J. z0 M! u: }! I{) |8 Z+ ^% c9 ^' _+ h) L3 \6 D. s
    return("0123456789ABCDEF".indexOf(aDigit))
. S0 u  n9 q4 X, K}0 S; c( y# q7 V$ A8 E/ I

; J" _2 v/ ^* G) G8 g. s// Convert a 24bit number to hex& H5 ]% m) ?3 N" y
function toHex(n)& E* ^: o9 O" r; R& A- c
{
% M! r5 N1 ~6 A- w1 L; n    return (enHex((0xf00000 & n) >> 20) +
% r" y; Y( X4 m            enHex((0x0f0000 & n) >> 16) +/ R, x9 E2 b5 L& W! q8 e
            enHex((0x00f000 & n) >> 12) +5 ?4 o% B( ]8 a( \
            enHex((0x000f00 & n) >>  8) +
) Z7 R1 s3 e0 L' L5 ~! O            enHex((0x0000f0 & n) >>  4) +' F4 T3 m  K9 ]8 H8 R- V, U3 O
            enHex((0x00000f & n) >>  0))! _) {5 V$ u1 n2 ?4 D7 e
}6 {8 P* k: C. d/ M# a" h0 p
// Convert a six character hex to decimal) ?; Y7 d  a7 y- U. n
function toDecimal(hexNum)
. N8 Q! e. k8 v' D0 T5 R{
! X# q( r7 Q8 [2 w* u           var tmp = ""+hexNum.toUpperCase()
" D  j/ W, q* ]4 `! V# j1 Z    while (tmp.length < 6) tmp = "0"+tmp9 m( }, R: a8 O2 U1 K
           return ((deHex(tmp.substring(0,1)) << 20) +
6 C3 q' i- t' U: n# @                   (deHex(tmp.substring(1,2)) << 16) + $ Y8 \3 U4 B: C* a
            (deHex(tmp.substring(2,3)) << 12) +$ {( k: s) g% j
            (deHex(tmp.substring(3,4)) << 8) +
0 v6 k' w5 V0 J* i" |4 ]/ e! l            (deHex(tmp.substring(4,5)) << 4) +" m. N/ P/ q* j# U
                   (deHex(tmp.substring(5,6))))
8 F  A1 v9 L. b* @) i3 u' O. `}
6 S" K- q. I5 E' ~/ y  V///////////////////Shimmering Links/////////////////////
4 p5 s% j" |- a" @1 A2 z  q8 Y; S1 b7 Y//global variables/ Z3 [  F3 O/ m* _2 P
var hoverColour6 k  s) w: y( s' K6 d! ~9 s
var numLinks;7 H$ r8 r2 x* ~4 {
var rate;
: _# x. z: v% L  W4 ]var numFadeLevels;9 `7 }" t( l% G2 ?; }- ?1 }. x. \
var bgR;  ^3 p6 t' l7 n
var bgG;
8 m+ w( I% L3 ^var bgB;
4 p1 ]' s5 h% \/ H, A: fvar currR;5 e+ [8 j+ l* y& f
var currG;) V9 r4 R: E' a. m9 Y9 ]/ u% q1 g" r6 M
var currB;
+ w8 a3 a  m5 ^( T. L  J$ Cvar count;
( q/ g6 K! I) h" Z# B9 pvar fadeOut;1 v; ]% Z! p$ ?- O  x% s
var continuous;( r( A3 p; M5 ^
var newColour;2 s  O9 _5 W5 D9 _
var tID;
. [( s1 S# r- G# K. {/ Jvar redInterval;; ?, [( A9 c1 M% _. k9 e  B7 |
var greenInterval;; U% c6 p' {1 ~5 p, p
var blueInterval;: \  M" l4 A% A4 h' ~' B
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)) S. c+ ?! a1 k; q
{
6 y7 u: L" {5 D, i, z9 h        hoverColour = mouseOverColour;! c- J! _, B' _+ }
        numLinks = numberOfLinks;$ Q8 s; ^) X6 d: m4 a
        rate = 1;
+ X; B! w- ?) B        numFadeLevels = 30;* A  H0 c; f, W0 X
        function initArray(theArray, length, val)
: E" c4 ~0 B5 N$ o- @        {) K# g: c7 o' Z4 R# _
                for(i=0;i<length;i++)4 J3 ^3 r$ C1 ~! h, y8 ^6 _
                {
+ _5 X7 n/ `/ N$ A* N% @# d                        theArray = val;% k5 K9 v- p3 C$ o; {
                }2 W; O) J( ^- K4 g( E1 z; `+ q
        }
3 \5 I9 Q' r3 m0 O: Q        bgR = '0000' + fadeOutColour.substring(1,3)/ e7 c2 Y/ `$ |3 }) ^
        bgG = '0000' + fadeOutColour.substring(3,5)
1 s" h, T2 r! B' p        bgB = '0000' + fadeOutColour.substring(5,7)) Q& k$ y- C1 C3 X1 O- L# D9 w% |: ?
        currR = new Array(numLinks);/ ~8 ^; U6 R! m* m& N
        currG = new Array(numLinks);
, Y9 b8 Y: \5 g# o; d. E        currB = new Array(numLinks);/ H2 x) R; S; [! P; D
        count = new Array(numLinks);
" H: R7 x# a# j1 N$ W; V        fadeOut = new Array(numLinks);
7 Q5 H: E2 l3 Y8 i# a) L        continuous = new Array(numLinks);
$ N3 H( h# A7 k+ k$ f        newColour = new Array(numLinks);3 ~6 e2 N: Z* X7 M  Z8 e
        tID = new Array(numLinks);
/ @2 h5 V. q' M" c        redInterval = toDecimal(bgR) / numFadeLevels;8 b% ]  t: t! G. }
        greenInterval = toDecimal(bgG) / numFadeLevels;5 Z* @5 C% T7 s- _% v5 w
        blueInterval = toDecimal(bgB) / numFadeLevels;4 U9 A0 P; E; E7 ~; x% {( e
        initArray(currR,numLinks,0);  d6 g' R* O2 W& {
        initArray(currG,numLinks,0);
* g# _& T# P  v( O: M: P1 c1 }  t        initArray(currB,numLinks,0);( m( r5 K2 Q+ e) A% F" ]
        initArray(count,numLinks,0);2 w+ c5 G1 R* t7 z  P9 [1 G
        initArray(fadeOut,numLinks,true);
3 w. x9 v4 e; G: q        initArray(continuous,numLinks,true);4 `% r# Y5 j2 n$ P5 @6 \
}       
* E* W% m% {! K' f, Qfunction startFade(id)8 ^9 p) A! k! u) b& W
{# u/ X/ t$ U" a2 t
        if(fadeOut[id] == true)
8 u/ K2 U# r2 O' n6 ]) t) T        { /*move colour towards background colour (increment)*/% i8 s* H' X0 r- b9 ~
                currR[id] += redInterval;8 @; U! _! B6 V
                currG[id] += greenInterval;) }5 I- E5 a4 P
                currB[id] += blueInterval;# S4 X8 ]4 v5 g7 T' A
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ Y7 p( ^# e! K/ E6 b6 `' {
                if(++count[id] == numFadeLevels)
- X& S0 |8 W3 T                {% j, a0 q" M& J; O9 X* k* p8 W1 U5 }
                        fadeOut[id] = false;
  c! Z7 l# e4 J                }
& Y+ G- v" f4 ~, ~1 s& S        }6 D( [& \' K1 M7 }9 A
        else; A' l+ I$ n1 F
        {4 n5 E5 h- x1 {/ w( K1 S
                currR[id] -= redInterval;
! L. L' d. x: n# b! F1 x1 }$ B% C
                currG[id] -= greenInterval;
6 ^3 A2 n) W) j6 L( ]# D
9 ~- W# N1 C2 z                currB[id] -= blueInterval;
# J  \, Q2 [/ i+ i5 A! d- |* Y  @7 v1 g& [" k2 @. C$ D
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 W5 t% `1 @. |4 S; l% R. M
: }1 y2 Q( }, k                if(--count[id] == 0)& J0 V, \& V2 E- M1 Z
: D" y3 f) c; `) X8 h
                {
% ?$ V# Y/ E( W9 ]* B8 S+ K; l& N' t, S* ]
                        fadeOut[id] = true;6 J; j9 t  }# N! x( k; d. d

3 A5 B8 U( e8 I' O7 [3 U% D                }
2 y' K# c* K7 x( k, h/ z2 F4 N( m# B3 X& V& q- ?
        }
5 t, B' h. [: V& R2 _; c# j: T0 H* p& R1 R( r
        if(continuous[id] == true)4 J4 i  l: R/ t3 Y) L. n

1 n$ ~& G; E, i        {0 Y+ A3 i* X% ^4 N/ C" I# }/ ~! V
) S) k: A# ~; P
                document.getElementById(id).style.color = newColour[id];                4 @; M) W& A4 z* }& U, }- c( j7 e& g3 }
7 F0 r! v  p! m) A
        }  t6 p8 x; `! |4 z% O2 [' g6 ^

3 \4 K# [5 E, n  n- M) D) r; w- x        else
5 P, B! h/ U! V: N$ ]! m, M; ]( e
0 Z4 W4 m2 _  d        {7 ~! |6 c! M5 ^5 U
- y1 L. K( L. u$ x4 W7 ^" k
                document.getElementById(id).style.color = hoverColour;. m- E7 M" P7 I! y7 [) U4 @
  z5 x/ v& `; b% E4 v9 _+ Q
        }0 v( P+ [8 b0 ]/ |- j

* z' s$ B0 B2 a1 u, V8 Y        clearTimeout(tID[id]);
8 `5 C% B+ V1 b, }7 W- `, _8 k. j  _& w6 a
        tID[id]=setTimeout('startFade(' + id + ')', rate);
, x% `/ p( ~0 I; @1 V( u
- K% b  r+ X( I; N0 {8 W}
' K( ?! w2 j8 e8 Q2 v: Y7 v# J$ ]2 L) u" a# ]
function continueFade(id)& l& L$ ~3 s6 [. a3 k$ h
* M, _% \! F/ s; A4 {& }1 w9 s
{  X4 h/ u8 |! C  x4 A, u/ D

) F1 S5 V: U  t5 ^, j- L! b+ V        continuous[id] = true;
; X! b/ [! R6 _6 @# S" L3 }* g! f' A+ I% |" c2 {4 f# l  Q  L& k
}
# x' }* |4 v9 U
/ k* \. ~$ X2 I% s) T3 lfunction stopFade(id)* i: y3 E9 z4 ^$ F& j% P: c

# ~3 R2 U- k: o{# z" M. b( \6 I5 a+ b

  t2 I1 P. o6 Y        continuous[id] = false;
# Y- a! O6 p' q, r: U7 V% O9 N, v6 p1 r( @# y
}
5 U2 t, H+ s5 \, n: }
  f# m; v: Z. ~: e; ffunction StartTimers()+ P* r2 h; o, n/ m3 t, D4 U

& R" w6 y, l% g8 |0 V0 H( q! F{        //set up an initial set of timers to start the shimmering effect
  O6 Y  k! C6 F" i& Y, f8 E1 \% L
        for(id=0; id<numLinks; id++)
9 [1 ?' I4 y+ c
) v6 L! x* u/ Q* I        {
, I1 L5 K2 a) m& [/ |( [
- p* {7 c; y( o( L                t=setTimeout('startFade(' + id + ')', id*100);
) `6 P5 j2 e) \: q$ k7 z
4 Q" P- w; ?% K, L( i' ?" x4 ]        }
/ e% f" T4 h/ u: i8 e2 _7 B6 n- _
6 Q  D5 p% N' u7 @/ U5 j6 x' v5 m1 C}
% e" K7 O' X% O6 j& k# N, g0 L2 m9 D8 ?
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 {5 B. O- k; ?6 M2 V. G; ^
/ \; ^( D% d, {' j
initLinks('#FF0000', 6, '#FFCC77');% B3 b9 G( e+ I+ v) f, z# v  V8 R: Y
$ B2 Y% o. u8 I+ V1 w9 A
//-->
( F; i$ D! `; T1 X* `' }3 M7 k. Z) Y/ V8 `  D% G! z8 q
</script>/ m# ]0 @! @9 p9 y( K' D8 U
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元1 Z- h# o' w7 S  p
</a># x( s  N( g- M9 ?
<br>: d8 K0 X" U+ j3 ?; j
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>) N8 ^, }1 k1 {) E0 a6 w2 z
<br>
$ H& S# `% U& o9 P) j: I5 \<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
8 c  D5 B3 u+ [  m9 n<br>        ) M1 g2 P* {, j0 n# z
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>! j/ ?/ C; Q" g. Y- I: a
<br>7 i" Y8 k8 O# f
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>5 y, g+ I; {' `- C! {8 t
<br>
' G5 V7 v$ W& @2 b<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>0 c* I5 q  l$ s& u5 t
<script language="javascript" type="text/javascript">
* G- W0 d" M/ S2 S& J; l$ r& B<!--
5 _+ a2 H" |3 X9 [! p2 @0 j; SsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
7 H; x0 i2 {- |8 @2 _//-->9 z0 d/ d3 c6 T+ }
</script>