|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
" R8 n( B) w) L# D# m1 x<!--8 j7 P' r* ]" S0 S# H; P
// convert a single digit (0 - 16) into hex
7 g9 ^: X" h9 p- O/ y; C5 sfunction enHex(aDigit)
/ v. `0 }8 L% {7 S0 M; b! h6 z8 M{, l5 `0 `) r; `8 p( r: y
return("0123456789ABCDEF".substring(aDigit, aDigit+1))6 N! K1 q( U4 c s( L( I
}
& z2 Y, y$ A4 Q/ `4 I// convert a hex digit into decimal
7 I' B3 T+ `% h) q' T4 t! \function deHex(aDigit)
N- Q# m! ?: T; F: Q+ Q{
' B. y$ q( ~/ w* O# E9 [8 h( t return("0123456789ABCDEF".indexOf(aDigit))
# k+ [1 n" @; X7 i6 r0 I w4 a& l}. k$ K3 f* U- C. T* W' \
a! |+ u8 }0 A( b" I K
// Convert a 24bit number to hex
; b2 X( S! k& ffunction toHex(n)( }! {+ h) k" j/ o
{
2 W7 c# k" h7 S( H4 W* H return (enHex((0xf00000 & n) >> 20) +$ f0 T6 Y( p! a5 C" C; N% M
enHex((0x0f0000 & n) >> 16) +( P5 {) c8 |8 U! l1 V3 m8 N( d
enHex((0x00f000 & n) >> 12) +6 n5 R0 T3 U% y ~5 Y/ \ s/ t) {
enHex((0x000f00 & n) >> 8) ++ f ~) n1 t1 B0 h
enHex((0x0000f0 & n) >> 4) +) Y* W& A2 T8 r4 b3 g: \
enHex((0x00000f & n) >> 0))
3 r c& [: t& u3 A j}* c3 S/ e; A4 \$ y! ?
// Convert a six character hex to decimal
. p' f7 R5 d( j- D H* sfunction toDecimal(hexNum)
2 S4 V/ e! X0 d" Z1 v' \ w{
! O3 Z$ p, }) M/ R, P& e& K var tmp = ""+hexNum.toUpperCase()
* q" R* y! E S) S1 x! w0 O while (tmp.length < 6) tmp = "0"+tmp
) ?0 I1 P' v+ Y3 K6 @ ~ return ((deHex(tmp.substring(0,1)) << 20) +
2 O) t. l9 ?4 r/ d+ [ (deHex(tmp.substring(1,2)) << 16) +
; F( F6 V8 n" n( ^4 e5 A3 X (deHex(tmp.substring(2,3)) << 12) +
+ F5 v$ ]+ C7 s0 g (deHex(tmp.substring(3,4)) << 8) +
* ~) K, C0 T4 K (deHex(tmp.substring(4,5)) << 4) +
0 d* ^7 ?/ J4 R8 w9 [9 k (deHex(tmp.substring(5,6))))% [& |' B. |+ G
}
' A" U" u* E! b2 @5 a Z///////////////////Shimmering Links/////////////////////" |1 h- D- _% X- t1 m3 e
//global variables
/ G4 B: {- w! k' e ?var hoverColour6 v& K2 R7 g' ~- [0 `8 ?4 z
var numLinks;
1 C/ }. u/ K2 Hvar rate;
" W4 B% e. S$ c7 E1 R- B( qvar numFadeLevels;
0 ^, u- H1 Z* dvar bgR; _9 ?) f- w0 v# t
var bgG;
, L7 O: K6 W& C0 t1 f) wvar bgB;! `+ H2 _# R" ^
var currR;
. G+ W9 ^6 q8 i7 N/ Y! ^/ Q5 Pvar currG;
% s) I. E/ H" C, r4 ?3 `8 wvar currB;7 d& m+ b. g5 [3 F! S
var count;
3 ^$ I; q, b& W9 o4 v7 f: xvar fadeOut;
1 ?* _$ z I: Q0 tvar continuous;
* R* ~: F9 ]( c3 R7 T8 M+ B% ?: jvar newColour;2 R' @0 N9 J% G0 ]; C. l
var tID;
/ {* p8 E* I0 M4 d) p, v+ m% `var redInterval;2 l% y7 I; V3 N1 U' B1 \7 a
var greenInterval;
. P; p6 |4 S- r( ` ~8 H0 I' O fvar blueInterval;
B+ P( n; B/ x) w( U( ~) H* Pfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
/ Y8 [1 w8 J+ o4 v1 n0 o+ d- B D{& e( Z* R8 S1 E( g3 Y: K( `
hoverColour = mouseOverColour;2 ^! \# m# B$ U5 l: J2 S
numLinks = numberOfLinks;
- Z# |7 p. ~/ L8 R8 Y2 { r rate = 1;
3 d/ C" J# N& \ Z) G numFadeLevels = 30;
4 s* N2 ], l6 Y1 m function initArray(theArray, length, val)" J2 K/ P1 N' X' U5 x [+ ?& b
{
1 t+ }, q4 [, m% t" y for(i=0;i<length;i++)
2 r$ |7 s8 o5 y" M3 e% n% F3 t {( @) S* e0 m& U5 ?8 m! l2 B
theArray = val;( {" ~0 @* n" c
}( o2 L8 w' ]+ p$ O( w/ f
}% i8 b( Z/ `9 R* [ L6 J$ k
bgR = '0000' + fadeOutColour.substring(1,3)
0 S4 s/ N. l1 v. J, k0 |" m bgG = '0000' + fadeOutColour.substring(3,5)3 q& F, }% I: F0 f) D8 u# C: [
bgB = '0000' + fadeOutColour.substring(5,7)& Y( D! t9 r h2 D
currR = new Array(numLinks);! h6 m N( X# ^
currG = new Array(numLinks);
$ ~5 |2 b& j7 T: g currB = new Array(numLinks);5 [7 Y% u& K a; }. ]' h
count = new Array(numLinks);4 @! g7 T" k, I5 X2 v# V0 m
fadeOut = new Array(numLinks);
8 ~5 N1 V8 b* S continuous = new Array(numLinks);( x- p) w, h. h1 A
newColour = new Array(numLinks);" g; f; g( E% u- V
tID = new Array(numLinks);$ `( d" r* _' [3 r9 i
redInterval = toDecimal(bgR) / numFadeLevels;
; P* h/ f# U+ q3 E3 T+ M greenInterval = toDecimal(bgG) / numFadeLevels;
' n1 E/ z% l* x. r% Y8 | blueInterval = toDecimal(bgB) / numFadeLevels;7 O5 c$ g# B% O9 B
initArray(currR,numLinks,0);
# C' `8 R5 Y! Q# d8 A5 o initArray(currG,numLinks,0);
# s4 j' a0 G) ~* `; E initArray(currB,numLinks,0);
6 m \+ M$ b+ V/ | V' w | initArray(count,numLinks,0);' a G; S8 t( A% q
initArray(fadeOut,numLinks,true);" [: M% w' b9 G# e8 ?
initArray(continuous,numLinks,true);9 R6 n% j- Z3 k$ I U
} ! |3 `) G3 J. N( y G
function startFade(id)
: U G y* [* P' m- ^* {3 ?3 T( @( a{ H! L: o+ j6 q R
if(fadeOut[id] == true)) n& U5 K. @: ]+ |8 l5 [: z; G
{ /*move colour towards background colour (increment)*/# g5 O( Y5 X; ^" ]
currR[id] += redInterval;7 h& R! J8 j' x, N6 A2 m5 ?
currG[id] += greenInterval;5 y/ Y3 L ~* |# T2 x* p
currB[id] += blueInterval;
. m+ c4 a% {+ P' q3 _1 G: k P- c newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# @5 f' w( C" S9 r7 c2 R3 A/ h% W
if(++count[id] == numFadeLevels)
$ y2 B, O9 ~% C* b! ]2 s0 T3 e {
9 T6 ?) l& o, H1 i fadeOut[id] = false; s+ e) q6 T: a& Z" y. v J2 c
}% M( y3 s4 O8 F2 W9 H4 q& _# C
}( J& _3 _$ r5 F
else7 R7 E. S8 k/ x, i; o9 D
{. v! v: j, G5 K
currR[id] -= redInterval;" ]6 _) S) a' S, r0 g& X
3 v8 w4 w3 @ ^# j0 c currG[id] -= greenInterval;8 i K) a% E) _- n: q- r
0 P4 c1 ^! |# ?4 [0 y- C* U
currB[id] -= blueInterval;
# ] V/ D. P2 [/ S, d
$ k. p& j+ k5 p% d( m9 c7 A( { newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 R. o0 c2 c/ c
- ?- Y, G" O& J" J4 B6 f$ K
if(--count[id] == 0)
( R& t# q8 \1 y9 |1 j# j
% q7 z' O4 g% X/ a/ t0 G# t8 T- W {! s0 K2 L, ~1 P& A# b
Q# | {- K+ ~
fadeOut[id] = true;
3 j/ M9 F; Y6 X- U$ m$ f$ j! O u5 F6 c! {/ F/ Z* F5 }1 [
}) p) v: s- v0 V; M! ]- k& M x
% N: H+ t$ ^+ C2 y& `0 J( | }
5 p- C* L- m9 x
) b9 G* F* n2 r6 P& `# \ if(continuous[id] == true)
+ u9 z: ^- L; }
+ G2 I0 v2 P1 ~: p {9 g& B$ @5 i( ^: q% r; ~" w
0 l8 H, K6 q& ?/ @ document.getElementById(id).style.color = newColour[id]; ) O$ ^6 _/ N$ o, k$ t6 ?( m x( X
1 C# S& ~, O* w. I B( L+ I; Y
}7 G1 @ A0 N7 B# O) w# K4 \% O
: p* f, O6 W1 X# n- s; f) I
else
# {; o: l) p: V) ?; c+ X: k5 T0 t( x2 r% g5 ~
{0 l9 s6 |0 C2 J' \: g' G6 @
% i+ G, G. a) u6 n% I2 b$ @
document.getElementById(id).style.color = hoverColour;( J, K" Y; E: q) Q+ Z2 I0 v
4 ]0 _ [3 Q ]/ c
}
/ _# C3 [0 F$ u, ^4 A+ u/ B- ~7 o3 [: p
clearTimeout(tID[id]);' Y( [) w2 d$ r
L" x" ]$ O1 h' W
tID[id]=setTimeout('startFade(' + id + ')', rate);
# F2 v% H' r2 w" M) g& o' z, R% n, `4 h |' i- \, z; O
}
+ E P+ y) M/ ]- N0 t! X8 `& R d' q, A+ _7 _- ]" Q
function continueFade(id)
/ h8 C( L$ t: f. C
" o# d7 u. _5 }4 r! N{( u4 {5 a$ v% J: J
/ P5 D( u; D! |
continuous[id] = true;/ i/ X- [: ?/ Q6 I& V
. x% N' A5 l+ j5 x+ n. P}
- _# V( O, l2 H! Z% p2 p1 N: w' h3 k, Q% \& a9 y* m3 J- d
function stopFade(id)
* k' q" l" }7 G' E- `- S1 _
% `5 p" h' ?, ~4 p" o{
9 w% [3 M8 ^7 p$ q& J1 y. a7 U
continuous[id] = false;: C4 |5 j# D# Z# n. U- q& X7 `
3 _, f7 y" n" G1 V
}$ Y G& j- `8 S# g! J
4 G5 E" v! T( t( m U+ f
function StartTimers()5 z# m* N- Z5 L: f8 Z
) R. @! G$ M4 D* L
{ //set up an initial set of timers to start the shimmering effect! l8 B/ b! @. Z% o" h4 O
8 Z+ Z5 D2 \9 b* h6 G* S$ ~1 J0 a
for(id=0; id<numLinks; id++)
$ L! D0 ]( @! `6 c9 k$ X
6 Y2 n( ]1 Z q3 v& X1 B9 b/ I- X {
5 ^- l, t! i! R4 ]5 W
5 ?1 g& {5 Y8 r* k5 Z) N t=setTimeout('startFade(' + id + ')', id*100);) n$ }# c# F5 [/ O) x
: C. z& a Q8 w5 \# J. D1 B+ M
}$ p* z, ]+ R$ X5 h, i$ L' z- q
4 g4 |( b; V) a& s} B* a+ Q4 H( A% l
1 v7 v2 ?/ {1 V5 u' M4 j
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')4 z/ y! d9 K5 ~4 t* y+ \+ _
! ~! [7 w& \7 O: Z: k, d
initLinks('#FF0000', 6, '#FFCC77');
1 b5 e' h) k+ }; E+ K' Y0 v" l8 K- w, x( w
//-->( H' b9 R6 V9 C
* p) o( v' K0 R6 }
</script>
) J- B2 E2 L1 a- @, x<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元4 f. l, ?( ~) D& W' `9 Y
</a>
* H0 E$ k' t/ [$ p) b9 h<br>
( z$ ~; g* h, c) f9 R; i# t<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
* u5 q( U9 L& ]% M9 w<br>9 i- S9 r/ Z N) R7 \7 j, P. w
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ |6 `& O5 }, R4 i/ i$ D& O
<br> % `- D8 o' J" H' o# j6 Y
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ v0 c) u0 h m( a6 N
<br>
& q' s( z) p" z6 _8 E<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a># }' I ~& A& B# V
<br>
$ Z7 z2 e ~" }$ e: P8 [, j* ]<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
. P8 f# H6 M M$ d5 E& x<script language="javascript" type="text/javascript">
/ p5 U0 O. D7 c) Z6 t( L6 i<!--2 z7 f \7 Q: D
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 l' M( ]0 C: L( D( _4 Y
//-->* e" V u5 M* l) n
</script> |
|
发表于 2008-1-21 20:48
|