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

---

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

<script language="javascript" type="text/javascript">5 Z0 N' Z7 n) V7 D8 w
<!--  |+ y% N' U/ Q, o/ P
// convert a single digit (0 - 16) into hex
  W/ L; N. k6 {5 r0 a6 U+ X4 Zfunction enHex(aDigit)
6 x$ ~2 P* w( K3 U. c3 H8 N9 s{  g9 a9 b$ a, _! i/ Z: p
    return("0123456789ABCDEF".substring(aDigit, aDigit+1)): Y6 S2 k# g) Z" G. a
}
7 Q# {: {  P1 n% ]// convert a hex digit into decimal
* k" `1 d. v! Ufunction deHex(aDigit)
  d# ~6 z% k$ n5 Y6 c{6 Z# ]2 p2 c. a3 O0 J5 c4 r
    return("0123456789ABCDEF".indexOf(aDigit))
6 U. L; O2 P6 i4 D% W}: V" A2 c6 {+ y6 r

, i" Z4 F! w1 @$ X3 h/ l% r' E// Convert a 24bit number to hex- N3 G/ b6 C& i# }
function toHex(n)
4 ], _' d" |; j5 Y: K. ~) \{/ z* V0 C& }6 t
    return (enHex((0xf00000 & n) >> 20) +
; J# M5 E# L' j/ X1 P. B. x            enHex((0x0f0000 & n) >> 16) +" c% A% \0 D" [5 j# u
            enHex((0x00f000 & n) >> 12) +0 D% F' a: B- K
            enHex((0x000f00 & n) >>  8) +
. e' U$ Q  u3 B            enHex((0x0000f0 & n) >>  4) +
4 J. E) ^. ~# B* X            enHex((0x00000f & n) >>  0))
9 _: a+ I4 U" r! a, C' d" s) L}
# q3 R% A+ c" e3 A* L4 [. n// Convert a six character hex to decimal
; Z3 v' J0 j1 \! C- Efunction toDecimal(hexNum)" v+ }- X! \1 a5 Y
{
& z9 Y2 n- K0 k+ [$ s1 ~           var tmp = ""+hexNum.toUpperCase()
6 s( z$ T, B. b    while (tmp.length < 6) tmp = "0"+tmp/ m0 C1 A1 v! Y- q2 ^, s# ~
           return ((deHex(tmp.substring(0,1)) << 20) +
( s6 A7 r; N* H$ v* [                   (deHex(tmp.substring(1,2)) << 16) + 5 }) S7 H* F3 Z3 i7 Z9 ]
            (deHex(tmp.substring(2,3)) << 12) +7 j2 K: r/ a. l) _* _" K" q
            (deHex(tmp.substring(3,4)) << 8) +
8 z8 v8 @0 f( P% T7 y            (deHex(tmp.substring(4,5)) << 4) +
% P; ?+ W: U  S: a0 |                   (deHex(tmp.substring(5,6))))
) _- u. m: x+ x# C4 i8 _. O}
9 A) r* f" E/ G. p8 X8 S) i///////////////////Shimmering Links/////////////////////
; p0 X* }, S  u//global variables
1 u! f1 Z  C' vvar hoverColour7 @  ^& ?) \# P/ q- K( n- W
var numLinks;
1 W( E3 R" z. E( q5 i$ fvar rate;6 J4 ]. }2 W( m% a; g
var numFadeLevels;) T7 W' U+ Y# t
var bgR;: \8 Q4 N3 A, C
var bgG;/ B1 |% g+ e+ U5 G7 \- ~
var bgB;
% z1 B/ S; ~3 c0 Nvar currR;" {. }1 e, c! P
var currG;1 X& L( u9 N4 b# {7 m2 _8 _
var currB;% t: ^9 [' |9 b* l  M, I
var count;; W0 u, c) [) u! @3 a& q
var fadeOut;
, c) k1 Q, R7 }. g. Wvar continuous;- K+ m' E3 Q; Z
var newColour;; s. Q  G' @- w2 p, b& L8 O, Q5 u) L
var tID;/ e: v9 q4 }, ~+ K' T. j9 q- S- m
var redInterval;+ r. d3 F; `5 e" B7 h; K2 ]
var greenInterval;0 g! K, B1 T& i1 `7 v9 M$ G0 k
var blueInterval;  g" }) }6 [! j7 y  p
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' J+ P7 _3 i1 A9 a4 y4 D9 @" J% U8 g
{" w: h0 d& w/ ]
        hoverColour = mouseOverColour;
' ]5 x7 `# S& n% G1 @1 Q        numLinks = numberOfLinks;2 O0 q' b" @7 S' }% J
        rate = 1;
: Y- L5 S6 a) ]! y- Z$ }        numFadeLevels = 30;
6 l3 C5 z- l5 |( F/ D7 _8 U3 {        function initArray(theArray, length, val)
1 m. t+ ]7 S) {/ `4 D) w: v* B% f        {2 c5 b9 i6 s# s* w+ D5 `4 G
                for(i=0;i<length;i++)
; V% `. ?9 s4 m% {* k) C% u% P                {$ D; m1 g0 }' A* _5 F" S
                        theArray = val;+ V6 `9 x" [4 n0 d. ~
                }( L, F! f( u1 h% n: d; o% ]* |
        }$ p$ S, x% q3 U; M' r2 y
        bgR = '0000' + fadeOutColour.substring(1,3)
% m# ]* t3 ~$ X( ]1 U7 c        bgG = '0000' + fadeOutColour.substring(3,5)
0 J* w) g6 @4 p* h5 {        bgB = '0000' + fadeOutColour.substring(5,7)6 k2 o5 ]  `" L0 O+ g
        currR = new Array(numLinks);* k9 Z* X# w& m- u
        currG = new Array(numLinks);
' {# C$ C5 i' d        currB = new Array(numLinks);
" m& J2 X2 P0 ]" I        count = new Array(numLinks);+ m1 e: e3 S5 v
        fadeOut = new Array(numLinks);
7 ?: p% r2 j- `- ]& [        continuous = new Array(numLinks);
+ T' H& {8 m$ Q1 l( q        newColour = new Array(numLinks);
7 L9 g! E8 F+ A! y- X- o0 ?( Y/ ~        tID = new Array(numLinks);
) d/ |& U% W5 C/ a        redInterval = toDecimal(bgR) / numFadeLevels;" |8 i1 u& L/ w  a$ @/ t3 t
        greenInterval = toDecimal(bgG) / numFadeLevels;, p) x7 l9 k, }+ \: V% @
        blueInterval = toDecimal(bgB) / numFadeLevels;& j& B$ u7 ^0 N, ]
        initArray(currR,numLinks,0);
0 Q# O! E+ C7 O        initArray(currG,numLinks,0);
8 r1 w. q- N' H& u' N$ E        initArray(currB,numLinks,0);
7 [# ^. O+ T& m2 {6 f        initArray(count,numLinks,0);7 `9 X5 |" L1 S$ f
        initArray(fadeOut,numLinks,true);
# s0 B  |8 Q4 `6 w        initArray(continuous,numLinks,true);
3 J3 P' y: @! ?1 d% _; \7 d}        : t0 J( @' e9 J
function startFade(id)
) M4 p% V7 A8 @7 u{$ |1 U$ u; k- J0 y: C& b
        if(fadeOut[id] == true)7 e8 b" _1 f- A. b2 b
        { /*move colour towards background colour (increment)*/
3 y3 ^8 Z# F% H0 V; \4 W                currR[id] += redInterval;; A' l* {" z- O& B
                currG[id] += greenInterval;) v! s- Z0 s% ~7 I
                currB[id] += blueInterval;
' M5 H# N% p$ a% j% Y" |: T                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 G; `+ a+ c1 C( u8 i3 ?" q
                if(++count[id] == numFadeLevels)7 G* x% P" b$ O6 s5 w% Y3 @
                {5 G" l, {! ?" X, u6 @( H* n
                        fadeOut[id] = false;+ F5 x" t% c3 k2 p+ ?& k) r0 c
                }
8 Y, |% f' p8 G        }
' |6 l- a4 e# a* `' z( B/ b& s        else4 _9 I8 S* `( k1 r* h+ S9 a# L
        {
% u* l, m6 S8 N6 y) z/ z  k; K0 v' f                currR[id] -= redInterval;
  ]6 |8 @9 w  ]& ]
3 D. R  I/ q% S! c- x+ e                currG[id] -= greenInterval;
( H0 \8 Q4 q  q2 ]6 v3 k
0 s9 A$ S( E$ T& U% i' d! R1 S! @                currB[id] -= blueInterval;/ l/ U3 h* R  I

7 \% ?( H" B; B" w- a4 ~                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);  @. }* `: x. \6 M
- U0 `) S$ S! O+ U1 D
                if(--count[id] == 0)
( I! r- g+ F' x- q! p  E5 I
* W6 w" M: g) y2 p, j+ u6 c                {
) l0 a; q" h6 N+ r/ L
+ o# T- p4 c  R7 X- {0 M                        fadeOut[id] = true;% q6 J  T7 j" \' M; I* e8 w  Y7 y
+ C7 K1 x! ~, l5 C+ Y% u& B5 R
                }, k, n0 z/ M& l& K( {

7 E- j5 d1 q! h) ~/ ~" q        }
& ~# G8 ^3 v. H/ f: k
5 S( R9 N( J/ C, D' g4 V        if(continuous[id] == true)  }/ P" ?; G. x
9 v1 Z. f3 r* B2 C+ w) X/ _( |8 q8 l- h
        {* M: Q% h9 R; O! V5 |- X' h
% e; f9 E$ E9 ?. K$ z; o% p" L
                document.getElementById(id).style.color = newColour[id];               
2 ~: i9 T; R( u; D/ i' }
5 u7 U% d# p8 x* M7 S4 i$ H        }
$ `& L" `3 O8 @' E$ ?/ R, V" Q3 W% J2 r- r, B
        else- t! X) N0 g$ j, q
. X1 F5 M/ F+ y" b" U
        {
: l4 W, g# T8 ?, q4 J& v. ]
/ s7 C' ^5 ~% W. T; Q                document.getElementById(id).style.color = hoverColour;
: p- }  Q/ L/ M9 e+ y* f+ T' Z; G; {" _
        }; U' j3 V1 m! J5 j! M6 u7 T* P

8 |/ a) g+ f3 k6 p( Q: K        clearTimeout(tID[id]);& Q) J& x0 A0 i6 h& t, v

, t/ Z$ a% X( p4 a) Y  X        tID[id]=setTimeout('startFade(' + id + ')', rate);0 J, H. G, p. ~# P4 w8 \  F
+ h, \8 {! v# r
}9 a0 _) k& E# g- X- _" K
6 o0 [6 ~" _$ Q# |5 `0 i& E
function continueFade(id): ?  Q  q6 X4 }/ }3 C

, V( r/ n( Y7 s: w" N; s: o: H. v8 N{+ g! D0 o% O7 f
( Z' k* d& f' }- S. \4 o  \, _; k9 U
        continuous[id] = true;( ~+ ~/ V8 a* a* ^( O1 j

5 ^- {9 y5 |8 D! r8 w- j6 W$ A( A1 b}
* P  D$ o3 N& `# D5 M* L5 H: S* F9 G7 d, y8 E: ^; Y# q- O
function stopFade(id)
) o' |+ W3 q( o5 h; |" C# d; s
/ ?' Q, Q( `7 Q{- _+ r$ {6 @5 K, U$ d7 Z1 Y0 ?2 h
8 G! F. n: d6 |" m. Q
        continuous[id] = false;% _2 w3 Y. s+ ^& [2 a- ^7 `# ?. E
7 V! ?' X( T! A# ^) q; m! Y1 F" \
}
$ H2 `. ?! J* r. o" t9 ^5 H& Z
3 k( P. R: T  E$ U/ e5 v# k. i+ jfunction StartTimers()
1 Q+ ~: X) u' z6 B* K4 x4 _: c$ u1 j7 P4 R3 F( ?  v% V# q
{        //set up an initial set of timers to start the shimmering effect
5 L" i% U2 ^- s' [2 Q
% W, T' k) q& F" N) _2 S( u        for(id=0; id<numLinks; id++)
" T8 x' A' U+ k+ J0 N
5 [8 f0 l4 F& j1 U        {5 B6 E& `1 ~0 l$ Z8 {
9 A- [  B8 n& Q) u% j+ I
                t=setTimeout('startFade(' + id + ')', id*100);6 n& b1 g# V5 g- i+ R7 i* W

# c1 C$ q/ |1 E* w5 b        }5 i* I" H4 H2 a# R
2 m" n* F. @* Z+ n5 ~
}+ A9 O+ }7 `' w0 T+ v  [) C+ {
; F# j8 y% H: d, O$ n' i
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
& i$ |" g( u2 c8 s0 c) u* ~$ ?$ L. y7 E" s% j9 R6 d7 A+ Y' t
initLinks('#FF0000', 6, '#FFCC77');
+ b6 H; h: z; g" D$ A! `9 X8 g: C4 F$ u
//-->' g, x+ U1 \% M- u

: D% M( h: t# Q* c1 T- v. \</script>  K4 I6 ^( v$ ^0 L: o0 _8 Z/ i
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
( U* H( ?0 |5 T) y  q* [& m' \</a>- V9 ~! q( o) Z+ a
<br>
$ |  m, M. X7 _* ~0 J* u<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>" j4 }' |4 g% c+ I; b: i! b  `
<br>
2 B: d  K" P% _3 v6 R1 u<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
4 n; q( q5 s  \+ e- N9 ]6 {<br>       
  w* y1 ~9 W$ F: H$ }+ d0 _$ u: O<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>3 M; k1 U) N9 P% |( G; w0 L
<br>4 e% E$ j; }' w* c. S
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>) q# N, R3 k5 w
<br>; }0 y# K6 G! M- B& X
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 b1 v3 ^$ Y- Z+ T/ q, g8 S; V
<script language="javascript" type="text/javascript">
  Z, U# K5 D+ x3 {5 s) j( i<!--6 J5 D% m) U6 x9 b- h
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering0 T7 z6 ^! n) f+ w. v* V! u
//-->
  E$ c9 P1 B0 G6 O! ]</script>

---

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

Powered by Discuz! 7.2