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

zw2004

<script language="javascript" type="text/javascript">
# D8 L! C5 {  o1 p* N6 q5 s<!--
. a3 ^+ h6 [5 u, x, p// convert a single digit (0 - 16) into hex6 I0 M3 ?! q, U; w* w, a
function enHex(aDigit)6 R3 t. O7 B8 s5 `
{# H! b1 P+ s. z0 R5 m1 N9 Y
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 I! D) f6 R* X}  b& G+ \1 ]) y. q& A& h: u! S1 G- x' l
// convert a hex digit into decimal
$ p, ?/ _9 ~: a( \1 X- Tfunction deHex(aDigit)
3 F  a8 A# G8 {4 `) J0 B{2 Q+ Q) S8 o- s8 r
    return("0123456789ABCDEF".indexOf(aDigit))
2 T. c6 V6 n( w/ `, T  Q}
" w, k6 g$ b# P$ y0 ~9 b% m2 s) A9 K1 d: R
// Convert a 24bit number to hex
; J# |7 s' t6 z% Z* @function toHex(n)
: R: C/ `; F9 U9 Z9 q% P1 G{2 ^( x- o0 g! h! I
    return (enHex((0xf00000 & n) >> 20) +( Q- V% k+ n3 a8 d( C3 c
            enHex((0x0f0000 & n) >> 16) +" y( I+ y2 s6 s# }1 y4 x1 ^) k
            enHex((0x00f000 & n) >> 12) +5 h5 L) G: R* k) [
            enHex((0x000f00 & n) >>  8) +
* {! L- a$ g2 l' `- ~' u            enHex((0x0000f0 & n) >>  4) +; A, ^" w& M) J  n( f5 c( b
            enHex((0x00000f & n) >>  0))
! Z" |2 v# G& l. F}
: J5 M/ w, p8 \4 Y5 ^// Convert a six character hex to decimal. U% s4 m6 m  u9 Y, ?
function toDecimal(hexNum)- h! l" ?7 L  P% q2 N+ W
{2 x8 v  n  U( V7 o0 f- M$ x
           var tmp = ""+hexNum.toUpperCase()
9 c/ {7 t% a% s    while (tmp.length < 6) tmp = "0"+tmp6 o. T3 E. z& ]9 N9 x+ _4 S  g
           return ((deHex(tmp.substring(0,1)) << 20) +  i, [& k8 O) i- j
                   (deHex(tmp.substring(1,2)) << 16) +
+ V$ ?/ e7 L  }0 f9 c2 C0 `) g0 I            (deHex(tmp.substring(2,3)) << 12) +
" m- |  o# i/ Q# w5 D            (deHex(tmp.substring(3,4)) << 8) +
) l' Z. M4 ]" q5 ^            (deHex(tmp.substring(4,5)) << 4) +8 s" \- m, g' h, v) e0 b
                   (deHex(tmp.substring(5,6))))* K" k" r' m9 f  P4 n
}
5 W; n8 s, C: N8 m3 c" F$ Z///////////////////Shimmering Links/////////////////////; |# W, z- b  G) F; ^
//global variables
2 [. I, O+ |+ evar hoverColour9 {: ~# I, h. b  L
var numLinks;& \- Q& u7 z: L. v$ v+ H
var rate;/ e! X9 b1 N7 g' ]! D
var numFadeLevels;
2 }/ V1 u: ^* Q! [var bgR;. C5 v5 t% s/ n% X7 x* A* W
var bgG;4 D! u- A5 v2 V! V
var bgB;* v- u& ~0 }( D* P) u
var currR;+ t8 X" J0 A, }0 v2 x  p* y8 g
var currG;
! }, n3 s" a6 pvar currB;! E6 ?- t( @4 Z, a9 f) a
var count;
2 ?0 x' [& o4 A6 u, }0 ~var fadeOut;
+ h4 K0 }2 W6 Yvar continuous;: ]% K7 M6 V. [: [- q4 M
var newColour;
8 ~! L7 g& h9 c# T9 G9 evar tID;5 e: Y- Z$ j# S: T2 T
var redInterval;7 j- |; p$ ~  Y, Y8 c4 E. @0 [
var greenInterval;
" N. l% K- x; Q2 Pvar blueInterval;
% p% q; F! C  P9 c# E8 Y! P; h: \function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
$ p$ K) d, q& b' j0 p4 ?' ?* o/ m0 Q: s{
) @+ V! b! n; \2 _" U) I" j        hoverColour = mouseOverColour;
/ x; D4 x. p% @2 @/ H        numLinks = numberOfLinks;2 L6 X* k; j$ R5 F
        rate = 1;
; h; l% E- I& m+ i# n7 U3 s        numFadeLevels = 30;
. o$ `( V- \# J9 r% f8 }        function initArray(theArray, length, val)
+ T2 J0 B% A& J+ E' ?( D        {
: P  O, P5 [2 `* P; O                for(i=0;i<length;i++)
7 J" M$ @: x" b0 ]  S+ S                {' C; @" s6 R9 l1 T
                        theArray = val;. j" H( l8 B5 H" a  X
                }2 H% Z- J; q! o) |) x' m
        }. X* L, \: d- c3 d# ~. ~  @  t
        bgR = '0000' + fadeOutColour.substring(1,3)0 H/ J. j5 ~& P! d" {1 I
        bgG = '0000' + fadeOutColour.substring(3,5)
% s3 @+ s$ O2 ?: v/ _- j        bgB = '0000' + fadeOutColour.substring(5,7)
" y( r9 Q7 Y" Q0 Z6 K        currR = new Array(numLinks);5 O9 S; T8 m* N- H9 _$ X, @
        currG = new Array(numLinks);, n+ G9 B+ a! J
        currB = new Array(numLinks);9 p* t% k! ~9 A' T; k6 [  L5 G; u
        count = new Array(numLinks);
( X) I5 I7 @$ T        fadeOut = new Array(numLinks);1 `4 K" G0 T5 D$ E3 c
        continuous = new Array(numLinks);
. s! q  a+ ?+ @% ^- |# n        newColour = new Array(numLinks);
1 ?  |6 H2 W% m0 d1 B        tID = new Array(numLinks);
: B* f/ x6 W/ t' ]# m- Y        redInterval = toDecimal(bgR) / numFadeLevels;
$ u& v; b1 X$ `        greenInterval = toDecimal(bgG) / numFadeLevels;6 P6 D+ j9 Q4 [* f5 \8 }
        blueInterval = toDecimal(bgB) / numFadeLevels;( d9 ^) d* \& [, @! }
        initArray(currR,numLinks,0);# J. K1 V$ F6 W/ u" A
        initArray(currG,numLinks,0);
9 E$ T6 O: |" p. M. o* w        initArray(currB,numLinks,0);
! ]4 X$ I! {# o3 q! D7 g        initArray(count,numLinks,0);7 m% t/ P0 u' u4 O/ k, {$ G
        initArray(fadeOut,numLinks,true);
. ~" M/ k. F! t, k        initArray(continuous,numLinks,true);3 R3 i$ L& |8 T0 r3 |8 C' m. u
}       
" L9 h% }5 E" ]function startFade(id)
1 L7 t; J: O6 l, h2 l0 ]) c{
$ X) J+ \9 n5 J' p        if(fadeOut[id] == true)# R) g" M( N7 Y; M- d) M5 z
        { /*move colour towards background colour (increment)*/" X6 A5 K  b5 D8 n
                currR[id] += redInterval;
# C- f/ y* ?) g9 r" T4 K* X                currG[id] += greenInterval;8 v, f( {% ]) F/ f, W: P! J
                currB[id] += blueInterval;
- R: [% C8 D, [% x                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, `/ }8 S8 ?/ _
                if(++count[id] == numFadeLevels)
. q5 @: C6 x. |4 ]+ H; x7 @1 L, F9 [                {
2 `# L$ y% @1 D                        fadeOut[id] = false;
& O+ U) Y- N7 m. O# h" Z. [0 E0 G                }' y* R; e4 Y2 @7 s/ p
        }
2 F6 V* K2 s) f& w% p+ b' H        else* b/ f9 J5 Y3 Z# l$ w7 W
        {
2 k0 D% j1 o+ H& d                currR[id] -= redInterval;2 }, T; I/ B# i  F' @0 J# Z

. u; w3 w: h4 h                currG[id] -= greenInterval;
, u3 d4 [# `8 e/ b7 X* ]+ D
6 U: i/ G. e# i7 w2 u                currB[id] -= blueInterval;. ?# x, u1 U+ ?0 n% H
6 u" R" A$ n# |9 d. @
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 Z- @5 ~- e' T8 _: M5 B8 h

/ p/ w0 e3 ~9 D/ J8 U8 Q2 r% J                if(--count[id] == 0)
3 s. L8 n7 K% w# B  f' s! k
* Z7 P' s3 p+ _; Y7 ?0 b                {( L* V1 Q! @  v# e  }

: U: Y2 }+ O0 d5 J  ]                        fadeOut[id] = true;3 N9 E+ V7 K9 W# C- I7 S

- }) o- E2 u5 M: v7 o& z' ]6 ?" Z                }
; X/ j* R5 k, I/ y! M( z: ?1 d# ^# x' N' K1 ]; j
        }
- q% j% v0 [& J' b& w2 K6 `. u8 U6 |
        if(continuous[id] == true)4 T9 M: G, h4 _% D' s' D& p- u
" \& F0 C1 @) F- N
        {
; o$ G1 a8 H% X2 s
; V. {/ D9 x, A9 V! F                document.getElementById(id).style.color = newColour[id];               
' [; k5 X- N8 S2 W" l2 D3 |9 c; z6 k4 |( o- o# G3 n% T
        }
  |/ G; L. D1 w3 X1 t  c9 U0 J% a* V
        else
: `+ z. U9 d' P: f+ x! N
$ i" i5 U# Q% Z        {
+ [7 g+ j8 n: H% Q) i# U* p/ C3 W4 {, U/ C( B3 u
                document.getElementById(id).style.color = hoverColour;
0 |/ J+ k( X# k  d  A  h  c7 }1 t1 J) ], |, A% G- U
        }
9 D8 s6 G' Z; Q4 |1 M2 }: [' d( V
# a1 ?/ W3 X! ~$ R$ g  l        clearTimeout(tID[id]);
1 D8 D  G8 Y$ }- L/ F$ ]( P/ U
1 B% U; W* m- R2 @        tID[id]=setTimeout('startFade(' + id + ')', rate);
& b0 ~+ _3 ]7 e
; y0 ?6 ~8 o# R- P- ?}
% I/ G- u3 q8 V7 Q8 H0 s: @3 ^, V% L) R& w" c
function continueFade(id)* i: d" X- G# {; [3 F
$ u+ a7 E  u! [
{  K! P8 g& `2 ]5 R+ G& c: s' C: v
- Y/ t# L/ r- N3 R) a: ?
        continuous[id] = true;
0 W; o& t: s* V; o# V; `+ z
0 _6 E) ~2 ]9 ~0 _) g. D3 }. _}
- M, \' h9 ^# \5 @; ]& G8 x+ C
8 n5 c$ Q! i( Sfunction stopFade(id)$ {1 x* @5 f% m# P: _

- }( f: Z4 b* {! w/ x{
0 e' M' S! z' A% N0 s5 W; r, U7 R% Q
        continuous[id] = false;
$ N/ E+ A( W* C
3 W0 o: K/ A+ n" f# R: ~}
6 u; j5 i& I( ?5 U
) t: T4 C5 a) Ffunction StartTimers()% f7 G+ X2 p1 R% S
- f$ l! B8 [1 b0 l
{        //set up an initial set of timers to start the shimmering effect
5 B3 |$ g" Z. t, z3 ]5 ]7 C' b& B! M9 E* P; c# V, [! V8 q
        for(id=0; id<numLinks; id++)0 q: t- k, S8 ?1 P
& {8 ?5 G( p$ ?7 z- c' X$ _
        {
3 L; {9 k2 s& k5 k, a& k: i' l( o8 A! o* R/ e4 }) j" G. P. b
                t=setTimeout('startFade(' + id + ')', id*100);+ s. I0 P  Z- Y: Z6 Q! T2 K6 X! V; D
' ^5 V2 h/ F, d  ^8 O
        }4 k" d4 M% s+ d2 f3 _

0 L1 u( A5 Q3 Y# g: k5 P  x8 P0 d}: s' k6 R! B1 J: r) ~/ [. R" a" e

: k2 d. Y3 B( B7 R( _* `//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
7 [1 J- t$ h$ X8 r& ]  V; d
% f: B+ b0 F& d2 E" l4 MinitLinks('#FF0000', 6, '#FFCC77');& z2 R0 n$ R# F9 l; }

* k0 ]1 ~! f6 r% m//-->
4 s" m$ y6 D) n5 [, x, j( H: K( p- ~# d. t: j- |, V
</script>
, `* a0 L5 ?5 Z# A5 q6 p<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元# A) ~6 m2 Y; j( z
</a>
) j8 o* @; u" H' G/ B; W<br>$ v4 N; F6 |5 }- b6 I7 P2 k
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>7 ~1 S, l7 t+ n' P& @* g
<br>
2 w# e; p7 ~+ s+ h9 A<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
3 Q7 ~9 H) W% j! A<br>        ) V+ \2 r0 s6 t# D; B: U
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 J# J7 V' a, m; m4 a5 E
<br>4 _! C1 l& |5 h
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
3 G  O; V  y4 A4 u7 P<br>
$ d2 r' c0 a. ~$ t6 @5 m3 ?<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>' R6 b. ~/ X  J
<script language="javascript" type="text/javascript">
- W' ^( A! K$ E3 Z7 O& M<!--
+ C7 N  M, z: D+ w; q6 isetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& ?" Q3 l4 m" E/ {* S
//-->
/ e- j  m4 F6 q: Q. ]* x</script>