标题: 网页之文字的循环闪动特效 [打印本页]

---

作者: zw2004    时间: 2008-1-21 20:48     标题: 网页之文字的循环闪动特效

<script language="javascript" type="text/javascript">
" S$ t2 V. c6 i! I4 o1 t0 z' S<!--
* }  X, V' _! ~5 v% H+ k7 _! B# W// convert a single digit (0 - 16) into hex6 f+ N( A2 l# w/ Q3 r0 L2 D
function enHex(aDigit)* G- y7 ~" e; M6 h, o+ Y
{7 R  S/ m# Z0 w, [& i
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 Z6 X2 n- m( H* q" _' |}2 B1 G: M* X* z# T* W  t
// convert a hex digit into decimal
2 W- I# y$ k9 o6 ~: H4 sfunction deHex(aDigit)1 ^/ ]6 E1 i- Y2 e& L
{
( g& v% U2 I% w, R( J7 e( {7 u    return("0123456789ABCDEF".indexOf(aDigit))6 h7 k, S1 q" J: F
}1 k$ d; ?8 x5 x& [& c1 ?

8 h9 \+ r5 l! C2 K6 K// Convert a 24bit number to hex
7 I2 z- d, C" c% r2 m$ Afunction toHex(n)
! e% i8 p6 ^( C{2 E* {2 T: E) v# B& M8 K5 `! X; V
    return (enHex((0xf00000 & n) >> 20) +# ~+ c6 g/ [& @6 X$ b
            enHex((0x0f0000 & n) >> 16) +
, J1 U5 I$ N% n6 [- G# K            enHex((0x00f000 & n) >> 12) +
+ w( ?: p# V% n: I8 Y( h. X, }9 f5 _            enHex((0x000f00 & n) >>  8) +1 N. I* x2 [" t2 B+ _
            enHex((0x0000f0 & n) >>  4) +" P! Y4 r/ W8 R$ y
            enHex((0x00000f & n) >>  0))
( _) h- _9 A5 |3 Z: `4 ?* A}) p( |5 I; @4 H1 b0 f
// Convert a six character hex to decimal! i" r& B7 X* d3 |: F
function toDecimal(hexNum)
) C- C( V* s  J1 v! Q. U/ z( r{
$ s2 L. n/ s  k" I$ V$ u% I4 d           var tmp = ""+hexNum.toUpperCase()0 T/ `/ l: B+ |. P" D  z
    while (tmp.length < 6) tmp = "0"+tmp
: C6 f3 U. K1 Z; ^5 g3 w           return ((deHex(tmp.substring(0,1)) << 20) +
8 _/ @* }( N& G7 c" m                   (deHex(tmp.substring(1,2)) << 16) + ' Q2 _" l2 E3 g; e% Q5 K, b, v: k
            (deHex(tmp.substring(2,3)) << 12) +
* I- Q  V6 M% `3 f            (deHex(tmp.substring(3,4)) << 8) +* K! V. r; e; {" W' H
            (deHex(tmp.substring(4,5)) << 4) +
8 U, i( M9 T; n* i* }9 M                   (deHex(tmp.substring(5,6))))
) |/ ~- |  }7 r$ K# y# c}
5 c$ m  {: k: R; k///////////////////Shimmering Links/////////////////////
7 W% E4 _! q$ s% O- L+ j//global variables
: A- ~4 p& G8 v- \% evar hoverColour( `9 L; X/ F' y+ s0 w4 `
var numLinks;
( c3 Y6 u- P" Yvar rate;6 K' O- t+ _- r$ U$ i5 h: [; i
var numFadeLevels;% Z- w7 I  U2 R+ q6 l
var bgR;
9 A+ w7 m& v6 o9 g# M; U( mvar bgG;
. |  F' Y8 h4 |' Vvar bgB;# D' [- ^5 {  b9 H
var currR;
! a) f& Y9 l! ]8 [4 `) Zvar currG;& J( c* I. U: P& Y9 R
var currB;6 U2 X+ o) h6 c! Z: y- i: @
var count;1 J8 e; K; d* {/ q; h
var fadeOut;
% g' K& {- J- wvar continuous;
4 i2 \' k2 c; x. D  O) U$ T/ R' fvar newColour;
1 d; E2 p" N/ j8 ?! tvar tID;
# h7 a9 q3 e- d0 Mvar redInterval;' f& H9 O% ?1 x$ N- z1 T6 h7 l: t5 h
var greenInterval;
5 K- V5 Y& f) V. C/ zvar blueInterval;- I* Z! {/ I; H1 q/ t
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# C2 A+ T8 a5 I/ k{! m: j3 X) w/ R! E
        hoverColour = mouseOverColour;
) S  j% K9 r% q' }  x) f% ^9 w        numLinks = numberOfLinks;/ d/ r% M: `4 U
        rate = 1;
9 t8 v" i# A* d& d        numFadeLevels = 30;9 _$ ]& Z6 J1 E+ P2 O* H0 Z+ g' x
        function initArray(theArray, length, val), c& z2 K  f+ K! d4 a, D
        {
. x: N  z) I* U                for(i=0;i<length;i++)4 J/ O' q3 V0 r+ i4 a+ V+ S8 J! R
                {" ?- k- p2 E* @+ K( D
                        theArray = val;
' p0 t( [- B: J3 Y                }
2 e$ L; Q$ u. Y' T: ?        }; V% {+ c1 w# ^7 j# _9 T& {! k
        bgR = '0000' + fadeOutColour.substring(1,3)
$ U% Y: B, T2 F; u2 d5 U        bgG = '0000' + fadeOutColour.substring(3,5): U# T$ H8 c+ Z+ H6 n& p4 J1 i" v
        bgB = '0000' + fadeOutColour.substring(5,7)
# S0 L" @9 m5 \        currR = new Array(numLinks);% D8 ~# F& s$ d! F/ H, S
        currG = new Array(numLinks);
3 L1 U: _8 r& \; q3 A+ F        currB = new Array(numLinks);1 z$ p( f) s" T3 r0 `0 ?0 _
        count = new Array(numLinks);1 s2 t3 n0 d( a; G1 c, M5 S* t% i  T  M
        fadeOut = new Array(numLinks);! P/ d/ j7 P$ W1 n% |! _0 T2 A
        continuous = new Array(numLinks);0 g' g0 {- Q) l; H. O6 P; j# t
        newColour = new Array(numLinks);
  A2 L( P2 r' _9 f% I        tID = new Array(numLinks);
, n- B# ^, y0 G& Q; q  K3 o0 J- R        redInterval = toDecimal(bgR) / numFadeLevels;
# l; f( W( [& C4 d8 _5 {7 k: w        greenInterval = toDecimal(bgG) / numFadeLevels;7 C7 ?/ X2 T7 d
        blueInterval = toDecimal(bgB) / numFadeLevels;
' S) q5 R2 e! J# h1 i- x        initArray(currR,numLinks,0);$ J9 H% B) C% }
        initArray(currG,numLinks,0);" \& D4 g, p/ }" V4 z) f: z% x
        initArray(currB,numLinks,0);3 W5 l* |; W- x1 t
        initArray(count,numLinks,0);
4 Z6 Z& [  N1 C6 O% N' |' k- W4 l/ d        initArray(fadeOut,numLinks,true);
2 Q& d2 N. q* @! p3 T        initArray(continuous,numLinks,true);
& |+ _$ {8 b- F. |}       
2 b  D3 g% O$ ^function startFade(id)
, w2 j' ]# ]% z, C) ]  {{
, y+ c0 B1 {; P0 s$ g* T) v2 L        if(fadeOut[id] == true)
( v: S) T2 E. A8 ^" ], H  T        { /*move colour towards background colour (increment)*/
) X( q% a; _/ m% k! g6 \                currR[id] += redInterval;+ c5 M% F) M0 e0 c* e
                currG[id] += greenInterval;
  `7 ]) e: M/ n1 M, E                currB[id] += blueInterval;
% J' y" l% ~1 x/ n4 Z' c) w                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 c2 X% l; J9 S2 z5 y
                if(++count[id] == numFadeLevels)
# p  l/ G* d4 \$ @4 K                {
' c1 j5 L! \6 v. b' k                        fadeOut[id] = false;
% \0 x. X/ s2 S                }" G* T4 V# b# U& G( c" N/ [
        }7 M, N1 z# P) B/ X7 ~( ~9 d- O
        else; B0 W8 s8 t" P0 @6 u
        {
; K' P# y4 ]5 d8 P, R                currR[id] -= redInterval;
4 J/ c" W' o8 V; p- O0 S, T* J0 G' u" q, R' ^
                currG[id] -= greenInterval;, @  b" e. h* V& ]3 Z
6 t" x0 s$ @5 M: }$ m
                currB[id] -= blueInterval;
5 X" x) S7 ~3 |1 O& }* c8 {4 {. @# [( [& V
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ m* G% Q6 s$ T" h
$ S- L8 J$ u& h# z: t
                if(--count[id] == 0)
3 a" N/ j! D3 y. ~, A) J/ K! f" A$ p/ a. n) o$ S( ?+ t4 z! o# w
                {
& l' s( M7 G/ N% s: C+ P8 e4 ?5 e& l; y' V  |" G/ \4 Q9 m( p  T5 P. f5 p
                        fadeOut[id] = true;
% E& N! i/ g* L  H! L0 t
' Y- a* L: I9 d* q+ A2 g$ E                }* u) b3 h3 s2 ~3 Z( j. Z
( }+ K& R1 H% [; M+ U& w
        }* b4 m" f. r9 c6 N0 D1 f6 `5 U/ ?. c

/ b' F& \) }2 @  R. H* M        if(continuous[id] == true)
: q% E  {. r' V) ]0 e9 P) F, P% ~' d& x# R, Y
        {3 R# {8 @7 }3 ~8 Z* L# ]

) N% H) U1 E% B8 f8 R5 Z2 ]                document.getElementById(id).style.color = newColour[id];               
" x: X7 m3 `" O: i/ i! H& J0 J: \9 S7 a  ]9 S2 m' S' L
        }8 I  @; D( Y2 Q
9 {' H7 d' f( U6 d2 H4 Y
        else
( z+ z8 U" L$ v: p5 L! ^
, c/ r0 t( X% D) ~" n* v$ Z- h, i        {+ t& B9 b' g4 y
: g  Z1 k( Q7 r0 J
                document.getElementById(id).style.color = hoverColour;
+ x0 b. x. ~. l$ }6 m: }: z9 L( d* B$ r& l1 U" q9 _( W
        }' Q8 `( q4 I* m, I+ J
& E$ S; W& b5 y+ ~; U* N# \
        clearTimeout(tID[id]);7 x7 S" R5 V6 L

! _% `) V1 I9 R8 n        tID[id]=setTimeout('startFade(' + id + ')', rate);
4 `7 ^# D  z, e+ ^' b, t! }5 f& _
}
2 }! K( D: W7 J5 W, |
: {  N$ @. z" e; N! [function continueFade(id)& z4 X$ Z; q; v3 x) V* n

' y* [+ t7 G/ u5 X{
9 T; J* @1 R8 y. ^( q2 _% B6 O# l" b( `0 f8 i
        continuous[id] = true;$ S% T7 K5 _$ R
& R) k1 Z. D/ V# c
}
/ H! p+ k" a  s' P8 b) e! b, j" l* ~6 T8 n  ^' j- U
function stopFade(id)
& L+ F4 m! @8 K3 @' Z- ]+ _2 [: G0 m/ N' P$ i+ F
{
: b# K! R/ D" R4 a  i) p* f
& u; t4 x/ d# j        continuous[id] = false;
% w  P8 `$ V; {, d1 G' X
0 ?" W0 x2 i$ g  z9 O}0 {: m# m) q" `4 @7 u; p

- I" n, O8 w6 p5 k+ B, xfunction StartTimers()
4 z' N, s! r' P% Y4 O; I" F" ?; p9 L% \' T; W. ?# R
{        //set up an initial set of timers to start the shimmering effect) p, M# q  r% g+ N5 h9 ~
: Z% B. l- m, k  f
        for(id=0; id<numLinks; id++)& `, r6 i4 X% n$ x/ r5 P

  E% E9 G/ |: e" }% H) V        {
) O" ?1 a1 \( c) D- y# [. }* P; k+ O% U9 y% b
                t=setTimeout('startFade(' + id + ')', id*100);
" n3 l# s6 |9 E# T% \" x3 C+ |* h8 t: Z) \/ Y
        }" J! T, L. c: t4 r3 y3 r( ]

/ y; p* N. \$ ~9 u( Z}
' J8 F0 {  t+ F3 M; w  U2 l! u" ]4 u( n9 b( A, c
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
% }) I  O# R+ M  l. i+ G5 v+ _  P9 V8 F4 g% x4 ]) \
initLinks('#FF0000', 6, '#FFCC77');
8 X! f: v& L  J" `7 {
, S$ s  L2 m0 I. \7 D7 ?//-->; }& y- L* C9 ~; Q! ~( f
7 l& O1 ?3 v2 A
</script>
8 Y  a1 t" P4 _* Y  s2 s+ W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
! [5 w5 R: h' O. ?: \) O</a>
9 F% r  G! {! s. }. ?* U9 X<br>. h, P' D0 C. J
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
$ B( `6 @1 e: \8 ]& G<br>5 v/ |3 x, E0 G
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>% j# N2 s! F* D" _- P& C: U
<br>        * A  r8 W$ k  O0 G- t
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>  E. x; `+ ~9 l  X4 S* \! [4 [
<br>+ C; P/ U/ m. N- w" Q
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>- k- F* ^' J  ^+ u, D& f3 a
<br>+ g$ H$ }, l9 O0 b; o7 L2 G! l$ [
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
& @+ G& Z0 f* y( L9 j<script language="javascript" type="text/javascript">
( q" ^% U+ @! ?& V<!--
' a5 ~' W! J! ]5 f5 \/ NsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 I4 \1 z% H1 ?  x
//-->% Q/ p1 |+ X2 X& i
</script>

---

欢迎光临 捌玖网络工作室 (http://www.89w.org/)

Powered by Discuz! 7.2