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

zw2004

<script language="javascript" type="text/javascript">1 M9 Z7 K# S) a+ r( m8 z( m/ f
<!--( C! L$ `+ M6 W  ]2 {
// convert a single digit (0 - 16) into hex
7 i- T& O$ d- _function enHex(aDigit)
% _, _7 \* J4 L% B) J{
; ?- p+ V6 c- d    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! D+ [) ]2 n& n. E- [9 ]}
/ _$ S, y( ]; [3 ^, ^: ~// convert a hex digit into decimal  O( ]3 M1 A% Q* ~
function deHex(aDigit)
3 {4 h- F# P: F+ F' W- s{
! S6 K. R0 k9 ]9 r    return("0123456789ABCDEF".indexOf(aDigit))( Z% D* M* r: N" D5 G
}
/ \! a! `8 Q2 n/ G+ \5 B* p
3 A4 U% N$ M5 F% s1 u* \// Convert a 24bit number to hex9 s* g3 N6 f8 G1 z
function toHex(n)
6 I  @4 |3 ~, k3 i' Y$ P{
. I6 Z2 {0 ?: k; R7 C    return (enHex((0xf00000 & n) >> 20) +
- H7 a3 M) ]: J* O: }            enHex((0x0f0000 & n) >> 16) +
0 `7 r# U. p. _9 D            enHex((0x00f000 & n) >> 12) ++ R! g4 s$ ?4 C% D+ I$ z
            enHex((0x000f00 & n) >>  8) +! f. v" g( z* x& L2 M. e
            enHex((0x0000f0 & n) >>  4) +, @/ R  J: ~; U" E! {  ?
            enHex((0x00000f & n) >>  0))
( e/ e; t& d! k$ H! V/ U}! I* ~8 A$ G( \; ?! u9 |; o0 F
// Convert a six character hex to decimal% M$ l) I1 ]" j
function toDecimal(hexNum)0 [  l0 S8 A8 j: O7 U9 ^
{
5 b- H7 U* r2 L4 a' i           var tmp = ""+hexNum.toUpperCase()) D! }6 h' ^9 J+ ]- K6 E
    while (tmp.length < 6) tmp = "0"+tmp
* e0 R7 W* M2 m& o1 S* A' [           return ((deHex(tmp.substring(0,1)) << 20) +5 W4 i- [" ?2 Y( R6 H
                   (deHex(tmp.substring(1,2)) << 16) +
! U. B* m  p7 |3 ?8 L" _            (deHex(tmp.substring(2,3)) << 12) +, ?7 F/ b, B5 W1 p$ _$ H  X
            (deHex(tmp.substring(3,4)) << 8) +
/ s8 z6 N) Z0 {8 B' X% H0 I            (deHex(tmp.substring(4,5)) << 4) +4 o2 y6 l% b8 @8 a0 E+ q$ O1 o
                   (deHex(tmp.substring(5,6))))
- p" N1 l2 h9 z4 t) u}7 _( x, J) z& [1 d+ I4 _
///////////////////Shimmering Links/////////////////////1 I- v7 W# W4 J! r5 y
//global variables
+ f8 `6 A" T5 v* A" }% fvar hoverColour/ H: J+ g8 ]$ y9 W* G( U$ t. c
var numLinks;5 N  j2 }- F$ C% S" p7 V" x
var rate;
( {  Z& f! n$ Wvar numFadeLevels;
" j1 f# J, v1 @. Qvar bgR;0 U/ L9 }- e' S: N- F
var bgG;
0 `$ I' v5 r4 H* q+ A# fvar bgB;1 W( X# ^7 n& Z+ E* ?
var currR;
5 g5 Z  D! I( K0 |6 @var currG;
8 {2 O( `7 n9 t+ G) q7 U0 J- D: s# Fvar currB;3 C. V! f. f9 N9 s/ a
var count;% T" ?1 ^1 n! W7 \* k
var fadeOut;4 R+ q6 H$ k" V, d6 `+ l7 W$ H
var continuous;
: a' c: S. H0 M( H% }  F( V" hvar newColour;+ O- y8 K% q" n: }) l: Q( l
var tID;
! U4 w- S! i2 nvar redInterval;  e% y" p7 s% E, G  [- U
var greenInterval;' i& k" u# |6 h
var blueInterval;
) u8 ?% U$ g2 `. o6 ^: |' @) ~function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
1 F# y1 j0 m& P: _$ _+ f{
. N/ c3 U5 T/ Q2 F. d6 e# u        hoverColour = mouseOverColour;4 z# y* ]* X  p- D$ R- w3 F
        numLinks = numberOfLinks;
3 t9 C! e' ^; x, c1 E        rate = 1;# O4 p2 Z' c) u0 I) p$ l
        numFadeLevels = 30;. h6 N& @/ h# S+ |, N. }. g
        function initArray(theArray, length, val)$ G! n) N. H* j6 G
        {! ~' u' }! q7 C6 J' D( S
                for(i=0;i<length;i++)1 D0 ^# a; M& O" }" s2 `; w
                {% J; \9 u1 T/ _0 `# v5 P% v
                        theArray = val;/ R! b# z( r* h/ Z
                }
' b3 _3 L5 X  N$ p' y& J        }) T8 [- N. Z% d
        bgR = '0000' + fadeOutColour.substring(1,3)+ |9 `5 z! }* i. E: t, o2 D
        bgG = '0000' + fadeOutColour.substring(3,5)
2 y( N/ i2 f7 H9 _8 p; P        bgB = '0000' + fadeOutColour.substring(5,7)
/ z$ O1 V. ^  K/ f; P0 ^" ^        currR = new Array(numLinks);7 M& a, u1 c3 @
        currG = new Array(numLinks);& D/ h/ O. a2 X$ c5 H$ C
        currB = new Array(numLinks);6 K6 ]  d" ~3 z7 c+ u% a3 U+ @
        count = new Array(numLinks);6 n3 ?9 J  E! n$ }
        fadeOut = new Array(numLinks);# S" A' z! p# }! D: C
        continuous = new Array(numLinks);
8 U1 u& H, m* }3 q        newColour = new Array(numLinks);
1 [/ C3 b% z% K0 T1 t1 g        tID = new Array(numLinks);' E5 M: Y( y( N3 O/ U6 I* H
        redInterval = toDecimal(bgR) / numFadeLevels;
8 M1 d1 W. u) ]8 I% J        greenInterval = toDecimal(bgG) / numFadeLevels;
& P0 t2 b, ~/ i* L        blueInterval = toDecimal(bgB) / numFadeLevels;
7 j0 ~/ J& c* A# S3 E* n5 b/ p        initArray(currR,numLinks,0);) ]3 z! N  S- |1 d4 |: q/ z
        initArray(currG,numLinks,0);
) _8 p2 X! I' X9 j+ j" k9 b        initArray(currB,numLinks,0);; a3 }$ A  s6 b' s. z
        initArray(count,numLinks,0);
/ ~& n2 V7 v  {# }        initArray(fadeOut,numLinks,true);
! d, V, d5 W2 |9 c  W( X2 E        initArray(continuous,numLinks,true);8 V# U7 a" N8 P5 c
}        $ E8 N$ |; }3 R2 t! C* \
function startFade(id)) I# e7 K4 z. a7 |; t
{
; @! ]( I* B. r+ v8 }+ K1 `* c        if(fadeOut[id] == true)
3 |1 `! C( W' L        { /*move colour towards background colour (increment)*/  l3 X) e7 ?- q
                currR[id] += redInterval;4 f% {. H7 [2 R( K$ G2 P% F: Z; G
                currG[id] += greenInterval;
. l$ M# u) @7 v4 W$ ?                currB[id] += blueInterval;' |6 T" Q1 N4 B6 E9 ^- |
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) B! @! d' A' ~) `                if(++count[id] == numFadeLevels)7 [2 R7 g( W' x$ O/ Y" ]
                {
- ~+ }  w/ z9 R; a/ K  ^, L$ Q* a" Q/ y                        fadeOut[id] = false;# U' T6 C! w* H5 V8 `9 f; e( y: v
                }
3 X( W- B2 P' ]        }( v$ B: A) G( W" V
        else' f' I9 W" ]5 B7 ?8 J
        {' w2 {% C+ \: s3 [
                currR[id] -= redInterval;
! m& i+ A' u1 t! M  m
0 J& ~1 Q5 P0 V& [" }                currG[id] -= greenInterval;" k: O1 O0 W" J6 o

* x" e* Z4 z( a7 f9 f$ B0 ]                currB[id] -= blueInterval;8 n3 h  E9 p3 C$ K: S
5 V* G# k1 l0 ^
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ W3 _% Y5 d# s) s0 D1 n9 l; V2 @' K+ n, l8 A
                if(--count[id] == 0)3 H! s) @  s) R; B: O0 q

* E& F: [6 {9 @1 _  b9 p0 S                {2 n  i+ D3 z3 j; s, t
1 U5 y: q" u) [9 ?3 L
                        fadeOut[id] = true;: i1 v+ q' c0 r; ~# P
8 v6 b/ ~$ N: `+ C) f
                }- A5 t: `* R" ?
% S  ]7 O' G4 O2 i8 r$ A
        }
* F& Y: C% z+ J4 t
: G, E4 `9 Y: T( l5 C; ^        if(continuous[id] == true)
# k$ i  U4 ^) s( z  c9 N# Z2 N7 d  y
        {0 {8 v  e5 n( O
; n5 i0 j  {  v( O! S  P3 q& M
                document.getElementById(id).style.color = newColour[id];                ' x! a; g7 K/ K" a
. X) X, K) |) s( M
        }
5 t- U- ^0 g  F$ A* a# m) ?* G: e" t) C6 o" _% K
        else
" o8 b: h6 H" w) @/ a
+ t8 E5 x( g( k% c- ?2 a4 F3 P        {
, b! e# W! \" ~5 }8 y. T2 x) C) c  q" c) `" @
                document.getElementById(id).style.color = hoverColour;
0 {$ \. n, s/ I
. f, U% k: b3 f        }4 L0 G" h! w: A8 O+ H: Z

! o: a3 I' @5 X% ~' _" V8 C        clearTimeout(tID[id]);
9 g1 _9 j/ X" ~$ ~/ K
/ f# \& E' \7 E; K4 e8 b$ n* g5 t        tID[id]=setTimeout('startFade(' + id + ')', rate);5 O4 N7 e, Y# |, Y
' ]3 c1 q' l" E1 j5 p
}
+ N& P/ w( o7 D7 b- {0 P; w  e# c
8 S) a5 O$ K  \function continueFade(id)
  |3 v' L7 j& w! {
" r8 V. q$ u0 o6 e2 N3 A& \. B& ]1 B6 w{# v8 v8 s4 f( g* g% D

6 U* b$ A8 _# v& X# V  L        continuous[id] = true;
- p/ I$ J6 z: B" R: p7 a; W; g
( N, R3 C  l$ \3 l}
9 U& [) A2 h. u
! @" m. m" p+ o; E/ Ffunction stopFade(id)
; v; _5 d: o! i$ y% W1 p' H, C
" C: g9 _4 t$ ^, X4 O3 T1 L{! a" g. N% l0 |1 }8 P

+ p3 ]7 c$ \# N  u* R        continuous[id] = false;
/ [% |% D3 q% Q* `' a$ |# Y# o! }3 ~9 ?- @8 U7 a" T2 _# H, L! g
}
0 y6 W" @7 Y" o3 x- W
3 q, k0 Z; A% t2 j/ `" _function StartTimers()
& y( I: g+ h) s- w
# z7 z. h( N7 a+ ]{        //set up an initial set of timers to start the shimmering effect# @' V  y% H6 i5 ?7 P- R
, A  q5 ?! u: z7 _* @
        for(id=0; id<numLinks; id++)
, R% \& p; H3 `6 H9 N; O! \/ `' T$ R$ H
        {
; u1 q# q* y$ M" y8 l: T
' p5 L& m, @  L1 {3 a8 E) P                t=setTimeout('startFade(' + id + ')', id*100);
8 t7 t/ @0 T4 h  ~7 {  o+ y) l7 n0 f4 o
0 `- k9 h2 p8 g$ y        }2 W8 Y7 O( ], Y9 ~+ N7 B8 z5 F+ j

5 O% ^0 S: J. c/ S% T}
+ C' I3 I& _( q9 u$ p! e7 c- i
# i9 I2 N7 G* b( f  v//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
" d7 _- Z& D! f5 C# D9 I8 S6 G( Y' i4 x* \* c0 r
initLinks('#FF0000', 6, '#FFCC77');
& n4 p) |% G  b- w! s5 G% \4 v
, i1 ~/ J& a2 A6 F' e1 E5 ?; [5 v//-->
. X4 ~8 k$ J8 v. B1 {
2 a0 ]& A& n) f& e</script>
6 R! E+ }. X6 |: K' R# r1 d<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ q7 R8 \- u5 [6 i</a>/ D! T5 U. B5 h2 F0 g: W2 J
<br>
5 M4 F) l3 V9 q* B( E<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>; P6 V2 ?+ ]" a
<br>- i! `4 o$ o$ m& @( s
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>( e' ~* q+ E' a7 c, g
<br>        # d! M# {- v: W+ ]
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>6 t# e! g4 K( ^6 `
<br>1 Q# D, r1 l" {" i' D+ d8 h) ^
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>) t" J" l) ?/ r
<br>
1 l. X4 G" ^9 y  }<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- |/ \0 d" y5 y! j0 M( ?0 _2 D3 g<script language="javascript" type="text/javascript">
& a1 n* u: Z* M# l4 Q/ b3 b<!--
, `% W7 L8 {( a0 C$ ?7 h+ b5 MsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering9 w( M0 w/ K# O0 U4 L% g
//-->
7 Q# K" B- L! H) H* c6 [, Q</script>