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

zw2004

<script language="javascript" type="text/javascript">
7 L7 z( r- p/ a5 R% @) w<!--
) N) o: E9 v  f0 W: N4 A! W// convert a single digit (0 - 16) into hex
! k2 X% T2 X7 b' Ffunction enHex(aDigit)% h, S2 p* w! I; o$ U7 j7 i( G
{
& A: b" p, b, L    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
8 D( E2 ^- P$ p+ d/ F* O! X}
8 S7 E" N/ F# F' ^// convert a hex digit into decimal
; a( g+ b9 K$ Z8 l4 g' tfunction deHex(aDigit)
; ?& h! v8 l0 H" Z* k# z3 x$ H{( G! w8 I$ I, Y' I1 T: q
    return("0123456789ABCDEF".indexOf(aDigit)); `" D) E( d7 l( e# W( G
}
' X: \+ h! o- _" d2 X  f- K) X9 }; \- S+ ]3 T7 A. R
// Convert a 24bit number to hex; b  I4 s1 m' [, _4 O
function toHex(n), H+ G4 v8 A1 r1 H4 f! m
{  W3 r9 ?0 t2 e& g0 z
    return (enHex((0xf00000 & n) >> 20) +
2 e2 s1 S/ u: l! a9 D) J1 P            enHex((0x0f0000 & n) >> 16) +* a+ }/ b: V' p( U0 {  |
            enHex((0x00f000 & n) >> 12) +
7 w7 ?: r% |- d0 Q            enHex((0x000f00 & n) >>  8) +) V% @3 F% ]4 N" x8 X2 q4 l6 o
            enHex((0x0000f0 & n) >>  4) +2 W# f4 u' Y. l* u9 a
            enHex((0x00000f & n) >>  0))! ?( ^: S1 L7 ~3 {
}$ g  k* E4 y3 E& N
// Convert a six character hex to decimal. M# M5 n: v. E9 C2 G
function toDecimal(hexNum)# v4 _! X; X3 S! b6 |! h
{
0 h  ~* c6 m. F$ ^' h           var tmp = ""+hexNum.toUpperCase()
* X$ X; ?; l0 w5 C2 H' B2 K2 E    while (tmp.length < 6) tmp = "0"+tmp
1 _* D/ l0 }) ^$ U9 T           return ((deHex(tmp.substring(0,1)) << 20) +
% u4 H( V! t+ H- y* d                   (deHex(tmp.substring(1,2)) << 16) +
$ `" S- `) Y( ~& P( O+ u            (deHex(tmp.substring(2,3)) << 12) +! g6 V6 A' f4 d, p, \# X% O3 F
            (deHex(tmp.substring(3,4)) << 8) +& R- b# g, ~- i) ]6 \+ p$ O
            (deHex(tmp.substring(4,5)) << 4) +1 _  v6 @) V" F5 I3 z
                   (deHex(tmp.substring(5,6))))0 ~5 G- J% Z) t* A8 ?9 }: @" B
}5 U' t# K  y% j
///////////////////Shimmering Links/////////////////////
: @* a# ?; ~- h3 `//global variables
4 m) j. Z" A! ?var hoverColour/ Y& D+ s5 r! z4 m
var numLinks;
* R" A( l- i3 c% G( H2 l$ vvar rate;& J( Z4 p' }+ |; d- Y
var numFadeLevels;
$ F! z$ W, s; c/ z+ Evar bgR;: H! t$ f! ]+ k( h) v5 _
var bgG;0 X! `7 A" {+ Z# H% w
var bgB;8 t& U+ U" h/ J) v1 ^1 K
var currR;
5 W0 A9 j" L& V, }6 Y) N/ T4 Fvar currG;$ Y; k$ R2 [9 |
var currB;- |: Y  B+ G+ d5 u5 i
var count;6 {) N5 p, k" M; L
var fadeOut;; e* C% j1 W3 r' r( \: Z2 G
var continuous;
4 ], P& G6 ]: m8 Lvar newColour;/ G# F9 z7 P+ \  E; ~& q& \
var tID;
5 }: c6 Z! s3 u- Nvar redInterval;5 X# ~" d% b5 c# W' @
var greenInterval;
7 l6 R( ^1 ]# a5 V- ]9 ivar blueInterval;
2 S$ X$ r+ a- w7 r& Z' z5 D* Ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
. I, T% m" t  p; B{
) O, N, E- t+ M% p0 _+ H) n        hoverColour = mouseOverColour;
4 `/ h/ Q3 S/ ~$ C4 E, v3 L  _        numLinks = numberOfLinks;+ c% r# _5 c8 y) c- _: T
        rate = 1;3 S, k% w; G' F
        numFadeLevels = 30;+ j5 G) }7 ?' f: U  I0 ~( T
        function initArray(theArray, length, val): i4 p" n) B1 |  ]; I3 \, V" D+ V
        {% U4 F5 z/ e7 [
                for(i=0;i<length;i++)4 g0 Z4 d; h" y% `& u
                {
) S5 G7 C5 K! E5 j; S                        theArray = val;' |3 J. }  }! Z4 n, ^
                }3 I; P. R# r; q1 {9 b) Z% j
        }
7 \. _! s7 }# O) n        bgR = '0000' + fadeOutColour.substring(1,3). G1 }& l  ~3 s  C, ?
        bgG = '0000' + fadeOutColour.substring(3,5)
8 ~: U1 W' p, K        bgB = '0000' + fadeOutColour.substring(5,7)
* g# m$ |! }# q9 ?+ R        currR = new Array(numLinks);
, L) B6 @2 x- P9 R% o: u$ Y        currG = new Array(numLinks);
) w8 M* n  c4 M1 P: Y2 ?        currB = new Array(numLinks);) a+ L+ ^5 D1 p/ ^* _% K) @4 L
        count = new Array(numLinks);& ~* u  P" `2 T4 Z1 L
        fadeOut = new Array(numLinks);
8 Q+ [9 `: x; E# `        continuous = new Array(numLinks);) [, y6 g$ K. g, x
        newColour = new Array(numLinks);
5 n& V1 k2 Y! G. W5 `        tID = new Array(numLinks);
1 w, n/ _% N& `7 I$ Z" @$ q# B        redInterval = toDecimal(bgR) / numFadeLevels;( s2 S! o& p! p
        greenInterval = toDecimal(bgG) / numFadeLevels;, H; ^& E& _- F
        blueInterval = toDecimal(bgB) / numFadeLevels;
; ]0 Z% m) e. N        initArray(currR,numLinks,0);3 M( b. N1 X# T  h$ q3 [% _
        initArray(currG,numLinks,0);# Y" V/ v9 L5 O" W& n1 u
        initArray(currB,numLinks,0);
6 w- E. F5 @5 G% C4 h' c4 g        initArray(count,numLinks,0);
& S4 v2 y+ D& U, J% m, N        initArray(fadeOut,numLinks,true);
" K" N0 u: y* N* Z1 `1 }, V. `        initArray(continuous,numLinks,true);) H7 D3 T, q9 J( h
}       
+ K/ O& B  |! v( p- u: efunction startFade(id)) d5 G/ D, W- P4 a0 y
{
6 J$ w0 [* V7 p5 P  z1 F        if(fadeOut[id] == true)% D- G! q& Y8 E: h& p  h
        { /*move colour towards background colour (increment)*/& t) D( O. I$ }9 [5 b# R$ S& i
                currR[id] += redInterval;) ?" P. P0 I$ j
                currG[id] += greenInterval;, F" n/ {2 F; R" O: [! W2 X
                currB[id] += blueInterval;
7 C# E4 u' S! S) ?: T                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- b4 R" o: X0 m; B
                if(++count[id] == numFadeLevels)8 N$ r9 v6 s) @1 h& {
                {& d* f  x  G8 W1 A+ K' T/ |
                        fadeOut[id] = false;
. b4 c/ v# P& G( c5 u& @                }* v- L- l8 K. @" p/ k% U
        }
* c; \1 Y9 J+ r6 [: y6 t        else6 ^/ S7 M- ]* e, }, Q0 E7 o4 C2 T
        {6 F% L, N' G' v3 L  ~. U2 v6 ~
                currR[id] -= redInterval;
$ {+ Q9 E% F/ m/ }/ k
5 }5 e  t/ ?+ ~( l/ {( l' U/ u                currG[id] -= greenInterval;
* ~) L5 `# F2 B1 e( }" ~3 a6 _4 @& P
" H4 |/ U! [& b                currB[id] -= blueInterval;8 E/ Y% q! Y: F
9 L0 e1 L+ }4 [' F2 s7 i
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 V" J* B" B6 ^! k

: e9 v/ R) _* [) N* q9 B7 w                if(--count[id] == 0)% V' O3 O, O; Q3 ~; b

" p0 P/ X& V* a! q                {! B: z5 L, \  D1 S* k* H( f0 p! ?( W& s2 p
: {* ?1 |7 B. q% v, n2 K
                        fadeOut[id] = true;" `; T5 Q- B1 L% z( f

# O& G, f) k* S( u" H                }
2 }# f, R2 N9 h. i, O$ `: w2 J0 u' d
        }4 i) g. s" i8 J) C" ^, J

8 j5 l( J4 W7 ~, j- X        if(continuous[id] == true)
& ~8 \+ F/ s! t! x& o& s& K5 b
3 g% k" q1 ]3 k7 X8 J( t% q        {
/ h7 h# g! a  o, L3 b% k( G
- v1 ]' {# _3 [: E. m2 K                document.getElementById(id).style.color = newColour[id];               
+ {" L9 A. t9 s3 T/ q! z6 q$ h+ V! Y" W! d0 {! m! v
        }
/ E4 v5 ^5 M# a  U( p
- s, f! u4 B5 C        else
, h8 R. L. J9 F+ y# C  I: O
- u; L* c0 f. B; X        {
7 A( K. a( G7 z0 K! x
, V: r% {* W3 ?* }                document.getElementById(id).style.color = hoverColour;
+ F( V+ ^* E4 i8 n7 y$ N2 Z, r7 i+ L) d- t
        }: N/ L5 r) O  l% U1 h% s$ Y
) z9 j) [5 A$ \# p) V/ H
        clearTimeout(tID[id]);4 w9 S, A) W4 Q7 q0 u% u, _

' i* Y2 m6 d+ X  ]5 o' H) ?        tID[id]=setTimeout('startFade(' + id + ')', rate);8 ?2 j) Q5 p) D7 `7 I& F) i7 q

' B  H9 [7 W" @- D' ]}
  A4 s- q$ ?% I/ v% `; x0 X* C% P/ Q. Y- N
function continueFade(id)
, I0 p- x) U% U; `, V
% j6 _0 `7 c1 k8 J. c5 e  h{
% Q% u/ s! l# D5 A( D, `
1 @) B0 V0 l: ?; a- Z9 ^        continuous[id] = true;5 Q9 ]$ ~0 F. \9 W  n# h
6 |" `: E# h) g4 D
}3 f& @) Q' ^. }! A4 T) N

* K" {% x9 e$ D) qfunction stopFade(id)# S. e* ?' S8 B- N( v, B. ~
3 A$ f2 G1 l  O4 P
{  @" [+ ^- n5 ]/ o+ t- |7 f

! w8 t4 R; k, S6 ?        continuous[id] = false;
! o% a3 i  @5 i9 @3 R* p( O
8 n5 n+ S% D8 ^' ?9 \}
% h1 ^: z/ i% |) O; c% J; r
7 d' m' M" k3 [. D) yfunction StartTimers()+ Z' l( t9 e6 `( ^' x* T* T3 u- @5 r/ p
) z( P1 z4 ]- C( v
{        //set up an initial set of timers to start the shimmering effect
+ q9 X0 c8 M- M5 O- z4 r1 P; z( j" N. G& m6 g9 ]: V
        for(id=0; id<numLinks; id++)
( T/ S* ^! v' `3 n- p7 K- U0 ^$ X; \9 w! d/ T: a% s
        {) O8 `+ Y8 [) P. T/ @. _
6 l, d8 f$ M1 A& _+ ?
                t=setTimeout('startFade(' + id + ')', id*100);+ ?+ u, S7 T, K3 x8 F# ?8 n
- d9 S$ s' u% Q* V- D" l
        }4 w" o! @; y5 G  [8 _# d

( G* K( [( Z* G' B. V) a3 g1 O4 O}
' ?* b4 R+ ^+ @8 R
! Y/ i' B7 e, P# p  n//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ I. `- W7 L. t) T" y6 N
7 j+ K! I& Y0 `1 |
initLinks('#FF0000', 6, '#FFCC77');. ~7 x( j; ?( V- ^& x

* k) Z+ O0 x8 Y" U9 @6 ?//-->2 f( K# [1 ^. q+ z4 c3 z' ^/ i# }" L

# [% D4 k- t+ k/ j" i+ S" Z</script>5 Y( m, \7 o- h* V4 I. q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
" L& q' j! O; W/ c* T6 {</a>8 _; n0 }4 E; Y: V% U' N
<br>6 x- @9 p9 J  I% O7 @# }% r
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
/ m  B/ c, z, z<br>
4 _  }7 c2 l& K2 H6 M3 ~<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 V, j9 R: e' y1 c& x6 {0 w
<br>       
: H/ A. b* O( q( T  p<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
; R* ?' c5 B2 N( |9 H* c; F<br>) ]* |+ E2 R  t9 b' _6 h" W1 U. d
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
2 d2 B7 j6 _7 \* n<br>* u+ u! V6 L1 N% a4 D7 X! P8 @
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
3 T6 [9 A3 Q/ b' n) ~* C<script language="javascript" type="text/javascript">5 x5 N" Z7 U2 ^8 p
<!--% H  Y% ^% Q5 \) t# M
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 b& ?" ?# p& P4 u
//-->
" S6 W! B6 a! m( H' k</script>