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

zw2004

<script language="javascript" type="text/javascript">1 q" I3 g- u8 L; n
<!--: E$ [3 n0 n, E' Y
// convert a single digit (0 - 16) into hex
$ d5 m) R# ~4 z  g+ b" @! @function enHex(aDigit)$ X6 i; h7 o% z8 K: G/ R2 V
{
0 e, t/ f% Y- c7 q) u    return("0123456789ABCDEF".substring(aDigit, aDigit+1))2 A! v+ i) t4 C" K
}
8 |* \8 u) v. M) ~! |* a' C// convert a hex digit into decimal# L. a: N8 w: w2 v7 E! [/ X( ~9 W* ?! k
function deHex(aDigit)
  P9 b3 |7 n% [- b7 J0 f{$ z6 o4 X9 K& L8 u! w
    return("0123456789ABCDEF".indexOf(aDigit))
/ H! T; E% ?) i- e7 G}9 g/ ^  l% [( N

4 y% D- e8 E: W8 w6 b/ s// Convert a 24bit number to hex& g3 r/ v) s. |$ I
function toHex(n)
" _0 C2 w- a/ @4 m, K( _{
6 d% s5 f$ p1 m+ r    return (enHex((0xf00000 & n) >> 20) +: [9 v/ T7 X# Q6 H
            enHex((0x0f0000 & n) >> 16) +% Q! R7 V" t7 D
            enHex((0x00f000 & n) >> 12) +
# L# L3 `7 F% T            enHex((0x000f00 & n) >>  8) +
. u* |$ |$ s% T. M, e" _            enHex((0x0000f0 & n) >>  4) +
$ X! [6 u. \+ `  h/ g# b            enHex((0x00000f & n) >>  0))5 p1 m1 G0 h; T2 X5 \3 F
}' t/ e/ i, x% a3 o
// Convert a six character hex to decimal
. L9 e' D3 Y; s0 s0 P7 _, kfunction toDecimal(hexNum)0 o, t" D2 L. Z- _6 v4 p  O* e
{5 t2 s7 j1 Q: d3 u+ q/ G
           var tmp = ""+hexNum.toUpperCase()
8 \8 q* y& ^' _4 d/ Y3 c5 A    while (tmp.length < 6) tmp = "0"+tmp. T. k" ~* ]1 q. a! H* \# Z; {
           return ((deHex(tmp.substring(0,1)) << 20) +9 y1 Z( _- x! N# r: x1 U
                   (deHex(tmp.substring(1,2)) << 16) +
9 u" O# o) Z5 I; A- `4 ]            (deHex(tmp.substring(2,3)) << 12) +
# l4 ^/ S' y% g7 p            (deHex(tmp.substring(3,4)) << 8) +0 g+ e9 G0 [: R5 U5 k
            (deHex(tmp.substring(4,5)) << 4) +8 u+ O3 G( C: Z0 K1 ^" F# v
                   (deHex(tmp.substring(5,6)))), |9 X4 r$ Z9 `  k9 y5 B
}8 ~1 s3 p" ?! I8 z- L$ D
///////////////////Shimmering Links////////////////////// o! e5 e  K: P% C& G7 q" w
//global variables4 z5 I' b5 i; j" N
var hoverColour, q- f- B' Q5 I6 U! P
var numLinks;( M3 x9 c. b/ m3 Y, @
var rate;
" l) Z4 _& e/ h/ C; Q; Kvar numFadeLevels;
" R$ l, b+ l, ~0 p9 }& xvar bgR;! E3 N; [& p0 [! ~% g
var bgG;
5 u' H' ^% O  |8 h' K) F" evar bgB;0 ?$ I! |; _" x$ V  x" g* n
var currR;5 F: a& {, T! p& o' ~
var currG;1 V4 O" c" E6 e8 D
var currB;
% y4 I% s3 d! ~2 v4 w5 j6 Svar count;
1 D4 T. z0 j0 Wvar fadeOut;
" T' C( l/ \( zvar continuous;
2 r9 v- N3 c& Cvar newColour;
' u5 ^7 s" ?+ x0 M/ \var tID;2 U: y" {3 R, Q1 ^5 O7 P1 u
var redInterval;
* g/ J& ]8 ?* s6 C+ [var greenInterval;
) n: w4 ]1 D" M8 b3 a1 @* s4 vvar blueInterval;
8 a0 U: H/ S6 k8 B% Xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour). o% X0 D( x6 Q  ^' c+ O
{2 k4 m$ [( m  i, E
        hoverColour = mouseOverColour;
5 a: p. W1 X8 B. P) n2 T        numLinks = numberOfLinks;
& \/ e$ G' I% O- ~. p2 H7 }        rate = 1;
) ]5 y$ E  o! E+ _0 z) g" P        numFadeLevels = 30;6 U& U' Z' x& w+ C
        function initArray(theArray, length, val)
( K0 t  G' S6 D; w! l+ o9 A        {: u- D1 m! N1 H4 Q7 L
                for(i=0;i<length;i++)- J7 e3 d" @: F; r3 U7 N; G
                {; {/ K4 D$ W# w# Q; o+ m
                        theArray = val;/ s6 s1 }: L6 t. ]1 @
                }
" S0 p8 y# }* N        }1 [8 o% l& D) d  b( D
        bgR = '0000' + fadeOutColour.substring(1,3)
9 }1 }9 O9 i3 t; _: A' m/ S9 H! L1 {        bgG = '0000' + fadeOutColour.substring(3,5)5 a! W& R6 @8 j% {) u9 ~
        bgB = '0000' + fadeOutColour.substring(5,7)( Q. C' M3 T( Q+ Q
        currR = new Array(numLinks);
2 z. T2 @1 U% d, u. B8 }8 |/ _        currG = new Array(numLinks);
" {) ^1 n# ]) l# e- t        currB = new Array(numLinks);6 V. p  p# n3 P, F' e" s% p% y
        count = new Array(numLinks);
8 J9 k- u( h+ W7 m4 T5 S1 t: l5 T5 [        fadeOut = new Array(numLinks);' a. {2 ~: ]2 E1 {
        continuous = new Array(numLinks);# d. [# K$ [, Z6 D  p4 g$ n9 I; g0 E
        newColour = new Array(numLinks);
: s8 F' k) p6 m8 \% p        tID = new Array(numLinks);
. o! \4 v2 p6 B) \& X        redInterval = toDecimal(bgR) / numFadeLevels;  T. q9 [  S& a2 ?
        greenInterval = toDecimal(bgG) / numFadeLevels;. ~* K6 J1 N7 s$ n8 L+ z
        blueInterval = toDecimal(bgB) / numFadeLevels;# F6 U0 g. y' d% ]
        initArray(currR,numLinks,0);0 x! m9 r# F) [) s
        initArray(currG,numLinks,0);% ]0 m5 I, D5 Z7 l, ~5 @( K
        initArray(currB,numLinks,0);
9 |+ r9 f5 M0 |1 E4 }        initArray(count,numLinks,0);& P- S+ b) A2 B8 {
        initArray(fadeOut,numLinks,true);
+ P% O  G* C+ C) p        initArray(continuous,numLinks,true);$ \% @3 O; @8 W
}        : j) [! G; ~( R& c! P% T" o( Z
function startFade(id)  ]' h8 U# s  n5 G
{* l9 M! ^8 `, c
        if(fadeOut[id] == true)7 O1 b0 H# Y9 T8 A5 r0 Z2 T
        { /*move colour towards background colour (increment)*/
, n; K. k8 T$ e. l. Y                currR[id] += redInterval;  X* J: g5 u% S
                currG[id] += greenInterval;. B* `) `0 S7 b* `# v% E; _
                currB[id] += blueInterval;
( e1 Z3 l7 m. C! ^, ]6 F" U8 G9 O                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ d3 j* t, M* C: Q6 q9 l+ r
                if(++count[id] == numFadeLevels)+ b" g5 v6 B: ]. {$ \6 h8 S3 `
                {
# g- Z! c' P8 v, }, h                        fadeOut[id] = false;1 P: `3 w' k1 @
                }
* J: f5 Q4 B! R        }
. |6 L0 Q6 Z4 }5 z0 P: `. c( K' a; X        else
/ k  Z! ?  \3 W4 d; m        {
8 w/ e7 e5 J8 ]- A/ q                currR[id] -= redInterval;& F% x4 ?2 X' b# M5 q6 o: n

4 G3 c+ r6 q" o: E" w# c7 R                currG[id] -= greenInterval;
9 P/ p8 i: X( |& H/ y( A) v+ @$ a' d: L" ~' E
                currB[id] -= blueInterval;
- s( v- E! L1 Q, z0 r# s
- z6 ?, y' y6 G9 H5 _$ ?                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% u* f; X) K2 X: K; Z
6 ~1 k% Q: v/ F8 G- d
                if(--count[id] == 0)6 o+ o) B2 G: N8 J8 n- o+ {( w

( n$ T! x. X* y$ ^9 n, y                {
3 q* R' _1 s, G% h8 s) h5 N: U+ v; p! U7 B* U+ G
                        fadeOut[id] = true;; \( }$ F( q( b+ k0 T2 F' N

+ r/ v$ O6 r' E0 |( g& r; g6 d% S                }
4 N* M' f! X- ~+ {
* q4 T& H4 P+ `6 I* S3 N/ Y8 |( B        }
: o3 E) D% C( a; b$ S
  Y" Y0 g8 p" D2 y        if(continuous[id] == true)9 E+ P; \7 k. c! v+ |, P
+ C1 n1 Q- |- s$ {) x" _& o
        {
& N) ?- l0 F( F
4 s# P/ u7 a; G                document.getElementById(id).style.color = newColour[id];               
3 T) j: q. v  @( v& l& j3 B
& u2 U7 v8 I0 e$ \( G$ S2 t        }
0 U, \& P/ ]0 {9 I
1 Y- K$ @/ r, T9 U6 B8 m. [        else7 k  j6 i$ m  ^4 A% x7 \

% v1 W6 R7 J+ ]% l  A$ P4 t$ f        {
4 E5 \. N% z9 N" H+ X4 ]+ g% U
3 K& {/ B) a( I' e2 o. F4 U                document.getElementById(id).style.color = hoverColour;
6 u: y$ Q1 V  [( v8 H& C
3 R. b$ }2 m6 B) X6 E        }) x6 X) q0 i5 y# |7 N! T
; E% s7 B4 v4 S4 b6 s4 K
        clearTimeout(tID[id]);
$ n0 y7 F$ o6 R4 K  H# V+ ?6 @" e
        tID[id]=setTimeout('startFade(' + id + ')', rate);
3 r1 o* M1 G5 k' ^
2 G* X$ p3 w" k}
. }5 O1 [9 ?$ M
' F  `- N! v* N# rfunction continueFade(id)' b9 L: T* h  Z8 ^$ m3 [- H

4 }  N5 V  n+ h4 Y' t5 |" i1 \3 W{9 @( b( \( |( D3 r6 k5 A

  U' g* x! Z9 e" u" {' ], T) w        continuous[id] = true;7 t4 y% r  A1 K! N; W+ u
1 K; n' p& u6 k( }) q& \- a
}
" y6 y, ]  W" B' o7 a' p; ~/ G1 o7 B4 z* q2 Z. u; E
function stopFade(id)
) z" q  H% P& ]0 [0 C: ~
  b$ M, f$ P+ U{
+ F3 @5 n$ O  R9 @1 q( U. M9 W1 J0 X" t3 S: M0 `
        continuous[id] = false;* g( I$ F' U! S' T0 f; K5 w

3 m' n. Q& U+ Q7 G% a: r}5 M/ U( r& x0 F/ c- w4 t
0 a; P7 S, D* A
function StartTimers()
7 v7 q) U* ~3 Y/ P' v% Z( }" a% o. O. m2 h
{        //set up an initial set of timers to start the shimmering effect
$ y* @$ N: J1 Y) ]/ E) V( ?$ p, v+ \5 P. W3 J  j: K9 w
        for(id=0; id<numLinks; id++)
. ?% J2 W& K$ T
% R2 \( M/ s4 X" @9 {        {
0 y. l  s9 S) C- [- V3 P( W2 z
( }* I+ }% {4 K! ?- h                t=setTimeout('startFade(' + id + ')', id*100);
8 j1 o+ [+ T( w5 D; y4 q* u1 W  Q+ L1 Q4 i' N2 V6 M
        }
4 ^- H( O, i) ?' d7 K; n/ y8 k+ L( J4 C% |
}( r$ n7 O: \8 [* j5 _" ~6 u+ O! l

2 z1 e/ M1 p+ m7 P; R5 a% e//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), B% S/ D8 Q: n4 `3 Y! [: I! m
0 R' k$ r' C3 h' b9 W! R7 C
initLinks('#FF0000', 6, '#FFCC77');
% D9 T+ E8 K9 C' K5 I% O. k
+ e- I! f3 a$ x, u' q, x$ S//-->
/ T) M4 K6 s# I1 C  i5 H2 K6 t6 o! }: |
</script>  y, M' @5 w8 @( t# r
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
  a3 J1 Z0 g' g! A" R# ?5 i% `</a>
( n( e. ]" v/ F( s0 m; c<br>
* m/ a; \3 {9 ~$ }# z<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>2 g6 ~6 f5 F; P6 ~
<br>
; z) ~6 Y& ]: t" D$ l; `8 A<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ D/ z& m7 D5 D% j
<br>          q" q+ p! p& f+ b% N8 T5 R
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
5 E! f: U# t% L# M8 V7 G" N3 w<br>
' |" K( k1 E$ u+ S+ h9 q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
1 |, [7 ]& l. f& c+ I* {<br>* a5 z0 S( [. [7 ?' h% u* D
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
0 m$ D8 p/ e# ^, M<script language="javascript" type="text/javascript">
7 n  O* M6 {- E- p( B: G& {6 U4 Q<!--
6 Q/ }0 ~0 U% @; C5 JsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering. ?" s; c; G3 `' q8 }$ O  w4 O
//-->  E0 a/ w: Z! _# w' S& E
</script>