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

zw2004

<script language="javascript" type="text/javascript">1 M1 K# ^) j9 E* @, k) `- r8 I
<!--6 l2 X) F, ?4 h# L2 k  P  F
// convert a single digit (0 - 16) into hex
8 M9 N" K7 I8 vfunction enHex(aDigit)
6 N0 j, x- D* K; c( @* B( h{
0 n3 ?8 R* P9 ^: ^    return("0123456789ABCDEF".substring(aDigit, aDigit+1))1 @6 M8 f6 U+ C- `3 Y4 w
}
& p+ _- s  U: ^  l// convert a hex digit into decimal
* ]# P! `) M+ d+ J  @+ Z: f! O" u+ Vfunction deHex(aDigit)
8 k8 d! T7 X, t+ {9 D# v{
1 p9 }4 J. V2 Q( b7 {! E. y    return("0123456789ABCDEF".indexOf(aDigit))& j# P, n: n/ q# A
}
: ]; D0 _6 ~* s8 I: k( k
: ^* G6 n) j! i8 }3 Z8 L// Convert a 24bit number to hex% x1 p6 D) T3 T; p6 K
function toHex(n)! E3 c9 ]% H+ k/ G
{; @) C( c. U$ ?: e9 E7 m  F2 E
    return (enHex((0xf00000 & n) >> 20) +
7 I" J; ~. r+ r9 r3 ]0 M1 ~' s" N            enHex((0x0f0000 & n) >> 16) +# B6 ?5 q# y# k7 V! n7 E. d
            enHex((0x00f000 & n) >> 12) +
3 Z  @; F7 Z% l, N3 ]& r            enHex((0x000f00 & n) >>  8) +: i$ S6 d" H) c0 I2 C) I5 x# J1 E
            enHex((0x0000f0 & n) >>  4) +7 x! C# j* {+ D1 v$ E
            enHex((0x00000f & n) >>  0)), o- g; a) E# S, I! m& u, f; ^9 v! a: J
}5 f) j' a- ~* U5 r
// Convert a six character hex to decimal0 v& x% c0 X1 E- f: J  h( S
function toDecimal(hexNum)
: B* r; O8 T% p, {{7 z  O  ]3 C/ x& y5 w  P$ Q. |
           var tmp = ""+hexNum.toUpperCase()
5 `5 U3 P/ L+ J, I. l    while (tmp.length < 6) tmp = "0"+tmp
6 a8 Q) J9 m9 K0 r* d3 ?1 C9 J, D           return ((deHex(tmp.substring(0,1)) << 20) +
% Y8 Y/ A/ ]0 M0 e9 w                   (deHex(tmp.substring(1,2)) << 16) + 1 r% j* r: L2 I# P2 R& r
            (deHex(tmp.substring(2,3)) << 12) +
+ G  y6 I5 E" R            (deHex(tmp.substring(3,4)) << 8) +
8 R1 a% W4 D. g4 H! d            (deHex(tmp.substring(4,5)) << 4) +
/ J" v; R5 l0 Q4 ]                   (deHex(tmp.substring(5,6))))
: f7 y0 U+ D1 n}
) A4 _/ k1 Y7 G- Q4 X' q# Q///////////////////Shimmering Links/////////////////////
, a0 g$ }3 ^  b" p& Q4 f- S//global variables
" e& ]& ]8 ~: a, n4 \" Yvar hoverColour! S; l7 {+ N6 k8 B! h& M
var numLinks;
3 b& J, a5 d" i, z* _% Cvar rate;! T2 d, a7 L4 Y5 W; Z
var numFadeLevels;7 [; Y9 s' X$ ?- q* L, L
var bgR;  Y% C  t1 K! S6 R* s
var bgG;, E6 ]% K$ R4 Y! k; J
var bgB;
3 V! U8 [7 p1 F+ Q) ^# jvar currR;
7 X/ ]$ K, ?8 }: I0 Yvar currG;; J0 A$ u) }( J& y. d- R3 m" t
var currB;
  U9 K  H, P* ?1 x! T6 D8 H  Cvar count;
! [: K, }" p' }var fadeOut;
, L/ Q: `% ~" t% N' {, f' uvar continuous;
2 E; @, Z' \, V* uvar newColour;5 H; D7 [: K9 Y1 C- j) e
var tID;" E: Y9 s, E3 w9 P& P
var redInterval;
3 C: y, v$ Z& O* Bvar greenInterval;
& q- q2 s5 i6 s- ]* H* x7 \. a" Tvar blueInterval;* O; J7 i$ L/ {4 S* ?( q( Y6 R% D
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
( n$ Y  X( X5 K- R, Z6 C{
! C. y: p4 D3 C9 r$ r        hoverColour = mouseOverColour;; ~, _: T! P7 O5 o3 K7 ^; T- q
        numLinks = numberOfLinks;
; j- k( G' M5 F# a/ a' `        rate = 1;
) t$ [- E* v5 I. h. T/ E) H" i+ `* }        numFadeLevels = 30;( A$ B  t& \) K  \
        function initArray(theArray, length, val)1 m8 U, u4 N# [. |+ W1 f# |
        {
( o7 z* B. l# n9 k) Y                for(i=0;i<length;i++)
! J4 ~: B# r) @" }. R7 k                {! a; ?, m! a9 _
                        theArray = val;5 ?3 h8 q. P0 T" _: y
                }* U9 T/ e3 h1 V4 ~) G
        }  z3 i' H6 h# o$ V
        bgR = '0000' + fadeOutColour.substring(1,3): X. ~/ ?; U3 O1 |9 l
        bgG = '0000' + fadeOutColour.substring(3,5)
+ m+ t$ s# ^& o- l7 B        bgB = '0000' + fadeOutColour.substring(5,7)! @: I3 `; O' V" L4 x3 Y" V
        currR = new Array(numLinks);7 |( I" l) {% }; Q
        currG = new Array(numLinks);( L# Z# _) H! D
        currB = new Array(numLinks);
7 P  N$ ?$ e) [8 e) L' u        count = new Array(numLinks);8 M# H- d  c) n# }* i; u5 P' E  E' E
        fadeOut = new Array(numLinks);, {/ y! u& _, l; l7 h8 D/ p
        continuous = new Array(numLinks);, W# g5 |; N! A
        newColour = new Array(numLinks);
2 G" O* i0 u: U        tID = new Array(numLinks);9 E1 o/ H/ S6 L: F$ e1 _  P
        redInterval = toDecimal(bgR) / numFadeLevels;
7 a  S: E" Z+ ~2 f$ \: D        greenInterval = toDecimal(bgG) / numFadeLevels;" O+ m9 G% l& D. \
        blueInterval = toDecimal(bgB) / numFadeLevels;# \6 `* S! @- M  j; c' I: S
        initArray(currR,numLinks,0);
6 E. M/ o7 o' l4 N# M5 K$ z        initArray(currG,numLinks,0);2 d. @  y* w6 |  ]- H" N; ]
        initArray(currB,numLinks,0);4 C1 L) G  w' {( g1 L
        initArray(count,numLinks,0);
! v+ u# Q$ Z# K; }. z% k5 K        initArray(fadeOut,numLinks,true);
/ s0 S: ]6 S( X& j5 b) Z        initArray(continuous,numLinks,true);0 F- f- T( O" X# S( g# T0 r
}       
# U! C5 |; ^) X. [function startFade(id)5 z1 i  ^' X, B: o. K# S! T# B
{
4 ^8 W# n. R0 p4 C' w) a+ o        if(fadeOut[id] == true)
6 _+ ?7 ]( S" s# f, Y        { /*move colour towards background colour (increment)*/
' T3 h% w# }0 l                currR[id] += redInterval;
, E9 ]' ~6 j" p2 I- Z                currG[id] += greenInterval;( W) y, i$ }0 s5 n4 N
                currB[id] += blueInterval;
  v& y& [5 i4 ?2 o5 g9 Z2 m                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: [! x# Y' H" @# B- J' g8 v9 K' r. x
                if(++count[id] == numFadeLevels)2 x% y/ v" S" h2 A. T# n3 h
                {
# {# {/ t. X; ^1 ^( X                        fadeOut[id] = false;3 a5 a4 p. c/ r4 N5 `- c. R! @3 |
                }
# f/ b; e6 ]) w% ~, @        }" g# f; u( D- q# H5 e3 N. L9 i, u
        else
& e- j" j/ d' x- J        {
5 P0 H. o" d9 D  H' }                currR[id] -= redInterval;
4 [  Q, w* d  o; X. n7 L' h2 m. ?0 W" V
                currG[id] -= greenInterval;% `$ l' z+ A, J" j% \. j% x
# _, t2 ?) l/ @
                currB[id] -= blueInterval;
+ \$ n% [2 m; G8 ~
( g+ m; K0 H+ r8 u: d                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 w" V) E) F# R# ]! R
$ e( d( J% s7 Y+ v1 ~7 Y                if(--count[id] == 0)* p7 K9 F1 p0 g" u8 C, Y

# h/ u" y! k# c2 p) i9 b( ^                {
0 k) V* j4 i& l6 }- v# X( k. n
9 T* k2 n* z- p/ G' \5 Y                        fadeOut[id] = true;) [0 [6 d! L6 Z* {/ N# @( [( |/ {
6 Z# Z2 ?3 y6 q1 A( T
                }3 h( p( X) R/ p: Q) J! I

# s3 y/ S# n! w. z( A, N        }
2 _# ?) `$ \7 t) C: P: [6 y0 i! M& j/ x& X5 f8 {! K" x% [8 o
        if(continuous[id] == true)
+ n8 A5 E: s# T( p5 ?7 H3 E  k6 s1 l8 h# X7 m
        {" e1 z5 E! D. D# I" X( I( L

' d  x# x: Q2 m# @% {8 ^) |                document.getElementById(id).style.color = newColour[id];               
6 K! B0 h* m* k9 x; ?) _  s2 O8 M
/ B! V8 O  Q. k0 h& c0 y1 {        }+ i% N& E; \; Y

. k& x) u% V! G: w        else+ G# e0 c2 m, a9 T! L
3 @. a3 n+ R9 n0 U7 \! V
        {4 ]5 A+ s) B% ^7 G5 y+ [
' b! G6 V. d$ t% @2 s2 `
                document.getElementById(id).style.color = hoverColour;
3 j( `& ?" D5 ?$ U; Y
, t8 R3 k( J! \1 ~        }
3 ^3 c: ~( h. T* T, s- H8 p3 n7 C
        clearTimeout(tID[id]);
& Z2 n' `; M+ @6 Z7 w0 u
+ P+ Q. K* k! I9 ?4 z2 C! q+ \7 U        tID[id]=setTimeout('startFade(' + id + ')', rate);
  K& Q# Q. D" y. ^
+ T) r7 I7 ?) v- S4 y4 M}6 K  T' i& v8 c& d

% ~2 I& ~9 \* X$ l2 kfunction continueFade(id): j) ^4 O% e; T" Q7 x& a  w

+ T* ~9 W$ R2 @9 @* C{) h- g5 @' y7 J2 u9 W! u1 a$ K2 ?
' |6 i  E; n0 y3 c/ J5 B) H" ?% E( w  ]
        continuous[id] = true;1 \4 b- H  p7 f$ Y
* P$ m2 [, G) S1 e7 o" f6 [
}
. ?7 ~/ K, [: I+ J
! {* x) t( }; A8 o9 Y7 S- Mfunction stopFade(id)
2 O3 l$ w2 W8 |7 y9 [" @4 m
$ m' `9 c2 Q* C& L0 _) ]' h0 r8 n{
8 I5 }5 U% Y2 L  ?1 p6 |" U: z) b3 ^: N8 q! x# ~8 z; A' ?
        continuous[id] = false;
8 e& G% D7 `* X. Y0 x1 S5 K, S$ g  N7 Q- o  ?- F
}
1 c4 C$ V  r4 k1 I" X1 o; T  T- g' o+ m. I1 N
function StartTimers()
% N1 k! g# L+ W( x) _& Z" M& n- l* o* i4 P& t  ~
{        //set up an initial set of timers to start the shimmering effect; l  h; X9 N1 |3 W; c! l

2 V9 S( v* L4 ]5 D        for(id=0; id<numLinks; id++)3 L4 E5 ?( n; z' `2 @* [3 }5 p
* [1 @6 Z  P9 r3 y2 r4 |! d
        {
. Z# t% Z$ y9 F9 q/ u2 N7 W5 e2 T3 @. S7 g0 C4 i3 A5 y
                t=setTimeout('startFade(' + id + ')', id*100);
3 a' }; |1 S( t! O% k3 L8 e) d6 r9 K' ]/ X+ c2 s, j  }0 Q" g
        }( t- J: G5 E# P* o

, q, I$ z  y" _% S, i}
; X5 N! ?% V+ s) s" n
) H! W' p9 @6 K7 L' M//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
2 T; R; {7 [# O6 x% i" @( @$ ]. b5 D' w4 L$ ~. P9 `
initLinks('#FF0000', 6, '#FFCC77');0 A% G. ?9 Q5 D) l( j+ T
4 y  l. D' E. z) I
//-->
5 y) j; S/ G7 [$ J$ g6 P; l: p1 S8 [1 G1 Q
</script>. D1 N2 ~3 ]% ]
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元5 K1 _) j: G. G/ f* Y
</a>! j5 Q% Y$ t6 m# h/ @
<br># H7 z8 x3 F0 [! X5 w9 E. p
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
0 F# L3 F; ]3 U  ~3 V<br>
1 {$ A0 E7 m" r4 F: x<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
) I) Y# x& A5 f- _<br>        ) m6 U0 O0 U6 A/ t3 Q9 [* m
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
9 c9 {3 h* T6 x8 [+ y7 f, O% a<br>
& C) U7 W1 d% n) v" D2 i4 l; H# u<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
0 R' t2 J5 z4 ]$ V+ Y<br>
1 v$ X; f5 H* v1 O; ~# M<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>6 G( ~) s# A  c' q1 M
<script language="javascript" type="text/javascript">
0 M; D' m+ w/ N/ V  K+ L) I. f" X' H<!--- X4 U4 y! A6 F3 e+ P* v
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* _$ ?+ U8 R7 |/ Q$ q
//-->
6 Z: g% a( \  }+ E</script>