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

zw2004

<script language="javascript" type="text/javascript">* ~) X5 l4 Z( |2 O
<!--$ b/ g" m& ~) L7 ^, C+ u8 |% Y6 _5 F
// convert a single digit (0 - 16) into hex. m2 u+ P- o/ o# [3 E- G: t! U2 W
function enHex(aDigit)' x3 h. w, H6 X1 P1 J! ^5 j, d
{
* d6 N2 k; a# v# \    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
% i( B$ a5 p+ e* W. x/ ^6 m}0 W5 l) }5 l! t
// convert a hex digit into decimal
0 y: ~3 S  K0 o& wfunction deHex(aDigit)5 a# t+ v5 j6 D* C2 L1 X
{
" N0 j+ p$ `9 P3 O3 n/ Y1 a9 b    return("0123456789ABCDEF".indexOf(aDigit))
  j4 `; T/ g8 B6 k}, _+ ~! _! e  c8 h/ x

1 ^5 R* u7 _' m+ |// Convert a 24bit number to hex; }2 |4 s$ b7 ?% X# n1 `
function toHex(n)
& h1 Q5 g- `5 o9 \# ?2 y  |, X{5 Z* L$ H2 e8 _! S: ^
    return (enHex((0xf00000 & n) >> 20) +2 _- q1 G5 D* \% f5 d# p6 c+ ^
            enHex((0x0f0000 & n) >> 16) +- f% l& a1 f5 p2 O# u
            enHex((0x00f000 & n) >> 12) ++ D7 C/ }. |& v
            enHex((0x000f00 & n) >>  8) +5 o- j0 T0 w$ f4 m6 ?+ f
            enHex((0x0000f0 & n) >>  4) +
% D: o" A/ T' L            enHex((0x00000f & n) >>  0))
- F  P! ?' S* ]& \2 X  X6 Q! r! G}: `2 k) [6 R0 u# Y
// Convert a six character hex to decimal2 G' k9 O7 L( s
function toDecimal(hexNum)$ p# z1 G! \3 p. m; {* M. U7 O! e
{3 u" m' H/ h# d% b4 O7 q% ?' M$ U
           var tmp = ""+hexNum.toUpperCase()7 n  {( k* M2 g/ U# G# t  e6 e
    while (tmp.length < 6) tmp = "0"+tmp; N* p" p( X! `
           return ((deHex(tmp.substring(0,1)) << 20) +! ]/ n* G( s1 @: H+ r) G& V2 s
                   (deHex(tmp.substring(1,2)) << 16) +
' D3 Q! k5 g3 c. Q: }( v            (deHex(tmp.substring(2,3)) << 12) +7 q$ J0 n* H& h( U- [1 h' k
            (deHex(tmp.substring(3,4)) << 8) +6 U2 H8 B6 i, ?& }# J. M
            (deHex(tmp.substring(4,5)) << 4) +2 k. J; |1 D* a' {/ O3 \& c
                   (deHex(tmp.substring(5,6))))1 ^6 H) e# h* _
}
; t, y9 d1 X7 S" x4 r% N: a7 G///////////////////Shimmering Links/////////////////////! B5 X, g7 Z: y4 M
//global variables
  x; Q9 k6 X( d# M" v" _( n- {! xvar hoverColour/ f- W" H$ @( c
var numLinks;
; s& a4 C9 ^  U: }  o1 ]: c$ nvar rate;1 a8 X+ i3 V4 Q  f. @* t9 l1 l
var numFadeLevels;! H1 H+ [  {4 d  ?% L& P/ U
var bgR;& t; t8 q! K' m# O- \
var bgG;7 [0 B- {9 v4 j$ @1 q: [+ q
var bgB;
( @6 O( |( p/ Q  ^$ z& E, pvar currR;3 a0 j) }! s- n% z" o" f& m/ }
var currG;
: U9 u. v$ w& w, Mvar currB;
& C! A* M. Y% h- }) F4 evar count;( M% i8 P. F5 d3 y
var fadeOut;
8 o: L& q2 F, w% |* I3 a# rvar continuous;# n! J; O6 p! z& B; s; t
var newColour;) C$ J, K" c. W" F$ [. c
var tID;
# Y, ^  E2 C' p6 K1 fvar redInterval;
( [/ R. q; y) K; p7 b, j" yvar greenInterval;
) I8 u' V: |" _8 S: W5 Y# `# xvar blueInterval;
7 u" X, Q1 h& `5 ^. b0 x% [) @function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)8 C( d8 U5 }6 w* n/ V4 D; r
{
" p- b; {0 [. ], V6 u* u        hoverColour = mouseOverColour;- \6 w+ B: F3 C  [
        numLinks = numberOfLinks;2 F4 l5 J. h3 H6 ]- O0 @* |
        rate = 1;: i: l8 _& t6 Y8 ^
        numFadeLevels = 30;
& h; k( X$ H- a) t1 }6 C7 B        function initArray(theArray, length, val)
  ]8 x4 C7 ^$ U7 {, V- o9 T) _' X        {  g8 O/ a! C: V# K  |( j: k' C/ V
                for(i=0;i<length;i++)' x( J/ G3 ?! W' t( g+ w, O0 Y8 ?
                {
' \* z0 I% b, D5 ^/ F$ ~* f' z$ M                        theArray = val;
8 ?1 H8 j, c; [0 X$ j5 ~& k                }/ C/ `% {' |5 v; G; x$ ?
        }+ F% [# d7 n1 [+ D+ o) @
        bgR = '0000' + fadeOutColour.substring(1,3)
, H; s. l" Q: e. I2 r: P        bgG = '0000' + fadeOutColour.substring(3,5)
' m' \/ F) f' v) c        bgB = '0000' + fadeOutColour.substring(5,7)
0 b$ A! O, Z4 d( D& ~        currR = new Array(numLinks);! b2 ~% {  O& @# A
        currG = new Array(numLinks);4 q8 ]' H* t2 }0 U% J
        currB = new Array(numLinks);
  k, T9 c  l+ D+ G$ A. H, ]  m        count = new Array(numLinks);
9 W2 F' _7 N' m2 v* D        fadeOut = new Array(numLinks);! C: y# C; C$ O
        continuous = new Array(numLinks);
+ D2 Q2 J5 ]; F8 A        newColour = new Array(numLinks);
8 n0 V2 R6 E9 M) F. u* r  X0 a        tID = new Array(numLinks);
6 t+ X. p! J+ p        redInterval = toDecimal(bgR) / numFadeLevels;
& P/ R% ~4 ~7 D        greenInterval = toDecimal(bgG) / numFadeLevels;& M/ D; r5 ^( w
        blueInterval = toDecimal(bgB) / numFadeLevels;
+ E6 J5 {, [* w) e        initArray(currR,numLinks,0);
$ `2 g; v/ W/ n) A) E        initArray(currG,numLinks,0);
) p- ~& ^  a( }' ]" R        initArray(currB,numLinks,0);' e; M+ C0 `. q$ z/ H" C3 w
        initArray(count,numLinks,0);
4 i, |* O6 V# H; O. b' R        initArray(fadeOut,numLinks,true);
/ m# Y, W2 o! K: p! S* h/ z        initArray(continuous,numLinks,true);
' T4 S# t6 D* x( g9 [}        9 H7 e' r) h2 {1 i5 }) a7 ^
function startFade(id)
5 r% _8 {4 U* R4 ]+ H' a! N( Q  N7 e/ Y{
2 l; z/ u2 z( S        if(fadeOut[id] == true)
. D3 X* J  w$ X        { /*move colour towards background colour (increment)*/
/ d8 w* t6 d; |9 [! ?                currR[id] += redInterval;, X1 A. x  h! L9 d( t2 v: Q# T6 t& m
                currG[id] += greenInterval;& K8 Z$ a, m- m* L
                currB[id] += blueInterval;9 U- d: ]& q1 x1 b& P/ {) s
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# H, ?- V& [, u4 \7 g$ m& i                if(++count[id] == numFadeLevels)
/ `! K( w: z! p6 `  |                {
* J: K# Z& Z: U                        fadeOut[id] = false;
$ w4 {3 e7 x, r0 N0 F- _: l                }
  V2 g# r" C& o/ V% P& \2 E        }
6 x; L- e9 y7 j2 M& K7 L+ o        else9 p) D& K* C- N3 X
        {0 W% T8 c7 a9 y( ^1 L
                currR[id] -= redInterval;$ N; T0 ?  M0 @5 G+ f! [; X

4 a: h" }2 _5 j1 A3 b' \                currG[id] -= greenInterval;
3 L5 M- M" f+ L! q1 n
) u) x) g% p( l* e: E6 r; Q                currB[id] -= blueInterval;- i% z6 e2 `% Q0 m" F
) x$ A$ _5 }$ J0 T( i/ ^: W5 r
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, Y  _, g5 E- m, r) @2 e
# T/ u% \8 c! t1 n                if(--count[id] == 0)
- e. `8 M& x8 n- \6 M
+ q" Q$ C) v) W- j3 N                {8 G- x' A4 w% D/ j) R$ R/ I" o

1 e( [3 J4 @9 ]) w/ s                        fadeOut[id] = true;
* {. \2 k; G% l3 e3 p3 [
8 K8 U) E, e0 @$ U' p# `3 u8 s$ T                }
: Z! f2 R& `* G
5 t/ K- L8 S" Q9 \' B4 O. ^        }* f, a4 c& C5 m' @- Y
; @: ]; v% ]# J8 k  I( G
        if(continuous[id] == true)
1 w9 u0 i& h  Q. \8 `7 p3 E# E. a; g
        {. I8 O+ Q3 P1 M- U1 ]% Y) D

+ x& }( a4 P& q- j- d8 ^  p1 H                document.getElementById(id).style.color = newColour[id];               
% V( ]7 j; _0 z
2 U, x( m5 K+ q$ e- `) |        }: K* i* x# a5 A: L$ o, C: R, T

  ^: B# G" L2 B! m5 \        else7 c2 `5 N1 Q) V( ~% Z2 G: o) \/ Y" h

; w5 L9 o8 a& V8 |! T( |        {
4 {0 w' K. {/ P* W4 I' c1 M
8 W- C# N5 K4 s                document.getElementById(id).style.color = hoverColour;
1 M% K; F* J& h+ X6 D# P& J& A
" A5 y$ D+ w( R4 _4 a$ K. e  S/ C! W* U        }
& W( m: P1 U- L* X/ m/ k9 {. _+ Y2 O* b
        clearTimeout(tID[id]);" ~' y) b$ x% y. M1 A4 w8 o

- A4 y0 z2 G! P        tID[id]=setTimeout('startFade(' + id + ')', rate);
, F/ r  a# d: h" S; v, w) B, A4 W
9 B5 e2 s$ }6 y8 e3 g4 o3 ]3 C4 E9 P! `}2 b& Q. b5 b7 C: `' e/ g) o
5 R1 Z. Z% ~; D" z
function continueFade(id)' O! n! j) `5 r, [4 Y) k5 r3 _% M2 m
+ E9 u8 J0 d" Y8 |+ U# C
{9 [6 Z. m, m1 \7 v( E! f6 M

$ I! I. o7 N9 Q- k. e        continuous[id] = true;
6 q: }& ^9 {% O4 h  l. H" K& Y' L1 J
}
4 V( T  D' R" Z4 ]1 n. B9 A8 q9 |9 [5 W- f# X, L
function stopFade(id)
5 h7 ]! c6 B1 q- ]# Z6 ]+ X# G3 R; ^6 N! l. ~8 d( n3 \" J
{7 F1 g! f- p; q* p5 p1 o

- ^9 H) ]+ E* p        continuous[id] = false;) E7 u% V9 m# B+ T" X6 R

; T+ _# g) m; s}
7 C' r! g5 \* v$ I- S& }+ E" ]" v* E7 U: W
function StartTimers()1 [1 D# N7 k0 U* k* @
, u5 r% a. ~% Q5 R+ t! r8 `
{        //set up an initial set of timers to start the shimmering effect
, f: i2 P8 ?& V: i: u' V- @8 ^& E
        for(id=0; id<numLinks; id++), i" ~/ E$ Z0 }$ d) H6 q* H

6 g4 c* E, [4 X4 h) P  i# J        {3 U% ~: K0 P& k6 r* ~
0 k" k/ X6 A3 S* K8 D3 A+ M
                t=setTimeout('startFade(' + id + ')', id*100);
  S9 I3 u- `$ E# P- _' K1 \6 j/ C1 j: z/ u! w& U
        }
, r1 R" b9 l  x8 t2 X; c6 N! i' z0 f: B
}( o9 s- q7 N% R7 X; Y

! a; F- y2 }* r. E/ j" P//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')( C, S# T7 v; H6 q; I  k0 ?

4 y% q) {2 S0 K' N, c1 l/ z  U/ w' einitLinks('#FF0000', 6, '#FFCC77');& E% j& s- r$ R) L

: P1 R6 Q  Q/ k! D; ~' ^//-->+ N' v* Y6 U, N- [6 p5 k

6 ]& K, G% [/ K$ S</script>
7 `! ^6 E' i" Z1 C, L$ r<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元5 g; o0 f. f% O* F2 J% T
</a>
$ v* M" |+ \# o; O* ~1 j  ]<br>8 u# C, y% M7 m5 a; r" v7 ~5 i
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
$ f0 s- |4 y( O; k, @+ G<br>) k% ?9 y0 J! f+ w8 K9 h( f
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>. F7 }( X$ G& d$ X' p
<br>        ( p0 O2 k5 p9 W+ ]- Q5 E$ g/ `" y
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>, v* `3 c2 {( ?' r/ c' H, d
<br>
6 Q; \3 D' `3 b# o8 s<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
8 w$ u/ X' Y+ b- x/ |7 U+ A  d<br>
4 Y: X6 Z: J' C7 p0 x<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
$ D, v- _1 T  @; |<script language="javascript" type="text/javascript">% N: @  y6 p  |' o! Z3 Y
<!--  O. B0 ^# \9 m& h& K; Z
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering! K  O, u2 J+ i# [) q. N# n
//-->4 Z) E" U1 b9 w- {
</script>