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

zw2004

<script language="javascript" type="text/javascript">. s% u' `% S) [( C) Z7 U
<!--5 z) N+ t, V4 ]; v- Y5 @' Z4 A" q
// convert a single digit (0 - 16) into hex
5 ?9 J+ _6 U# u1 I% x0 r/ h5 Cfunction enHex(aDigit). A$ R9 L. l7 ^$ K' L5 H: |) U
{# U% d5 r' v2 g, c/ K5 `
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
9 v: T! N# {% ?0 g1 J3 B}; @' M0 a: T, x$ [+ y$ V/ G# J; b2 m$ e
// convert a hex digit into decimal
+ z3 c  I0 d, m; `function deHex(aDigit)
( }) o- Z' k/ q: K{0 t2 C5 z! `( @
    return("0123456789ABCDEF".indexOf(aDigit))
+ x; X2 Q4 p4 m& H}& a& Q" ^# N! {( `, J% t3 Z. w

* ?0 d1 f4 T* A" s// Convert a 24bit number to hex
% M8 g; o3 F% r2 mfunction toHex(n)
: H2 @3 l! D! p. n# Z! Q{
% h' A. W3 ]7 s6 ^0 w    return (enHex((0xf00000 & n) >> 20) +
+ c' b9 _9 L: n/ F6 [; {; y            enHex((0x0f0000 & n) >> 16) +% h  F% }) b) u! d# g  T
            enHex((0x00f000 & n) >> 12) +2 ^6 c! P: l( ^/ |7 \# ]/ }  w
            enHex((0x000f00 & n) >>  8) +) `2 Y9 j. }, _
            enHex((0x0000f0 & n) >>  4) +
2 Q# t2 T8 N! k! ?& h            enHex((0x00000f & n) >>  0))- [. r, F" q" P+ `- Y4 `
}( W8 E( Y: l1 j( r! G
// Convert a six character hex to decimal% f# g+ S$ B6 j( s  U9 h1 t
function toDecimal(hexNum)
! E9 U* g% n! o{
5 t5 B& j1 t) L           var tmp = ""+hexNum.toUpperCase()
! \) L4 e3 D' z  v% L3 J; q! F    while (tmp.length < 6) tmp = "0"+tmp
6 Q* n% h% U" n           return ((deHex(tmp.substring(0,1)) << 20) +5 f  b3 s4 J. ^+ p( v0 p2 H
                   (deHex(tmp.substring(1,2)) << 16) +
4 B1 H8 [/ Z4 \3 V2 T            (deHex(tmp.substring(2,3)) << 12) +
, N  [0 u3 p1 G7 D3 }- V            (deHex(tmp.substring(3,4)) << 8) +9 c4 ?$ Q0 S6 q; Y8 U2 ~1 X
            (deHex(tmp.substring(4,5)) << 4) +
1 j# Q) v3 B' _: U                   (deHex(tmp.substring(5,6))))$ T# t: b5 f, `- F
}" C# m+ E: U) j6 U
///////////////////Shimmering Links/////////////////////  w' }- E8 b3 h; d
//global variables
" X/ m: C( d1 f( u8 @- mvar hoverColour
4 D, x2 Y1 q1 F, r, Q) gvar numLinks;6 h# |5 z1 W6 }+ R# X6 X
var rate;. V  i3 E+ A' J
var numFadeLevels;0 ~/ |' v% _- m1 ]5 A
var bgR;6 W+ ], |' k" n" K& e. J  [
var bgG;
: g4 ~  q) s! Y) r6 G1 b' p9 hvar bgB;
, v! z- E- T+ U( y" V% M, t* ivar currR;
+ e* v- @! t2 \& l6 B' ovar currG;
. q$ `$ t/ u% _; y1 \, ]var currB;
) S; `: |+ Y, D4 [; Fvar count;( B+ _, h8 T/ ]4 ^7 S6 l
var fadeOut;! W' c+ t' r5 {: q, P
var continuous;/ Z; ]" N# X9 S+ m7 p! U) n
var newColour;
4 m3 E9 q3 `) r& A2 s& e% ]var tID;
- S" W, d% s3 ^  E" `var redInterval;
* H" B: M: @1 U+ [9 kvar greenInterval;, i  L8 a" ?3 v0 W. L5 Z
var blueInterval;- [  Q1 I0 ^. `& b; z
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
! p$ o, G& n: `+ M: u8 I# z{$ ^* [/ ]- }8 C. A9 v8 [
        hoverColour = mouseOverColour;
6 [; w7 Y) D+ i1 V0 s$ Z* N" C3 E        numLinks = numberOfLinks;
% V3 p: T# F, @        rate = 1;
2 v* f1 B7 F* p( ~' \0 g; |        numFadeLevels = 30;
* X: G4 F% O, l0 _        function initArray(theArray, length, val)
$ _  n9 l  c( S: }# }! m5 ?        {
5 C8 E* G8 L6 t( F; k; W5 p3 }0 l                for(i=0;i<length;i++)  J2 _$ ]3 _- |- y2 o# F
                {1 H& E  y) t& x8 @
                        theArray = val;9 k1 q( q2 b( r: K8 Q+ w1 t6 @7 Z
                }
  I/ y, c' f6 B- T        }; b( D7 Y; L- k; y0 Q; b1 S
        bgR = '0000' + fadeOutColour.substring(1,3)
6 i! y) w, D7 B9 d8 \/ l, ~' l- n, H        bgG = '0000' + fadeOutColour.substring(3,5)
- Y. B. y/ ?, C  y# w( ~1 Q        bgB = '0000' + fadeOutColour.substring(5,7)
9 F' x9 K* _% ~! ]        currR = new Array(numLinks);+ R7 r* h, ]! M9 @! w$ ?+ {( e" ~
        currG = new Array(numLinks);: X9 @. v6 _+ d; i+ t
        currB = new Array(numLinks);; S( x8 v  n/ T$ }- T
        count = new Array(numLinks);- k( y+ O  |; e. I0 ]7 }8 N& |6 D
        fadeOut = new Array(numLinks);# g9 S+ g! O7 n- n; C' v( x. {2 L
        continuous = new Array(numLinks);; h6 F0 V  o* b( l* j
        newColour = new Array(numLinks);
( u+ S% I0 y. L1 K. k$ ?" h        tID = new Array(numLinks);% W  n0 v+ e1 u  h$ z  h# w7 Z, V# j+ F
        redInterval = toDecimal(bgR) / numFadeLevels;
" r( ]: q7 e# y% l$ S- m" _        greenInterval = toDecimal(bgG) / numFadeLevels;
* r7 O$ U% f5 Z  c2 Q( h: k        blueInterval = toDecimal(bgB) / numFadeLevels;
( W7 j/ p- A! G& t        initArray(currR,numLinks,0);
: E; s; R' E# Z6 F& i+ `$ ^/ y: _, e        initArray(currG,numLinks,0);0 p0 o+ g) L& _( o& k! r, j
        initArray(currB,numLinks,0);
$ Q7 S# i% B" K5 d        initArray(count,numLinks,0);7 s$ Z2 n- J2 O" w0 J) T) g
        initArray(fadeOut,numLinks,true);
/ o7 u7 u( V1 \- q0 i* j        initArray(continuous,numLinks,true);
6 k" q% q; P; B+ U( x1 Z}        , G; J) _3 u2 r
function startFade(id)
- G7 q+ Z  s: o/ j{2 G) `" W5 E" w" ?
        if(fadeOut[id] == true)- t+ d2 H/ y( c6 B1 a& y
        { /*move colour towards background colour (increment)*/0 I, Q+ x9 Z  }/ `+ l1 O8 L% ^3 S% A
                currR[id] += redInterval;
0 V% Z5 M6 T5 N0 B# g                currG[id] += greenInterval;
) @3 @: k( X- g: ?: f' `                currB[id] += blueInterval;: F6 G6 f  Y! \: j
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& e9 U/ m3 v' \1 k8 C0 _% n1 j                if(++count[id] == numFadeLevels)
# j! L# v: ~4 B                {
5 C  ]( g) s: v* K8 D" ]7 }: c                        fadeOut[id] = false;
6 p; D$ M* D5 b( y/ y                }
8 F0 _! S' T7 n3 L) c        }
- Z; |2 _; P! v( N        else# {! D( H% c# G; F
        {
0 R+ k: V4 s1 I4 Y$ _                currR[id] -= redInterval;9 \/ e; E) V9 S3 J* u0 i

6 M0 @3 p' i  W% Z2 \                currG[id] -= greenInterval;
: ]+ X+ L3 i- X) n! U4 U* l! T2 m$ Q9 c& V
                currB[id] -= blueInterval;
) p- P' ~" x1 @( R* O6 c
2 u/ E6 d4 e4 q0 g' s                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! `, }9 c/ A6 y: ?: W3 o6 _

6 D$ J7 Q6 a5 J# J. {. b; |" j                if(--count[id] == 0)5 @: P; s8 `7 P  Y: q/ i2 p
+ ?* X) v0 u$ c; j2 W
                {
" s& N* o6 {1 H
* `2 J$ g* J, e/ Y                        fadeOut[id] = true;4 x1 }) u4 c2 B1 |  W- `! j

6 S4 U. i' O( Z5 J+ e/ x% C                }% d4 ]! ], i* E9 M* z4 A8 R

3 f: k7 j7 U2 g  b8 ^! L9 C5 J        }& k" H+ E9 W# U- l, h

; @7 |2 Q/ N6 X2 t* i6 H7 n        if(continuous[id] == true)
( M7 X+ O: C3 U, d8 S1 ^* @3 y$ A! e
        {
0 Q, W) q; S5 ?9 @9 {  `0 P4 C; [; h: d; R5 W  w! x. [9 O
                document.getElementById(id).style.color = newColour[id];               
# T1 m$ I% i' U- e; r3 ~' O8 [
( a4 t/ E% E% ?- I        }0 j" O5 x* j# ^0 K* g  v) c; o

9 n  A; |/ E- |) \7 h        else% R4 P+ b0 w; c# h
3 f' F- _7 a6 L0 v; ?
        {% |6 w4 i$ z3 ^* {! k" m
+ z- ]$ f& a5 F" u  Z  _0 R
                document.getElementById(id).style.color = hoverColour;
& d( ^+ r% L: q. S+ M6 [  l/ |# d* s5 k5 F- D! c
        }1 m' H- `* q# F. i& ?: J- H6 |" [
0 ?$ J1 E1 w3 o) K* D7 t- x8 c
        clearTimeout(tID[id]);
! q, F! y9 |) d4 D6 t9 d! g9 Q2 Z! B0 k! _8 ?6 g. @0 L( j* y: w: v
        tID[id]=setTimeout('startFade(' + id + ')', rate);0 }( A3 }7 ]6 {' J9 r

) _# v* ~1 N+ a( n( [$ @0 t7 A}5 C4 n# u* ^0 K8 D
4 k7 ~5 n" @% j0 o5 d
function continueFade(id)
3 K% J" ^$ w6 G1 u2 e+ e$ U/ ?7 f8 W( K3 m& r
{" b0 H3 I! Q9 R  E

( n4 r" r( P6 D+ l: r        continuous[id] = true;
( s1 r% s3 R  K; j9 Z- j. w  g# r1 Y  s! D+ [" n  s0 b
}  ^$ ~7 y# e9 J# r! \

$ k/ k" j( w6 ^( Ufunction stopFade(id)
3 b& c/ Q0 \: d" b8 m$ a! h' P0 G! _- C9 }8 `
{
* h7 E4 [# \& a
; a* ], E9 n& G' d+ d        continuous[id] = false;
+ i7 {3 n) y3 n
7 [# u" c5 ]7 t& J8 K}3 `* y4 ]( o) K- P: Y# Y& a6 I
, ]# a  ?: g7 B  Z
function StartTimers()
% R2 n) o: h/ q# f3 V, O2 b8 u  p3 O7 ?. o9 }5 L) t
{        //set up an initial set of timers to start the shimmering effect
3 M+ o2 Z1 e0 x7 Q/ \
0 B# h! {( N9 u- D$ i6 `0 T1 s: {" a        for(id=0; id<numLinks; id++)
& n: p, s! x# `1 ]& |1 }9 W
3 R$ L5 ~: a+ D. A; J' j. G) z        {) z+ F- d' \4 [, j$ `
. |" a: s+ a7 Z, ]$ J
                t=setTimeout('startFade(' + id + ')', id*100);7 k+ d9 X; z0 k3 ^$ k

* `) l% }6 f$ y2 F7 @0 R2 j        }
7 {5 D  z0 O) r# L: s) s  ^, v8 }) @
}- C( T7 w5 G* l% B! D

1 _; f. }7 J  s$ v. p2 t//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')8 z5 _6 O# p- p* L7 r

9 ~; c* C% f, ~& |; m0 kinitLinks('#FF0000', 6, '#FFCC77');9 Z  e) }8 l% S* r  ]4 |% b
5 |- F) w; e+ @: p9 E: M& [; o
//-->% c7 @  s1 R+ f7 d6 q2 q

% q1 u& r0 Y" D! b7 U  K</script>! G" f3 F" `$ X$ N) l- h. m4 U
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元- w) i) V4 z/ l; i7 j3 c6 V4 g
</a>+ z$ b8 P6 k, E$ q$ w1 u4 }
<br>
, e+ N: c( X9 e7 T6 N<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>/ B! m% c9 E9 {. P1 w3 g2 f4 s3 g
<br>
1 |" y4 [8 q0 M% q: p0 H& O<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
% [# [0 G+ D* Y! O' }$ T. ?" U<br>        9 E' [% m1 [. A0 s- R& J+ Y2 z3 b
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
6 |  m0 {6 v/ D  p& M7 C& P5 e7 K<br>
1 V, x, d7 I- W" O  }! k2 l) `<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>8 S) z1 k; T0 c) ^
<br>
* K$ ^4 s) A+ ~  v% y<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
5 N; Q5 e- ]; r( ]  C% v2 o<script language="javascript" type="text/javascript">5 i5 I5 s; b. ^2 S3 m  t6 K% p
<!--+ t1 Z( `4 c# ?5 |5 T5 X0 P
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
) b& G- ?# C: T& r9 o4 \( L//-->
) v- z' r) M+ f; [- a# q' @& d</script>