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

zw2004

<script language="javascript" type="text/javascript">, Z8 l- X6 D8 I
<!--4 a. Y$ n, C2 h0 j5 j- u
// convert a single digit (0 - 16) into hex7 D! B5 O; R6 x% a; K3 S
function enHex(aDigit)9 g9 l: b; e/ g9 C
{7 M- e+ b3 U5 U: B' _
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))8 _' L' i& Y1 V7 D: X: B. G0 b9 L
}
1 M0 ^  g/ U- }6 |2 y) }// convert a hex digit into decimal
2 E- r( ^2 `3 i' C8 V$ ~8 u9 o  ?( Tfunction deHex(aDigit)# B6 v+ C/ R5 `- q7 u
{3 U7 b4 \) H9 C+ x* o- `; k$ V1 r
    return("0123456789ABCDEF".indexOf(aDigit))+ x& O5 y7 O8 m  A* J% L
}
( A& t( V5 l6 C$ Z5 a' \$ V. z& _  s% o" l  X
// Convert a 24bit number to hex' {  U  e4 s! k2 K
function toHex(n)/ M) P3 y; K2 r, g! [
{7 M$ e' f5 I& Y. A: L9 C
    return (enHex((0xf00000 & n) >> 20) +- W; _* M2 s1 K8 I0 {# ]
            enHex((0x0f0000 & n) >> 16) +
" J6 [! Z9 ?  r! z6 p% m            enHex((0x00f000 & n) >> 12) +" k) h: y7 {) m* E2 h- ~" k7 K
            enHex((0x000f00 & n) >>  8) ++ {# E7 |, {( r7 q; o" z3 v
            enHex((0x0000f0 & n) >>  4) +
- r" w! W7 l6 `# J            enHex((0x00000f & n) >>  0))
4 q( [0 l/ s+ l}
4 y. O' a& }: k// Convert a six character hex to decimal* L' J" }2 K8 w( b
function toDecimal(hexNum)( I. `4 M* ?0 d/ O- U- B
{
" x" E" x) ]& ?           var tmp = ""+hexNum.toUpperCase()
7 }2 e/ J2 y/ ^- E4 P3 S    while (tmp.length < 6) tmp = "0"+tmp' e& h4 Y2 V5 G9 D, B
           return ((deHex(tmp.substring(0,1)) << 20) +6 _  J1 |  q/ x, T( b* J9 `$ C
                   (deHex(tmp.substring(1,2)) << 16) + ! l" }: [, B2 Z4 A: N8 k( z
            (deHex(tmp.substring(2,3)) << 12) +) r$ O) G2 ^0 g# s( c
            (deHex(tmp.substring(3,4)) << 8) +
3 x2 l' L& o# E  L$ y# ~            (deHex(tmp.substring(4,5)) << 4) +
  Q6 R: p* T: D                   (deHex(tmp.substring(5,6))))
) [. _  N/ f1 H2 Z; o}
+ @- x1 s3 Y3 ~: B* G///////////////////Shimmering Links/////////////////////
: a  `9 y# k2 A1 C/ w" f//global variables
: a1 E  ?- J# F3 W% Jvar hoverColour- c; N' l6 e( Q  b
var numLinks;4 e0 K9 p; t/ \5 v
var rate;
5 F* q3 j, K1 d5 R8 Dvar numFadeLevels;
) u) J" A! ^( ^( ~var bgR;3 G$ s* T& @9 R) B$ }7 O
var bgG;
$ ~  b1 g4 `; o7 Ovar bgB;
; n  V9 Q/ }! x2 m3 S' g; Z0 q1 avar currR;' D$ \( U4 D' L. w$ V( X
var currG;
- w3 u8 }( u  `7 U/ L' Xvar currB;7 y7 Z- l2 Q8 q9 ?# D) d
var count;
- O$ }8 P' n& |! W; L" ?- Cvar fadeOut;
4 g) y5 \. V$ f/ {2 d. C% I, W5 Xvar continuous;% s# u1 J4 [; a  a
var newColour;
8 s, C- _! \5 x+ }var tID;
( X  R! D  E: [% |8 `9 rvar redInterval;
: S5 l9 c  x( |- |/ Q/ _3 ]# gvar greenInterval;
) `: {- G& e& j4 C! Lvar blueInterval;
; X8 @1 X; W2 x9 D, {6 }7 Rfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& W$ i* Y9 j6 u7 Y3 u& W) L{
/ \/ h. L% L1 f' c) o# u9 A  O        hoverColour = mouseOverColour;
* T, t6 a# k8 [) w3 J        numLinks = numberOfLinks;
: G3 t  L7 f6 p: w* P2 l! n        rate = 1;: b  \7 ~5 O; ?4 n6 Q) y
        numFadeLevels = 30;- s9 c& @! d% B. ~9 G& m; ^0 n- g
        function initArray(theArray, length, val)& {+ E% r* @# W3 l. Y5 x
        {' o* ]( P4 G* k5 R
                for(i=0;i<length;i++)
; T" C0 x2 D9 C" d- s                {
# z$ A0 Q* Q7 W. g4 {" R9 n( ]                        theArray = val;
* Z. g5 v- F- X, A9 I. ^- x8 `                }
8 h! ~9 a; I2 ^2 x1 h3 n        }
1 ^: h/ v. [% C6 p        bgR = '0000' + fadeOutColour.substring(1,3)
8 {5 n( g8 L- R0 I        bgG = '0000' + fadeOutColour.substring(3,5)6 C4 K) z2 M" {* H2 ^
        bgB = '0000' + fadeOutColour.substring(5,7)
) `" }1 y8 W& ?        currR = new Array(numLinks);
. Z0 `7 G* y7 b        currG = new Array(numLinks);2 o% E0 _9 O% R
        currB = new Array(numLinks);, e% Z! B- W9 Y* A/ D. ^+ e
        count = new Array(numLinks);- J* w% i8 f7 n, M( O% j
        fadeOut = new Array(numLinks);
; P! _- U, S/ q; |* h2 \        continuous = new Array(numLinks);
  V. z. u/ e! e        newColour = new Array(numLinks);4 s' z  e5 F# J2 X- ?1 C& G
        tID = new Array(numLinks);. u% j3 u& f2 N4 i
        redInterval = toDecimal(bgR) / numFadeLevels;
/ B3 e7 d9 V3 u6 l        greenInterval = toDecimal(bgG) / numFadeLevels;( f2 k; {, G+ {# J; w+ ?3 b  e
        blueInterval = toDecimal(bgB) / numFadeLevels;
, U8 ^6 e# F! _, a, E        initArray(currR,numLinks,0);
  a5 F) D! l$ V+ m        initArray(currG,numLinks,0);
  f; L) y! W1 E4 @        initArray(currB,numLinks,0);7 _7 C5 x4 |5 \" y
        initArray(count,numLinks,0);+ f3 Q3 e) ]$ J" {! ]& `0 S8 R
        initArray(fadeOut,numLinks,true);5 f) y/ u. {, M# c' Q9 Q1 n
        initArray(continuous,numLinks,true);% o; q* w9 V* _
}       
8 I/ H4 A7 j* e) U; Z; |function startFade(id)
% _% N8 N9 J6 t% Q5 `+ ^{6 Q0 f5 U  B% |) E9 M' V
        if(fadeOut[id] == true): z$ P' X# @: u+ W: d. T9 }
        { /*move colour towards background colour (increment)*/6 e- W$ z3 b4 e' o+ w8 ]% H
                currR[id] += redInterval;
7 g2 z. Z! m2 `( n" e: d$ n; x                currG[id] += greenInterval;% S( j" w. X$ {0 P+ n* ^* \
                currB[id] += blueInterval;
0 D, V! W$ P7 ~/ r. u$ E7 F                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 ]: x! j9 L8 M3 e+ g
                if(++count[id] == numFadeLevels)& l* ~1 s  R) `4 j! M
                {
8 {  V) N4 @% ~. L) g( G" Z' c8 g                        fadeOut[id] = false;
2 b2 U- Z; i0 L5 Y. V; R                }
7 K* m9 t  o2 s: N2 c        }
: S" K9 c2 P& A+ B        else
: W  x: v3 }6 i  Z8 d        {
; k8 F# w& [2 X1 v: P0 d0 g3 I3 I                currR[id] -= redInterval;' h7 a7 s4 W& `# U$ U, p

* E: ^, t3 H3 K: V4 k3 B                currG[id] -= greenInterval;
' Z: O8 T5 V- ~
* w! T5 ]; X/ }+ f  k                currB[id] -= blueInterval;
0 F0 \! G8 g# _- I: U( D% Q4 f6 k% M0 k: Q- Y* n3 o
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
4 ?. A, [3 a5 }, e* G" a  a4 f3 d( R0 F. c( Z8 S  V4 m
                if(--count[id] == 0)4 e* C3 V, U$ L7 o! k7 s/ ?

; N$ X- v* [2 j5 W# o                {5 m6 Q& o+ z$ x# x- w5 K& O5 Z: T

9 P2 E4 d& o2 ?2 _0 z2 C' K                        fadeOut[id] = true;* W% o8 E% O5 T& S" c0 y) _

( G/ J; X( {7 A# P; ^                }5 l1 L* y: H4 ?

, [) |( Q) T3 C& I+ u  d6 B3 T& k        }
4 ]( J8 _5 i! d7 z: o. f+ L
3 z8 w- f& v& q: M% f1 X        if(continuous[id] == true)
! s' ?0 {9 _& y# e* ~# ^  b: t$ o2 {+ d; y9 Z
        {4 U$ J; E7 v; X! ~/ K

  x# w8 e, X0 H5 _+ {, U                document.getElementById(id).style.color = newColour[id];               
2 T$ {/ j8 n' q# Q9 B( x& O2 {! [" N( F
        }; ^! a. n4 h+ M( h9 v: V5 r

: L7 x! i" K- X        else
0 F3 `: p- F# _: s8 R# J, `+ t$ u5 H! ^8 l4 H( l6 B; {
        {* U+ k# c- a1 e8 _
0 Y# \% m2 y: v8 f/ |8 ]! z
                document.getElementById(id).style.color = hoverColour;. i1 ]( y. @5 J6 n0 J+ t1 _
& {$ g- `2 ?+ q
        }9 l  o  ]" j0 p; }
8 l* r) I+ U6 K
        clearTimeout(tID[id]);
2 J8 e: |2 h* K; `
1 R; A9 v3 D% o* m( N2 d        tID[id]=setTimeout('startFade(' + id + ')', rate);
5 X2 O; r  m" |: T0 }0 l
' t9 }4 x' x* t0 w1 }}
. p4 {1 u+ \. H) s& V8 N6 Y& t4 Q, i3 P& R7 @+ M7 I
function continueFade(id)
6 C; v3 }" s+ e  I) Z) f
. X. ^" \7 ^* H{
' a* U/ S7 T* m$ M; E1 v" u: _  H. C5 A# @" H5 P
        continuous[id] = true;9 V, L6 o* Y- ^6 V& x8 k
4 O; B! Q  B- F/ z% A5 O( _
}0 e; ~/ O9 S, Y7 s/ @* D1 W2 v
$ U4 e  T" W9 a7 h" }3 i5 @
function stopFade(id)
# e* n9 x2 l" t, d2 d$ t" Z( z
' C0 ^. h, p$ c2 t1 }{
3 u, M+ A4 }' c% h* A3 u+ V
0 j6 ~. l. w$ D        continuous[id] = false;4 |# `3 P7 d; U8 g) w1 A, U6 ]
# S8 W% B' g+ F' b7 x* t
}2 A; A$ k1 h4 n! ~

( N/ Y, i5 b$ S# k8 _function StartTimers()$ v4 @  z" d, I* U! u
" s# T6 r2 n- A9 R; ~8 U
{        //set up an initial set of timers to start the shimmering effect
& x9 @( B0 C( p- O2 D3 j% P' F
        for(id=0; id<numLinks; id++)6 T( M) \# F" Z7 M7 c3 k2 c) \
5 q6 K# W2 h, ?6 R1 M% I! G
        {
1 ?6 R- D0 v9 n9 S6 w
1 f7 [7 P) @+ E( M8 {                t=setTimeout('startFade(' + id + ')', id*100);
! R# E" \$ V3 V  I) Y5 X6 \1 j# V, m
        }
3 V7 n' ~# @% P4 k+ v
* u/ B. D) n* _/ E% G% o0 a}
! N. |! Y) Y3 z% \; ^7 k( s5 F/ R5 W) h6 e4 D1 D, A- Y
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')5 j) c4 N! \4 y) f. {5 s! Z8 i

# a1 F1 b# Q7 Z+ t) ~8 ]9 XinitLinks('#FF0000', 6, '#FFCC77');
7 K, o( L$ |+ ]4 m- L9 j
) Q& ^2 v% I1 z7 Z, a//-->
! A6 j9 O3 d  k& ?/ n% n' i5 i( m7 Q6 T2 \9 L$ c4 u- X7 h
</script>
9 N# i- K9 V# K<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元# T# J. h  O3 |$ x/ @
</a>) ~0 z  {0 r2 F3 k( S5 u1 |
<br>
$ I9 l8 y' i: a6 v<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
7 j5 A* U9 Z7 Q' ^# j' _2 e<br>1 B2 h4 t1 `& G6 Y
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ r5 {( ^/ s* r& }+ M<br>        $ _4 g9 N: P3 v1 m9 [
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" v6 J8 y8 h; E. y2 P' S8 W  g<br>( P3 B% [( C$ w& b
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>6 i/ x8 a# `9 T9 A3 f% f
<br>1 j$ L* j4 m' S4 w9 L8 j0 Y
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>3 z' w; n: d4 ~6 [( V. Q
<script language="javascript" type="text/javascript">8 U8 c+ }5 J4 `- v: o0 K6 m2 S/ W4 x
<!--
' C: Q1 y. G$ D6 e$ L5 OsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
+ m) _* n$ |! b1 R//-->, Z! }- U: t' Z  L. C
</script>