返回列表 发帖

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

<script language="javascript" type="text/javascript">3 z9 J8 G0 E. m$ h2 d
<!--
( }; g5 c$ ]5 k0 f8 P0 u5 P; K// convert a single digit (0 - 16) into hex0 t* j6 [- s) J( Z. g5 m
function enHex(aDigit)
% j0 T0 Q, l" }  Y8 J+ ~9 Q& O{+ f( m6 S" V! }- K' X
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
  `" C  D- t+ f% l( o+ O3 s) I9 m}" H6 I' B' K9 T
// convert a hex digit into decimal
7 T+ o. g4 `% E" tfunction deHex(aDigit)2 z6 x" i6 l9 O4 D+ q7 _- r; T, A
{
0 n( L" a. y/ P1 e    return("0123456789ABCDEF".indexOf(aDigit))
$ D- J" H7 t8 I. M}
8 a" x5 y/ [1 q. ?1 Y2 H: }1 c6 T1 K. u. ~1 p
// Convert a 24bit number to hex5 f  w; k1 }& d& q" s- e- O
function toHex(n); Y* Y! \8 j+ s  O
{
+ W3 o6 |- j4 K" ?7 e    return (enHex((0xf00000 & n) >> 20) +3 H5 i' A( ^& j& Z& ?
            enHex((0x0f0000 & n) >> 16) +
8 k, y# P1 N0 Q; J1 H1 K# d- M1 H            enHex((0x00f000 & n) >> 12) +
4 r7 Q% }' l5 F& a/ S; G, |            enHex((0x000f00 & n) >>  8) +
- C1 T9 T$ J" ]- {% S5 l            enHex((0x0000f0 & n) >>  4) +
) j6 ^2 ?! I# Q& `6 s9 L: c; s) n; [            enHex((0x00000f & n) >>  0)); D) q; {' @2 I! Q% r
}
# C# e6 u4 K5 T& B, D// Convert a six character hex to decimal
' w; h" C; a# T% o) c- nfunction toDecimal(hexNum)
( i6 H" X1 m0 D5 N6 F1 u{
) |% J1 Y1 G0 J1 v: y9 `2 \% o           var tmp = ""+hexNum.toUpperCase()% c* ]& l. t% C3 N7 C* a; J
    while (tmp.length < 6) tmp = "0"+tmp
  h9 h/ K5 E5 V4 b1 m! l! j% _           return ((deHex(tmp.substring(0,1)) << 20) +! J0 c7 Z# Q& n% H$ F
                   (deHex(tmp.substring(1,2)) << 16) + * L3 G) E9 B$ @- x- s" L
            (deHex(tmp.substring(2,3)) << 12) +
& J# l/ }/ ?5 z" n  i  F/ s" n$ ~            (deHex(tmp.substring(3,4)) << 8) +
5 e3 B; Z* _! U            (deHex(tmp.substring(4,5)) << 4) +
: ?# w: M- c( K% Q; n5 X                   (deHex(tmp.substring(5,6))))! @7 i2 R$ L: l+ I
}7 ?* g$ [7 E& z! @! d5 g+ Q
///////////////////Shimmering Links/////////////////////' l% X$ _) l' B' v0 B. f
//global variables
# d; ]$ ~1 o' e: P$ W2 I) {/ Bvar hoverColour# O2 q& i# \* }' m! e8 ]/ x& n
var numLinks;
2 M  H  Q; G" k1 z5 j! G* S4 i- s8 [var rate;
. a5 ]* P) a" X& U8 r9 ?8 hvar numFadeLevels;+ z4 W7 ^4 E6 }  }8 s
var bgR;
* j: s, G. P+ Evar bgG;6 i/ n2 M7 y! H" i" ^- P, D
var bgB;* M2 C+ [6 H: S9 }6 h$ e* B
var currR;
! J' K$ j; x( Jvar currG;
# n0 M6 A8 }3 j8 `7 ]- l  Fvar currB;* t  P) Y: I- j% T& C
var count;' E7 W# p# ]6 s/ @1 H. ^9 v
var fadeOut;
. I" g# t0 t1 ^( N, |4 tvar continuous;7 Z2 d' [7 J& ?8 h/ a4 O8 c
var newColour;' Y" e* n, t) F3 \9 Y, y9 e2 ?
var tID;
4 y. q& Q5 q2 X% Kvar redInterval;! l  `: v! l* M% g# x. z+ R
var greenInterval;
1 Z0 T' w% e6 s$ K( uvar blueInterval;
% ^' t& U. H$ m' v: Ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
' |$ t  w! m$ h& u* ^: }* f* U6 e{, i$ \7 U% h4 s  V
        hoverColour = mouseOverColour;  P" s1 w4 o" a% U* e% O
        numLinks = numberOfLinks;8 e& n" r% P) l2 I& T7 g
        rate = 1;. a! h0 g0 W, W- g6 X+ \2 a5 y; M
        numFadeLevels = 30;
" l' m5 H  p, f# x        function initArray(theArray, length, val)5 ?2 E7 V  d! k+ h
        {& a9 @+ R9 _. e) a# @& o) D8 ^
                for(i=0;i<length;i++)
1 U3 h' n. p& B% o* o" H/ G2 X+ G                {* z+ A! \7 H( U' s' S1 ]
                        theArray = val;
- P7 B0 E  m1 x# C                }" f$ {* N" C- ~' o+ f- i
        }
; |! O4 @, H+ C1 d        bgR = '0000' + fadeOutColour.substring(1,3)7 s7 M& }  p2 W3 f! m+ q
        bgG = '0000' + fadeOutColour.substring(3,5)
; \! k" F5 w' }% S* i# K8 s6 N9 p, _        bgB = '0000' + fadeOutColour.substring(5,7)$ j) o+ Y1 G# X4 z
        currR = new Array(numLinks);
; d9 r* A8 @/ V        currG = new Array(numLinks);
+ [% S  B; z$ T6 c; f        currB = new Array(numLinks);/ C0 ]) Y+ \; u
        count = new Array(numLinks);$ {) k4 [, n% b3 @( p7 X2 U# t
        fadeOut = new Array(numLinks);  X  l. \9 \) g$ M: n
        continuous = new Array(numLinks);* t/ H- r5 r" v
        newColour = new Array(numLinks);$ K6 h3 S6 C  M2 F7 ^( @, U' i' W
        tID = new Array(numLinks);
; N0 ^" C8 q$ m2 Z5 i        redInterval = toDecimal(bgR) / numFadeLevels;: \( s& t4 ~9 T/ X  H6 L; V7 R0 v
        greenInterval = toDecimal(bgG) / numFadeLevels;
& J& ~7 f$ |. ?! t. D+ K) O        blueInterval = toDecimal(bgB) / numFadeLevels;& ^  l! D% g2 H. e# G
        initArray(currR,numLinks,0);" s. |5 B4 M4 b7 k. M# t9 z- z
        initArray(currG,numLinks,0);
( U% q* x+ `( L  n( ^( R        initArray(currB,numLinks,0);3 Q! J4 N: s& ]( X& y; D
        initArray(count,numLinks,0);  C) }! d8 A/ D) b
        initArray(fadeOut,numLinks,true);$ w8 I9 q( G/ R  P/ k3 m
        initArray(continuous,numLinks,true);1 _" V4 ^* p1 \; @
}       
' R5 X/ Z! U# |3 C+ K0 [  \6 j4 Nfunction startFade(id)" Z: h7 P5 X" R- r
{
; S* i3 f) ~) B        if(fadeOut[id] == true)2 a$ O3 P; m  D( l0 b( N# R
        { /*move colour towards background colour (increment)*/$ Z4 r4 \0 f3 g% l* N  L' o9 ~9 L2 X
                currR[id] += redInterval;) |. a. s3 c. ~, ]
                currG[id] += greenInterval;8 [5 U# y8 C9 H( |2 X0 h, N- u
                currB[id] += blueInterval;
9 B8 n- I% W" J                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 n3 f1 l- i3 H
                if(++count[id] == numFadeLevels)
4 Z: Y; H. r. K* u6 d( h5 \                {
/ f+ i% z# I- a                        fadeOut[id] = false;
! C- U0 b' C; Q+ D8 ~                }* G- G( _0 K" c% p" Y* r
        }$ A" e' B+ m+ W4 |) b) F
        else
7 _* `( J; E; h6 T; S$ H6 {: B        {# f$ \2 C2 a% ]3 L
                currR[id] -= redInterval;
  H5 l4 W2 q7 B& [
, J  \2 j3 K4 s& M0 K                currG[id] -= greenInterval;
  j' ]( V' j' S5 ~' S
. ~+ {! u: ]  p4 g                currB[id] -= blueInterval;
# H: @1 J6 m1 t8 Q' ]! J$ i7 a- @
: ?5 ^9 ?2 \8 q( G; U+ w                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 R: T3 |1 c6 ]. [4 @$ n0 h% N
4 B+ U5 m, K7 Y4 z9 W8 a9 n
                if(--count[id] == 0)
  H; ~! A" e9 M" m; w1 @; \$ U2 c
% N$ N. Q7 _0 n1 g$ ~                {& k% x, W' T# B" I; E. T$ R( Y3 \

4 e* A; {4 P  i% B; y1 J                        fadeOut[id] = true;3 S! ]+ r: u. m/ `
0 o/ G" J: U+ s& S& h' T
                }
" M; V. N+ v* `7 U6 [
" r' A; T- r3 j$ a        }3 [9 y, N6 r) ?: w
  q9 q8 X! i, k  k
        if(continuous[id] == true)
, Z9 c/ C( v/ ]  W7 H/ h# Y4 z* }$ C6 N
        {
. P$ c# g0 l  I" v, A; o6 {0 r9 M/ u9 A
                document.getElementById(id).style.color = newColour[id];                . i. Z2 C/ ~: E! [( C0 T. {' {

+ n" p6 `# A  s+ s# U        }8 x' y; U' ~* t& G$ H% |
% ^5 D) d& e+ m! c3 @! a$ `0 {
        else. k7 S- Q9 a& C! w1 S3 Q

5 ]" q7 F8 I# S1 X        {% c4 W7 b2 E) E7 L+ _& H8 k# d
. L5 A8 f8 E5 r
                document.getElementById(id).style.color = hoverColour;9 [5 @7 g* B7 I  }1 M- E8 ~
$ X8 D+ m+ A7 h! C9 A$ r+ ~- B
        }
7 O) U0 [* ?0 F2 k1 S+ t5 d% {4 s( J
- s' j/ ~& ^, Z- M. v        clearTimeout(tID[id]);
$ Y5 h; u! }; k2 T7 {2 C+ t
, D; @& V7 @/ [; n  Z        tID[id]=setTimeout('startFade(' + id + ')', rate);
0 ~! u9 I+ C# W5 X7 z
3 Z) a  w- |0 C4 N; k- }}% M4 A5 v% m; M

7 X6 t( p* a1 q7 [4 Sfunction continueFade(id)- ]2 v8 D7 W4 i$ D8 Y7 r5 l4 C
* @1 D9 H+ j: h7 U1 c3 ?
{
0 S# o- g6 f+ x- s
5 C* r/ r" r  C9 K0 q        continuous[id] = true;
! c  n: {4 w/ T
6 g+ ?. w8 W" ~# V}
5 i5 p% C* W  ]
+ q) f1 o$ x& v. ~function stopFade(id)
# L  t3 j, C8 w" m4 H4 J% ?2 u/ i9 z  h( m! }' |! s8 l5 {) Z6 g$ S
{/ O4 Y7 c1 M9 b

4 Q- L4 z$ I( b/ m        continuous[id] = false;
0 v' p6 ^  v( t/ Q, n- m( K
, F. O' E4 w' V2 C}' ~  J. g) g' O, a

3 j$ w1 [9 L7 M% k2 \: x4 [; afunction StartTimers()! O( ?! p  |$ {' A. ~+ N
; p0 S$ q. g( g8 v
{        //set up an initial set of timers to start the shimmering effect
$ R8 l5 C) O; Z  ?, T1 }% B3 S! k: r" \) u0 W& C
        for(id=0; id<numLinks; id++)
) G, D. j: `; Z. H0 V* q6 w5 H1 j0 x+ j. A( G. o  q" x
        {
. n) Y$ t7 [5 C% l! I5 N8 q" y
9 f6 Q9 [2 G, |. }3 l8 F                t=setTimeout('startFade(' + id + ')', id*100);2 U" q/ ]) F5 Y% w- R
0 ?! {+ B+ k: C3 I3 s% O
        }
+ n" Q: ^! C% ^+ N3 X: q8 L+ C
& }5 V$ w6 {3 k2 i7 ^/ p}- ~  v$ h/ x9 v9 [7 ?' T
3 g/ m, ~! T$ |7 w* D' i! p" ?9 |
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
" [1 X8 M6 x5 S+ q3 Q  o# k, b8 W
" n% A, V" x# T9 cinitLinks('#FF0000', 6, '#FFCC77');# J9 s2 k' q, _5 N5 r/ U9 g* x

! b- x' D1 v& [3 I5 x+ ~//-->1 w4 X& M. q- h) d/ u
$ Q; }! p0 v3 Q9 @6 x! u- X0 e$ i
</script>
* L8 W# Z7 I3 f) G1 x; s5 _3 q* i<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
5 J8 k5 C; J6 O" s$ T* d</a>+ E2 P0 z* S& P$ R. s( `
<br>
$ ^. L: S( v+ W* ~! Q3 M7 h8 g3 G<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
" |2 d' u! Q. d; [& D& l# X<br>! X' J4 }( }0 O6 R; m" P0 M  j" j
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
, r8 Z' o8 R. @" ?<br>       
' H3 U5 I9 y& E4 t<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" X5 E: z" c" |/ O
<br>
9 L# x+ A! `' Z4 K<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
8 ?+ {- O3 R% {6 }  a% L; J<br>4 `# x& z1 d7 `# b# j2 K
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" T! e8 [% ~+ t: C: k6 C# L
<script language="javascript" type="text/javascript">
+ [  f6 h, s) D<!--4 S- l, Z/ W' H* e, g
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
1 {: a2 F8 A% I6 x( C( |: z1 @//-->
4 y  @3 y+ F' U; J3 J& O. T! o+ a</script>

返回列表
【捌玖网络】已经运行: