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

zw2004

<script language="javascript" type="text/javascript">3 r  A9 s2 O+ A; w# P
<!--" s/ V9 w  E3 ]1 M6 U; `' M
// convert a single digit (0 - 16) into hex
4 Y8 L9 a5 k" n/ u' Wfunction enHex(aDigit)
, C! g7 M5 ?1 E/ ^% ^{3 n3 r, `; r! _7 @/ [
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))( _0 {+ a- b' p8 D! |9 k2 ]
}
' I' @2 J5 h! E& k9 P// convert a hex digit into decimal
0 R+ ]4 F" |+ h* g) D( i0 Ufunction deHex(aDigit)* ?6 _- d, N% Q; s/ {; G" l
{
* X8 b7 {# ]0 g6 M    return("0123456789ABCDEF".indexOf(aDigit))
3 X0 [* ?( i/ D4 P3 j& R( K}
! j, c3 \/ z1 z2 M+ A1 u. M+ j: n. R/ B5 w8 i
// Convert a 24bit number to hex& y! O) S* c2 r
function toHex(n)
( P. `# V9 K( h& e0 Q  v{" B# A$ N5 c2 c$ Q" h& h( q% `  n
    return (enHex((0xf00000 & n) >> 20) +
4 o8 N1 i3 n3 l; U/ ?. B            enHex((0x0f0000 & n) >> 16) +
/ C9 v5 `; l, U3 Q5 M1 @6 f: p+ T5 Q' m            enHex((0x00f000 & n) >> 12) +7 b" j, N* P+ `1 L
            enHex((0x000f00 & n) >>  8) +  `' D& y6 s  b2 i
            enHex((0x0000f0 & n) >>  4) +
0 A2 e. y3 n: l+ e$ B6 d& P            enHex((0x00000f & n) >>  0))+ g: [/ W  }' f/ l- H
}
; @6 o( a6 g8 f, ]" h// Convert a six character hex to decimal) T$ v7 Q+ w1 Y/ ~
function toDecimal(hexNum)
2 m4 p4 g) z* ]- A$ V3 A' t5 e{
! W: a! i3 W) f+ O$ J           var tmp = ""+hexNum.toUpperCase()2 P. l4 W! c0 @& ^& n/ [$ L6 f
    while (tmp.length < 6) tmp = "0"+tmp$ ^' |, l  f1 L' Y0 X
           return ((deHex(tmp.substring(0,1)) << 20) +. c$ H% u* z% |' p, X" J' U1 v; I
                   (deHex(tmp.substring(1,2)) << 16) + ( k7 F3 b% w$ I5 R
            (deHex(tmp.substring(2,3)) << 12) +2 ?5 |) F+ t7 V* z, m! ~, v/ K% B
            (deHex(tmp.substring(3,4)) << 8) +
& q/ P3 r, i  K( Y1 o# K, t            (deHex(tmp.substring(4,5)) << 4) +2 k7 I& i/ K+ O
                   (deHex(tmp.substring(5,6))))" ~+ m) V/ h' G. Z
}% S) F  i1 j( m  g6 ?
///////////////////Shimmering Links/////////////////////# z! m1 t4 _, x& D
//global variables
$ ?. H9 [4 q' o4 m  V% o/ Zvar hoverColour
  ^% s% N* m' `5 t: Mvar numLinks;
. ?( ^* ^7 y: O( P0 ovar rate;
0 h6 B: h9 C* J0 H3 b2 Ivar numFadeLevels;9 D4 b. D! B/ i# i5 s
var bgR;# f, V9 _2 C  I
var bgG;+ x  ?( O  H+ w6 x- O
var bgB;" j4 ^  A+ {6 @: P. l. u
var currR;
, l( _' R8 j# q9 svar currG;  k3 \% C; D2 y4 b- |3 z
var currB;
: ]8 ~: s7 o' F: _% ^) h' `: Z+ lvar count;# v& A1 }3 {; V: D( X
var fadeOut;
1 ~  \+ F& p0 T1 @( pvar continuous;/ ?4 Z% e6 t* j5 F2 c$ f7 P
var newColour;) i4 ]& e; M+ O0 Z- T+ P! a% s2 W# e
var tID;' C8 k! @# K- O/ }6 h
var redInterval;
2 m. B! b( H; X1 D" ?: E5 lvar greenInterval;
7 j4 x4 d) ?. V$ {var blueInterval;; O. U$ S# Z" N* E- s) J  c: B
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
3 x; K5 n6 [  x( S7 `% q7 m# c. K{
: P1 q9 O- s( E* \! n/ w% u  `        hoverColour = mouseOverColour;
1 U$ m' K" P# j; |/ {: A$ u1 b        numLinks = numberOfLinks;
- e! C# V5 X$ ^3 ]. O        rate = 1;
8 m, o3 U+ f7 d" s        numFadeLevels = 30;9 U/ r4 y9 I( L7 y
        function initArray(theArray, length, val)
! X1 ]' M" q2 N3 J        {
- w, H' G8 ]9 N* N- J$ k                for(i=0;i<length;i++)
+ X* h! t! ?0 M9 N% o                {
7 k* Y7 v$ N- Y  p                        theArray = val;1 A6 L& _$ q* M% c* Q& {# f
                }$ j( O8 Y' C, r) v' L
        }
0 |8 p( u) {. P9 |6 q        bgR = '0000' + fadeOutColour.substring(1,3)
4 a: L" \8 p; K3 x  O6 ?        bgG = '0000' + fadeOutColour.substring(3,5)
2 b* f; `1 j: @0 X! Q' n        bgB = '0000' + fadeOutColour.substring(5,7). t6 V% L6 ]4 {0 _3 @; j) }
        currR = new Array(numLinks);
6 D) r- w" ?" u6 D3 c        currG = new Array(numLinks);% x# f% P" L) ]( ]" p
        currB = new Array(numLinks);
, k" s; l- E- X7 a& |0 k        count = new Array(numLinks);
0 d9 v! ]7 `6 b' A+ x! Q        fadeOut = new Array(numLinks);# v6 D- X# S4 l5 j: r: c6 S$ y1 r* O
        continuous = new Array(numLinks);: z5 Z2 }7 ?9 i$ ^
        newColour = new Array(numLinks);
- G! h; V' i9 G% v8 Y( I        tID = new Array(numLinks);
+ d& x1 F) v( b$ @; X        redInterval = toDecimal(bgR) / numFadeLevels;& M; C$ M8 e( {$ j
        greenInterval = toDecimal(bgG) / numFadeLevels;, @- g$ O& @: T- W0 T
        blueInterval = toDecimal(bgB) / numFadeLevels;3 {' a) k# f4 [
        initArray(currR,numLinks,0);' ?) B- g) B; ^) D2 ]7 Y3 ^
        initArray(currG,numLinks,0);9 S# N9 F# G# T* c$ J  u1 L8 h
        initArray(currB,numLinks,0);
" ^4 H( X  l2 ?. d) |/ c        initArray(count,numLinks,0);
$ I' ~, j% K4 J3 Y3 S  p3 n0 t+ F        initArray(fadeOut,numLinks,true);
! ^7 u2 h! X0 F1 O        initArray(continuous,numLinks,true);
/ [2 G/ L& u1 P" `0 V4 A}       
9 V5 p0 q# y( t% T) p# k( ^0 [function startFade(id)
+ T# |+ d5 E6 f- @  k' m( Q{
$ z" b9 @4 ^) M1 [. y2 R2 d3 }5 {        if(fadeOut[id] == true)
/ R( F9 Q4 G$ b7 i/ d' |0 k  r+ Y- J        { /*move colour towards background colour (increment)*/  c1 x, e( ]7 ^0 V
                currR[id] += redInterval;  ]7 V+ `8 ^, z- ^- e$ r
                currG[id] += greenInterval;
$ x6 j8 G' X* L& m                currB[id] += blueInterval;
5 B8 b  }3 m1 ?' R                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 U2 \+ g6 i5 E6 L6 p1 s5 \$ R
                if(++count[id] == numFadeLevels)
' G# t, C; \/ t+ I                {: j: }, E; Y. i; H* X" u; N
                        fadeOut[id] = false;$ G- a: G0 f5 K  ~" m2 R5 F4 y: M
                }9 g& U' R& ~# N  y/ {
        }
6 g' X+ G4 q8 G0 ^        else
, G+ z) ?0 ^9 |4 m. y        {7 \! a" [2 J: ^
                currR[id] -= redInterval;
9 ?4 Y4 _/ v& V, o: {+ c3 {! g1 y3 ]6 ?" O7 V7 w) ~
                currG[id] -= greenInterval;
1 Y* z8 y# f# t4 _" P) J+ d9 K* E0 D: @7 X, H8 C5 B& m
                currB[id] -= blueInterval;6 G0 M; q3 R7 d6 g% q

' i8 m9 m) {- M; c9 {* R# u7 _                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 R2 u4 L5 M% [& s8 X% s6 k0 z: E) c5 S" c
                if(--count[id] == 0)
) a  L, R2 e/ o3 R' C
( N. d! V) h. t5 h4 g                {
7 o$ N2 G3 e5 i5 G' E# R$ x. N# g7 @& D2 F; q
                        fadeOut[id] = true;9 ^- F! X) h8 Q  d7 L. G' m8 ?

* U4 B; ^- _$ E% `, ~/ u1 v3 _* X9 m                }5 E+ G0 X4 W1 C+ M6 L  S: a/ ~; G
: r5 c. o7 b# T, r$ I! u2 }
        }/ W- S8 a  f& W& C1 {/ ]+ t

8 O' g% M) m2 w; M$ n$ F        if(continuous[id] == true)# i3 |8 s. T  C- t8 R+ u( [

  |4 ~! t- W8 m  r        {
; ~3 H2 @% S" m! k% M. a+ j' z. R" K# G9 s: q7 o3 v
                document.getElementById(id).style.color = newColour[id];                2 D! u, m. G! V

: `8 N0 i8 o& s) O5 e9 S1 `        }* l3 N0 T/ i9 C" F; X

- x& S- A* L- p- K' V        else
/ Y" |  s, x7 C* }( `7 q9 G7 Z+ |' B2 ~
. ]1 r+ k5 ~! d2 }* b; ?* R2 o. R        {6 F) {7 k  w0 T, k) a/ i

( X% c' u% Q: T2 F1 n4 m                document.getElementById(id).style.color = hoverColour;. c  }: S4 |! E5 R
/ y  l* D! \; O2 z4 J$ h( _
        }
% o1 X1 w$ K' d' L# V' D& b' B3 a# t) y- B5 y
        clearTimeout(tID[id]);
* Z' L# E2 R( x! Q; z
! o4 A. ~5 M8 W. J        tID[id]=setTimeout('startFade(' + id + ')', rate);/ y& c" ?! u! c/ m

( @/ X0 B1 @" w7 i( b5 P}5 m4 q+ {, ^6 o

  t2 P) F! |. m* F0 a! b# Ofunction continueFade(id)
- N( Z6 s0 R$ ]; x6 C7 Y5 l9 L3 S" d% }3 X
{
. k! M6 P2 ]7 F: z6 p1 j/ X: _9 G" ]& g& O' t. s
        continuous[id] = true;8 d6 b( i/ _# \5 s
4 M, u6 l0 X& z7 o8 V
}' l( I5 Z, n5 o1 a  \

2 Q( _$ q. V9 d& Ofunction stopFade(id)
; T( m- A- S$ N
" q+ c$ a9 h4 N+ @* _  J  o{- ^; Y1 h6 }# R3 S9 V& r$ S1 L

" a. P/ J" E  o( N: c. Z0 r+ T        continuous[id] = false;
9 |. l+ L; s* y+ R2 A* M" t
. P; {& {# _/ ?* c- k! R}
# [  q5 {/ ]9 R6 L' d" E
5 Q" w1 k; a4 ?  u7 ~2 Vfunction StartTimers()
$ q# `5 c7 M# l) {$ n8 e8 y, l+ |8 U: u9 V6 g  D2 L$ \
{        //set up an initial set of timers to start the shimmering effect
1 p& {  p: A0 }( \4 ]- `
$ l# u" y' G% I' V0 s5 I2 g/ O        for(id=0; id<numLinks; id++)+ \5 b1 `8 u8 R7 @/ ^. J

, D- s" ?2 }% h  K0 L6 w: K        {
  ~+ E9 q- k% b9 N7 k: M- v4 d
  J' A. h  v4 D# D& x) \* Q. ^5 q                t=setTimeout('startFade(' + id + ')', id*100);
( q4 J* K) _5 P$ D, k) c+ T6 Y, G6 Q
- L$ K6 r. g! C% t# L. d9 S7 K7 C        }
  J1 R, R9 ]; j. s; \/ {3 |9 S# d8 i
}
! O. c) G8 q: s  [) R" I2 W0 T
: p4 m/ I; N3 a! \& v7 O//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')  P/ S, @- u, ]" o* P9 e

8 l/ u% |/ z' u; U4 \$ x: [initLinks('#FF0000', 6, '#FFCC77');$ {( a  f# [" F6 c( L9 O2 G
2 o1 ?9 t( S; c, o' J& J: H: [
//-->
# T, ^0 w  `& \/ f
8 u" S/ C# s: a$ S$ ^$ P' A2 b+ R</script>
) g. E7 Q" v: s/ A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
! @6 s+ h+ p( K: i" [</a>
) K5 o' r8 ?" Y( r6 y( Y<br>% B) {: O3 K2 C5 v5 b
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
" g! H7 R  r9 i# y, a+ Z<br>
/ s. c, N' m( ~9 I; J<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 l( ~- x3 |8 N
<br>       
) u4 y$ {& ]- J' h- C, @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>0 Q" D1 L0 R9 V0 t
<br>( h* c! k+ p* q  H
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. I/ x& N# N: g4 q
<br>
  a0 ~$ f  @% c' o  x1 ~) \<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 O0 m/ Q8 w5 n
<script language="javascript" type="text/javascript">
) ^/ w6 W$ p* v' N& \- a<!--( g3 t5 l' N/ l  I
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& L# {% q$ v6 l* z; m8 u% s# ~
//-->
. I& ~! ?8 U4 i! m2 m</script>