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

zw2004

<script language="javascript" type="text/javascript">
, a: I" t% Y" w# g8 b& e( u) R<!--; l6 [3 z- i5 |+ {' Q1 G( |+ R5 n3 {# k
// convert a single digit (0 - 16) into hex/ F! E& a. ?, P$ P
function enHex(aDigit)
3 y* S7 ]: j$ \6 D0 @. e{7 m' Z" g0 z6 j# k
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 `" x1 j% B8 T4 ~; Z9 B0 x
}1 ^7 M( I9 b3 ]9 t
// convert a hex digit into decimal
) K4 n, s4 E, j" hfunction deHex(aDigit)6 c# a7 v& @( h: f! [& D
{
. o* y- d9 ?8 h2 U! f" o    return("0123456789ABCDEF".indexOf(aDigit))
2 y/ \9 o( p& l2 x% U. N}
7 w2 V$ e- ]  K% z- f4 G4 e/ g% A. x$ V8 m5 B# D0 J  v* A) K
// Convert a 24bit number to hex
2 x7 j0 X4 j9 P5 z# t! Ifunction toHex(n)
4 {/ t9 i3 M, D/ q2 q  a) t4 C2 h0 s{
3 @* A2 G3 _' t    return (enHex((0xf00000 & n) >> 20) +  Y! S2 x, A7 b) O' o
            enHex((0x0f0000 & n) >> 16) +  R6 ~: s3 @5 L0 d: ]8 A- T
            enHex((0x00f000 & n) >> 12) +
1 p# H7 C2 S! ~- _  T* e            enHex((0x000f00 & n) >>  8) +
0 V" i6 e( N' Y- f            enHex((0x0000f0 & n) >>  4) +
! X7 i2 Y- {/ X4 g            enHex((0x00000f & n) >>  0))+ z1 ^- n7 ^/ k# N& \# [1 p# B
}$ o  E# Q# @  c
// Convert a six character hex to decimal. v: _0 l7 j+ |5 Z4 P6 L
function toDecimal(hexNum)% h# u& I7 N, L4 K
{- x; [! H& V: C, C) b; k  I; O
           var tmp = ""+hexNum.toUpperCase(), ]5 Y; }& G) a* l
    while (tmp.length < 6) tmp = "0"+tmp2 I9 X0 ~: c/ q: @9 d
           return ((deHex(tmp.substring(0,1)) << 20) +$ S. {* @0 P2 O: A% e' D
                   (deHex(tmp.substring(1,2)) << 16) +
/ B4 ]2 W( C- q3 T            (deHex(tmp.substring(2,3)) << 12) +
* }4 u1 r  p' s. U3 ~/ y            (deHex(tmp.substring(3,4)) << 8) +
; F  b$ ]+ ]! S# ^  ^  e) S            (deHex(tmp.substring(4,5)) << 4) +& n7 E* P& c4 o2 U- N
                   (deHex(tmp.substring(5,6))))
% d; n( G9 R4 ~! m, b  w9 t: h}
1 g# N+ y/ n2 j$ k5 m8 v- _///////////////////Shimmering Links/////////////////////
+ {) [7 H/ P7 v) g//global variables
# R6 a7 J% q: L! o% qvar hoverColour
" Z. b. e2 g9 L3 n+ q4 U1 W. dvar numLinks;
/ l7 ]3 D9 _1 J" \* f" kvar rate;" M) ^- }+ A! O, }/ `5 X+ V
var numFadeLevels;! Y- M0 u" D0 [" y
var bgR;( F( J' P2 {6 o( D) Z8 W  a
var bgG;
, F' b  `" I+ p2 b0 ~# \" Y& svar bgB;2 N8 P# M/ X5 r( L! c. }3 r5 J; i8 t& K
var currR;
% g5 [% d0 s$ ovar currG;- T4 y  B/ g2 |, v: F
var currB;# m( h7 o  Y4 ?. L$ J; T0 @: }" O& d
var count;
' R& h0 o+ Q4 w: O3 J6 |var fadeOut;$ |2 w6 l+ H: ~, S! P* s
var continuous;+ s  p  e0 I( c- Y; G$ C
var newColour;
9 O5 ^9 q6 P9 S! ~var tID;6 M( o1 Y4 a; G/ Y* I* `
var redInterval;
$ q* Y: l9 r2 p9 j/ H  G; J5 W! X, gvar greenInterval;
' k6 ~) J, S* ]/ xvar blueInterval;. N5 G. p% P/ h8 j1 E$ }7 j# r
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour): T2 k/ S3 b$ x5 R
{# o* w( ~( V' w# E% j
        hoverColour = mouseOverColour;, h3 K6 N1 R4 U8 ~; {. X
        numLinks = numberOfLinks;
5 ]9 O, k9 R# {7 j, H        rate = 1;
" `+ U6 [1 m( g3 e8 }& d* ]1 K8 s        numFadeLevels = 30;
! @# Z" [, h8 \/ x1 R% z        function initArray(theArray, length, val)0 M3 [% ~0 t* s3 |
        {
/ Q  Y; A! A0 E, v5 I% O* j                for(i=0;i<length;i++)& r' A0 U# i2 N% M; Z+ D$ o) A
                {7 I+ y$ T: C& s2 ^
                        theArray = val;0 e1 V. g1 c$ B3 T0 m
                }
2 {8 y3 ]: A& j: B8 f; u2 J$ s: ~        }
8 S' d2 v$ b5 q; a+ \        bgR = '0000' + fadeOutColour.substring(1,3)/ W4 J1 Z/ N$ n6 R
        bgG = '0000' + fadeOutColour.substring(3,5)4 r: \1 ^3 A$ [/ P+ T/ `- P
        bgB = '0000' + fadeOutColour.substring(5,7)
% f* k, P& }! M' a; I/ W' C5 u        currR = new Array(numLinks);$ g  ^" w8 i; j3 }5 o+ m
        currG = new Array(numLinks);
; o. v$ x8 v! O( ~2 ?        currB = new Array(numLinks);2 r2 d: _. Y0 \5 Q" L& z! a3 ]
        count = new Array(numLinks);
& @7 z8 [" W- m. H6 X7 ]0 w. Q, a6 y        fadeOut = new Array(numLinks);
4 s* S/ v0 }$ x' B        continuous = new Array(numLinks);
! |1 `9 b- D, C! |        newColour = new Array(numLinks);' o* J% u  Q3 C& H' H& }' ]
        tID = new Array(numLinks);
' Y% E3 a3 J- f  G: U- l$ z0 {/ F        redInterval = toDecimal(bgR) / numFadeLevels;
. V2 ^* W5 A8 i        greenInterval = toDecimal(bgG) / numFadeLevels;
2 e) s, e- i' j        blueInterval = toDecimal(bgB) / numFadeLevels;
* U5 o1 v1 L8 w  |) E3 F1 T. u' F        initArray(currR,numLinks,0);3 {# J, b% ]% j) X
        initArray(currG,numLinks,0);
6 o0 Z9 Z' S' c- a/ O+ {- H        initArray(currB,numLinks,0);% G0 t: C( R  F+ P
        initArray(count,numLinks,0);
3 G5 q, I5 c2 z4 O; g5 c        initArray(fadeOut,numLinks,true);2 F1 j8 q1 b3 p1 h/ E$ b; {
        initArray(continuous,numLinks,true);
+ a6 ~' y& n8 j9 \4 e}       
* E* ~- f  h3 `2 r1 g5 h4 ]8 F9 Efunction startFade(id)" [8 ]* w4 b. I# C# {& C
{
! |) x% t  M' P, ~# R' b. T0 X# ^        if(fadeOut[id] == true), }- _! v' D+ a8 @+ w9 _
        { /*move colour towards background colour (increment)*/
! c+ e9 {6 @+ t" l. O' S6 X, X                currR[id] += redInterval;' J1 p& J1 E5 `7 M7 O" R
                currG[id] += greenInterval;
; x) k% W- A  L# ~                currB[id] += blueInterval;
2 E3 P# {1 _/ [! x                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 I7 g# Z. I, l  p2 @/ |: \. Z& I6 N                if(++count[id] == numFadeLevels). X- Z( v( p" D
                {
- _9 L- X1 C) H: ~1 Z& R                        fadeOut[id] = false;8 I5 r: _3 M. D: Z6 Z, `+ X' Q1 y
                }
: g0 K; i, p# u$ p( p        }
& u$ H) b+ {+ I$ x        else
3 k1 n1 O1 G( V) J# n1 B. j) A        {) E# d1 }4 z0 f' j) l
                currR[id] -= redInterval;  {$ U$ K% K3 P( {3 o
5 O/ G+ t; e" Q" Y/ G" d
                currG[id] -= greenInterval;
- z0 Y' E# [4 S. d. b* I/ x( i8 P( I4 ?' X2 w
                currB[id] -= blueInterval;# v6 m( s( }3 [7 t* v( |$ _, r

, p. \' z% A1 y1 J! U                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, T3 ~" ?3 }* o8 H0 e+ }" }
7 m5 z6 a1 {/ r3 Y0 i                if(--count[id] == 0)
! A1 E2 _. W- o- b9 [; T- z' F( I/ y1 }1 ~
                {
' g2 _, N4 S- E# c5 D8 b8 y" u  e- f; m" I* J
                        fadeOut[id] = true;
) k# B. @) Y# F& P1 i
' k# o( u% D9 W, o                }
, n, u* T! p2 z8 e. Z1 s" t
, `! a0 q0 x' u; O) o0 H: O        }7 a9 L, Y# w  q' \

' ~' t7 r9 y9 f: J$ A' p3 l        if(continuous[id] == true)
+ f! M& V. W" E6 K8 e# }, m# o* O: y* M7 U
        {
: v. F% K; |- P7 g/ }0 {! a! K6 |+ g* D9 `4 G
                document.getElementById(id).style.color = newColour[id];                - A5 @) R2 F& R9 z5 {9 |$ d

; s8 ~7 S; H' X2 F3 `# P        }: u, e  c9 r! C' B3 @4 Y2 k
5 _% Q3 }/ |' ~% j  e
        else
) h# ^" ?' d. B& Q/ i0 ]2 a' d2 \
2 N0 j3 G! S* t        {
% c/ M5 B: ^2 {  ]/ _* n3 s
8 H9 v9 x, h' a& f5 C! B                document.getElementById(id).style.color = hoverColour;* C# I* K+ _7 p2 I. |
) b  d1 I" {4 ~$ H: l% o, W; b$ r
        }
% N6 T3 F6 J, c+ ~! x$ R: N, k+ d& T5 R/ a* h3 a. z
        clearTimeout(tID[id]);
% f% O. m* A& _; ?; i  a- a) G3 z- j, k# L
        tID[id]=setTimeout('startFade(' + id + ')', rate);# x# f, S0 A5 S( t0 }$ }" x

( F! F* a. V  t4 p% h}  Y7 _- T4 }' O0 }

! W8 Q; T4 t+ |5 A! D: L, z6 R6 Nfunction continueFade(id)8 m+ r. v* J/ H

, Z9 Z7 y% X" n5 Z0 K* Z- E4 Y) l$ ]{/ A! Y$ V; y9 i9 Q

+ x2 R- Q3 _" {; W; o, q9 H        continuous[id] = true;
3 N& }, G4 B9 e( L/ ~
4 N8 c) w" w6 z7 h}
$ U  |" F; z4 X0 j, t: M# |% Y  P. M) v- P, ~5 V
function stopFade(id)- k8 l& G2 M! L+ h" F% c: o
' O6 z+ V! g/ E0 ~) J% S: I
{
" y# y% d# P8 {, U/ w/ ]) f# \% I4 R: h$ i+ `
        continuous[id] = false;
9 D  b* S( X9 i5 J$ P1 p6 _9 l; G3 g  k& P* f
}
) p2 ^! s8 {  H) X0 F& E  u5 e+ O' j6 V
function StartTimers()! ~4 V8 w, L; S
7 Q  l5 ~# r/ b/ z
{        //set up an initial set of timers to start the shimmering effect
! A; |  f5 x! e6 [& p3 T3 f7 P: [+ V% r7 }; X: r0 m  X* q. J! k
        for(id=0; id<numLinks; id++)2 }! z9 s. f. s- m, {8 w
, _4 K* f# ?. S8 t$ P
        {3 S; e8 K: Z$ m* o8 ^& I3 X
& q& c- _6 q6 r4 P6 X
                t=setTimeout('startFade(' + id + ')', id*100);) b  D) n; q: k5 I

* z! M7 V2 u8 x; ]0 n        }
" U8 H5 S$ K) f; V& @9 a
5 ~' ~3 Q9 S  A# ~' {}8 S+ i+ C6 N% k0 E
" u0 q4 R* D5 Y2 G6 [5 c- B+ ?
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 j7 h0 c% ^1 j( H
1 |) @8 U) a* {0 o$ H
initLinks('#FF0000', 6, '#FFCC77');( X/ ~$ W  r3 u8 ~  h( e/ M" O

* w2 V' L( X4 E$ Q$ j8 T' P//-->) c1 P3 b6 r4 p- D6 U2 `, M

( k% N6 v" n6 ~+ f0 K9 `/ h</script>
6 {9 L& O) o5 T, ~) U. o<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元9 b, K8 O1 G: J5 q; E- I
</a>
9 u- e3 q9 L8 a8 y1 @<br>" M& q$ `0 s( W9 f, T
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>: E' f% q( K3 @# |/ u* m% @" A
<br>
0 j2 L% j0 ^+ s. r5 R$ |3 D4 @' p<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>. Q/ O" R6 c$ ]. A1 j1 j/ O
<br>        4 v$ ^  S$ n+ H$ k$ B9 }/ V( P" |
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
2 w( _. F+ r  }8 Q1 ?! _0 w<br>
* l. P) D8 R, F<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>& S; v6 d* k$ ]$ Z' h7 b" b
<br>! S0 p8 l, _0 c6 S( F& r+ Q
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>! U: l; h0 T  Y+ _
<script language="javascript" type="text/javascript">( o2 {5 ?5 H7 w+ z
<!--9 Y4 O( a, k0 S- q: Q% o8 q" h3 y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering, I* c4 v6 |: l9 t! {
//-->. j- z) {! c0 L( {$ L
</script>