|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( L" R/ L) G% o* a% q
<!--8 c+ Z6 F" m* N, H) M
// convert a single digit (0 - 16) into hex' G" p8 A) b O. S7 n# V8 v
function enHex(aDigit), w7 q. M f1 Z6 Q
{" T$ ?) L! |1 D: W3 ^
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! M) U$ [' L% S3 P}
- [7 N# e; [; p1 p! U// convert a hex digit into decimal! `, _( v J! f# k3 p. Y% Y) |
function deHex(aDigit)
& i- m% q: ~0 u0 o{
1 e4 `+ B+ L2 w4 H, h return("0123456789ABCDEF".indexOf(aDigit))
/ C; ^) k* V) ~; R* V}
! s& }! F/ Q0 z! f' H- k- C: G# P2 ]
8 T, w+ L+ H1 x: }" A4 o// Convert a 24bit number to hex4 E8 S2 I2 [2 a) r6 T! l7 U j
function toHex(n)
3 e4 c j2 T, N+ @ l" I{
2 R4 ]$ l" |& B L. l, i, r return (enHex((0xf00000 & n) >> 20) +
+ I8 C2 K9 _5 C$ I* y1 ^ enHex((0x0f0000 & n) >> 16) + U/ ~; d6 b$ K
enHex((0x00f000 & n) >> 12) +1 x M0 q) I3 x9 E/ _% C
enHex((0x000f00 & n) >> 8) +
5 e& p* o6 t4 r/ h enHex((0x0000f0 & n) >> 4) +6 b. n) T+ r: [* g6 {& S
enHex((0x00000f & n) >> 0))' ^4 q' r! c# Y6 W
}4 n S3 O! B9 v) S
// Convert a six character hex to decimal
0 M1 B" E; |) z8 ~7 R8 Xfunction toDecimal(hexNum)
# u V; p( K7 |! H{
5 m: l7 B5 v% `. N2 z) x+ h6 b var tmp = ""+hexNum.toUpperCase()! Z j2 l/ p: W9 s( c
while (tmp.length < 6) tmp = "0"+tmp
* }: Q! {/ Y! u4 Q! t5 K return ((deHex(tmp.substring(0,1)) << 20) +
7 A* U. f! s; F8 s4 N (deHex(tmp.substring(1,2)) << 16) + 7 q" L8 Y- E9 a4 @: F' m( P
(deHex(tmp.substring(2,3)) << 12) +
, P+ D5 a5 l9 W) r* L% x (deHex(tmp.substring(3,4)) << 8) +
# [6 U9 Q/ E1 z+ K# } (deHex(tmp.substring(4,5)) << 4) + F2 z( y1 s% r; v5 E
(deHex(tmp.substring(5,6))))
: j: T- \$ c6 Q3 `/ X}
2 c3 Z; I6 b0 j9 L+ Y8 j1 h///////////////////Shimmering Links/////////////////////
8 G) `# R/ p. y+ F//global variables
! S9 e9 M! U- |var hoverColour
3 f. P' a" }$ @& _var numLinks;/ w# D Y* `4 `$ T: g, q8 p
var rate;! Y% o( v% L% v& h) U
var numFadeLevels;. c2 a# `; O- V1 R" C
var bgR;4 k @8 G) @/ S7 T
var bgG;
- O, T: J3 J9 x5 bvar bgB;
/ y2 L: A8 o- ]. R+ ~- Q( Lvar currR;+ m8 i4 j0 F) b5 r
var currG;$ V+ A' O. I/ s0 ]3 |) {% z
var currB;
% L! j; z8 K0 b5 vvar count;+ C- @0 @5 ?4 L1 B& l! l; F
var fadeOut;
g, Z1 H# b6 gvar continuous;
; W h' u" p! c4 v$ j1 @8 _+ o: yvar newColour;
3 O* z, Z* `1 ~# m! U. ivar tID;
/ R2 j7 X- @# G; z2 G. Mvar redInterval;
0 z" w: C& E, q" g8 @var greenInterval;0 }# o' J# E3 S8 O
var blueInterval;
* ^+ f$ |1 C* ?. z+ G6 F; m1 W1 i$ H' dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)$ ]2 ]+ e' m" u7 `
{& B; M2 b/ T& g+ T5 J+ m
hoverColour = mouseOverColour;
4 C l- q) n3 u numLinks = numberOfLinks;, v5 I6 [7 ]3 D, y: ^
rate = 1;7 I3 R H# K7 Q0 m: ~& ~- [' J
numFadeLevels = 30;
9 t5 R" T" j7 I. y5 |* u function initArray(theArray, length, val)) @ f* X3 z8 J
{/ f* B& b1 Y; M1 c- S( B
for(i=0;i<length;i++)- f# F- ~* [( v+ [( v
{; k4 L2 A: Z* F, U% M
theArray = val;" V* }) `7 ^& d$ Q
}
- d; h) a, \8 t% L" T }
: f0 Q* A1 C) w bgR = '0000' + fadeOutColour.substring(1,3)
1 g6 p, c" V; r bgG = '0000' + fadeOutColour.substring(3,5)
7 s7 ?2 e4 j% |+ c bgB = '0000' + fadeOutColour.substring(5,7)' U6 \# O5 \" {- v- @
currR = new Array(numLinks);
5 f5 A/ X5 u8 [. Q currG = new Array(numLinks);- }( ^9 F: q Y2 y$ k. W
currB = new Array(numLinks);0 Z& b! a7 y, N; F& q4 D, ^: y
count = new Array(numLinks);9 T+ h( M- `0 S& @) C
fadeOut = new Array(numLinks);6 m) v, ?/ z8 O' d, L
continuous = new Array(numLinks);
- H. h4 j5 @& U1 ~' ^( U y newColour = new Array(numLinks);* T* V* h3 ]6 i e8 e$ \2 I
tID = new Array(numLinks); X/ c2 Z8 Z5 z% Y
redInterval = toDecimal(bgR) / numFadeLevels;: x$ _5 ?$ H6 s; u: G4 ]
greenInterval = toDecimal(bgG) / numFadeLevels;- j: N0 c# ]/ f
blueInterval = toDecimal(bgB) / numFadeLevels;, I2 m0 w- s6 k8 F% r
initArray(currR,numLinks,0);' h: f* S9 Q; l5 I0 M+ p& ~& \" }
initArray(currG,numLinks,0);
; i* M, [* J4 S# H2 v initArray(currB,numLinks,0);
; h5 \( m% K. i! l, i initArray(count,numLinks,0);
8 T$ g# w* H1 e) o( M initArray(fadeOut,numLinks,true);! q7 V2 G( v% x. V- q& F
initArray(continuous,numLinks,true);. z1 c8 A7 k: a) M% i. L2 S9 r
}
' e$ \; P9 F" a3 l2 Ffunction startFade(id)7 X' U4 B6 q! B/ S2 v6 f9 u, W2 O! k
{
' O$ o- V, p8 c, k0 Z2 N6 X if(fadeOut[id] == true)
U5 ]" ~# `+ b L( T { /*move colour towards background colour (increment)*/
* T0 w* ?; M0 i/ ]& H currR[id] += redInterval;
3 h/ k6 C# H7 O3 ~, | currG[id] += greenInterval;' {% U, a$ { Y' h& H9 \' J9 h( }
currB[id] += blueInterval;
! s% z, L$ q$ w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- j% a$ Q- B/ n4 P' ?% x! g
if(++count[id] == numFadeLevels)
3 j/ }7 m5 k) _8 N! P {
5 A% A% u& @3 D4 P$ X( F- k" d fadeOut[id] = false;7 q( v; s9 Q3 t' A5 z; B
}
; [4 p1 Y! Y2 m3 F- [ }( D' C: P e3 T P2 p: b( t
else
$ ^! w, @* Q, m$ g {
/ |+ Q8 ^/ M3 a currR[id] -= redInterval;( H. b( f. z. S" j. l
3 R+ W$ j$ p( n+ K currG[id] -= greenInterval;0 H( i6 I5 i: }. E* D) F: |
0 H$ L" i: y* P0 e currB[id] -= blueInterval;
! r6 b0 N) v* [; h! U5 @. @2 Z# d: p# @- k+ I4 c# j( r6 \. i+ N
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& S& F3 P1 M( W7 M
& Z5 u6 Y' j ^1 }: L: I if(--count[id] == 0)
) w- b3 p5 X3 B, n) }
1 M& E2 x# T" H1 e: {$ S {
' Q$ q) T) k6 A) X0 _& w# Z: K1 F2 K% v
fadeOut[id] = true;
- g+ h6 W. j# K- z! }
, S7 v3 m. N/ W% a7 Y6 S }
$ Y3 r, ~1 p( W. s9 R, {% h, B
4 h" a2 X5 u; m9 m0 K% T/ u }/ u {# R/ T# X( E4 V' }
! R6 `$ B& C9 Y& }/ x4 J1 I7 W
if(continuous[id] == true), H. u9 |: ^3 i* n8 a2 `
1 U& P$ {! [) J+ k I( r
{
& w1 J9 R" n L$ u) I& V2 T& K0 t, ^" L
document.getElementById(id).style.color = newColour[id]; ! @3 h Z% s Q9 v) B5 X
! S% R$ L/ l+ b% D" D% h }
0 Y3 u& M5 }6 e
3 m" x/ o) b7 N8 t9 u8 j) l else
7 z. K4 I4 A# S# }$ H0 n
9 d [( p2 J8 Z6 j6 { {
* w! e+ b! n$ d
y! e- {5 G; } document.getElementById(id).style.color = hoverColour;
2 ~, T9 i& @; p8 Q. z( } q) n. b s1 ~1 K+ Q) x
}
* m0 n8 h% Q+ j8 b
; a9 _+ w- w( a7 O, |& Z ^) Q clearTimeout(tID[id]);' ~% K. d) S p! k0 T# m
0 V+ @: Z5 M+ _: G
tID[id]=setTimeout('startFade(' + id + ')', rate);
" B- |3 x% D7 r7 A* D
" W2 f5 z$ Y4 @8 V2 o8 v; P" ]& Y! P}4 ^' ^+ B. ]( n* W3 R4 S
9 ?, |- ], n- Q; P* G4 i4 u( ^function continueFade(id)
" [4 E" M* K" f1 l. v$ L
, ^0 L" |. q% j5 W. _{* @. X B, D- V* U! u
; t% J" J* z$ \) t/ d continuous[id] = true;# F2 G- U& A% q
' V# V6 {' ` ]: U
}% T( b: {) G3 E+ _# L
8 h' `% g1 z# ffunction stopFade(id)8 S, A5 R4 x4 M) @! Q2 q# d
, B9 @4 K/ @* c g{. h7 }& R2 T8 G* D' U/ a
8 V" w3 q1 A3 V/ Q' Q& H. l
continuous[id] = false;# ?- N# V: t) w, {/ x: |# z8 V
# \% T( s# I9 Q7 K! g8 z
}6 M, x2 q3 v7 G5 J" X" q0 Q
, l3 d! d/ |) G9 n5 Tfunction StartTimers(); t k3 y) M; Y# I+ Q: Q
. I3 Q- z) ~* \0 c$ R& A" M
{ //set up an initial set of timers to start the shimmering effect
3 B8 l3 L) ^+ L' L) G, J% j# w
, C4 R8 [4 m4 N2 z! Y: D- | for(id=0; id<numLinks; id++)( W* T8 ]) X/ o2 e9 U' x
2 t, d5 t9 v) A: k9 m3 {6 p* I {- u6 ~5 Z1 Q5 n! F9 _7 `* x) Z
- D% b& u# p5 @
t=setTimeout('startFade(' + id + ')', id*100);9 {/ n" R* P4 B2 b* a( m
/ D& h7 v+ e( M' k4 u/ @ }* Z3 X" u2 H2 P! I# U: P
6 l6 F) l( P9 K
}
# ~2 k7 v, o$ l2 d+ l; I, }0 R( H9 V4 u V |1 [7 k* J- M
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
& C; Y r9 s$ C7 T9 Z* ^" x% j3 `+ V" }# h! x1 m* i
initLinks('#FF0000', 6, '#FFCC77');& ]( K7 [. l: S+ ]* ?# [$ A
- B/ @0 Y& }5 i7 U$ P. Z//-->
# s% {6 n1 k8 ?7 O% P+ ?" I. @8 d2 B9 ~* o5 `6 i
</script>
4 Q# a, x" _) x8 ~' c3 i2 N<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
; N5 i' C: \- c; v3 y</a>5 k6 N- ]) W m& t4 x6 @
<br>/ |+ F5 h! V. Q# H
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>( W* C( f! j+ W
<br>
+ e2 @1 G* D# H<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
( c; Q" h5 R7 H8 U! G! G<br>
_' j N j* |! o<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
3 h" W4 W! l. S# P<br>$ L( B3 f/ q% d1 ^9 T
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>8 c( l/ F& Y+ G% L
<br>
8 C' }1 X X8 C<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>3 f# A) K! _7 J4 L1 j
<script language="javascript" type="text/javascript">1 H( i7 w; p5 z4 ^ i+ ]
<!--
# I# x$ V- m0 @( dsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
- i, ~% A+ U; S7 _% }- i! T//-->1 Y' S. k) \0 Q8 U( ^! W# p& J; ?( b: o
</script> |
|
发表于 2008-1-21 20:48
|