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

zw2004

<script language="javascript" type="text/javascript">3 L* _8 n4 m, _
<!--
4 n1 h* P7 A+ Q. N// convert a single digit (0 - 16) into hex: I  p7 W( [1 K* C; B
function enHex(aDigit)$ ~' t' ^4 E5 Q' ~
{
- H7 D6 N6 r; H    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
5 `" E1 j. d# P+ A) h/ o}
0 A: v3 C  J8 l# M// convert a hex digit into decimal
% Z/ ?* A( c/ r0 Mfunction deHex(aDigit)
7 r3 I) O; }$ E  L' q{) b5 Q* ?$ n4 E, S% v5 }
    return("0123456789ABCDEF".indexOf(aDigit))
9 {( K6 O/ {8 h: R. v}# I+ |' u4 V( k2 T4 {/ I. F2 F9 ~

  O* U) I6 i$ a' ]- U// Convert a 24bit number to hex  r( H6 n/ D$ h' U/ \* \
function toHex(n)0 m2 u& L8 J0 X. \8 |
{  J: Q0 v9 l4 s0 Z/ s/ T
    return (enHex((0xf00000 & n) >> 20) +
9 T9 a0 `; t' l( V            enHex((0x0f0000 & n) >> 16) +1 I2 [% i# d' G! G9 a! t. |( F
            enHex((0x00f000 & n) >> 12) +5 d5 b5 ?6 U6 w* H1 q2 Q$ k
            enHex((0x000f00 & n) >>  8) +
: p5 _% ^' ^+ o+ r            enHex((0x0000f0 & n) >>  4) +
/ A5 T. Y6 q( a( T$ {* ~3 U6 e/ e            enHex((0x00000f & n) >>  0))! R: Y1 v2 b1 s
}% B- R% O3 T: s! x3 ~1 j# R
// Convert a six character hex to decimal4 T1 K4 M: A' O5 v! y# b3 T& |
function toDecimal(hexNum)
* N* v# ^1 L, \1 @2 r7 l3 r# P{
( h; T9 ^+ }6 c4 {$ ]2 T& G           var tmp = ""+hexNum.toUpperCase()
- T8 u0 B! m% E. H1 }, Z0 }    while (tmp.length < 6) tmp = "0"+tmp1 E2 p5 V: g; I5 Q% @
           return ((deHex(tmp.substring(0,1)) << 20) +
& o- E" z6 _# Y* w/ y8 l                   (deHex(tmp.substring(1,2)) << 16) +
( I" v. k5 r' r$ }6 t. L            (deHex(tmp.substring(2,3)) << 12) +$ I$ T) a$ m& I9 O
            (deHex(tmp.substring(3,4)) << 8) +
; B! j' F/ v. ~6 E+ q! H9 ^0 z            (deHex(tmp.substring(4,5)) << 4) +
, z9 a% P* J; F# e. b                   (deHex(tmp.substring(5,6)))). P- i6 z; Y$ `! h! G
}
! p' Q0 Q. {" z7 D///////////////////Shimmering Links/////////////////////
+ \7 b+ z) D; X" @4 x9 V//global variables3 w& j0 N7 v0 c, D% }& L" E% L7 ^
var hoverColour- }, B8 k- Z) ^7 t9 ]
var numLinks;6 u  u" ~0 x  e. `8 W) i9 Q# C
var rate;
4 A1 g2 h: }/ k. Q3 Rvar numFadeLevels;; s" F* u8 ~: ^. u: o# y3 \6 s
var bgR;- @4 ]# P+ K  ^  n, [3 b% }
var bgG;
% P0 s7 j0 U6 x: b9 x7 wvar bgB;
( L5 i- g5 V0 \) U% u3 l* gvar currR;
9 u" }  W4 Q% t1 u4 `/ g7 ?0 avar currG;
) N5 _) d4 K5 w. I" o( g3 ]var currB;
/ {& e7 I/ s% D8 M! x# L* v0 |var count;8 T3 u5 B: {- M% |
var fadeOut;
. {: \7 S; C, p4 l* h& y4 Cvar continuous;
/ X' M  M0 a; X- \. wvar newColour;
) h; A, q) A, b$ Z# Q5 {+ Svar tID;, W: P. a' P# J7 y  M
var redInterval;  b: L; t2 U% t% S. C) F
var greenInterval;4 d9 M3 r, S* J5 }* C5 z8 P
var blueInterval;8 [0 T; q  I$ |( K& |/ z0 v1 {% ^
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)3 O' m5 y7 O- K1 Z3 |
{! C" W4 B, P, P% \
        hoverColour = mouseOverColour;
! M1 K. K9 j# B        numLinks = numberOfLinks;
5 _) y7 f* B5 x: K2 X9 f/ H        rate = 1;
' Y$ ]& Q. n$ ~        numFadeLevels = 30;& D3 H' _7 ~& l
        function initArray(theArray, length, val)
) J) w( e  h" }% R5 v, _        {4 ]0 k  ~6 b! E, S+ s$ a/ h5 N
                for(i=0;i<length;i++)
6 P* d. X. @$ c6 w+ t                {. Z* D" T% j( n/ {' Q7 o& C
                        theArray = val;
" l- t% @$ O2 n8 H" Q                }: ]0 d, P* X- X" ~# m
        }5 W6 o  v, u$ D* e( [. j8 F9 V* u
        bgR = '0000' + fadeOutColour.substring(1,3)3 P2 L+ {0 q" G
        bgG = '0000' + fadeOutColour.substring(3,5)
' c  W9 @0 M6 ?; ]6 Z+ o        bgB = '0000' + fadeOutColour.substring(5,7)
9 G+ _/ b9 \! \' [' Q        currR = new Array(numLinks);
; x, \1 {6 K5 P  @! n        currG = new Array(numLinks);5 l; U) v+ G. v5 N, Y
        currB = new Array(numLinks);
, u& A& Q2 z' s        count = new Array(numLinks);
% b' a* Z, o" O        fadeOut = new Array(numLinks);
9 O3 ?3 g( ?+ U        continuous = new Array(numLinks);
3 L! {1 b5 K* `" Y1 I0 H9 r        newColour = new Array(numLinks);
7 S3 l) ^$ X3 G+ `' V" [        tID = new Array(numLinks);5 W' H  o7 P5 r9 h9 B* s* W4 Q
        redInterval = toDecimal(bgR) / numFadeLevels;; {5 D: L5 P- X7 ~5 v' Q" i
        greenInterval = toDecimal(bgG) / numFadeLevels;
+ e- j  L) ^; e  r        blueInterval = toDecimal(bgB) / numFadeLevels;. i+ v4 ?3 U' [( v3 [
        initArray(currR,numLinks,0);, p) d) F  n  N. P: |* p3 [+ |
        initArray(currG,numLinks,0);6 H; ]6 s  I' c, ]0 E
        initArray(currB,numLinks,0);; R$ |1 ^. [2 M1 N& K
        initArray(count,numLinks,0);$ H% A# K1 i, I: |
        initArray(fadeOut,numLinks,true);% d  I! p- y( j) r' T
        initArray(continuous,numLinks,true);2 y' |, p, F2 H) P
}        . a8 p2 _5 ?: R$ i( X
function startFade(id)0 ?9 D# E. v0 B! _4 o6 ^
{* A# j$ M6 x3 A9 G
        if(fadeOut[id] == true)
/ y* ~8 e4 Q3 ]8 }, D4 Y! W8 r        { /*move colour towards background colour (increment)*/; _+ k# ~0 U8 d: c% [( M) Z
                currR[id] += redInterval;! m% s) I0 Q" O" P& a
                currG[id] += greenInterval;
/ }0 F4 [$ B$ U' c; h                currB[id] += blueInterval;. ]: ^2 L( R1 j1 Y
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
* v# M* I7 |1 e# `9 |                if(++count[id] == numFadeLevels)
3 S5 M& f, @8 c, X/ F, ], B) ?                {
& S3 r5 q7 k/ J7 s                        fadeOut[id] = false;5 r, g6 R+ Y) V4 Z. Z# H
                }
( P" @) h3 {/ O' w6 X' J  Z        }
& K8 u+ A' p* j) f+ I  K        else7 P8 ~: c% U$ P
        {1 c) ^- T7 ]  j3 X0 _2 m: S
                currR[id] -= redInterval;
7 T% m/ v! a2 a# N$ j8 |, i1 L; a! R5 q
                currG[id] -= greenInterval;
9 u7 g9 e2 D% J- V5 e9 G4 e1 a/ d7 S3 H& O& D% G
                currB[id] -= blueInterval;
  r$ M4 o& ?" a6 S+ S
) B: \. j' G- r4 |4 Y- ]                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) b6 |0 v7 T% y8 M& p: R8 e

" F3 M  p8 ~# _% Y  `6 e; T                if(--count[id] == 0)
+ L8 W0 k* a: g
! v9 U4 ~: R3 J% C7 k! q( N7 @$ x                {
2 M0 \3 t3 ~+ e: H
7 H4 v8 A' t% {; }! G( X                        fadeOut[id] = true;
1 U8 f% Q6 c9 L8 q# U! \6 C$ R0 Z1 a
0 Q' a: N! h) ^2 Q1 K& k' o3 G                }
- P4 c8 K. h! _$ e2 d
9 \$ x9 X1 I- j4 v8 w9 J        }
. H1 Y, V% |; S
" ^2 P9 u6 J/ Y/ p# U$ f3 i        if(continuous[id] == true)
. c5 N, k# o  u
/ Y, O: \/ K! \7 x3 l$ A' X! s: t        {
* m4 T3 X9 B! h0 n( }# {9 z' s5 l! d! o7 E
                document.getElementById(id).style.color = newColour[id];               
/ [' x5 K! E+ Y6 G# G/ z9 T6 m# N* o0 r- n
        }8 p3 i: Q9 {6 Z* u& t/ ~0 O

* ^% \1 k, Y6 |2 Y( `        else- Z3 w) ]: O1 Y5 p9 b) L

  l' D3 j7 R% Z2 X2 g: K7 d! P# B        {3 z$ B% k# K, Y% Y, U! u: q" r. }

9 x$ h' ^7 g4 Z. M* d# S0 h( r                document.getElementById(id).style.color = hoverColour;
. Z8 [5 w- p/ I5 K7 W
4 P8 s3 v! H. w        }
. \4 {' r/ o6 L* w8 i0 r. j8 K0 {; y- w+ A
        clearTimeout(tID[id]);; _4 L# F, F6 `5 J

# ?5 ^8 m, P8 M) X        tID[id]=setTimeout('startFade(' + id + ')', rate);4 s1 \9 q) D% c1 t/ j- j- r

; I3 J& o# _. o6 A0 i}) [4 e) Q* ~8 K! z; D& H
1 G0 z) X4 r: b) V' w( a, C
function continueFade(id), I% B# u  h1 C' i( v/ _& K
+ ?6 Y6 o# }, S
{
. o9 _" l# z) r  F7 |
( p5 Q. m/ R1 X2 d* i) t        continuous[id] = true;
# [8 J2 x  `" p8 w1 c- e- R* v1 E) B
* B! ~5 h. e. \+ K' j& Y  t}/ a7 O8 }5 b% V$ _$ X5 S
, `$ k: \! ?& Y  }: f5 Q
function stopFade(id)7 _1 {# Q' c" }9 a' R, \1 ^, `! [
! K0 N+ Z6 x& V. F  W
{
4 o) T, B4 c& j5 v0 P
: v2 w5 J1 g2 n+ l/ r; ?7 @        continuous[id] = false;
% `* ^" g2 I* O( v- H
) Q& T6 Z( U- _) k6 t: y! r1 x, c1 l}" e' _' T' P( f% H8 n. t6 [
- |2 _9 W/ @) O# H5 l7 R
function StartTimers()
9 w% B# r, F; h* p+ b$ e6 X7 J, ]: \& g" }
{        //set up an initial set of timers to start the shimmering effect
( U  R% J3 w% c  q9 _! \. q
0 i& n) C; ]7 T1 X+ f        for(id=0; id<numLinks; id++)  U* s( @4 w6 _& o- Y
/ T' r1 |  G8 K+ s2 [. q3 t- g
        {
4 z# C2 o  `% T6 Z4 v( g! @7 \0 h% H5 n" g$ x0 o% U4 k" L
                t=setTimeout('startFade(' + id + ')', id*100);% [# g5 L, z, [9 w% V/ f( a
5 r; R) @- R3 X6 q7 J" _8 L
        }
0 s" n& p& U1 A% |/ v) g' E( g5 r  V" A4 a
}
. m+ U+ U3 n, o: C; W+ C( z
0 `+ U9 q$ J3 H; k$ O' h0 V0 N0 Y2 j//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')+ }. ?& w* C4 K9 t

4 ~* W; Q# z6 I3 m9 N- T( VinitLinks('#FF0000', 6, '#FFCC77');
- I% f& }5 |- b" R; H4 b& I8 [+ F; c: p+ a
//-->
! S% C" {1 i5 Q* n+ }( v* r+ @: e. ]/ ~
</script>+ W- e' G/ `# j' z0 K
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
6 b1 ~$ ^4 t0 F* `- a0 e2 L* E</a>1 N8 [, E* |0 {9 `9 j9 J
<br>0 W' @6 q7 }( U; d2 ^
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>6 b3 r4 ^6 ^' T/ X
<br>
7 }0 m6 a) P, v4 m/ f, `& a<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
. F1 j( ?- @  p$ l+ r1 w. e<br>       
( D: X1 n& c3 S" w) \<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" f, T- P7 M0 ~6 O- n0 e6 p* i<br>
8 G( r4 M! M" M  v8 t" d<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ M6 }) l7 g& P8 V& T
<br>
$ T' i8 r) c; p1 |+ V6 e7 p* \0 N/ q: u<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>6 ~$ Z, H  q( J1 m0 M
<script language="javascript" type="text/javascript">" n: p9 a5 f2 ^# X0 ^" a6 w: Y# V  d
<!--# P( H% G1 J& [7 T3 u; e  B
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
( r4 {8 \8 G6 N# K5 g) w//-->$ e+ c8 g8 i) Q% `) T
</script>