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

zw2004

<script language="javascript" type="text/javascript">
- j/ C7 m: v, N<!--5 U5 |# E+ K* n7 h: I  d
// convert a single digit (0 - 16) into hex
# O$ B) }5 A) m, y$ o0 W. H9 n* afunction enHex(aDigit)) T' n( k# ^% k) M# O2 n
{2 {  T& `, t8 a" s# d( j. }
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
+ P$ a6 g$ s% E) g}* m2 _: @# J8 q/ C* P! m
// convert a hex digit into decimal
; X4 g3 Z- c. Cfunction deHex(aDigit)
) c2 a4 u5 Q2 g/ A{( O" T* a9 R+ K- ?& m
    return("0123456789ABCDEF".indexOf(aDigit))8 ?2 q6 M$ i0 U4 L
}
2 ]5 x( S1 U+ v, I) j+ o+ O
9 c' c6 Q9 F/ z% s// Convert a 24bit number to hex. i3 @2 Y1 y9 Q4 Y
function toHex(n)% X8 E0 J2 C: Y* h7 ~. c
{
- X7 q% {/ b) j    return (enHex((0xf00000 & n) >> 20) +9 V: N* B) j* q" ~; s
            enHex((0x0f0000 & n) >> 16) +
: N4 [7 C, [2 E. ~, z, X            enHex((0x00f000 & n) >> 12) +9 _+ F. d9 [6 M& v  r7 d
            enHex((0x000f00 & n) >>  8) +
$ U% P7 f9 X9 L% d            enHex((0x0000f0 & n) >>  4) +
8 x# Y, K! J+ b% Y3 B            enHex((0x00000f & n) >>  0)): k9 w, B( K* m. i
}! |8 ~& Z1 f5 O( A2 {
// Convert a six character hex to decimal
( y2 X- g* z; }8 J6 a6 `function toDecimal(hexNum)
3 |% C: W( n: q) E$ D5 l{
7 v0 E3 f+ V' D' \! ^           var tmp = ""+hexNum.toUpperCase()6 i' U: }- Y( Q# F) f' J
    while (tmp.length < 6) tmp = "0"+tmp3 i, M) h- i, b0 \" k% s
           return ((deHex(tmp.substring(0,1)) << 20) +
# b! w( j+ _' ~6 i, a6 B/ N; k" S7 r                   (deHex(tmp.substring(1,2)) << 16) + 9 `3 {! D( r4 _) ?) @* f. U+ d- b
            (deHex(tmp.substring(2,3)) << 12) +! b6 n6 j) E' B8 m) f0 t* f
            (deHex(tmp.substring(3,4)) << 8) +
7 U2 q: w" W0 D4 J# c            (deHex(tmp.substring(4,5)) << 4) +
7 Y# @9 g: s$ H; r& `9 s& |                   (deHex(tmp.substring(5,6))))0 F3 o) U  s" O: c# @. \+ C
}
- `* `& |& g( N9 |( K///////////////////Shimmering Links/////////////////////' m1 e; _( h4 ]0 J7 w1 V
//global variables
! f) e: P- X# l" @var hoverColour
+ c: J" |! _# D+ G0 {, Ovar numLinks;
7 P/ e$ S2 }, `& J8 }' Uvar rate;- ]7 H3 o; |. A. ]8 b$ x) a" e
var numFadeLevels;9 J* k4 g& m8 O7 B% ?. U
var bgR;
8 _% J: O/ Q5 E' dvar bgG;5 c8 ~) p/ {6 D$ O9 [
var bgB;% @( P7 d; U& }
var currR;" ^1 q. J1 O! j
var currG;+ Z: f8 V9 U+ Q( x8 q
var currB;1 k* H, Z: _; K9 z- C+ z/ O
var count;
' ?) F/ ?. w6 V# }/ l2 `1 nvar fadeOut;; B; ^0 B  p# r+ F! M2 u
var continuous;
2 ]7 \0 \: m, E) q, nvar newColour;
8 w2 j+ L" |* U# b6 nvar tID;
# N( j5 V" T4 f( p) jvar redInterval;
7 s4 q5 b6 E6 |5 o* ]: evar greenInterval;3 o5 A9 ~6 W1 k! t1 t, l
var blueInterval;7 }  t2 J# s8 a" k
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" ?7 d" ~8 b0 M2 D1 L( K9 Y! l{
4 n6 }. k2 M& z$ Q0 [$ a' ~2 |        hoverColour = mouseOverColour;
9 `5 O" E3 m; c        numLinks = numberOfLinks;
, ^# E; \# V7 [        rate = 1;
! ?/ G0 X6 b; ?. s        numFadeLevels = 30;
' n( g2 ~1 K" n) z2 o        function initArray(theArray, length, val)4 v) I6 _, M7 a0 V# b
        {
; `" i" ~8 [2 e* C                for(i=0;i<length;i++), n- k) u1 d; }: D
                {
. t5 J6 J7 t  U4 V1 }                        theArray = val;$ t7 x3 O5 q5 t6 p( y2 e& N
                }. I" ~" J1 ~6 V
        }
8 O! o+ T2 }0 x        bgR = '0000' + fadeOutColour.substring(1,3)
# O9 O! l; m! Y$ P6 t5 k- H        bgG = '0000' + fadeOutColour.substring(3,5)! m& g7 z1 N- B
        bgB = '0000' + fadeOutColour.substring(5,7): {5 X% B3 a4 m4 C1 ]
        currR = new Array(numLinks);8 l/ k+ z. R/ G6 P. X0 {
        currG = new Array(numLinks);& H1 A0 m. v! m, L
        currB = new Array(numLinks);7 h+ [# f1 Z5 v2 ?2 B8 c
        count = new Array(numLinks);5 b: B9 [9 e/ ]6 k
        fadeOut = new Array(numLinks);
) N+ s! |( O, ]# S( r7 h: \; A# X, M! n        continuous = new Array(numLinks);
' {# [' @) k' ]4 N- e        newColour = new Array(numLinks);
9 A: B* X! a& k3 B0 v7 H        tID = new Array(numLinks);
! K: F7 }/ L6 i& d- D        redInterval = toDecimal(bgR) / numFadeLevels;
5 P7 {3 Y- J5 I3 H; u        greenInterval = toDecimal(bgG) / numFadeLevels;
( M) R6 n( x) l2 g        blueInterval = toDecimal(bgB) / numFadeLevels;
7 o- _4 D! Q4 y3 K( I        initArray(currR,numLinks,0);9 ~; _, V. u/ |/ V1 @
        initArray(currG,numLinks,0);& s7 _0 b& W9 \  `: s7 N8 D  ^7 z4 p8 U
        initArray(currB,numLinks,0);
3 e+ I- _9 R. ~3 g8 g        initArray(count,numLinks,0);
$ b# j# i8 @2 Y7 a0 L% [# Y9 M        initArray(fadeOut,numLinks,true);4 |2 B4 u' U* J0 k: Z+ `
        initArray(continuous,numLinks,true);, q4 C, M+ m9 a) R! T
}       
( a7 C! r: P% O# a+ m# \' L# M2 Bfunction startFade(id)' g$ I4 U! X$ k+ k* N
{
* D$ h9 F2 g- e' q6 g2 R        if(fadeOut[id] == true)
" p: k9 L$ R8 G' x        { /*move colour towards background colour (increment)*/
1 r  k; K" J! M! L- r; X2 F                currR[id] += redInterval;) ]4 v& H- H8 Z
                currG[id] += greenInterval;
; V" u+ z. Y, @# H/ Z% N( D# s                currB[id] += blueInterval;. O7 }  ?1 |4 y. Z, l, _* r
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 v% E  ~0 ?: V/ Z, k4 X+ }" m
                if(++count[id] == numFadeLevels)
4 S: B! o0 A9 V9 T5 {                {# M7 {* F4 }8 Z! o
                        fadeOut[id] = false;
+ R* m$ I/ F1 J3 G. P/ m; _                }% A- v# f7 P. C- q1 K
        }
( p1 }; m4 k, \        else
3 V+ y% l4 o. T1 j        {
+ D+ d4 s3 r! F6 [) E) e  Y                currR[id] -= redInterval;! x9 X0 d, r% r, G* f4 h
2 r5 X# A9 R4 H$ ?
                currG[id] -= greenInterval;' x9 m6 I' Y6 k. C% G0 C* I. J
+ ?9 W; `, o, n( z% k; E% t; L/ L
                currB[id] -= blueInterval;
2 ]7 N% s( Z$ c1 v0 l8 x! }, E% D
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 u- x' j) k5 I! O; G* }) N! n; i3 r2 T" T  z) G
                if(--count[id] == 0)
! s% u0 u- g5 w
* F$ V1 W% ^  f4 e. H                {
! S) r7 @/ s, K2 R& J, e3 p) t  v/ V! g6 }: b2 t0 W
                        fadeOut[id] = true;; W  Q0 z2 _5 @

. c# Q! {5 K+ q) l' o/ g                }
. h1 r4 F0 C5 G
; q5 P2 v# i+ e        }2 B* Y2 e' O5 \$ n) D: l4 D
( R1 ~  Z  C& `5 N9 C' G/ v
        if(continuous[id] == true)7 ~2 @' n4 i% k- G, E  v5 s

% p; w/ s9 m; X. U4 B        {$ v. [1 e# p: \" a( |! Q( S

( M( }' s& T( I/ ~5 j  v, K                document.getElementById(id).style.color = newColour[id];               
- `4 x6 W0 z- J) n3 Q0 @( j$ i  ?/ l- ~. t8 ]9 q
        }8 F3 g7 M) b+ M7 u" z$ k/ X

' E8 @7 ?4 w& E- j        else) ^9 F3 N" k, Q# t% D  G

- ^: b& Y& E8 n; ?( U' y. R6 s        {7 m  X2 V: x# l" l; \7 I7 n0 N, V
; Q2 N# j5 S$ g' f9 E7 E
                document.getElementById(id).style.color = hoverColour;: c- H3 v9 Y4 s4 O# E) @, c

, T% C- }  E( [# a4 u  B5 G        }- r. }! t+ A8 Q

" O+ W; Q9 |. _( B% s' N        clearTimeout(tID[id]);4 K& `% S/ k7 E5 E

$ g5 s+ L! U# q$ a3 C0 Y$ f& p        tID[id]=setTimeout('startFade(' + id + ')', rate);0 F. \- E, t, c3 k' P5 D  ^
* S; q* K) b/ N) I
}- P, ?# x! k* p8 A& J, @
- D- a8 W  z( I
function continueFade(id)
9 n& ?# L- p" X- [; k  o5 P1 r0 ^! k% ]
{1 X+ l6 l4 V- @

+ A7 a  t& g6 q* o: P* x3 L4 e  c        continuous[id] = true;2 l  p: v' U& x. T

, }2 c6 |7 T- |, q* @}
1 W4 N- X1 I6 T$ J$ Z* B- s; ^; k: v) ?+ K9 H( a# L
function stopFade(id)! j4 n" [* k9 A/ t

0 m/ X& ], P8 T/ k2 m4 E{& o8 z3 O5 e: r4 D

( A# I- r) z9 z( w& ^* g        continuous[id] = false;
% i3 L, U! u8 W, l! Q) R
0 v% W( m- q7 G5 n6 w% e1 n( U}' m9 z* @/ U5 q5 o: G9 I5 K9 ^

* S% @) p# h7 V: v5 Xfunction StartTimers()8 T( r$ T3 ^6 \

( s/ N. w/ K* \{        //set up an initial set of timers to start the shimmering effect
8 r0 Q7 d& W! K) w+ e. e' H7 Y7 H; K" Y6 J  A3 g4 U% k
        for(id=0; id<numLinks; id++)) D+ ]8 q  \3 ~9 o7 ?0 q$ }

5 g. U" q5 l$ V; l3 A6 C        {$ k+ O- `* j. F: Z& ~! H" a
4 U% {" [, V& H
                t=setTimeout('startFade(' + id + ')', id*100);
8 {2 b/ q9 m4 j# |7 Y. ^9 V1 _# b
/ J4 N  G/ K  V' m% F; ?3 L3 Z        }
( q. L6 j0 E/ |
) o( L8 C1 O( F* X3 f% s- m}7 `. P( x: X3 \

4 X7 A; }6 Q0 B" E: f: L//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
& I. x* T, g) h# n3 `) g8 F$ P
  `6 E' ~/ L' N# qinitLinks('#FF0000', 6, '#FFCC77');
7 ?2 w8 `% I2 U3 y3 I. J* b- ^; y: C1 @
; a8 b! H: C2 ?7 t3 O: ]# _; @//-->* J2 r# S( Y# c& J& y1 I

8 Z" d( d# m6 u* `</script>7 f4 w# M5 g) o! @+ X9 o; m
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
) @( ^3 d& [) q" ~6 A</a># r  f' C/ G. J( ^8 H9 U2 B7 I
<br>
$ n  Z" Z# T  j$ L<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>7 r- Y: Q* L$ Y3 e
<br>
& R- a4 L: u. }+ n) z+ ]<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>" F2 S* a: P8 [& N# o  T
<br>       
6 z5 y; U$ A2 v<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>, B0 O0 q% A7 n% G9 D
<br>
5 T  C6 g& w2 W) V+ Q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
- L, V; J5 D8 n<br>/ j/ z. \  r7 b/ F0 z" B& m' I0 o
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
3 H& I# ~7 U3 Z( [0 e<script language="javascript" type="text/javascript">8 y; j, T) s" f6 s
<!--
5 X9 b$ o9 v8 H% R! X- A; BsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
" }9 R* I, Q6 [& k/ v//-->
6 v# d$ R$ x$ A</script>