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

zw2004

<script language="javascript" type="text/javascript">1 C  @6 t. J4 S1 w2 [; ~0 E5 [! k
<!--
5 z6 b5 r  y- ?+ p4 m: S// convert a single digit (0 - 16) into hex
' c$ B, t: U+ k( O  jfunction enHex(aDigit)+ @6 E6 z: F# o1 Z' f# y, t5 N  d+ H+ Y
{2 {' T( l" y8 |; G3 `, X1 v
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
/ z0 V# H  Z; z4 w# x# M6 l5 J/ B% d}
+ P: A3 o. `# \// convert a hex digit into decimal
# {1 y6 R' v& I' T, u7 x8 q) y+ B' Zfunction deHex(aDigit). y8 A+ ~# C& T
{( F3 Q& v4 x/ y, F
    return("0123456789ABCDEF".indexOf(aDigit))$ @8 g1 e" ~0 [' g/ P# @
}
4 p8 U4 T. {* t
5 t: ], ^( b: m0 @// Convert a 24bit number to hex2 _" k: h4 \. Q& [) |" m2 [8 x
function toHex(n)2 M! W8 R, H  y$ h7 j. d
{0 x6 W# P& o9 K* v1 E
    return (enHex((0xf00000 & n) >> 20) +
5 o: V2 o* \  U            enHex((0x0f0000 & n) >> 16) +
; e6 b" \& S& |3 d" h& \* {/ ^            enHex((0x00f000 & n) >> 12) +
4 y! ]7 F1 t2 J            enHex((0x000f00 & n) >>  8) +
9 \6 {4 x$ H4 @/ p6 {4 z            enHex((0x0000f0 & n) >>  4) +
$ D, U: w& t8 R( M7 P            enHex((0x00000f & n) >>  0))
# B  R; |6 p. H" `+ B}( I. [4 C7 S5 v+ a6 U4 M; E
// Convert a six character hex to decimal) H; k, `- u+ M$ d! g# M
function toDecimal(hexNum)
' z" p6 Y5 y0 q# Z- o2 Y{3 y, {" {# B5 ?
           var tmp = ""+hexNum.toUpperCase()
0 U+ U( ]. f( O( z& A5 J: Q2 ~    while (tmp.length < 6) tmp = "0"+tmp! c) H5 Y% u& n6 ?* c/ y
           return ((deHex(tmp.substring(0,1)) << 20) +( ?- }2 G9 J$ `8 `
                   (deHex(tmp.substring(1,2)) << 16) + $ q* j% z, z8 s
            (deHex(tmp.substring(2,3)) << 12) +; K- h# k. \# i4 L  U7 Z# V
            (deHex(tmp.substring(3,4)) << 8) +8 @2 |; O, g: v& |8 z
            (deHex(tmp.substring(4,5)) << 4) +
8 b( G; M/ |& k+ s7 |# I                   (deHex(tmp.substring(5,6))))4 f& Y- L& a5 m3 L3 G
}( E! @# Y; @4 `1 m
///////////////////Shimmering Links/////////////////////
* g) G8 s! M3 [2 J7 C//global variables
3 V( I$ ~; ~- D4 Yvar hoverColour$ R+ ~! H0 o# e- q* [8 t8 d
var numLinks;
0 X# j0 V% N& m* R$ w+ Y7 e, E- Hvar rate;6 z. s: T4 ?0 U5 z
var numFadeLevels;, |# h7 q) z9 I! r' E, |, ^
var bgR;, v2 J) W+ H& {' h% o) [
var bgG;/ U8 G% k3 b1 A& O5 H8 C6 T+ j) o7 p
var bgB;( O& ?4 @5 f$ D
var currR;
/ Q* c2 B3 G$ g1 k( Tvar currG;
- r8 N9 W+ m- V: W5 ]& U( gvar currB;
* Z. X& ?- b( L$ x9 I" ~: e) evar count;6 e; ?8 |7 g5 Q' j
var fadeOut;
* T8 O* L; M  C# ?- a% L$ P' Mvar continuous;
4 q- R  K* W/ n6 P4 Avar newColour;% a+ Y( Y% L: L! b7 c
var tID;
  D& Y7 d+ H. K4 ?) O! F5 l3 }var redInterval;' C& a2 d3 z4 w; u# {6 j0 F
var greenInterval;
; y7 A$ G- j9 A8 N; s: rvar blueInterval;# A6 p, f9 h0 N) J' s, T
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour), Q+ K9 ~3 t4 I: c5 |
{
/ {7 b! u( h) }        hoverColour = mouseOverColour;( a/ h; B5 @* o7 @( K2 p9 N5 s& U
        numLinks = numberOfLinks;" G  A, o# t5 x7 M  j9 C( n
        rate = 1;% h" _+ i# o8 U1 W8 Y
        numFadeLevels = 30;  Q* L7 ]! {' ]; X  o
        function initArray(theArray, length, val)
; ?: f/ _& e5 H  |        {1 e! m1 o: }! ~. G1 m
                for(i=0;i<length;i++)4 Y( C* i/ K$ a% f& ?( Z- S
                {% P5 h, ~* J: L7 d$ L4 A3 S
                        theArray = val;/ `* U1 s% U: v6 |/ Q7 g
                }
; z. }5 G8 G* P! F        }& _0 Q! |" ]3 A- M( J) I! Q: I
        bgR = '0000' + fadeOutColour.substring(1,3)3 F* p6 I0 `4 O3 n* p! E+ J4 P$ v  y' c
        bgG = '0000' + fadeOutColour.substring(3,5)
+ c" P( A/ ]% T9 M+ [        bgB = '0000' + fadeOutColour.substring(5,7)# t" S! E7 {1 x* E! w( F
        currR = new Array(numLinks);
' d2 D+ ]1 U" \# u5 u. g; e3 T        currG = new Array(numLinks);
- L) }; N# \. {        currB = new Array(numLinks);
! u5 V3 w, z. |3 \" R/ }+ s, p        count = new Array(numLinks);
, N( |+ r3 W& Z3 c        fadeOut = new Array(numLinks);! Q. c4 [/ N4 z; J9 `: D
        continuous = new Array(numLinks);
. n8 f+ g3 e) {7 q2 m0 k! N9 P        newColour = new Array(numLinks);! [" O+ [" a# ^& G
        tID = new Array(numLinks);; L& x! g) z, G0 s0 X$ o) t2 ]
        redInterval = toDecimal(bgR) / numFadeLevels;' ^" z' i/ \) u. x
        greenInterval = toDecimal(bgG) / numFadeLevels;
9 d9 v7 z8 P4 s) ?        blueInterval = toDecimal(bgB) / numFadeLevels;1 I9 n1 S" l; a
        initArray(currR,numLinks,0);
) V; y3 Y; M+ ]: h8 V        initArray(currG,numLinks,0);
( Y' l' E. |9 |8 a  W5 j        initArray(currB,numLinks,0);
0 L8 F$ F0 z/ N! s        initArray(count,numLinks,0);
+ q, |% V0 l- J' h9 Z8 [        initArray(fadeOut,numLinks,true);
7 Q3 e" E0 `) Y        initArray(continuous,numLinks,true);" T6 E# K  i/ D+ y* O/ G
}        / H) k0 ~, D9 x$ f
function startFade(id)' l" m* `+ k+ t
{
, C, p/ V8 X4 {! `  a* _  Y/ s        if(fadeOut[id] == true)
- [  q+ l; |! x6 t" [4 l        { /*move colour towards background colour (increment)*/0 Q- b4 V- X! Y' p; z+ B) v: r
                currR[id] += redInterval;6 B3 Z9 `" C) V! M( D( O
                currG[id] += greenInterval;
. h. x; c$ p3 O                currB[id] += blueInterval;
$ S  e) z5 N7 T& O4 E0 |6 D                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, j/ e  S* }6 ]2 g" c
                if(++count[id] == numFadeLevels)) X" G: X& Y  ]2 {2 ~2 C
                {
$ E8 j  k8 V" H, F; J- p                        fadeOut[id] = false;
8 d5 ?- L7 s7 T                }' e+ X' j3 @( _+ Q
        }# d/ o& b2 d3 n- R! s
        else
1 ?/ D( ~% b" L) f' a        {0 S/ o- W# G3 A( @3 Y
                currR[id] -= redInterval;  G! Z7 H, z) ?4 w6 R) ^+ @( x
2 H+ {8 H; f8 T8 F% I6 ^: q7 e
                currG[id] -= greenInterval;
: ?: X* |7 R3 l: z6 V
, o+ r6 ^( g( c% M4 |6 l                currB[id] -= blueInterval;
  H: R- e  U! \, h" y& E) s
% H5 a7 W6 Q, H  j                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 G" x. i3 A3 G' p6 Y( C; m  ?
) [9 ?# l- c: @
                if(--count[id] == 0)
$ w) `* v3 Q# Q# C% u4 u+ X; B( @' q0 s* p1 X/ ]& a. K  x" p7 h
                {
" Q! v3 e( r+ v: \) o" Y# {' E5 y: d/ |5 L+ e
                        fadeOut[id] = true;
4 x* J+ [, S/ z" E9 e# ~! B8 v5 \# p  F5 G7 W, P# I  Y4 c9 D) W
                }
( B' Y; C. t6 `7 s! p/ @  n5 e
" t; n( J; {3 m! P5 c        }
- a4 I7 ~( d: c  J5 A+ B: Y8 r% {7 c
+ f. H- p6 u3 W# N        if(continuous[id] == true)# a+ Y) b1 p8 M* T) s' C/ f: a, B

3 d, ?' U# s) R, M! l2 Y. X4 i( s        {
+ ~: C" `, |# k3 V! H7 Y; A5 `7 s- Y. H9 t; C
                document.getElementById(id).style.color = newColour[id];               
. y9 {8 u1 ^4 q* ^5 p4 ^5 n: g% i9 F% }4 z; {& @  D% A5 K! y( U
        }1 Q  k. u* v. e- U$ W

5 D) V* U, e' T9 D; X+ n        else
5 h% J1 p$ B. P5 u  z
4 a2 c8 i+ u6 z" s        {; {: A# H# z1 F

. X' z( D# @  O# [( |9 D& P8 w                document.getElementById(id).style.color = hoverColour;+ j; \& w  G" g, B% s3 B9 p

2 Q' t' |3 S: B1 q* ?        }
; h2 u" P1 ^: m  n. T; r3 N% b% ?; Q- d6 o
        clearTimeout(tID[id]);  j6 c. r) f) P5 l

( H- I$ _/ l" X' C( I& E+ V2 p- Y        tID[id]=setTimeout('startFade(' + id + ')', rate);/ U! `  E3 J# _1 Y. F/ Z* k3 I

! T, a( i) a7 I8 q}
( |7 `0 U0 ~1 p& t) `8 ]# q
- S# F6 q: r7 L; Q& hfunction continueFade(id)
# G' K2 Y# e# P* L* K4 J) |: ]: U: N7 r
{8 H' r: N$ q: {& _5 C* U2 B

7 ^$ q" h4 \; e# K        continuous[id] = true;
. e/ L9 F* X3 f3 X5 `  |- n- x' T( P. I( A5 X0 l
}4 m4 D0 n  C* w) H5 v2 r
  u9 u3 w* I6 K2 @
function stopFade(id)* m6 S' K, F) M& \4 o, ]

6 X6 c) p6 k7 r7 ?+ t1 k- O0 |{# j! Q4 v5 O) B7 F

" i- Q% g+ O! O2 q4 n% |$ o        continuous[id] = false;! {& _6 J% y3 E/ V" n

0 A( o* ~7 g2 t- \5 y, H2 f}
% X& }; V' V+ H' Z3 i6 `* K0 u- j) M3 e+ Q
function StartTimers()
6 R) L' Y% G9 H5 Y. \! ^
" J! r5 @% v! o* J* n0 S{        //set up an initial set of timers to start the shimmering effect
+ b* b- Y8 O0 z$ f
. [1 \* I( L/ X' g        for(id=0; id<numLinks; id++)
# f; P5 }& p0 S2 z4 D. B$ c. s* n, ?6 N$ i4 X: u, ]
        {2 l! H* E& I( N7 n6 p
) Y/ p( O6 W2 A. I6 Y7 U5 J
                t=setTimeout('startFade(' + id + ')', id*100);8 h$ z, X0 ^$ E+ h5 M# q

( ~) L/ j) K! L2 _. y        }9 B0 N0 X$ R( g* I, u

: b: H6 j' h4 t. Z- @) U}
. Y$ I( W3 F, w1 D# O
1 Y( m2 [  U% h' ^# O//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
: P% x0 a9 k( B2 Q$ H. G
+ F+ {! a2 _( binitLinks('#FF0000', 6, '#FFCC77');' p5 u+ }0 v/ d9 L
) T# o- s+ {5 ?+ H6 V+ @
//-->
% x8 S# z) f8 l. s
" j3 ?8 H6 i# J2 a. [</script>1 b# F( }, K7 l. i. s* c+ e
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元9 V1 p2 [* P1 \/ R; C6 g
</a>" b. A3 P# r* ^. I
<br>+ R. G3 @% C- G
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
( w! S" T& R0 Z0 {2 k<br>; Q* n* m3 o( b* M5 h8 n
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 d1 S; c; A, c  {! ^5 y' ^: e<br>        / z9 s9 C: k/ G. X; @( p& ]6 j
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>1 C' w5 S( {' N; p- f/ q
<br>
( \- f$ [5 l+ I: d8 b3 a' k+ ~, w<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>, `! C& P  l6 [  L
<br>
( n0 B8 d# n1 z8 }' L) `# Z<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a># `6 Z$ d  e$ S- g
<script language="javascript" type="text/javascript">+ ^7 a- H8 c; G- d
<!--
9 Z( `) f7 u3 m/ S) b2 |$ u2 GsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# Z, ]! A7 @; \, ?+ x: R: I& k
//-->5 a& R$ r+ _0 }9 E5 b9 o& g
</script>