|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ q3 i/ z5 r8 I1 J5 z<!--
" t9 C8 w& f7 w* q0 t' s' i// convert a single digit (0 - 16) into hex
8 x4 ?2 }& ]2 P# n5 C0 I& ufunction enHex(aDigit)
9 w5 C4 _3 _" [! d1 N% u& O6 v{
9 E" V' f$ @3 _2 H5 o. ^4 @4 E) j return("0123456789ABCDEF".substring(aDigit, aDigit+1))
) Y$ ?7 ]* P( \}5 s9 K9 ?) e5 n+ A
// convert a hex digit into decimal
- W7 E* L$ C& ~1 ]7 pfunction deHex(aDigit)+ O0 b& P6 |/ A. `* w! G% O" {" i
{
9 h( @/ G3 p: Z+ C6 f* p/ j$ X; O return("0123456789ABCDEF".indexOf(aDigit)), x. {5 U: ~+ y0 R
}
' f* N, ^. c. g# X' i# @' s( k/ Y6 z, P1 r
// Convert a 24bit number to hex
' G: P" N6 B/ u6 O) I. T+ U1 gfunction toHex(n)1 Y' c0 P/ o! O- P& P
{5 S# u% c; i' E. M
return (enHex((0xf00000 & n) >> 20) +6 f: a& r: Z2 v1 ^5 F
enHex((0x0f0000 & n) >> 16) +
8 f' }" M& g% F" d) ?1 ?' E enHex((0x00f000 & n) >> 12) +- g, C' i4 r* C7 A& f" C
enHex((0x000f00 & n) >> 8) +
}9 l3 s$ N4 J r# v! X* B& k* ~4 v enHex((0x0000f0 & n) >> 4) +2 F; K- m6 b# n2 f& {1 g! m5 b( q6 }
enHex((0x00000f & n) >> 0)). f8 j" b9 T, O5 _0 u
}' X8 R( E; @1 v: N' d' m# @! L
// Convert a six character hex to decimal$ l" m+ X& a: j( F7 s) V
function toDecimal(hexNum)
- Q2 Z4 p4 i& V0 o0 N# n{7 i0 p. O: f; o- @' {- P g! e/ _. I$ O3 D
var tmp = ""+hexNum.toUpperCase()
% m: t- ^2 I4 w* z9 F, M* |5 ~ while (tmp.length < 6) tmp = "0"+tmp
; S3 V0 o1 z# h% |/ _2 k6 f4 B: A7 h return ((deHex(tmp.substring(0,1)) << 20) +6 f/ E% V# n" \1 H
(deHex(tmp.substring(1,2)) << 16) + & C( @3 C8 y4 e5 e/ O4 h. d1 O$ n
(deHex(tmp.substring(2,3)) << 12) +8 O0 o5 p( o! F9 U9 i
(deHex(tmp.substring(3,4)) << 8) +; I2 m4 R2 `: Z& `
(deHex(tmp.substring(4,5)) << 4) +
# C: a$ d1 p* c5 c, j3 o# W: p (deHex(tmp.substring(5,6))))
3 A& A" f/ \- a: e. p A}- k! G8 s# w; }% m/ x; E
///////////////////Shimmering Links/////////////////////8 O$ [6 G7 j1 Z/ |0 @ n' u* J
//global variables! `- k( `8 j6 {& \* \' [8 i. _
var hoverColour
7 @" M# R* P( hvar numLinks;
0 }% C, c/ U8 w* w3 O5 ^var rate;
7 \% Y6 A% A5 u; G6 Ivar numFadeLevels;7 M6 F) a' y) h* c P
var bgR;
# M4 T5 H/ j$ | ~" `" U6 J& gvar bgG;
: \5 R$ \1 t+ y% B" `% hvar bgB;
* z& q6 F6 h" [, a7 b% X1 `var currR;3 W& Y9 [1 R$ D7 k( d
var currG;
4 J$ S m( q ?var currB;
" D3 y& W4 B) {9 E6 bvar count;
( `% \4 {, C, ]$ w9 ? Uvar fadeOut;
/ q5 M/ |$ n Wvar continuous;
4 I' B3 p% `# a* G! ] X1 Dvar newColour;; r) f/ d: E. M* h1 N) ]# k
var tID;
( h) O. T" b& b4 b( X" Svar redInterval;
7 d0 S. ?2 z2 w; H( ~( ]& j/ K0 D$ q# `var greenInterval;0 y) A, l* b; Y- m4 E) T( y2 t
var blueInterval;" J! w, s9 ~; k
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' j4 g& j2 w1 s6 n Y! ?5 Q+ U
{. T5 s) l+ ^6 l0 m( z! C- I
hoverColour = mouseOverColour;, [4 {& W y9 I5 S0 L
numLinks = numberOfLinks;
( P% X j* t/ S# e W2 m R0 n6 F rate = 1;# v/ D7 i* H* n6 _( I1 j
numFadeLevels = 30;+ ^$ V. O% g) C( v
function initArray(theArray, length, val)8 h5 G5 {. h4 A ~0 P; q8 d
{
5 P4 I u2 x0 N( q5 W! c3 \ for(i=0;i<length;i++)$ S6 b2 w' J* h1 v3 H/ C
{: `% J8 U7 I% B
theArray = val;' b7 z4 B, g2 R0 d
}/ A D# X- j7 r1 S1 u: P0 |5 X
}
$ D3 P( c, e- F$ ?0 h0 _, ?, w9 L bgR = '0000' + fadeOutColour.substring(1,3)! i4 ]5 z; Z8 g2 k% m& `$ O, k
bgG = '0000' + fadeOutColour.substring(3,5)+ H$ m/ ]+ Q, m" s l
bgB = '0000' + fadeOutColour.substring(5,7)/ Q* w4 F# X. e' x9 \+ E7 |
currR = new Array(numLinks);
1 t% j% S8 c5 ? Q$ v currG = new Array(numLinks);
9 F5 @2 f0 h. r* ?" ` currB = new Array(numLinks);
% O* Q) [( s$ z count = new Array(numLinks);: S! O5 b6 P/ q6 s4 `' E8 S# [
fadeOut = new Array(numLinks);( Q$ U. l9 q' |
continuous = new Array(numLinks);
, @& }$ d3 m" n" S, D newColour = new Array(numLinks);
( G7 A2 \# r; q0 M8 ~! \: L, y tID = new Array(numLinks);6 I3 K& ]0 }# ^' j, ]' X7 e
redInterval = toDecimal(bgR) / numFadeLevels;
: a: F" X% _2 b! u+ ^2 A7 \ greenInterval = toDecimal(bgG) / numFadeLevels;2 f& ]! L2 B& _9 R6 A0 X2 H
blueInterval = toDecimal(bgB) / numFadeLevels;
, F/ r- q& c/ C% I initArray(currR,numLinks,0);
. {$ v! W+ P% _7 _ ~5 T initArray(currG,numLinks,0);" C. g7 E/ T6 f* Q) k) j# S0 r( e1 @
initArray(currB,numLinks,0);
_9 }7 q8 M# J0 f4 W initArray(count,numLinks,0);+ h0 K3 {% ]; l1 K
initArray(fadeOut,numLinks,true);
2 P' k# P7 [4 R2 @9 F2 e initArray(continuous,numLinks,true);1 w3 h p* ]/ {- z
}
$ J$ d1 z; {8 u$ v' p" `0 Ufunction startFade(id)& v; a9 O: A& D0 }
{
9 T1 r% U" D# D" [7 _( f* `0 F. @ if(fadeOut[id] == true)
8 l! p _' k2 Q' R9 d, l { /*move colour towards background colour (increment)*/
! N' |2 U0 E! C$ e7 a) `6 A0 u currR[id] += redInterval;
0 k1 A( o- l) n3 u1 Y currG[id] += greenInterval;0 I }. H* V6 L
currB[id] += blueInterval;7 c8 b4 S6 N& r8 t/ t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ ^: J" E* I C! c if(++count[id] == numFadeLevels) _1 J$ T4 d+ N( M) T( @4 d
{
- e, C' v( p$ z' L4 b$ V, | fadeOut[id] = false;3 G% _, d1 u7 I0 E$ U% p, m
}
! z0 A+ T, N; ]( c6 [ }
) J r" Y- F# D: n" `4 ^ else' m7 _+ |+ Y- I5 E' p
{' T% [5 g$ F. @% W1 U7 \
currR[id] -= redInterval;- j2 x# x# W+ \+ g. x0 j4 d( X. O
) p! E/ t7 S& `" W" ]
currG[id] -= greenInterval;
% {- l. V; w* m/ Y$ f: f
4 z9 M3 X7 E. O- ~, B: K currB[id] -= blueInterval;
- a7 \4 h# T( o" s4 i' ^( N: H# _7 [) y; Y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ u% ^& g; i/ M( E
- x( N) F' P( w. y5 V+ M) J3 ~ r
if(--count[id] == 0)
8 U6 w1 }3 R9 E8 l% A9 m' O
. @& g( C6 t) `, |2 s$ { {
2 I# ?9 s1 p g1 p
; @% s4 a9 W& R8 ?9 A& g+ | fadeOut[id] = true;
; s, _2 E9 B4 Q2 c0 {& o
s4 q. c6 O& Y9 M }
( j% W0 k& y3 M% }, i/ J q
8 [6 e: A5 Y) D- S! O) j# L }
) M1 j$ ]' V5 c( l2 f
5 h# G. _) Z, Y+ j5 z if(continuous[id] == true)( M* g! P; J1 S8 Q2 ]9 Y4 F
6 B% o# B) ^2 g8 T6 u {
! e$ B i; U% U% R- ]! u6 T+ g2 F0 P. m- O. C' x* W1 ~
document.getElementById(id).style.color = newColour[id];
8 Y, w7 {2 k5 E6 C% I r- X" e) i/ {+ p" m, \. ]. a
}
) b1 X: k0 W' h& f7 Y7 ~( }/ h8 ~. }. b' C0 T7 X
else; j, o8 P: }' L* x' y# I
6 A; {4 M1 {" c1 f5 N {
9 h) r2 A4 n; @# c5 {( e: C7 }! j& p
document.getElementById(id).style.color = hoverColour;
5 _3 V2 J9 _0 y6 _4 P
4 ~+ W5 \+ ]1 M' y }
8 K( I$ g8 H& S" e% o% n0 A1 W" g9 L( {8 Q( A; f" E: T
clearTimeout(tID[id]);4 p* x$ r1 u. X. J+ u
9 l. |* H) J! l3 D3 X' ~$ m" z tID[id]=setTimeout('startFade(' + id + ')', rate);9 ^2 I" p, [) E+ Q/ c' ]6 _
- p' j5 G C- i, }& L8 h
}
0 l! b1 p- E8 z) p, ~& ?; h7 B, k
- k( l, `9 [3 F2 M: Tfunction continueFade(id)
+ t- B7 g& p3 [: b) v- Z2 g: r( c" l4 o6 Y' h9 l! R$ z, h- [
{+ s0 g5 h2 T0 v7 o- ^! l
# c- i' t0 U. I4 t) H+ P/ k continuous[id] = true;; a/ u- ]' ?' w# X
5 Z5 N$ C0 V* }5 A- R i
}$ o$ W4 G9 {/ }/ ? B
$ g8 z% w% d9 J# L: S5 V9 Sfunction stopFade(id)
4 {9 j0 `& ^5 Z: R8 t' R- ~7 j( r9 ~ Z( K% s
{2 ^; T5 V' ^; N( E
6 G) ~ H- n6 P$ @1 l
continuous[id] = false;
& c! C" G9 k2 S" \1 P, ?. }+ U4 o" a0 |" Y) s) Q. Z
}/ k' Y5 \, |: h7 a
2 }3 D4 I6 S9 i' N% \- Y z6 ~function StartTimers()
; V$ L2 i2 S; j" `3 _5 ]
1 p$ I: Y; i4 N, u, ~{ //set up an initial set of timers to start the shimmering effect
9 S0 j3 Y: h w {
, o: R8 ^9 L# E# _5 h for(id=0; id<numLinks; id++)) X0 \6 ^6 J/ j$ g
: Q& P% ?4 z1 V5 E0 G {- c! e: L7 X7 w: F; k0 j
1 ~% S6 u: i; z* G' \" p t=setTimeout('startFade(' + id + ')', id*100);2 K" Y8 `5 M& G7 M& d* ^$ B
" m6 [9 m% J1 f& k. w: M1 e! l }
" N. `; \8 v/ G+ W$ Z/ K
) x) F! G1 u* N' G$ o5 R6 y6 ~}" s( v% C( L: l! o; x \
* ?2 V5 s: p# d% t& A//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')8 x8 y: Y: j0 ?7 _6 Q
5 K$ C; q$ W9 D6 w, VinitLinks('#FF0000', 6, '#FFCC77');
# u; E- R7 q: U3 Q6 Y
3 e/ r8 p- a# v' \6 V' Y; i. B//-->
( }2 H, \" ?9 u4 a5 W9 A( b
G5 R% y" A! s- ?</script>
3 i" N* S, a k$ \<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
5 D' K) B, v1 p7 S1 T4 m# v</a>$ d9 D! R: C% i1 Z( j& T
<br>
5 w4 |0 \; T6 v$ S, l<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>) W* n+ G/ m* c& _
<br>( I' Q( Y4 g. j0 ^* c* z' ~
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
, Z! J0 Y. Q+ H; j5 ]$ S0 ]' Q<br> * c$ f' q/ c; M! d& H/ L" n
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>6 g# s# F5 [* M9 \! u7 Q
<br>
) g+ h8 w( Y+ b6 S5 k* m7 v<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>9 W7 ?# W7 O5 b9 @( r
<br>
7 s6 V$ m7 {9 Z<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" [! \* ] G' _* t; S' w. Q
<script language="javascript" type="text/javascript">
: G* j: _, v$ H1 T2 O4 R<!--, F& L* Z, ?! _5 w3 L
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 i2 y; H" H5 ]3 S- |//-->
8 i8 }- o% e7 @; m) j) S1 i</script> |
|
发表于 2008-1-21 20:48
|