|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"># O0 l5 z/ C1 d+ n- M& R
<!--) t/ P5 [+ E% v& K
// convert a single digit (0 - 16) into hex
3 f1 G/ }1 `. D& i& }% I- Ufunction enHex(aDigit)) J F7 P& x7 K9 v$ r$ S
{
8 E0 p% g3 g8 j% ^" l return("0123456789ABCDEF".substring(aDigit, aDigit+1))
# r( r2 Z% ?1 M$ B) ]! N}
: P' e4 l4 X4 M// convert a hex digit into decimal4 i5 D; ?" o: l# D
function deHex(aDigit)4 T' n1 d0 i) l6 j2 x" ^* D$ Q! h& A
{- W! f/ s' Q8 L, ?
return("0123456789ABCDEF".indexOf(aDigit))
. z( H& l5 o. G2 n# Y}0 ^/ x: i' i; H, B) `$ t9 y
7 Y, I2 X8 o3 O! R8 t' U2 I0 x @
// Convert a 24bit number to hex
$ B- G4 d2 L: ?4 k3 E( Vfunction toHex(n)! |% {- _6 E9 m( W- L ~2 q
{
$ F7 O3 Z) o! x ~$ W/ q" R2 W$ | return (enHex((0xf00000 & n) >> 20) +- y" Q2 U" A7 w" e
enHex((0x0f0000 & n) >> 16) +
* Y8 _ _0 w) M( V. S. |/ H enHex((0x00f000 & n) >> 12) +
; F/ T' \; Y: j7 _0 I I. U* j% F enHex((0x000f00 & n) >> 8) + F& [0 w+ ~4 X) I
enHex((0x0000f0 & n) >> 4) +/ n8 V- d( {! G1 E+ N4 \4 X
enHex((0x00000f & n) >> 0))8 r. Y8 K7 q1 a d
}
1 L4 e, ?" G# ?6 D( A, P# G5 Z// Convert a six character hex to decimal
: d' n$ d+ h! x0 m- wfunction toDecimal(hexNum)
9 F. ?, C8 `6 R# I6 g{
" B4 ?2 y) K" @" J5 D8 {' s* k var tmp = ""+hexNum.toUpperCase()
& `/ j1 q9 u: _0 H* J while (tmp.length < 6) tmp = "0"+tmp
: A/ _5 a$ k4 J) |) j9 O return ((deHex(tmp.substring(0,1)) << 20) +
/ Q2 S! O, r0 b5 l (deHex(tmp.substring(1,2)) << 16) +
9 c3 ~& k1 l& N e (deHex(tmp.substring(2,3)) << 12) +
' P0 y% l: n& q% P* c t% r (deHex(tmp.substring(3,4)) << 8) +$ I- [2 _, s, @0 A
(deHex(tmp.substring(4,5)) << 4) +
" u( i8 P5 i# Q- B (deHex(tmp.substring(5,6))))
- r1 R0 X& m8 Z2 \' z2 l}3 }" @1 T, ^0 f
///////////////////Shimmering Links/////////////////////" S: b3 Y1 o0 l; M) J: `7 R) c
//global variables: ?+ x! k* I3 m' c& P
var hoverColour; J" `8 O) q: i- j2 s# V& E3 p
var numLinks;
" N' Y4 [, v' jvar rate;& J0 \! ]) X' H
var numFadeLevels;
1 x6 S* o! L" ` Cvar bgR;
* W9 X6 U6 |8 d# P9 E: Bvar bgG;
) ~, b# g" E, D" d7 l6 R0 v# Wvar bgB;
' Z% U: v) r7 Vvar currR;
! U `, ?. O( J/ @var currG;
5 q0 Q7 _4 W6 K' p, |% qvar currB;. V; J0 \" g- O6 \
var count;
5 G9 B9 N- c5 ^: ~8 d! D' Q4 y% Yvar fadeOut;2 J$ J9 F! G: V- m
var continuous;
0 Q8 N: N/ v3 z m# K. U$ Tvar newColour;
. C% ]2 H! _4 r* E5 p/ L3 Qvar tID;
9 {$ D: s6 C8 S. L( Wvar redInterval;
/ U" Y. H r8 ?var greenInterval;
+ @6 P# u% Y1 |$ [& Uvar blueInterval;
. W! m' |# H5 C% W9 j4 s jfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
5 ^. s8 o5 f4 J8 V* H z0 g{
4 ]( `1 v( j- @, y4 N# }* k hoverColour = mouseOverColour;
3 D. C. v5 E5 Y$ Z9 q3 H numLinks = numberOfLinks;
5 u, n: c" T) E rate = 1;5 N' b5 N- A _0 H6 X0 w/ v1 Z
numFadeLevels = 30;) q% S8 I- E( Q# c7 P& j
function initArray(theArray, length, val)
$ j; j$ p, @1 T6 V: _/ Y+ c6 d {9 L j( I1 r. T7 x x5 X! w& D0 ]
for(i=0;i<length;i++)
* o$ [# @* R4 q0 @5 @ {
; Z2 ?6 y+ Q; U' x theArray = val;1 A) F( n4 h1 j( S
}$ p6 m6 {4 y' V& L$ w; `
}
6 N# f4 Q8 R+ I3 M. r& @ bgR = '0000' + fadeOutColour.substring(1,3)& a0 M# f, \' f; ?! A+ t" w( a( U
bgG = '0000' + fadeOutColour.substring(3,5)
4 {+ i, E7 b& I. ]7 b$ ?7 n2 H% G; W bgB = '0000' + fadeOutColour.substring(5,7)
2 [- [! y" @* |9 M, H) U currR = new Array(numLinks);
; A2 L8 ? f: ? currG = new Array(numLinks);+ ]+ k6 d& k- b0 N8 u5 B/ {! A' n
currB = new Array(numLinks);/ I1 h) T0 a+ ?4 S$ h
count = new Array(numLinks);
1 `8 c- ?: O+ j fadeOut = new Array(numLinks);3 ~, Z7 h/ X' v! u+ b9 _1 H
continuous = new Array(numLinks);: N h( G7 l( P, k' s
newColour = new Array(numLinks);
. y0 u/ K8 I7 X0 C( G( f$ Q2 n, y tID = new Array(numLinks);$ N+ n$ z7 E4 m+ C( w* f" v
redInterval = toDecimal(bgR) / numFadeLevels;, w1 r# f( B% ^. e) f
greenInterval = toDecimal(bgG) / numFadeLevels;
/ T/ i' G2 f i8 v9 C9 I blueInterval = toDecimal(bgB) / numFadeLevels; ^. r1 t! N( a. J7 y
initArray(currR,numLinks,0);
& V$ _- c' n+ m! M initArray(currG,numLinks,0);
3 B) K6 c2 l5 x/ Z initArray(currB,numLinks,0);
' @/ }& f+ U) D, L+ N initArray(count,numLinks,0);& N$ d/ D! n n9 i
initArray(fadeOut,numLinks,true);
6 M k e) r, p9 y4 u; ? initArray(continuous,numLinks,true);( e! n0 W6 M' p2 T
} 9 C. }+ }" \: T
function startFade(id)
/ N9 g+ X ^. B9 e/ _* F- g{5 a( K, e% x% |
if(fadeOut[id] == true)
2 [) U" m" o$ m" I { /*move colour towards background colour (increment)*/ @7 ^0 h8 [& b! c$ D
currR[id] += redInterval;6 U% e6 c& x+ n# Z% c
currG[id] += greenInterval;0 S. j" x9 a; o$ D
currB[id] += blueInterval;3 N3 G. l6 ~( Z) d" s% P Y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 M3 g S# D* ?4 a
if(++count[id] == numFadeLevels)* r2 o- X) k. C$ a* ]( i
{
- S ^/ ~! ~( v$ x2 D fadeOut[id] = false;
# z6 D9 y8 G6 o9 E6 ] }
& F2 b i! I; I }
- K( g7 F8 f3 \3 B" b7 |) V' D else
[3 g' ~- o3 O {) i5 o' ?$ N5 H, Y* _* u
currR[id] -= redInterval;* `3 X: C3 h* I' i
" T/ I3 K5 E) X' P
currG[id] -= greenInterval;
# E, M! {* i& h4 H) U9 w: Z' ^) m$ S( A8 f9 V
currB[id] -= blueInterval;: Y3 b3 q' V/ A
% m. M- Q* G9 P* q8 D0 m. H newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% K* X3 l7 a$ X- ]" O4 O
7 U# M; p5 \$ H if(--count[id] == 0)
! C" L9 ^) D5 E+ p S. L' n) q/ Q& m% Z; X/ P& C9 ?
{
- t2 q+ {" A$ t8 [0 T( T: a4 G) ]0 M, e
fadeOut[id] = true;4 O! a$ h0 ^1 U0 n2 [0 r' k, w" d
& Z9 F: ^$ S0 Y% z
}1 c: r) U1 o) A, S. R+ o5 \
0 F9 W9 ^( I9 B. S8 R% J: B+ o# s9 k6 V
}
$ B/ q' L; X k$ G0 C
8 ^( s0 g6 U3 d6 a- V if(continuous[id] == true)
' V7 z$ g1 A3 s: k8 H0 k! {1 t% R8 q; _1 y# q8 p
{
4 l0 A" F; f1 {* R! U+ O: R8 J& Y6 y% v, e# d
document.getElementById(id).style.color = newColour[id];
5 t$ I5 C d3 u8 L+ k' p
5 U+ B. b+ G2 H! r& |; y/ @$ Z }% M& l1 f" K s; [
6 J B2 \8 Y6 ]% k# X+ E
else
# R( G K/ o: Q# }& ]' b! f* Q/ h) P4 `! G2 w0 H- v- u9 k0 O2 e
{
) Z1 V: r/ E$ j( m) o6 N
" T1 ?) Q t# \9 ]0 i* J" g* s document.getElementById(id).style.color = hoverColour;
& `( p' c( p0 x1 y& z
/ M0 A# a; b& q. S" S! k5 m }8 q% J8 N+ D' E) ?; ]% f2 Q1 x$ D
8 m1 H( W) p$ N clearTimeout(tID[id]);
! D+ D. N* |; v* D# }6 L- {7 N- T, K* z7 e
tID[id]=setTimeout('startFade(' + id + ')', rate);0 J; T; G- t+ i2 `1 o( m& _$ E2 u* O
8 `" U8 j+ O6 @ W, G. y/ [; f
}) P3 K& c, q0 X4 p, Y1 X& d2 ^; n
, j8 a& Y- z$ N4 Ffunction continueFade(id)' K( o5 j" y( ]+ `
* p5 m8 p. {" ~1 F: [# C{# ^7 l' D+ l# L) l8 Q+ {
- `" ~2 Y) A9 E+ [% {$ X, ^
continuous[id] = true;
6 W+ l- o4 Q0 x( R/ T" N& k+ c+ t5 \9 } w% v8 o5 a" `
}
0 J1 F5 N" U3 S) Q. \ _" P b0 M. I; V0 }: G! U
function stopFade(id)1 a1 X. L# w8 J. [# L
6 I* B# J8 M$ ^0 l/ O" d
{8 n: q% b! C i% i
/ e6 P) @6 B$ a. q0 t* A R
continuous[id] = false;
; V Y. L$ W- O; S$ T+ w8 R; I0 g2 J9 m; Y% `$ q6 Z9 R. t# r
}
$ l* z7 e1 K5 c6 X6 ~. f- X& U$ S1 b* s
function StartTimers()
- Z; @! A( i# L( D7 j9 d/ O
1 Q- r! w3 ]5 T{ //set up an initial set of timers to start the shimmering effect% n3 V7 V! y/ |, Q- m
; k, d% \; W- C# x7 F0 Z for(id=0; id<numLinks; id++)0 M* v% d. A3 K! V2 I
7 d7 \( v4 a# o b. Q& ?" B* d
{
6 y0 R+ i# w- v; E6 x: m1 t) m: H( C: q- G
t=setTimeout('startFade(' + id + ')', id*100);
3 d; j2 [5 f2 c) l: k
$ h0 n' T m, c: m& V* U" V }) b% a' g1 V6 i# [- _' K X
" F& X5 h" a; s. J* L9 F5 n( C}3 `' N) ]% p; }; ], c0 B3 y
2 I6 P- {1 D( M% c. K' Y% G//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 @' p% h1 u' I+ u& `& ~9 Z% z
5 j3 a$ i# y- e, h; N+ d6 j
initLinks('#FF0000', 6, '#FFCC77');
: Z' e3 F; N( I+ ^3 L; W5 s* \- H: ?& x# N A
//-->
* `$ L, d, S0 s/ m5 Q1 T: l
5 f) a* a( a8 E: _; Z: U</script>1 n: t1 L& P8 W* x6 }4 k+ s/ M0 A
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
" B0 _9 K; D+ o! l) _. S1 Y</a>
P) I' B: P9 L" f" [<br>9 ?2 [$ S6 b m5 p! W: t
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>: N& T3 [8 j, ~' _' A* s$ Q
<br> ^5 [. ?' {6 ]6 v2 j/ d6 H
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>' G; ]3 N$ H7 w( {% a: O9 `6 B
<br> : z/ P4 ^7 _ B& r5 n. n
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
1 ~/ e2 u: m/ D9 v: w' ~! Q<br>
% |! [5 g4 e# f* l1 \3 U. i& v6 {<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
# n' I7 E7 P) V$ p- e. C<br>5 {' [) q- H& L |
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
: v O, x' F. G/ K$ v v6 L<script language="javascript" type="text/javascript">
) S9 {# J6 @3 H" w/ U<!--7 z4 [( F3 s' w( u
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& R0 }! C6 r+ [4 A/ e) D* L8 f
//-->+ ^! u. V1 `! O& y
</script> |
|
发表于 2008-1-21 20:48
|