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

zw2004

<script language="javascript" type="text/javascript">1 C# ?* T& @% p6 G7 K9 i/ C4 i
<!--* {* T7 T9 i; A1 E6 q% O6 _# ?
// convert a single digit (0 - 16) into hex( E* A' P0 i8 W. l9 U2 D
function enHex(aDigit)
% v1 [  k3 A7 R  L2 `* M; F+ b{
& v% Z9 d3 W$ R/ V  ^8 S    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
) f. d7 c# t8 r! m+ g2 ^0 n# u}
+ P# U4 h% Q3 v5 `; w3 u1 r// convert a hex digit into decimal
0 s: ^( ^# c! l! ]6 j# G% w0 efunction deHex(aDigit)8 w; q! Q8 [/ j; w5 E
{  o% U& j. l4 P
    return("0123456789ABCDEF".indexOf(aDigit))
2 d/ R% C5 c2 ~/ p' x}3 o. k  X) ?. @0 s2 A

1 P' [7 z5 H) E& r; P; S  s; I// Convert a 24bit number to hex
, p( K+ s0 }! A! e! r2 U- K9 r( Tfunction toHex(n)4 }  _: y1 |4 R# M( T2 V
{
4 E6 O# L) y% x& ^    return (enHex((0xf00000 & n) >> 20) +0 O6 N0 S; y  x- D7 R6 P. G9 y
            enHex((0x0f0000 & n) >> 16) +
# T, O1 }1 r( @! R            enHex((0x00f000 & n) >> 12) +
% W5 b+ F* }! e6 A            enHex((0x000f00 & n) >>  8) +
; i  {9 U# W- E+ z9 U; W  E            enHex((0x0000f0 & n) >>  4) +
2 K2 P( _: q. }8 ]0 m4 T            enHex((0x00000f & n) >>  0))' A: j8 ~( I2 ]. I, Y
}! X# w; e, _9 t% Q1 [9 s: M
// Convert a six character hex to decimal8 P( `2 \# v% S0 J. p5 v
function toDecimal(hexNum)$ g! m, u* g  x
{
9 O) L( Z2 c: x& u           var tmp = ""+hexNum.toUpperCase()1 c# ^$ K+ X* }+ k0 ^
    while (tmp.length < 6) tmp = "0"+tmp3 e. n+ g  \' }) c2 l
           return ((deHex(tmp.substring(0,1)) << 20) +$ A1 I3 ?# V* @) K2 ]5 e9 |
                   (deHex(tmp.substring(1,2)) << 16) + 0 z0 N. `8 |& K' W
            (deHex(tmp.substring(2,3)) << 12) +0 ]0 n( O+ D8 ^$ d( }
            (deHex(tmp.substring(3,4)) << 8) +
  w* D$ x2 j) O/ ]4 A            (deHex(tmp.substring(4,5)) << 4) +
# ?+ C9 k* r1 u" h9 T) l! Q  u4 k                   (deHex(tmp.substring(5,6))))0 ^( o8 K- s1 q# ?$ l6 Y6 B
}' e6 J' h' k- ~7 i
///////////////////Shimmering Links/////////////////////
% R$ x& r& o! ~2 b* w//global variables% \9 o/ d- J' L/ K1 I) u
var hoverColour) Z. [4 ~" `3 `5 B
var numLinks;( G4 P) X2 n6 w8 o- n: B
var rate;0 y; r6 U8 ]7 w5 J* k: v" M6 z
var numFadeLevels;
/ ?4 }$ U% J/ o1 F2 W: N  fvar bgR;5 a4 s1 Y$ U0 A; f4 l, m
var bgG;9 d, D4 B* W5 I) f% Z& G
var bgB;
$ W+ b' n3 V7 k4 s5 Mvar currR;
& |7 @# Q. l" \8 B/ Hvar currG;
6 y5 E* Q2 h# B( K* z4 a# E# y; J: uvar currB;
* P* ?1 j2 i4 a) p: q& Ivar count;
, x# [6 W1 F. Uvar fadeOut;( t+ M: K1 {8 x
var continuous;
, F* H" I/ F$ V2 Z+ O, X  e' n- mvar newColour;
# m. V1 g0 w" R0 n/ C0 fvar tID;
& _6 L$ \2 y8 N' _var redInterval;
; F4 I3 V. L1 @. d% t- Ovar greenInterval;2 _3 g4 u8 {+ B6 i% G& O9 J, m
var blueInterval;
  n/ W! W! `( Y6 o4 d9 xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour). U' D! h4 L0 T1 v9 D
{
. p  x. V% S! ^$ k3 }/ ?$ z& {7 a( O        hoverColour = mouseOverColour;
$ i5 ]4 V6 O8 @/ L1 k, v  o        numLinks = numberOfLinks;
/ H# u' K& Q2 U# Y        rate = 1;
) ]! X* q$ {' N2 a! R( z( V        numFadeLevels = 30;# J$ B: W/ \2 s- J. L2 K8 z! G! r5 V
        function initArray(theArray, length, val)
: }# H# c# z; u' a% z5 B. a        {" _; m7 M& }2 J$ {. c$ \8 v: ]
                for(i=0;i<length;i++)
3 @3 x$ N' [* O2 o% y                {
9 z; V. t, n# W, u                        theArray = val;
$ p% [3 @: ]7 O' b0 h                }
4 S; G2 |9 w$ N! a  `9 [        }
; T: t1 J7 W( D1 @4 ]$ Q& I( U        bgR = '0000' + fadeOutColour.substring(1,3)
1 ~5 j! ^& u  Y. X9 H5 T        bgG = '0000' + fadeOutColour.substring(3,5)
$ u1 |. c* C" }6 R3 ]& q; A        bgB = '0000' + fadeOutColour.substring(5,7)
1 }' P8 h+ z( h        currR = new Array(numLinks);
5 z. E/ U# r- L# t        currG = new Array(numLinks);
8 S0 I: _1 \9 V# `5 H8 T4 g4 U        currB = new Array(numLinks);# P% j! G4 x1 e+ k/ R6 ~- q
        count = new Array(numLinks);
: v& q) d" B+ Y5 `+ o* P3 e        fadeOut = new Array(numLinks);* i# D5 Q6 S9 m+ O; ]
        continuous = new Array(numLinks);- `; p0 \) V7 X
        newColour = new Array(numLinks);
9 F2 M* P% J9 i/ v        tID = new Array(numLinks);
  s2 I4 p  c! a0 x        redInterval = toDecimal(bgR) / numFadeLevels;& N& ^/ t! i& t, B# P1 k# ^& t
        greenInterval = toDecimal(bgG) / numFadeLevels;
: I1 I* v/ j5 V& F' t# L        blueInterval = toDecimal(bgB) / numFadeLevels;& |7 t1 s& k# V' T) Q+ g& g
        initArray(currR,numLinks,0);
6 b+ y$ o; V( E* q0 T3 ?# G$ t        initArray(currG,numLinks,0);# _5 W9 E6 w5 J( t7 i( y
        initArray(currB,numLinks,0);2 e' x1 m$ t; ?) o) h) l) ~$ B& ?; R# X
        initArray(count,numLinks,0);& h5 n/ Q) {9 l+ |. @
        initArray(fadeOut,numLinks,true);
8 Q( D: U0 d8 t7 \) F        initArray(continuous,numLinks,true);
. t# ?6 S0 I* @" N( h}        - p0 ?9 y  m' p3 Y7 v& E( J
function startFade(id)* o/ A& R. g1 R+ t& {
{
" t) O" D: p1 H2 h* b        if(fadeOut[id] == true)
4 [( L1 m( j- b7 |' V0 ]% ]        { /*move colour towards background colour (increment)*/
% R- g* P2 r; K0 _                currR[id] += redInterval;7 `4 W9 R4 J9 {, X) m; }! a3 E( b. w
                currG[id] += greenInterval;& @6 ^- @- B$ a! x+ ~0 ^
                currB[id] += blueInterval;
' J3 l, v! b) u# P! n                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% K8 x. T  O9 M8 T8 }1 O
                if(++count[id] == numFadeLevels)3 ~+ a& V5 ?/ [" @2 h# v0 U
                {
$ Q  c$ C3 m. m; d0 M                        fadeOut[id] = false;
* l' O9 w8 J/ A) j% z                }
3 z3 z4 W0 ^7 q! U        }
9 |5 ^; w0 `0 {( D/ U9 t        else" Z! e/ k2 `) o  I
        {
0 ~& o7 ^; C$ E1 X" B% e+ g( G                currR[id] -= redInterval;
4 ]: w) e- g/ T7 F
0 J! i+ |+ F# b, H4 v& ?                currG[id] -= greenInterval;
" \5 L* H; h0 w
$ i) e$ y1 \' G, Z' p  |                currB[id] -= blueInterval;
) o$ j; A& B5 \) {8 X2 E7 e
- M6 _) Z% W3 n  _% I                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, _1 M) D' U. k
5 ~$ [' B! _: |$ {) W                if(--count[id] == 0)
6 d0 K3 |! d( C! Y. N: `. A: c- q- o  |1 W
                {
: D# S0 O& V' o. P/ g# G- [" n. H$ f7 f$ B; H' @
                        fadeOut[id] = true;
4 R$ v  h6 ^6 J  q
- Y* n/ \. Y. L, w+ _& W9 L2 y                }
7 A+ U* f( U  k$ O- R
4 D; a, Z. r/ M$ s. ]        }
% u1 ^  X2 E3 ^, l1 C, @" Y4 G. Q7 y4 `* h5 d7 d1 r; X6 I) [
        if(continuous[id] == true)3 B; c( S. e2 w6 N4 J

1 c' x3 ]: l' R  f1 s7 B        {1 U. f6 k! B7 a1 s+ N0 S; m

# q& d6 C8 M) @& A2 Y                document.getElementById(id).style.color = newColour[id];                3 L8 G! R0 m, _: L; S

2 K8 C1 ~, g" [" o) P; E* s        }9 t/ P. F, U3 T/ G; s2 t
9 q2 m# }0 d  r! q& A
        else
- @1 t3 @) D" \$ ]2 Y
% y/ @! f! L7 z( A! ~8 ^4 m4 u2 g        {3 R- `4 o' v/ u9 C0 T0 j  k
" ?7 {6 y1 t& y
                document.getElementById(id).style.color = hoverColour;
& ~% [( u$ k4 R- x8 Y1 [. F# Q: ]/ Z# p2 S& D$ i. H
        }2 `% u* A* f% p  I2 B* M
& z  u: O$ M- Z
        clearTimeout(tID[id]);
: m! D9 q/ P! L* v: M( R
/ c0 A" G. h  [% {4 i        tID[id]=setTimeout('startFade(' + id + ')', rate);# t  a& V' Q9 k$ `3 l

( V/ ~- D/ R& o7 L3 ^}5 L' }. x: T( i  W7 e5 w

( Z6 c3 U/ l+ y  Y+ Kfunction continueFade(id)
3 q5 e6 s# I, d* a$ `
& j( c- Z6 G: @9 U  w$ x6 y0 a) m{
; @3 `: Y6 d0 U6 h' x  [5 b
3 f# K, v9 A! i        continuous[id] = true;
  O# d8 F+ ~0 ^  v6 A1 H% ?) o, U7 Q4 D; e( @4 X8 M/ _9 w/ G2 Z+ P
}4 u0 |% J+ X' o% s7 Q9 N
8 ]# J- n: Z2 A/ J% J' C/ |* E$ Q
function stopFade(id)
- Z8 @" e6 V# ~
. A) u% J' {! V0 z% d6 z& @) g4 x{4 k+ h0 o) n* X
( j+ C7 I# ?' _) ^# t; ]
        continuous[id] = false;/ b5 n+ C% U2 f/ z( u( Z
9 S( u- D6 _' p" t
}
  j  o4 w5 |( n6 {" f; K
3 ?5 v# J8 J* z& @' Wfunction StartTimers()
' o- d0 W8 X) o; `/ }
- s* s% r: k# U# {+ b# X$ x% L1 _{        //set up an initial set of timers to start the shimmering effect5 h" B1 h2 T5 I' ?7 M/ r- `

0 C3 _1 v! `/ W- E9 r        for(id=0; id<numLinks; id++)3 w; T# Z" Y; e' F% v

0 P9 i% c# [. r) h" F: I+ V, C        {! `2 l) y5 @; V( Z9 E& q% H+ a$ v/ |' O
6 X+ V% [- w) N2 m+ N- `* c4 V
                t=setTimeout('startFade(' + id + ')', id*100);0 P8 i% m% w& V; u

( s, |* {% @; u  A6 X: g        }
! b1 Y' b+ u! _+ n
5 k6 W. _& Q  z$ B, [' U; H2 g}
. R: \+ [0 Q! z, @+ T
/ b4 A$ T) C( |" b$ h! J0 A//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
3 l3 K5 @5 K7 K* V4 G! H/ p
7 g4 Z& p& i" Z# K# N( IinitLinks('#FF0000', 6, '#FFCC77');
( C6 N: v0 M# ]' m4 q  q+ e3 L2 S
, l9 [- B0 J, V//-->
' M/ i' g4 ~, ]
0 f: O6 V! ~; K1 D! s& z</script>! G- @' M( B! o7 o; J
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
. v( I3 f: B5 B- ]' ~</a>2 |6 |& t8 I0 N; `9 P; }0 [4 N
<br>
% |8 u* \! Y) F+ T9 U<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>& w5 H) e8 Y- ]6 e$ f
<br>3 x1 W+ P7 y! I
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
: A& E& I# g7 {( P& y+ T; X<br>        / x/ b$ G4 j( [- G! p9 {4 g! X5 A
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>8 M5 K+ m! h% E% h# v- ~
<br>
" u# C: Q' U2 o: B8 c<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
- q7 ~' S( S& }( L<br>. t& ?$ n2 K7 j- C: i- j
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
& c, n8 ^, {; Q7 o( Z( c5 [<script language="javascript" type="text/javascript">
6 h  O3 T9 f3 p% A, y. _<!--  K3 S  R: x) s7 c- Z9 ^* y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 ~3 S. A" ^' ]+ ^# c, O//-->- h& x# }; I9 z6 n& L3 i4 |- U
</script>