|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
; ?" f3 B1 O$ i' ]0 q6 Z! g2 S- [<!--6 O0 T6 N/ F C1 }3 v( ~8 [) O% z. d
// convert a single digit (0 - 16) into hex4 ~! D- m0 c( w( T+ T
function enHex(aDigit)
4 Q% u& e/ U' y{
8 Z1 h% P( g8 f return("0123456789ABCDEF".substring(aDigit, aDigit+1))9 X, X0 |5 j" `% u* n
}/ U6 _0 r+ T* I& I0 V2 m
// convert a hex digit into decimal) x7 @/ Y2 X2 A3 z' _
function deHex(aDigit)
" S' O% O: @. j* V- c& G/ J1 _7 e{
- b3 c) K* c4 S4 e5 J return("0123456789ABCDEF".indexOf(aDigit))9 G# S) j3 u; ?0 \+ z- u
}
$ i0 u; j/ U* S2 m
. B5 T5 W* Y, b// Convert a 24bit number to hex0 f/ A* z p2 P5 N+ U7 X& q
function toHex(n) J& ?! N" s/ }0 g8 \
{
5 x3 @8 S1 e# c* o2 O$ i return (enHex((0xf00000 & n) >> 20) +0 x+ e0 a* G2 P
enHex((0x0f0000 & n) >> 16) +5 `% \8 X; k0 H$ d; z
enHex((0x00f000 & n) >> 12) +/ p% s* c) T3 b" U
enHex((0x000f00 & n) >> 8) +
$ w5 v Q& c6 D- V+ ` Q6 M! h, u enHex((0x0000f0 & n) >> 4) +
) W4 d. j3 O; e8 d' X enHex((0x00000f & n) >> 0))
$ |/ p/ a; s, h8 y}
( m s3 \3 L5 [# Z// Convert a six character hex to decimal
+ O2 J/ l( Y1 Y; W& Pfunction toDecimal(hexNum)
* S/ Y4 c- Z! E0 L3 x( W{( ~0 N4 R, q# o' W: L
var tmp = ""+hexNum.toUpperCase()8 \" E- d$ L; r2 d" a( H/ k/ m
while (tmp.length < 6) tmp = "0"+tmp
0 \ [8 z: t% c5 [ A0 C3 ] return ((deHex(tmp.substring(0,1)) << 20) +5 E/ X0 h, k6 E7 B1 B0 w0 j
(deHex(tmp.substring(1,2)) << 16) +
: M) N& w* A0 g% k9 N/ y/ W (deHex(tmp.substring(2,3)) << 12) +& z1 S3 q; g0 v! h2 ?
(deHex(tmp.substring(3,4)) << 8) +6 k. _0 R* X1 i
(deHex(tmp.substring(4,5)) << 4) + Z& t8 m0 I. M' H, L( J
(deHex(tmp.substring(5,6))))- k1 ?" k$ @! k- Q3 _
}
0 [$ d* O" v7 z///////////////////Shimmering Links/////////////////////
& ?: \9 t' V' J7 K1 G//global variables0 E! [ i2 G) y( C% K3 C' n* t
var hoverColour
% A. V+ C+ S6 [# B4 E4 R& Lvar numLinks;. _; n$ h5 ?- j, x' t
var rate;; w' y/ J. c) f$ n1 p& d
var numFadeLevels;
3 `' B( ?; { k/ Y; j+ Pvar bgR;
' Q1 D8 N! ] c7 ovar bgG;9 j% D j2 v$ g( v2 p" N8 u8 N9 e
var bgB;. [7 g7 f/ t: T; A' o8 v
var currR;8 r$ S7 T5 o9 U8 O
var currG;5 i7 |% u# ^. j: [* p6 t+ \( @2 ]
var currB;# M2 i4 n# T) `* q( q i# u
var count;
8 @+ B, c/ \ c1 {6 W0 ivar fadeOut;
5 ~$ y9 c9 C1 c; [, O) Zvar continuous;' |9 g: M# {8 X; r D
var newColour;6 T) x, f# }; z5 c& h
var tID;
- M+ p# n* e- X Bvar redInterval;
% x7 r# g+ f$ K; }var greenInterval;
2 F0 L& O0 H+ k+ V9 b- ovar blueInterval;
/ e" j9 }3 h: g! K/ J' \# @function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)" u6 X6 H$ A8 c+ c
{/ H _3 @5 k: `, z6 r8 ~* [2 Z
hoverColour = mouseOverColour;
1 i. T6 \( i- r1 t2 { numLinks = numberOfLinks;
9 \) Y/ [" x8 \9 ~* _) q3 p4 A rate = 1;' o8 U; ^2 t7 o3 F r! U8 U+ Y/ x
numFadeLevels = 30;, C$ E: ?" {" x4 _5 K2 ?* `0 H
function initArray(theArray, length, val)+ t0 w1 u2 Y0 I
{, x' ?; p+ M! o6 p5 f/ K
for(i=0;i<length;i++)
( d& n$ }' R# F T {8 @- J9 G2 {* ^. R0 V6 s t
theArray = val;! c; e2 `0 N$ l4 ]
}
' k2 |2 n o" H( v6 h }
5 A6 s: Q. f: p9 _ bgR = '0000' + fadeOutColour.substring(1,3)0 y8 n8 c( \, \; H5 Q
bgG = '0000' + fadeOutColour.substring(3,5)
2 q* E. F1 `' I) V3 N5 y8 u bgB = '0000' + fadeOutColour.substring(5,7)
% b6 W6 N/ J. h7 _" Z& l currR = new Array(numLinks);
) k& z9 U) z7 n9 Y4 s# ]$ [ currG = new Array(numLinks);
0 T. ?: F$ F$ r; s5 c currB = new Array(numLinks);0 e0 m* ^& ^5 {; l; e
count = new Array(numLinks);8 v" Z" S" H* t' T: G; V+ ^
fadeOut = new Array(numLinks);( a7 t- }. G3 Z, \
continuous = new Array(numLinks);8 I" r. G3 b7 N6 u2 \
newColour = new Array(numLinks);
2 W7 M. R% Q8 F+ \% O0 { tID = new Array(numLinks);
9 l9 ~# h. p5 O2 D6 C redInterval = toDecimal(bgR) / numFadeLevels;* e. Q5 V, w* w- W2 P, D
greenInterval = toDecimal(bgG) / numFadeLevels;
, U& x! e: A+ @: V/ ]6 a- d( X blueInterval = toDecimal(bgB) / numFadeLevels;5 x; s" x( n W( t* I2 n
initArray(currR,numLinks,0);
0 c) g, @! Y% ~ initArray(currG,numLinks,0);
% K: P y7 W/ w0 P& X& H initArray(currB,numLinks,0);
8 K- m4 m4 S0 a8 J( f* E( j# g initArray(count,numLinks,0);. z4 S5 X5 t# x6 X& e7 v- ^/ \) \+ H
initArray(fadeOut,numLinks,true);
0 Q* s2 z' j5 K, f+ _ initArray(continuous,numLinks,true);
2 ]" d$ g! L5 Y8 T; ?- S}
/ X* h' a4 T# ]- rfunction startFade(id)
; K) y+ Q; A" k0 d: J{4 g0 A! [! e; m( s. f1 @7 P3 x& R
if(fadeOut[id] == true)5 x0 e, G3 o7 d- U) E
{ /*move colour towards background colour (increment)*/! X7 p( c( q$ }. u* g/ \. ]
currR[id] += redInterval;
* O6 x" A9 C; l& x# e currG[id] += greenInterval;6 Q8 K' g% v% _: O7 m
currB[id] += blueInterval;
* s' f" u) h4 [ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ l3 o4 I" _7 n- O
if(++count[id] == numFadeLevels)
9 A5 w/ v4 V) c. B* y5 O4 p% ^ {0 s% q, a5 @( E9 x/ q# ]
fadeOut[id] = false;
( x& Q! f, j2 N! F6 b% \+ X }3 u- Y( I$ s/ }
}
, s/ c. @# N6 W* z6 c else
! [; J i7 \0 `, X {
" v* k, I8 Q( } currR[id] -= redInterval;' Q% r# C1 {5 K! ]. C
( t# B6 |. w4 E% y6 a# c! t
currG[id] -= greenInterval;' m5 D( _( A. ]1 u+ C
, m- s+ ]- I6 f- g
currB[id] -= blueInterval;, D. @% u7 Q9 D6 {8 K
( N) G; _8 P# e/ I, e
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% }6 C- l3 Q- w
( j! X5 ?3 c5 p6 ]9 I, v if(--count[id] == 0)
: m7 \/ Q% g' [/ P0 x* Q/ Q! M
% @: v0 p1 b$ v6 j5 i {
7 J. X' b5 K2 K7 q9 @9 s
! Y8 N: k: m$ ?+ U fadeOut[id] = true;. N: H! Y4 V6 ]' H
- \& [+ P- C) `- R8 h }
- H/ y o; h4 f) x$ ^# x2 D: t& S1 S, [- I8 N# R
}, k3 B- f- o% ^1 k" ] g
; e4 l' T: E6 }1 d if(continuous[id] == true)8 h/ `% }" x5 _- Y
: ?+ x) v6 b9 d# j! x
{+ u& W) x, j# K8 t# U0 O
% o' J3 X( N/ w3 m, w. G
document.getElementById(id).style.color = newColour[id]; ( t# T( K8 d `) F
" y- L |( |& Z; G2 j3 O
}; M1 o2 ^, A4 J, |1 U2 b- A
# n" D1 V+ v/ e0 d! L
else
. x5 Z B! s9 B5 H/ D: u0 q
- ]4 \9 ^+ @: M0 D {# K. M& p1 L. U$ s# K
6 A! D" M9 o: U! z' L9 |1 V: a. j: t document.getElementById(id).style.color = hoverColour;
& q6 Z* n; ?8 [$ A
& I- I, ]+ o0 ?' L: I- L }
: @4 F; T- Q2 C" s6 t! y) }, I' _9 i/ |* O4 q) y1 U9 X
clearTimeout(tID[id]);7 d7 _. S5 [8 q+ k, B7 G. f) c: d( L
9 V4 V! n% ?; ]5 L
tID[id]=setTimeout('startFade(' + id + ')', rate); H c3 f- h. J* v) U; S
4 O1 I8 Q5 ~3 j
}
$ W3 g+ z( j3 W. w5 s `4 Y ]/ d* r
function continueFade(id)
5 t M4 L! B9 j2 ], k
4 X- ^; ~* n3 `$ T{0 {- d6 Q4 B, x* K! w( \4 h, N; {
2 F' \# t9 k' M z# H3 K% P- N continuous[id] = true;
2 Y: ?& m, ? u& w. E6 E: C4 w( c- w( L9 ~
}
" ]# S6 Z' t7 b: s' G M0 |' ]& M
7 T! a! k0 O# {5 K6 X3 q3 F' _* [2 Ufunction stopFade(id)" D* W1 Q9 Z+ W
, c: [. K6 b9 M# L$ H! F9 y- m{
; Y3 U `: \8 F
$ S3 E I6 K6 y- s% P% b continuous[id] = false;
- o( ~# x8 A5 V. Z/ i/ W) N2 o! j! N6 J8 N
}
2 ?5 Z& H9 N% ?/ o3 }% m- u6 T; n2 \
* K* h$ C( g* \4 @" N# u2 J4 `function StartTimers()
/ l8 Q* N. b4 O8 @6 I0 Y7 h' A% d
{ //set up an initial set of timers to start the shimmering effect
1 p' m: `9 p$ L9 p3 H* |/ P: L4 }1 Y- F+ c$ {% G* R
for(id=0; id<numLinks; id++)
0 U3 t; v2 M" Q2 T. Z/ ^. ?% `7 E0 e" D0 y
{4 z. d/ p9 z. y8 s# b# ^' _# }* b9 J
u) l# N( B3 G0 ^( n8 ~+ v t=setTimeout('startFade(' + id + ')', id*100);
8 f k; Y) q9 F; o+ Z5 F! L" F' b
}1 Q/ w5 q* d: U% e k
+ v8 M8 i. @) n/ E( q2 X/ ]- X}
$ ^/ D7 z- x3 b$ A: B1 t) X' U5 A1 o& `5 D
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
! S1 C) H9 h' ` u" b) i6 I
% ~+ {8 Q1 m; u" ?4 g, ^initLinks('#FF0000', 6, '#FFCC77');" }0 ^2 R1 U) ]% H7 Z
" L: K, f3 y4 f. K& g& X) G
//-->- X7 ]# c/ B8 B0 P
' b# L5 L# b5 H: b
</script>
" I( G) p/ G. i6 Y<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元 J9 I2 E" r- J4 E5 C' K7 O
</a>
* g) T. ?* X) k! ]- ]4 e" q' V8 D<br>
9 T# y& E8 p/ ]1 f# o* C5 B<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
3 N/ M1 }" n5 A9 r6 p<br>
: ]+ E/ i; {( a( K0 ?<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 i8 T+ @0 l8 t9 f7 `: e
<br> 4 Q! ]5 y+ {1 k% @! Q y
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># M) N9 M i s S, C: t7 z
<br>% y$ S6 _0 ~ }3 K4 k1 g/ [
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
& |2 e: D" K) [0 Z( l' f! ?<br>
0 d/ H) E" C+ ]( e8 r6 v<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
) }7 b+ U' g% M+ G# n& v+ a0 }# x$ B0 ~* ^<script language="javascript" type="text/javascript">
) `; H2 @/ \# R# e<!--3 o) Y0 H) r% ~0 v! E" ~! \: Q5 \
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering7 u8 K; A! R2 i, I+ p: _ ^
//-->8 d I# p# x* r* Z9 {
</script> |
|
发表于 2008-1-21 20:48
|