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

zw2004

<script language="javascript" type="text/javascript">
. g: Z1 r" ^; b2 c. a" O<!--  x- L$ C* F* w) _* _
// convert a single digit (0 - 16) into hex
2 n! o, G! \8 t8 R2 y5 f/ S3 g3 lfunction enHex(aDigit)/ q. v' ^+ k  a' I
{
* Q. F; x  ]% z' m* Y( F$ b1 }    return("0123456789ABCDEF".substring(aDigit, aDigit+1))8 E( ]! ]/ m& z# G( b* F
}/ @9 y/ {) p) N2 x
// convert a hex digit into decimal
' o$ ~! i/ e9 g- C5 f/ B1 ]function deHex(aDigit)
8 f. }% o" _) \{
, z1 a* f3 ?- K- D' u3 ^6 O9 Y    return("0123456789ABCDEF".indexOf(aDigit))( g* V* `0 o' r! \; ~6 Z
}' O: ~" \. E& z. J: J

8 p) o( I! h' |. _// Convert a 24bit number to hex
9 ^6 m) Z, J/ K5 P- r  T7 D$ Afunction toHex(n)/ p; W1 D5 M9 i( T# ]! p5 [
{
8 b! s3 t& N0 T7 ?8 g/ x4 P    return (enHex((0xf00000 & n) >> 20) +$ e' l6 T2 O8 q9 y" [+ |: `
            enHex((0x0f0000 & n) >> 16) +% w# X2 O: G' Z
            enHex((0x00f000 & n) >> 12) +8 T8 n) |# m1 U* Q
            enHex((0x000f00 & n) >>  8) +& [+ l- ]+ ^- \. H
            enHex((0x0000f0 & n) >>  4) +
  d1 D9 K; k; H1 ^            enHex((0x00000f & n) >>  0))
; H2 g/ _( o' p! m' q. [( n}
6 _( @  R/ Z4 k$ I// Convert a six character hex to decimal$ ?1 @9 A$ {# G, P# a
function toDecimal(hexNum)6 K' P7 f; y! U
{8 o  P* c- o4 M3 V  Z% M1 t
           var tmp = ""+hexNum.toUpperCase()
- ~- \2 I* V" k  g    while (tmp.length < 6) tmp = "0"+tmp
; [9 ^( E: |+ H: ], i9 B           return ((deHex(tmp.substring(0,1)) << 20) +
( h7 a4 V1 e3 n& }: @7 Y                   (deHex(tmp.substring(1,2)) << 16) + " v5 ?* P, G8 N7 `# V* H
            (deHex(tmp.substring(2,3)) << 12) +
, b" L  T) a) w& t            (deHex(tmp.substring(3,4)) << 8) +
/ {5 N3 D% R; u$ I& Q# [            (deHex(tmp.substring(4,5)) << 4) +
2 V, ^  V; A$ \                   (deHex(tmp.substring(5,6))))
6 n6 E3 Q3 l, X}4 T5 x. C4 @7 j0 d
///////////////////Shimmering Links/////////////////////6 v5 {+ ^2 n. R) y+ q
//global variables; K/ Z' W& |- [/ J+ c
var hoverColour
1 j8 ]) a1 Q& N- `var numLinks;
2 T1 l  ?+ U* u  ovar rate;
) z/ ^8 q) O) x3 a9 Pvar numFadeLevels;6 D/ _- p, v! e6 ~
var bgR;
6 V* k; O8 [2 Ovar bgG;" P  j" e  Z5 `! d% j9 V
var bgB;' G/ D9 I$ }) ~* r; J
var currR;0 m. s- n: q/ ]/ r$ o& R! Y
var currG;( J0 m' R* e! k) d# V
var currB;! e+ k  q# [: z: M5 Y6 s& R6 ~
var count;" b" E% a; v4 m) o! \' Z. ^6 a( K
var fadeOut;- Q- C) _1 @1 A8 U- R7 Y0 n
var continuous;
8 o! Z0 }" P) m  M9 zvar newColour;
- T0 o$ J- q9 i) fvar tID;# A1 M8 F, _3 O" }
var redInterval;: Y8 t) l8 `. J5 u
var greenInterval;/ v8 {' d3 [) A: s. C
var blueInterval;
+ F" u  n, m7 T* z$ |: E3 Z: hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)7 H5 D* I; |9 W' O9 \) g
{) [0 B# q. K' `5 A! |0 k; ~% ]
        hoverColour = mouseOverColour;+ _+ M* S4 t7 }8 C1 c. r
        numLinks = numberOfLinks;8 v& s' W+ t! o6 E# z5 c# Z! h0 R8 O
        rate = 1;
! |5 Y& J3 f( P8 R        numFadeLevels = 30;% j0 e4 T7 y" c- U. Y" J
        function initArray(theArray, length, val): \% f7 `0 a$ h
        {
( |. ]& |' Y) @" P4 j# f                for(i=0;i<length;i++)
' Y4 l1 p1 z, t- y* C                {
9 G/ q, j( ?9 V+ ?                        theArray = val;) L5 N  h5 s, T4 b
                }  x* q: P7 b2 o! g2 K8 ^. R' \
        }$ I1 Z4 l/ S( M8 P* i9 e3 t
        bgR = '0000' + fadeOutColour.substring(1,3)1 C0 N( y) s: [1 D7 j; \
        bgG = '0000' + fadeOutColour.substring(3,5)
" m1 j5 G, Q3 S; s* E; |        bgB = '0000' + fadeOutColour.substring(5,7)
' a$ G7 l) y. b! l- [) h2 R        currR = new Array(numLinks);0 M) V# N; \8 x- U% A" l% |
        currG = new Array(numLinks);
& s1 K( }2 D8 C8 V/ L        currB = new Array(numLinks);
7 Q" O1 y8 V8 v) [$ ?4 e        count = new Array(numLinks);
& M2 O3 \5 D, E; Q        fadeOut = new Array(numLinks);$ u1 M, o! s: Z
        continuous = new Array(numLinks);/ E! S% t. r# |6 l: F
        newColour = new Array(numLinks);9 {& @2 V: r' w9 c0 D# _: [6 {
        tID = new Array(numLinks);
7 x; n! a' \0 z5 Y. \        redInterval = toDecimal(bgR) / numFadeLevels;. p7 V  \3 g# F/ Z# g* Y! M4 R( c
        greenInterval = toDecimal(bgG) / numFadeLevels;
  ?* C; ?) C" H) E5 H7 p        blueInterval = toDecimal(bgB) / numFadeLevels;
5 H, n+ h# d/ B6 W( O# j: u4 d        initArray(currR,numLinks,0);. T, |! d3 \6 h: M# |
        initArray(currG,numLinks,0);
( K& \% X8 [/ t$ z        initArray(currB,numLinks,0);( z; D: H( L9 F9 P6 T
        initArray(count,numLinks,0);! ]. k. i2 N" t9 O
        initArray(fadeOut,numLinks,true);' u% z& k' s, ?
        initArray(continuous,numLinks,true);9 ]- h& f! X. x
}        $ w4 i  m& @  g
function startFade(id)- g# ~4 \8 `! d; |; C. R1 b& |
{
2 M! s2 _* y# d# C5 O$ s        if(fadeOut[id] == true)! U* \$ f, |0 G; X7 e; ^. ^5 g
        { /*move colour towards background colour (increment)*/
2 J7 G5 S. H. x( [2 }# A; O0 {$ Q                currR[id] += redInterval;8 {! R" P: I" `: V# R+ a3 |
                currG[id] += greenInterval;! a( |" i+ h; w; ]0 ^
                currB[id] += blueInterval;1 g( w  i: x# H* n8 I
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) F& _) H8 U- f3 Z9 J- b
                if(++count[id] == numFadeLevels)/ v2 j4 j/ _5 q; {9 ^( |- D3 t
                {
$ r! |. q: |8 E; Z, g( P                        fadeOut[id] = false;3 V! M; O$ \" p1 r* t) d9 A
                }
) b  q3 r; g3 V        }6 f8 O" A. I; n# \
        else8 ]- b6 Y7 y( ~1 C4 A
        {
8 S1 g' ~: _( U6 ]9 u6 f                currR[id] -= redInterval;
2 h2 D/ f9 k" E: S5 ^9 Z0 t# J- x3 R1 V5 K6 u6 |1 e& P8 Y
                currG[id] -= greenInterval;# E$ `3 d0 W' R1 j: r
/ B& h2 B: q- q- M- s
                currB[id] -= blueInterval;
! L. e- e& w. f& b0 {. a% n1 x6 F7 P5 k) F! w* D2 T0 Q
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, g& ~, k2 N, u8 b* v' c+ ~8 V- t/ H4 p/ N2 h+ Q3 V# P! l1 E
                if(--count[id] == 0)
# ?4 q& M- q( n% p" k( R- Z# z/ y# g  {
                {
! {$ _* A! N5 Z0 w0 h# \; Y5 Y: I! U0 }
                        fadeOut[id] = true;
. Z- y/ O+ K! v& T' S6 y+ W. U4 g: N
                }. F& K4 H$ s' C8 Y! Z% f( k, i
$ S& q3 ]; G- g& p$ m  C" n/ J" K0 E
        }* w4 h- j; u5 j0 \( T( d; \
  m  |1 m$ c! \
        if(continuous[id] == true)
8 [6 U" F+ |; t( z, _
0 ~; e- b/ T' q) ?3 P: z        {9 U: ?3 _" b, @+ c/ P2 z

; d  [+ Y' Z% g" e3 i; H1 h                document.getElementById(id).style.color = newColour[id];               
% a( G0 ?) T; p% g: G( P' _2 J
! E$ h) e% @1 f$ i9 x" T5 [" O        }
) r) Y5 D) d& D0 n3 Y
0 I; _/ R* q8 Q. m        else( x6 O' ]' {. y% J) v. i7 ^
& Z2 g, P: r, T8 ^
        {
) Q* m8 s+ t7 b) d+ Z$ H* D5 O) S; |$ K; \
                document.getElementById(id).style.color = hoverColour;0 S7 h8 `2 ]! h% d% e1 O

1 i; O# o' p: i, C# B' e8 P8 m        }
, G5 _8 z, I8 R! b- C) s. H+ Y9 x, c3 }) S1 c& D: k1 }: K5 z$ V
        clearTimeout(tID[id]);) t7 i  \" n, {7 F) E8 n$ e

  |3 e- \/ l- p- J- |0 i# m1 x        tID[id]=setTimeout('startFade(' + id + ')', rate);
5 }( u" Y7 ?8 _- J; ?2 ~- ]. W$ r2 }' j- i6 s
}. {- g. y, W1 r- X* o
% B' N5 h9 _8 Z% F, Y
function continueFade(id); Y3 }: l! ?2 A! x  e! a
  U6 k0 {9 R% G; o. x
{
2 c; W  \$ c3 G8 X. j+ w! U" u2 `( W+ u4 A* S- z  a6 @& B
        continuous[id] = true;- u/ z) f" J( A0 Y3 u
! \7 P& F1 Y" y: l
}
; A, A, o5 e; s+ d2 Z  ]1 Z( l( w. ^: J7 ?* Y
function stopFade(id)! D, j( q% ~5 M: L6 ~2 D
0 l$ U6 @- M+ R4 |# q" Q
{  G8 d/ W1 S9 c6 P

' O1 g. n/ h# g4 @        continuous[id] = false;
3 \$ I  A1 X* T" q+ J8 `9 ]; x9 |0 B6 C( z2 h" w
}
; ?, l  X) p$ [5 w7 x' |! E+ r  @. V
function StartTimers()
* }2 A5 l; l0 P1 d/ q, A' h! [
0 C" s1 y  q0 R" |- [{        //set up an initial set of timers to start the shimmering effect
& Z9 B4 S  P. @2 Y5 c" ^" `% o5 Z% ^% B$ y
        for(id=0; id<numLinks; id++)
6 f9 L; K( f( e7 o7 J, K3 v0 E8 I9 [0 z
        {
* U0 W  V$ L) g2 G5 j& E" w  N" |, T+ @2 i+ L! s( _+ K, x
                t=setTimeout('startFade(' + id + ')', id*100);& [( x- p5 B6 f1 d0 c
' z! M9 \9 i% }9 @) G
        }2 M8 N5 K. j2 g+ W" R% T
( s4 r/ `; F- J- w- P& K, h
}( w5 f! n, d, p- a

) d4 {, E; J+ A6 T//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- z" x5 X# S# W0 c
1 s; H8 L+ L* p8 _' i6 d
initLinks('#FF0000', 6, '#FFCC77');. P8 z' V/ ~9 T) o; z6 o

4 Q1 _8 H; i1 J" b//-->
. C+ t( [' h( I" s: h
+ Q6 V, S1 c  X* K$ G# u</script>: h. U- k' o% y7 d
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
& f2 p5 F$ g  f. E- ~6 W$ T</a>- z7 R, c2 E( s7 j# Y8 {5 h
<br>
. a. X! Y% \/ r5 V<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>8 h& S4 a$ p# S7 `* v% z% ~5 n/ L
<br>
8 B0 h& G, J; S6 m0 g6 ^) M* N" @2 B<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 `( q* ^  V9 w! H; ^
<br>       
: l) Q) B" [3 X; i* J  R7 Y- H<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' j1 G, g. z8 f/ ?( l  ?. G3 V
<br>0 v4 q0 Z% }- _" l$ `$ z8 n* j
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>8 Q: W! b8 f( I3 v$ H+ a( t0 t
<br>
* }* _$ [! a9 F# ?! a0 s% G2 P2 R<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* ~3 }& q; j5 W8 r
<script language="javascript" type="text/javascript"># }/ m% c3 o+ {& K" A( U0 a& S
<!--) l% I  k! \1 H- Q
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
3 `; S- L7 [. ^//-->
: `3 ?/ E6 L& y+ p" a1 L1 x</script>