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

zw2004

<script language="javascript" type="text/javascript">
3 P( W1 [* \  P<!--- j, U1 F; {& S- a0 s6 `! X
// convert a single digit (0 - 16) into hex
: W* @' T5 k4 ^+ pfunction enHex(aDigit), m/ ]' N+ p$ p3 \
{4 ^( d4 ~5 T( }& Y* ~0 @+ J
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
8 @% x8 d! n$ C: u}0 R" k1 I: _6 U5 E
// convert a hex digit into decimal
# S6 w! C( k3 l6 tfunction deHex(aDigit)) r) V0 \# v* ?
{
# ?! b! h9 q+ z9 b$ h. v    return("0123456789ABCDEF".indexOf(aDigit))* G4 f, ?. v. Z4 _8 ^8 B
}
9 N  a5 ^% }3 Y# W9 F# u. i0 m& [  e
// Convert a 24bit number to hex) v" e$ h* h1 {; ?/ q
function toHex(n)
: q/ Z7 |8 o% k8 m6 p' I{
% h, b' u; W& w9 y% [    return (enHex((0xf00000 & n) >> 20) +( L* R/ q! t+ V& Z# @
            enHex((0x0f0000 & n) >> 16) +7 p6 g7 W1 v- `
            enHex((0x00f000 & n) >> 12) +% e0 v1 k! T4 p! L
            enHex((0x000f00 & n) >>  8) +) e; R* v1 M# ?0 }0 W
            enHex((0x0000f0 & n) >>  4) +
) ^" t$ L6 D6 S            enHex((0x00000f & n) >>  0))
' }5 S8 b5 Z& \4 C}+ w( D' H7 I8 ?2 W" E2 ]" J
// Convert a six character hex to decimal
# Y9 Q, s* {5 w" n" R, o" Xfunction toDecimal(hexNum)
: Q$ `6 b5 \" U4 a% k" g{
; v9 t! H5 J3 ~1 K           var tmp = ""+hexNum.toUpperCase()
% f) l' _9 ?# G' Y# T! K) }* @    while (tmp.length < 6) tmp = "0"+tmp' U$ [2 n5 w% p" H+ o5 U
           return ((deHex(tmp.substring(0,1)) << 20) +
; o1 [9 h2 V% A" h# @9 l# g- {1 b                   (deHex(tmp.substring(1,2)) << 16) + " K* q  {6 D! \, B0 T" T# G: U* A
            (deHex(tmp.substring(2,3)) << 12) +1 \% v8 P: [0 |. j4 I
            (deHex(tmp.substring(3,4)) << 8) +- M0 C/ g: b* |, Y$ _9 r0 O) M
            (deHex(tmp.substring(4,5)) << 4) +1 F" s! r. Q! v- P3 A4 N
                   (deHex(tmp.substring(5,6))))
/ ~$ f9 r5 r3 J1 x' y; B}
! d+ F9 G% ~% F) [6 }///////////////////Shimmering Links/////////////////////
' s2 o( M! w  f# I//global variables( S3 a' P1 h0 U$ B
var hoverColour
; W+ V6 ]7 H4 k  w: Evar numLinks;$ J- J5 }# L4 d. u& ~, s
var rate;
. j: o/ U" C% vvar numFadeLevels;
: @$ ]6 B) r. U$ `, vvar bgR;4 j6 S" T9 @! g5 @
var bgG;; G7 G) w7 ]( g3 U( K( n3 V1 F* ~  @
var bgB;8 W6 W/ c. {3 @8 l+ \% g
var currR;
/ {4 A0 T) T6 X7 yvar currG;
: Z5 ?/ {' x; I5 Z# t) D/ Z/ C5 `var currB;8 t! q0 y8 {' N3 }
var count;3 _: P/ W2 o( ?, `
var fadeOut;
/ t' m: \6 ~% M1 `( g7 Ovar continuous;8 V& T" p$ {3 K6 j
var newColour;; \1 s8 E" Y0 q8 @' B0 q- L
var tID;2 D; g& w( c7 Z6 J9 x& u
var redInterval;) s4 w) W+ h% H" B  A
var greenInterval;' ~' p. e6 m$ ~
var blueInterval;( O) z. j: Z. f7 x6 l& {
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)  L5 _- O$ U7 t
{
8 e, @# x3 M% {* D4 q        hoverColour = mouseOverColour;6 S* }( k! m# r* k& W
        numLinks = numberOfLinks;4 e6 A' |8 f: {
        rate = 1;4 j( l! D/ J$ x- L& Q7 r: K
        numFadeLevels = 30;1 A  v8 Y2 K( J
        function initArray(theArray, length, val)& g8 ^3 ~. e( G( _+ D( i
        {7 C# E7 Q& O; K4 W! S! v3 ~
                for(i=0;i<length;i++)
- m* b" k. k, j6 W; m- U                {
, F4 @: |6 O1 ]5 V                        theArray = val;6 _$ D  b7 c; i' x; ]& |1 _: Z- I
                }
) q1 Z) Z. m: Z2 F0 ]0 E. c; t        }  e3 B2 P* r+ g+ e7 Y# r
        bgR = '0000' + fadeOutColour.substring(1,3)% V) B1 y! S6 A7 t8 s& R- C
        bgG = '0000' + fadeOutColour.substring(3,5)/ ?* `: O: `5 A$ B" i
        bgB = '0000' + fadeOutColour.substring(5,7), ^0 D7 h& w4 b+ n% G, U5 o! {
        currR = new Array(numLinks);
) G. ?- O' M# d: v        currG = new Array(numLinks);6 r7 K1 Z) ?! ^1 [2 l  R
        currB = new Array(numLinks);
6 R( ?2 {$ W+ q. O% L$ M" X        count = new Array(numLinks);! g! I$ z: `/ I9 ]
        fadeOut = new Array(numLinks);
9 ~  }7 a' _" b        continuous = new Array(numLinks);- o0 A# a" Z! D, [
        newColour = new Array(numLinks);
3 F& |& l" T% u% Z" t- Z' q        tID = new Array(numLinks);; n5 P( @* A) N9 L* D& F9 ^
        redInterval = toDecimal(bgR) / numFadeLevels;8 l9 f) ^) w& a; D6 s2 A6 `+ }/ x
        greenInterval = toDecimal(bgG) / numFadeLevels;
% j& e. S2 o. t+ ?; c( w; R        blueInterval = toDecimal(bgB) / numFadeLevels;4 }6 Q( F* B- |4 K
        initArray(currR,numLinks,0);
: `: c# E( M9 K+ |5 g! E1 S0 ^        initArray(currG,numLinks,0);
, k+ H+ `: n2 e) t! y/ I! u        initArray(currB,numLinks,0);
" i* u) F' W5 p' C        initArray(count,numLinks,0);
! D$ k6 g# Q' ~/ g. h1 H        initArray(fadeOut,numLinks,true);
/ I0 g. U9 k- g1 j8 ^6 k# _2 |/ Z5 @        initArray(continuous,numLinks,true);. o$ n6 C+ `7 J( f6 n
}       
/ W0 o9 a! c+ \2 V) M& Jfunction startFade(id)
" M/ w5 q- m/ n  h$ ~9 P{
$ Y3 s5 R! a3 u" [$ N0 K8 h        if(fadeOut[id] == true)
0 X( |2 w# O0 E2 m, k2 d        { /*move colour towards background colour (increment)*/
% i7 v/ O; n8 T% V  K  `) ~* j                currR[id] += redInterval;5 N+ u1 g; u9 V' ~+ r  t: f- I0 n
                currG[id] += greenInterval;
8 G' P5 v2 o, J# E" V                currB[id] += blueInterval;
, {( Y  k) s$ y7 _" U' y                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ k, R* N* w4 z- z$ Y; g
                if(++count[id] == numFadeLevels)/ K, x: y; [! i2 e/ x4 o5 h4 H6 J9 i, A
                {
' q2 r8 T; C& ~0 b: i: i! m$ t  u                        fadeOut[id] = false;. R, y; J$ |$ |% F, ~2 ]$ g8 b
                }
, u* \. k' L1 |' D        }' V) h* K6 X" q
        else
5 v2 s$ u) u" Q; ^* u        {
5 ~3 w5 K& g3 w  Y: K6 n                currR[id] -= redInterval;
# [1 M2 n4 i7 j2 @
) ]& z* T% M# ~                currG[id] -= greenInterval;
6 n7 _1 a+ d, ~3 I
+ P3 b, w1 [9 p! N* e$ G  I                currB[id] -= blueInterval;
) a. `% Z  s! j4 s9 O
0 h! `5 N3 g2 `) R8 F5 b1 Q+ L                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# v  z0 C2 J" {9 j3 s8 V$ r
& H$ Y+ P: s2 n6 r: b
                if(--count[id] == 0)6 n! H2 l$ @: ]/ N. u+ g

) k; }/ y6 p) H  o9 x" S* L                {+ u! I6 n7 t6 ~9 r+ B0 `

0 ]" O! I& P  P# `                        fadeOut[id] = true;' S' `/ g' `4 y7 Y

0 ~  D* B7 e+ ^2 f$ B                }7 c2 Y9 z  y* m+ U3 [

: H/ [* i3 P. c: n/ V: b        }; A3 d0 ~  f& t5 f& j
3 W( B/ P6 G5 o/ h+ U+ C
        if(continuous[id] == true)
( w% Z% ?( {; ~0 ~: f! S
1 j3 @  D6 l6 U1 L5 w0 T        {
2 V8 L! Z6 H# A$ K; c8 Z+ U' R( ~+ N: u' |/ r
                document.getElementById(id).style.color = newColour[id];               
3 }. }5 E# _- N' T! w8 G7 }% W# l1 s7 ^' d' M+ t2 A  T
        }
0 d7 |0 x+ e4 u% m
% n* r1 o; }  f3 V% [        else4 @/ h( H" `6 T" W# f$ x6 f: ?" x

0 L% G( F+ N/ ]2 n5 S" g        {
- W$ B3 d. s( v8 @
# s! `1 a" j& f9 A                document.getElementById(id).style.color = hoverColour;# x" W4 B" M8 V8 r

6 z! x( Y, |1 ^- N  R7 Z1 F1 \/ F7 B- }        }
& Y) _7 ]; n$ b, |' g' ~. v+ L1 M9 Y/ s6 e4 j) J! m' ]7 ]8 d/ C
        clearTimeout(tID[id]);2 [' R0 S* A2 [% H4 o" ^

& A1 Q, u, }5 ]* t) i        tID[id]=setTimeout('startFade(' + id + ')', rate);
2 a+ _" R( P6 v! Z0 r3 K# E$ b! Z8 Y4 d, x! K0 S
}
1 F5 H% C4 E# t6 t; F% _0 O) T" d. W# F- ~. y6 x
function continueFade(id)9 h: n6 Z! M' h

! Q2 w& w. L5 ]# e{
9 a4 g* H' J; _  h$ \: U" k
# f/ n+ x/ O: V  h- Q+ j        continuous[id] = true;
3 r' R0 h6 L$ d% ~5 P
" S( q2 h/ Y9 G- R9 ^; u7 W}
+ k! x2 _1 b  }" |, x$ n' R) [8 c$ x) `) {7 }* {( @
function stopFade(id)
" h% Z* z8 ~  X6 h9 |7 o, @' @1 k, Q. ^. H: r4 j' g& P
{( {+ a) f6 e! a% ^  V

6 w- L! h' G! S& ?1 Q        continuous[id] = false;
6 l* t8 ?8 F& w9 N) ~
6 n& D' T& |. E9 B}
! M  L; R" f" S  K3 I' f2 o* }" X- ^" X" M
function StartTimers()# o1 T; F+ |2 o; y  N8 ~

1 c4 n3 X! Q. _, `9 q7 f; @{        //set up an initial set of timers to start the shimmering effect
+ g5 G+ Z/ [& P% ]* R; ?  @2 f* L8 Z4 g2 g9 H9 a9 m. ]$ y9 N) z
        for(id=0; id<numLinks; id++)8 e/ w! U( Y. Q' O' Z7 N$ B1 N
5 }. J9 z  q0 t) @" D/ v* J
        {* r/ |1 y3 J9 ~2 @) X  t# q4 K. M" M
8 \9 Y2 g# d1 J
                t=setTimeout('startFade(' + id + ')', id*100);
0 F  G* Y2 E$ g) M  w! b) [  a- K( |" W8 Z# o
        }
2 P( O6 u( S) w  F9 Q( S  Z
: I$ F& a! F* }- x5 i}
5 z0 R1 f, Z# y& O8 [5 n
* l0 f( y0 D9 P9 _//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
1 ]# [5 Y9 H, c3 L* W' I2 o$ f# N! }5 Q6 ?" Z6 Y' B
initLinks('#FF0000', 6, '#FFCC77');7 I" ^8 L9 U) f  V; ?5 n& t/ m* T
6 P' W3 o% {% c7 @* Z, T2 k8 B
//-->
) x& y. G( U0 m/ I9 b& A" _, g6 R" y, R- J  x
</script>
4 h2 B, w6 J, L, \0 I<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ o/ O3 A  Y1 s. B3 v</a>% f1 ]' R0 _" }( H2 r
<br>
0 G* G! W1 n6 s, `<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>3 i. I# D$ i# ~  p+ h
<br>
( a. a% U8 @1 L4 N& a<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 ~0 O- n5 j7 w# c- z
<br>        % y5 g( p0 C- U% u+ C
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
4 u; f  q% ?; b# H. w& B7 E6 q$ k<br>
0 I3 n- H& A( ?<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>0 H5 \3 g4 x' E$ a0 ]8 u: R9 \
<br>! [2 w& G  F; I. _* b% \
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>8 U5 U* x, s  B
<script language="javascript" type="text/javascript">) ?2 ~6 t" [( @5 Y6 a  N3 ?7 D
<!--9 N. c- t! L: S) O3 x3 E' }& U
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
) n$ @. c2 ]2 u' g8 c5 \$ s//-->; r/ t) D+ M  z* ?
</script>