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

zw2004

<script language="javascript" type="text/javascript">
) |- X9 i) d+ I. U<!--/ M, M  x4 {3 U8 K$ x
// convert a single digit (0 - 16) into hex, T; L  W5 v. s9 `& |7 a# W- ^; d7 A8 }2 h
function enHex(aDigit). X5 T0 q: i  y, @. _0 x; |
{
% ^  L& Z' k( U/ r! ~    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
5 l7 [$ X8 K1 q/ |9 X  a}! v: _! N1 i0 L7 ?
// convert a hex digit into decimal0 c  ]9 F8 B! L+ w* z
function deHex(aDigit)
% j8 g# P0 Q8 b& d% V" K5 Z, q{+ l6 i& s; ?. n% |' }
    return("0123456789ABCDEF".indexOf(aDigit))
7 ~( v; d0 J0 |' S) j. x  @}* w: N2 h, _# i" v/ _0 \

5 D( ^7 e% T0 g3 k* ~3 l5 O; W// Convert a 24bit number to hex
. I( U5 }, l% \4 T3 w  Ufunction toHex(n)
8 \* F$ Y) p; B+ v{
  v( G6 [* P; `! O! u/ {% q' N# N. h    return (enHex((0xf00000 & n) >> 20) +; ?" A$ b: o: A0 \  A$ d1 U
            enHex((0x0f0000 & n) >> 16) +& r/ K% d! f' N4 u8 K
            enHex((0x00f000 & n) >> 12) +: E* Q, J  a; e8 P1 N3 E! K' y
            enHex((0x000f00 & n) >>  8) +9 _3 h! r$ p1 D* j* _8 g, z' \- V$ C
            enHex((0x0000f0 & n) >>  4) +
. i5 i, t& j; ^            enHex((0x00000f & n) >>  0))* C4 ?8 _1 k7 N/ ]7 V: E0 C
}9 E+ o1 `0 v9 Z3 k/ L% C" G
// Convert a six character hex to decimal
) c7 |9 a- K/ I" k$ Q( c) Sfunction toDecimal(hexNum)
! z' I. k  Y* b+ Y# i( M2 f% g4 {{. ~' e  H8 d: T% z' m% @
           var tmp = ""+hexNum.toUpperCase()2 Y0 S" p, B  q5 b1 O
    while (tmp.length < 6) tmp = "0"+tmp3 M6 @# E7 O/ C& Z" w6 W  ^  [  U
           return ((deHex(tmp.substring(0,1)) << 20) +
$ V  `: z' A) B! \0 q9 x+ Q                   (deHex(tmp.substring(1,2)) << 16) + ; s! `7 V1 ^8 r, u$ _2 t
            (deHex(tmp.substring(2,3)) << 12) +$ Y/ ^1 G" h' x  g3 G1 q
            (deHex(tmp.substring(3,4)) << 8) +
3 b+ _+ N6 d5 v5 [6 g) L, y$ c; _0 O            (deHex(tmp.substring(4,5)) << 4) +
% L2 h: ], \6 k1 C4 \: E% v7 ~/ }% L                   (deHex(tmp.substring(5,6))))
& X, V& p; L2 T' j" Y}
3 ]$ L( d4 D0 z& X///////////////////Shimmering Links/////////////////////
" K& i# N- E2 d. G; H  q7 P; H% E//global variables5 a6 b3 G1 e  D7 J5 l8 Q4 P
var hoverColour% R4 ^: V2 j1 k9 L- K+ [
var numLinks;
1 n" ]8 K5 ?1 ^( Gvar rate;
& h, W+ L5 V: L1 q8 z3 jvar numFadeLevels;
- Y, k8 ]  K1 h4 t  t+ X# Z: R/ Dvar bgR;) @0 C; X7 Z+ m1 A$ z( i" I
var bgG;
! M; V" s+ @- }, gvar bgB;/ I" P! O! D% y4 m  C" E/ O; z
var currR;# {' o5 [' ?. j. `* [! F
var currG;7 e7 ]  k- F' ]" O7 g
var currB;  G# H" H' S' z( }
var count;
$ K+ S6 r. c. ~var fadeOut;
4 ]( @1 E- P% vvar continuous;
5 ^5 J! m  {2 x4 i* `var newColour;: ~) B$ k/ P, B% I, A  v- {( U- N2 t
var tID;
" m' O3 l2 ~4 n. U3 }3 c- i3 Qvar redInterval;4 @2 l, s+ X, s* \9 [- |8 ^; {, q/ n
var greenInterval;
9 m3 _% J% `: L( t- t" @var blueInterval;& x9 ?7 y4 p8 x( ~" q' N
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" M, T0 V1 q3 F4 r, S3 L1 f' }{* w) B1 H  B% C3 F; v
        hoverColour = mouseOverColour;5 h- f  ], q5 V: v& d
        numLinks = numberOfLinks;
8 O2 y* q8 y/ w, ?; z8 z2 I; ~        rate = 1;
5 z: k, b5 H' a: G: T+ y+ Y        numFadeLevels = 30;! c9 X5 F. u, [) ^
        function initArray(theArray, length, val)
1 U7 O- [1 B- n1 Q4 |* G        {
( o9 Q8 c  E. V                for(i=0;i<length;i++)
* C# t$ ]4 E! X, V7 S                {
- t9 \+ Z* d! P8 C. X                        theArray = val;! u! a# B' G6 r
                }
) E7 ]+ S8 J$ w6 S        }
  k/ a/ l$ D7 K; m+ N# q1 B        bgR = '0000' + fadeOutColour.substring(1,3): k! F) d! ]: }
        bgG = '0000' + fadeOutColour.substring(3,5)2 u  l) n2 O* x; b0 S* s
        bgB = '0000' + fadeOutColour.substring(5,7)  k, P% {: F) t+ C% R: k7 e) F
        currR = new Array(numLinks);5 f; o+ B% F" c/ T
        currG = new Array(numLinks);
$ e! s9 V0 r6 _, L* _3 U9 u        currB = new Array(numLinks);# H6 {: P" _% u1 K; H- X! l" F! S: b  `
        count = new Array(numLinks);
. O7 F5 {/ s: a6 ~        fadeOut = new Array(numLinks);1 y' }7 d% i1 A
        continuous = new Array(numLinks);
. \" M+ F; Z7 X. r3 }        newColour = new Array(numLinks);" ?% v1 g9 ?0 _
        tID = new Array(numLinks);
% e6 U9 s1 z7 o8 \+ _5 ~        redInterval = toDecimal(bgR) / numFadeLevels;
2 H/ J! L0 Z- s& S+ q        greenInterval = toDecimal(bgG) / numFadeLevels;) g, x" `) ]* A1 F2 V
        blueInterval = toDecimal(bgB) / numFadeLevels;9 g1 k- T7 m* a+ S$ }- X  p$ N) d& j
        initArray(currR,numLinks,0);
/ |2 G: {, O5 d* M1 ~5 [        initArray(currG,numLinks,0);. \0 T: Q! p* B1 c0 t; `( i  c+ G+ }
        initArray(currB,numLinks,0);
7 l- d2 ?5 z' H; O# m5 K        initArray(count,numLinks,0);+ m, W& c( l4 }7 y, p+ {2 e8 @
        initArray(fadeOut,numLinks,true);
4 n' A8 S/ |5 `        initArray(continuous,numLinks,true);
: e) L- d9 L7 s9 m}        + k6 Y; S7 ^- D8 D! w  T- l
function startFade(id)3 e$ Y7 L, T# N! o
{
0 G& K! O: ]3 ~6 x8 [7 |, |! `9 }1 Q        if(fadeOut[id] == true): H# `9 N. u' [% o* A+ o- L
        { /*move colour towards background colour (increment)*/
3 q1 N. q" P2 [# I9 O( m7 h$ W: P0 D' k- ^                currR[id] += redInterval;
; B5 P3 `1 k; A                currG[id] += greenInterval;
! _: z' o3 `, w5 U" q3 w' t                currB[id] += blueInterval;
# m; _5 ?# A: X6 l  ]4 y( Y- R                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 E# I: L  e2 o6 D- F
                if(++count[id] == numFadeLevels)/ M0 G7 k! Q) U8 {
                {! W8 z; o5 m4 z) U+ a
                        fadeOut[id] = false;
5 t, t; E+ p: _* B                }) C! z( b+ r0 `
        }
% [9 O8 J! ]7 J' T9 R$ L        else7 o, y1 V; A. X( K: Q" _
        {) }! z* S0 s! \, U
                currR[id] -= redInterval;
( J5 W% O2 F1 e2 k( b
& z# ~) h* v. \9 ]9 R- }" `                currG[id] -= greenInterval;
0 P6 ~! f( b2 K/ T& q2 z
) x8 U0 i, B6 e8 u- ~# k2 c; Y                currB[id] -= blueInterval;5 F# D# F' u% j6 Q# T/ P

# W0 r! W4 K& n9 ~3 s4 ?, P) [                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 k8 j& n0 `; s4 f- |

3 a  ]2 K, W) s# {+ h                if(--count[id] == 0)
, X0 [; |( M% T' ^# g' Y  S
; j0 V; }# P/ ?; y. Z5 V                {
6 `$ C# H- Z+ h  W- K8 F% S, i: }9 Y( n. i8 b: Z! p/ @, F
                        fadeOut[id] = true;
4 r( e, \& ~! u/ ~
1 j) p; M1 s7 d                }; l1 S7 t) y9 o6 K3 a5 m+ U0 F& ?

9 s& J0 I( C% _8 z7 m        }
8 x: w/ C& Q; A8 f  P
  s' m; u) W& M' i6 B        if(continuous[id] == true)
) I7 ?) p6 K- M9 \
( h4 W0 G* T5 r9 ~& j; T) e        {1 L1 E6 \) n+ H6 I6 J, H' X

/ l! K+ E. P0 h( P$ w                document.getElementById(id).style.color = newColour[id];               
" j7 k6 }$ ~0 a) z; Q- F. v) y2 t- Q3 B4 m9 h! h: \' l& v
        }
8 q% q2 k% l9 ^6 {6 ^
6 {/ H9 y' h& T6 r5 a        else4 \+ l# `: d2 P  F$ S. W1 w7 ^+ s

. P/ e* Q+ U3 y# X        {4 F; |# Q+ ?& p. o  j) V
! [+ M, e  L7 q$ K- N5 p1 T% Q& l
                document.getElementById(id).style.color = hoverColour;3 a( d) Y% B) y$ @. i

7 V( o/ t. ~- X! G        }
+ x7 k7 x, B: [; v) x8 B. o
- K+ L, v$ z* K6 E% Q        clearTimeout(tID[id]);; S. s5 A: ^% L9 c' k+ L* y

; }4 d) A7 [9 g6 `        tID[id]=setTimeout('startFade(' + id + ')', rate);) {4 D* ^5 I: Q* Z+ I" v7 G9 h) ~

* X  _# @6 p1 T0 A) `8 N}
& o; _; T: k( H6 t# a
: C% T3 l! b: J+ H7 @function continueFade(id)
4 b- w' L; n2 p8 s! \9 Z; p- t- {5 K3 u2 |4 u
{
7 I' G) B9 v0 g: B9 {4 O2 F+ G! ]& F( t9 ?& o" P
        continuous[id] = true;
" e  ^) w4 T3 c) F. `
4 |# W; D, B) L/ U. w}
( Q; x  y5 u* _" V8 n
' ~/ J6 Q. F( O3 m5 Ffunction stopFade(id)
) C% X, k% x; H* i
% s* O7 k* b; `5 x: f{
1 `! q: `% a0 e# B5 i
3 b# \3 d$ b7 P        continuous[id] = false;
3 u! u6 s$ J$ z- s2 w
) C! k! x7 j1 R" c}
) ]6 k- L& o# o2 R3 [
9 [7 D$ l* r+ F, ofunction StartTimers()
' c  f1 s* w  B& @% @- p) p, e' _5 u+ |8 f9 S  h# b8 H  [
{        //set up an initial set of timers to start the shimmering effect
% H" N& x# ?9 J: K* W# }8 f6 m  r0 z4 y2 I" |+ Y0 {
        for(id=0; id<numLinks; id++)! X( ~8 }" Q8 d! m% ^/ @

3 ^6 R2 y: o9 t2 r# C2 |5 N4 j        {
/ v5 M+ K; t$ R2 T9 `, s
" T# U5 k0 e/ O4 a; h* ]! Z                t=setTimeout('startFade(' + id + ')', id*100);: P1 G8 }1 O; k

8 x: j; z  ?# b' V8 M( E; _        }
' {2 N; q  l& _6 |
7 {$ e8 M; ~5 o. w}* [6 }2 m* M2 p  r1 L6 _8 O1 n
& ?1 {  v  \: g3 N, m! |
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; n- o. v5 q/ d
" A* i' @0 Z4 ninitLinks('#FF0000', 6, '#FFCC77');
  [# ~  ]4 l5 o
3 i2 C/ j) y# m6 M//-->6 {8 h9 I9 I, F5 @7 W# [) q+ M! a
$ i: p- E( B2 t- i2 A! |5 E: y
</script>
/ Z% _+ _; s$ y" q<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
, F$ a- G2 j: V& V2 {, `</a>
& Q/ h2 |/ B. X* n1 f<br>
2 Z# |' Y/ e- Z/ W+ o3 p<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>$ |4 Y8 w3 e6 `. B6 h& ^
<br>) [& D& \- D& o5 J
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>. m/ d" v# z  @# q( Z! S/ v
<br>       
" O% D3 m0 S4 ]3 X; ^<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>& L- }7 j( }/ G2 r3 U: L6 b
<br>
5 i8 _& X0 g4 N, z+ u<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ ]- m; ^! m. e+ `
<br>
7 L- a/ C0 a* \( z<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
* i3 l3 S& }# x8 i8 I<script language="javascript" type="text/javascript">+ |- S1 _6 q. z- v( X5 \* d+ p9 J
<!--
* H: v/ C6 c3 \8 U0 k- y2 ]/ R+ _8 osetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
& n5 ]7 m0 Y, @8 ~//-->
6 X. a9 Y& _& f4 q" O</script>