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

zw2004

<script language="javascript" type="text/javascript">
9 S, W3 X  L4 @4 k- `6 I* m: P/ o<!--  M/ ]. V! h- v! f! t/ a" P7 D
// convert a single digit (0 - 16) into hex
# f: F, z2 T6 Jfunction enHex(aDigit)
/ k% y7 z' B* u  w+ u' p0 Z) k{
% U& d2 c1 m$ m6 n9 s    return("0123456789ABCDEF".substring(aDigit, aDigit+1))! d; r% {3 j1 M
}/ w# d3 X1 V7 t
// convert a hex digit into decimal
5 e7 H" I2 z2 Y6 ]8 V! nfunction deHex(aDigit): |4 z' \) }; E
{
0 e- g6 l9 y  w: K( H    return("0123456789ABCDEF".indexOf(aDigit))
/ j1 H& b* d% V- t6 U  ~* M}
2 h, @: e) H8 L& v- F. p
8 s/ ~6 b, W% R7 e# n4 R; |// Convert a 24bit number to hex
) w  b3 R) f" z7 w) L/ _) tfunction toHex(n)
! c; k) {1 I1 ]4 J% |7 d* d7 A% G) k: X{, w! O# v4 m7 k% F, W! R8 Q
    return (enHex((0xf00000 & n) >> 20) +
- F  M, D8 g3 K: T$ W1 _) `! i: \            enHex((0x0f0000 & n) >> 16) +
9 l* o; {3 _- x# q; ]# M            enHex((0x00f000 & n) >> 12) +* J9 C8 L1 @* a) V* a1 d$ c' i6 k
            enHex((0x000f00 & n) >>  8) +6 U7 ]1 o; E6 x5 Z
            enHex((0x0000f0 & n) >>  4) +
0 h3 V7 Y; j7 X' N            enHex((0x00000f & n) >>  0))
' k3 z9 }6 m2 q# z* ?}
% l# ]+ g6 |# i- L$ Y// Convert a six character hex to decimal
/ G$ g' U& f! _3 Ofunction toDecimal(hexNum)5 @6 a8 _& S8 C- f: ]. K
{9 s. U- f, T/ J! X3 c
           var tmp = ""+hexNum.toUpperCase()
# s) N# Y7 h% w2 R! |: i) o    while (tmp.length < 6) tmp = "0"+tmp2 H5 j7 T" e2 [
           return ((deHex(tmp.substring(0,1)) << 20) +
; k- [% L( y8 |. b- A                   (deHex(tmp.substring(1,2)) << 16) + 1 u" @" ~3 f3 L9 V/ g' v+ M
            (deHex(tmp.substring(2,3)) << 12) +
6 }3 h2 G: V* y6 v7 K2 Q2 Z+ E            (deHex(tmp.substring(3,4)) << 8) +1 _  R1 a; j; M
            (deHex(tmp.substring(4,5)) << 4) +
# o$ h7 ~& ~. t6 w- J                   (deHex(tmp.substring(5,6))))
; l( M2 d5 U* g% S}0 Z3 c7 @. s, X8 G8 V
///////////////////Shimmering Links/////////////////////8 o) j4 j4 \+ j
//global variables) F, z  @  K4 t$ x) X+ S
var hoverColour
1 y, t* k) Q; uvar numLinks;
" Z# i) c( F, H% U* E- V4 a2 Jvar rate;) t7 X! Z0 E: |. y8 m
var numFadeLevels;
- l; W1 w  @  w( Tvar bgR;# o/ [! L' P, Y* s
var bgG;
3 K: ?: x5 z. _( o) `: ^( Zvar bgB;
3 ]" f" q8 O0 ^7 m. w9 ]! ]var currR;4 V! w( N* M& j' C  ?
var currG;3 `' T/ N4 h/ k" n9 Z7 A
var currB;0 K% C3 t) |8 @" i  y
var count;
2 l' f" x3 b# U& h7 A. p4 E! qvar fadeOut;% D: }0 g; K7 \% M* j
var continuous;9 K  q+ I! `; s+ r
var newColour;5 W+ ^* x) h" l# l
var tID;5 i+ s& {) e* C4 l  s) A
var redInterval;4 v2 S: }# N" _9 Z# ?
var greenInterval;
8 ^& G; f0 e: v+ kvar blueInterval;
' ~% h& R# H) w0 ?7 ^' w' Cfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)3 X4 ], f) `" d8 ~
{
3 L7 u; N4 {/ H- R1 p        hoverColour = mouseOverColour;
  e- [2 s+ X; l3 J9 [2 y        numLinks = numberOfLinks;
: G# L5 Q7 f$ f1 F+ ~0 [& C        rate = 1;0 L/ r; m$ t- N
        numFadeLevels = 30;6 {% M2 E' ^: h9 X
        function initArray(theArray, length, val)
1 r: q! L4 x; P; D) N. Q- @        {7 F6 O7 m/ W. \" \% K3 s( E
                for(i=0;i<length;i++)
1 s% }; R4 ~& G                {
7 P. S$ T9 x' l, u                        theArray = val;2 c7 ?' X4 d. U+ Z9 F
                }0 q" @  Y! Y( g
        }8 N  Z& u/ A# ]7 a
        bgR = '0000' + fadeOutColour.substring(1,3)
5 L  t% |& y5 x6 |( q5 c        bgG = '0000' + fadeOutColour.substring(3,5)
& S  j8 a. n. F3 g2 B$ M        bgB = '0000' + fadeOutColour.substring(5,7)
# _9 c8 k! S7 W2 K        currR = new Array(numLinks);
! \' }; _' e- W' ^: T* r        currG = new Array(numLinks);
5 [  z3 f4 i0 n( C* W        currB = new Array(numLinks);4 B& N# w0 @) \. `4 z
        count = new Array(numLinks);
* ~: I/ X( R* F/ P* c        fadeOut = new Array(numLinks);& C# h  z' H: ~, `, M6 M3 D
        continuous = new Array(numLinks);
6 ?) V$ q" l7 u7 [+ q$ v2 t        newColour = new Array(numLinks);
7 w  T8 f: A2 ~3 p" S1 M        tID = new Array(numLinks);
$ B! x4 M" B: e        redInterval = toDecimal(bgR) / numFadeLevels;
; I4 G% ^1 Z* v% j* i+ b) n        greenInterval = toDecimal(bgG) / numFadeLevels;
( K  F' K* p6 ~1 M. Z! Q        blueInterval = toDecimal(bgB) / numFadeLevels;
! U3 _( b% N7 f3 P& \0 `; e        initArray(currR,numLinks,0);
6 I* ]3 {; |$ n: b4 O        initArray(currG,numLinks,0);
/ E' X" s8 H, P3 q        initArray(currB,numLinks,0);8 t- i/ t" Z- p0 r* Q% o6 b
        initArray(count,numLinks,0);
* |5 Z% F3 D2 q/ L! }- Y. @        initArray(fadeOut,numLinks,true);
5 y8 I; y6 M. H! f9 f% x        initArray(continuous,numLinks,true);, y" A! y1 d) y8 S, J
}        - y4 v; U( d& C0 A# s1 `( d
function startFade(id)
+ a! P/ r+ C- u2 f{
* p0 j5 J6 z* }        if(fadeOut[id] == true)3 ?% G$ _6 J+ _
        { /*move colour towards background colour (increment)*/9 P" Q7 Z5 n* D
                currR[id] += redInterval;4 V3 L: h  @' E& _
                currG[id] += greenInterval;: x: N# N$ h( S- X3 B1 ?# J# D
                currB[id] += blueInterval;& E- W' |" F6 @" O- x& x; B, l
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 H+ i9 F4 |3 C; c1 Z; ?, D
                if(++count[id] == numFadeLevels)" q) @( m  j$ i
                {
! P) Z  S( q. _$ m7 d$ H                        fadeOut[id] = false;
3 e7 D! g9 D* X9 j  ?; {                }- n5 S5 I3 [. }3 \
        }$ `& N) Y' u7 o: ^1 F
        else- m! g0 M2 \" d/ g% {/ v! ?0 p( U
        {% q5 E6 A7 b0 h! c1 F& f
                currR[id] -= redInterval;0 [  ~  }- v- T! Q" E5 n) ?& ^

* A: P/ [, ~  e5 e( X+ l                currG[id] -= greenInterval;' _+ d, v/ Q# [
8 }  A  [/ `! V+ D2 F0 }+ }
                currB[id] -= blueInterval;& V. }6 W& E& ~+ P/ H

# M) r- m6 s% |- h( h8 e! }                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 z; F1 V' S; {/ k
3 n5 G6 D  T. U2 N$ l- u                if(--count[id] == 0)6 P* y! g. u, s9 E4 M( M; U& Q

6 V* g, L3 Z7 T4 U+ }: n                {3 V5 H3 J2 c! |4 r
9 h# g3 e# \, E8 |
                        fadeOut[id] = true;6 ?% B0 b9 `, T
6 S6 u; d- _2 E1 Q4 V3 B) p
                }& u! k( c2 S: \7 T6 o

& A, r7 E& ~% `& v3 a, Q3 M+ C5 u. i# A        }
- Q: U  l# A% j9 s0 G5 Q; z
, X% L2 _! Q' x9 j) ?  L$ F7 N        if(continuous[id] == true)6 J: H+ V  h' v) Y  @% l2 V

3 A( O2 g4 W9 N        {0 m) c1 Z- |% ~3 w1 Q( }+ h

; Z' I7 W3 M/ t                document.getElementById(id).style.color = newColour[id];               
- x" s  X. D' S2 o* A. }6 M# N. ^  Z8 P8 o* Q: c
        }. r2 {2 j' C: L" w$ d
- r3 U- o) N6 m! b5 W3 y
        else
. b3 ~$ v6 K; x) v5 C- n, n3 j% z: u- }. b( V- o( i
        {  x4 g# ?# P* q% S

* ]; c/ W9 f% j                document.getElementById(id).style.color = hoverColour;
1 o. [' c6 @% R2 g  c- P( h! d
0 m, `% B, T5 ^' M1 B/ h6 w1 g+ ]        }# o- F0 K- ?0 {6 H% S
  R. |6 V1 J" q# m* z% ^
        clearTimeout(tID[id]);9 z1 n4 j' s! c! X+ v! C

6 h* c5 i. S8 N$ |3 {( s) p9 R        tID[id]=setTimeout('startFade(' + id + ')', rate);
+ M& c6 ?* s* [/ c6 U2 }
* C( b  M, W' O}: n+ |0 m7 q- |. _* w! ?

: ?3 D  h4 c# h% Y3 N7 |6 \function continueFade(id)
6 G  T& y8 B& I$ k! b% Y; p, J9 \% }  z9 L. }, I. g
{
4 f# J0 U% [2 S+ Y/ ]* p, c& t8 G  h% O7 B3 m- g
        continuous[id] = true;/ q3 Y3 H) O. {

) }6 Q2 [) u  R6 n/ x9 v# E* D4 \7 T}4 @' u; f! |3 I) E9 V  n

8 D- _! \+ g: ^" W$ H6 {7 hfunction stopFade(id)
3 j1 z3 y8 v0 J+ D' r0 z5 f: V3 F3 ^  o3 B2 Z
{; E- H! R9 v6 |2 X1 _- h; v

. y- N: J9 M/ r* K9 W        continuous[id] = false;1 k; f) q4 u. I6 L' E

" F. W- j' v, P% s}5 {0 [% o: M& P
! @5 R$ J1 J: _. K
function StartTimers()2 g8 W/ D- E" d4 {3 G5 V! m) E
* M+ T# {- S. S
{        //set up an initial set of timers to start the shimmering effect- M) j' ]9 _- x3 g% L" Z

6 p: E& \# J! l% J0 a; X; T4 ~; b        for(id=0; id<numLinks; id++)
3 [. s, |- @! n1 M6 V: L$ w" Z  a/ p1 h# s6 h! N- _
        {
# T7 N( z; k$ m) k% h" q: ~
6 w5 i9 `* T1 {! x- g, e                t=setTimeout('startFade(' + id + ')', id*100);$ m+ {" I1 d6 |: w7 q; o

. j6 W+ l3 Z! j: G        }
! r. i# U- n: n6 w! O1 _' d- r
/ U0 @' p' Z/ K* j4 H& I}
9 }( |6 [! N1 z6 U+ M7 u; Y  Y
0 M: k7 J- U5 Q' Y: K" g//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
3 _- R8 k6 h* h: v+ z% X
* ?- ?' _' g8 _6 ^* c! K7 a! c% tinitLinks('#FF0000', 6, '#FFCC77');1 m/ s! r: C1 v$ V- j2 S2 g
, ^: b, a5 D0 X/ N3 x! f$ ~
//-->
2 e8 d$ f$ n4 H5 s
6 `8 l0 {2 D. g, T& u</script>
. b! O5 |; N+ y) X, c, D<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元) \, u9 x/ f1 ?
</a>; {3 j' ]  W9 h* g2 i3 d
<br>9 ^# h% F$ a3 G7 C2 _9 O# `+ j
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
. d+ |$ A5 ~  e<br>1 v" x/ [( @; {$ _+ a- D: @: g
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' ~1 B5 u5 Y+ [, |7 g6 L/ C+ W<br>        ' S0 m$ Z" P9 q- j" T* E
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ ]8 T: u& B% d5 L& ^
<br>9 s/ b9 }& r0 V9 A4 j- d  N, x- S# `
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ p3 V% }9 {$ q! K<br>* e3 p( L8 c. }+ }
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& L  A' [/ }6 x3 w0 {7 A4 P: y
<script language="javascript" type="text/javascript">
, d* u& c, E3 D5 G4 I) w3 c<!--
1 i+ m4 u- ?4 X- _" u8 wsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
3 A/ r: z! ]1 X" m. k" j//-->0 p. M) ^! O) y" X7 P4 V" d
</script>