|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
m0 F; ]7 F* K3 ^: w* z<!--( v0 ~% o: e1 l/ O- C' R$ L
// convert a single digit (0 - 16) into hex
( s2 p3 n2 m' J( \- g3 ~$ N+ Afunction enHex(aDigit)0 G0 Q* R9 A6 z" d
{9 h+ {5 ]) q4 |/ p# o) D
return("0123456789ABCDEF".substring(aDigit, aDigit+1))' ~$ d$ J+ s: T: Q' y
}: J+ E6 F8 X6 A" i9 f( X, h
// convert a hex digit into decimal
/ y! D- E3 `: l& h2 X5 Zfunction deHex(aDigit)3 Z3 x0 G# p7 o8 @* ^4 |
{: ~" }) U3 n) b
return("0123456789ABCDEF".indexOf(aDigit)). T. ]) b7 R# ~+ _, W+ E$ u# @
}) q5 C' W2 ?% m( ?& S& w* R, M
) ` z1 ~3 D% Q2 |4 A, k& q// Convert a 24bit number to hex7 B( Q5 [" J, }5 H. o: S
function toHex(n)) V) \/ Y4 M8 w7 [
{- {7 d! x& [2 E, h. v* _/ u$ y
return (enHex((0xf00000 & n) >> 20) +
1 k8 e u) D) M% F# o enHex((0x0f0000 & n) >> 16) +: d$ {0 ?# U* U/ H6 k' O# T
enHex((0x00f000 & n) >> 12) +; D/ n( G3 L6 {0 E1 n
enHex((0x000f00 & n) >> 8) +) j, m. \+ F0 o
enHex((0x0000f0 & n) >> 4) +: b7 l# C" w5 I! a6 `
enHex((0x00000f & n) >> 0)); ]7 B9 y% J3 K" z* U+ {
}! K6 i" @9 A$ L3 v/ J) X. X
// Convert a six character hex to decimal
: C2 O$ R# ?! _& Yfunction toDecimal(hexNum)# H8 [: m w. `- d& R
{
# H5 c" A1 _2 \ var tmp = ""+hexNum.toUpperCase()% H" a9 j$ z* \* l2 u
while (tmp.length < 6) tmp = "0"+tmp6 K! {; A4 }! `& T
return ((deHex(tmp.substring(0,1)) << 20) +# e& Y% n9 p- N) Z9 T
(deHex(tmp.substring(1,2)) << 16) +
1 j# `* y+ O) x& w (deHex(tmp.substring(2,3)) << 12) +
, W% Y* O+ [# B+ u% ^ (deHex(tmp.substring(3,4)) << 8) +
. {% L3 g" X( c2 K# { (deHex(tmp.substring(4,5)) << 4) +0 A2 ?8 f! Q p) `8 J) Q
(deHex(tmp.substring(5,6))))0 D* U" C3 }' s0 D3 ]/ j
}1 `0 Z ]" _) z0 V) j: i
///////////////////Shimmering Links/////////////////////! [) w0 n# N+ v; p. s
//global variables
4 a5 _) |9 S% P5 @var hoverColour
2 u- I; c1 C! avar numLinks;
4 W# \8 G7 P6 J3 C2 t# ~& Yvar rate;1 s% h- A& w6 ^8 C
var numFadeLevels; B ]( f( J3 L- |7 s0 d
var bgR;/ f& f% ~* C2 `+ g
var bgG;
: o: J- z! {' x; b1 dvar bgB;
! b6 A8 T; }, c* y t0 Gvar currR;
8 R5 k: b8 J$ G# W: Bvar currG;
( l' Z. h0 r3 Z9 t Hvar currB;
6 j7 M2 {: F- B) yvar count;
3 |* ], D4 u7 k& }0 evar fadeOut;6 [' t/ Z* p X$ z1 n5 t
var continuous;
% F; N) k2 S! v& @0 ^( Z/ vvar newColour;& T5 w& k; ^% Y9 l5 g+ _" d
var tID;& e- Y8 W, M0 ?. k+ t
var redInterval;* L" o7 K: ?9 s( G+ }+ S; z0 ]
var greenInterval;
! Z# s, v% |% y% evar blueInterval;
4 R7 e x; D1 r2 m2 F0 B2 lfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)+ R5 {' a d+ x, k" Q3 L' }: l+ G
{- R4 v" ~ ?8 w- d# d
hoverColour = mouseOverColour;
5 @4 l% P& q* ?$ p9 F/ R% V! k1 k numLinks = numberOfLinks;
* _& X; i; m& Y! u6 M3 e) ~ rate = 1;
) R4 _/ `- T9 r! d numFadeLevels = 30;( x- o5 V" x1 _% r% B( p: h. T
function initArray(theArray, length, val)
" ^7 x* g0 b5 A9 I. D# B, U- M0 N2 j& M {+ T4 r+ r' o3 q3 a
for(i=0;i<length;i++)
1 P+ z# ~( q3 ?: b6 I {/ v: r2 _# x9 j
theArray = val;+ Z( O& |- ? s6 }$ ]
}
% J: g- l2 i9 N9 R) s }
. C$ r4 P& m1 c* T8 z* P8 E, ] bgR = '0000' + fadeOutColour.substring(1,3)
7 J$ N% E% f3 c bgG = '0000' + fadeOutColour.substring(3,5)
( _ p7 B$ m& N" X, J# D bgB = '0000' + fadeOutColour.substring(5,7), {8 t, u( Q. v5 c6 Z; I# M+ V
currR = new Array(numLinks);: }; F1 T& k) e: g+ q: k
currG = new Array(numLinks);
+ O4 R7 ~# r% l7 r6 h* J- A3 c currB = new Array(numLinks);; ]' _8 l& O, }- A: H+ S
count = new Array(numLinks);: X- x0 s% E0 b
fadeOut = new Array(numLinks);
Q2 k5 T7 L2 w* p: t continuous = new Array(numLinks);
@( s- d% I% [( x j newColour = new Array(numLinks);0 g' Q: j3 v* A2 n! \. w
tID = new Array(numLinks);9 u1 ^3 h3 k9 K4 D
redInterval = toDecimal(bgR) / numFadeLevels;
9 \* ~* y+ d1 D: T g9 J1 J, W; q greenInterval = toDecimal(bgG) / numFadeLevels;
* U: V# @( g; a' P" i blueInterval = toDecimal(bgB) / numFadeLevels;
- J; _$ r+ Q! _7 h) K' j initArray(currR,numLinks,0);+ h$ d- x9 B, q' D' m
initArray(currG,numLinks,0);
5 a! t% o' y2 }4 M initArray(currB,numLinks,0);, q) B4 i9 K0 k- ~5 i* g
initArray(count,numLinks,0);1 e3 H6 \# }' W3 l
initArray(fadeOut,numLinks,true);
: ]2 P3 J& ?" X initArray(continuous,numLinks,true);2 W7 u2 K4 q6 V8 z, t
}
% z4 n. [8 I* dfunction startFade(id)
/ P( x8 H2 |2 k6 B{
" T; E$ ~+ H% X8 O- ` if(fadeOut[id] == true)
/ q! s- r' O+ E$ c/ ? { /*move colour towards background colour (increment)*/
* a1 K9 L! t. \) m3 | currR[id] += redInterval;
& I$ \6 j. y; B( } currG[id] += greenInterval;
- l% k( C( W# W# G7 n! r. F, o currB[id] += blueInterval;
6 i7 x; q. ~! _- o/ S newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! W7 [( z- }4 n5 q6 `' u6 k. ^) p if(++count[id] == numFadeLevels)9 F$ w% \. C0 v; e e; l8 b) x6 J
{
* Q6 g4 b+ e$ `( k fadeOut[id] = false;
! M( w8 ?& g' O3 A1 _' n# l5 D }
1 p0 u" e' d0 @8 P: m: u8 c& d }9 d5 n2 \0 w. }2 `8 N: L
else" a% C! G: B: i8 S0 m2 O3 i7 |" d
{
! ^$ w5 F. @+ V$ k( l currR[id] -= redInterval;* ?( M7 z. |, {& v6 M' f# Y* q8 y
; P' y/ I3 W, q$ o currG[id] -= greenInterval;( W5 B% `$ ]% |* P
( o& e* H, M6 m" `# b" d4 J currB[id] -= blueInterval;
4 R$ R4 ?; M4 c/ t; Z, d7 W* [7 \- M1 b1 z, O4 z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 \8 q$ ]# e# O5 H4 T$ z
/ `( a2 G/ p. \! l if(--count[id] == 0)$ ~! b$ S; ~' W* p1 H' {' A
, D; b% r, F% Q" w7 S9 d; a$ k4 `
{
1 ^7 U( V7 J2 F4 i3 R9 C+ s Y
: ?% E3 a' V) a: n# S fadeOut[id] = true;
# |0 v- I7 ~* s- h3 W
7 R4 s1 s' B( O# J: P4 O }
! g8 L$ ?% M/ a& i# y" @/ G$ h# K
1 f% Z. @6 u; n {. k1 r }0 q+ Y" h% ], c+ e& i4 f4 e& F
6 h1 P) h; p1 R4 c# j# F- Y
if(continuous[id] == true)
9 @9 v/ a: j4 q9 _
7 L( ?* j. q4 T* }7 s {0 L$ v% U- w* |* d9 E
6 ^+ N6 G! @, C# q document.getElementById(id).style.color = newColour[id];
) I$ G c& m' _! U- _8 C: ]8 r0 V% p5 u6 C, E
}5 T) l0 R* e* ^- J4 b& P0 d2 {+ G6 t
, {* z5 h! K% h
else$ M0 E0 E$ l) A& u5 Y
4 R2 [8 ]% i6 ~
{, x/ \3 K* {0 v0 l
/ J3 s: i2 b# p5 ?1 l% X& \3 G
document.getElementById(id).style.color = hoverColour;
+ p' A7 ?/ J( d, G- z+ ]; o% g9 q( c/ f" ~) ^! u9 x3 T
}) j2 D d" H+ i9 } m
: W4 z7 }7 m6 h
clearTimeout(tID[id]);; d0 Y. T$ w! W+ V- G3 f" H& L7 b( v
0 q( `3 g+ v2 w, r n
tID[id]=setTimeout('startFade(' + id + ')', rate);* Y0 G+ S8 y. Y9 k- _5 X
/ ]# c+ x j! t
}
% V1 [0 t( v8 G( p2 W, q
/ g8 c4 }4 R, k* `0 [. c9 Mfunction continueFade(id)" G% a- t4 K3 l( S0 h) w# ]- M
. i) j* ]7 f* E4 h% O* w, V
{
' r3 ^" N4 m+ P2 u
8 l5 @; ]/ r! H continuous[id] = true;3 N* Z" I# g) G w" a
/ l- E! q o; w: d& z}7 N: u2 E6 t8 f/ [" K
% p) S: \- s, V4 B& ], ofunction stopFade(id)
3 C7 \$ k x2 R* f) k1 D
) ^2 ^- a- i' V9 L+ r! [{
2 v+ @$ W+ D5 H+ j$ R
K4 A- o) a: n) P! B! L continuous[id] = false;( V( B- O; T8 U3 t; [1 E
1 f# U, y! D1 S g' i4 Z# w
}
: s. L2 x1 X$ w# f; s0 P. N0 D: ^; A
function StartTimers()1 Y! `9 O2 @- N7 {0 p6 s7 P' v. X( j2 @
7 c8 N+ |4 H: Y! ~) F' b
{ //set up an initial set of timers to start the shimmering effect
# y0 p# Y" G: b1 g7 f' N+ B
0 f7 q! W) c8 v7 R, V' e/ M for(id=0; id<numLinks; id++)* R" X' H# K! d" }8 E. J
# y9 e- x# N; ?
{# b% g; r7 f6 K# F# \7 A2 [0 t; a* H
8 c* p; }: c. ~ t=setTimeout('startFade(' + id + ')', id*100);/ k( A r( M8 r& F* w; o I
5 f6 h! n0 G% [) i) U% U4 v
}9 M2 B" c3 v5 j, ?1 [ Y( p0 ~
@) w5 }. p$ A7 B# k# I: u}$ o+ }+ C7 k4 f! J- ?9 _
8 h" X) T( S {& Q. M8 Q
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
* [- G4 o" x6 Y; l) d8 h
/ F9 y3 o# h+ G+ }) g* r6 XinitLinks('#FF0000', 6, '#FFCC77');+ O8 R n& ^! e6 {6 N$ w
3 z( n" J5 P$ c# J/ O1 ^
//-->: Q5 r( D7 g9 G- M* J
$ i$ @: d: z& l2 i: q& O/ n8 j</script>& }7 q/ y' e) D
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元 N& {5 t4 k9 G6 N, B
</a>
/ j0 | ]5 }) I$ e- M: r. @: L<br>
' C9 d/ b" |0 F<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>2 j) ]7 |$ ^1 f0 v* M
<br>
( Q( Z' e; b1 H( F1 t3 ]) x! T2 v* J* i<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 q/ Q' Z r' t: g1 O
<br>
, D% U! E9 o! ~ M" ~& ~, q<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>) W# q$ K/ e* ^- z- W& p" p
<br>
# A3 B# K2 q& d& n# ~3 W2 k6 l<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
5 R7 Z, s7 {. O+ _* w% E4 ~! h<br>
% v3 K3 N8 G3 L: H<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
! d( c2 t$ H. K Z/ a2 e, _<script language="javascript" type="text/javascript">
3 u! T/ z3 C2 G9 z<!--
$ z V1 P- s6 U: ~setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering; x- ]4 h9 L& V6 q" A0 F
//-->$ N; ^ U) L O8 x6 }$ k
</script> |
|
发表于 2008-1-21 20:48
|