|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">1 J8 A) h" `* ]$ t
<!--% J" x4 G- h2 e* d
// convert a single digit (0 - 16) into hex' {4 a1 d$ j% ~" h! g
function enHex(aDigit)- W- j. J* s: S/ j
{7 v" e6 ^0 N# r7 a0 k- c, D* c
return("0123456789ABCDEF".substring(aDigit, aDigit+1)). \+ ?) P6 f ~- ?6 ~
}5 R8 U; O4 _3 J9 C' Z, m
// convert a hex digit into decimal
' n; t4 a% I+ a. j+ v2 J' x8 U: Lfunction deHex(aDigit)
& l0 M0 J2 b/ k$ s{8 A7 s0 V. S$ ?- f* c
return("0123456789ABCDEF".indexOf(aDigit))
- S- W! w( X( E6 r}% n6 ]1 _3 h2 m; P4 c6 ]
0 q) ]) j5 x) u) ~3 b// Convert a 24bit number to hex
, t4 i( E1 R% d/ j3 ^function toHex(n)
. z! K9 U% V0 i& {{6 A/ L8 `$ {$ E3 _4 M4 u8 F
return (enHex((0xf00000 & n) >> 20) +
0 s1 S8 B1 i& { enHex((0x0f0000 & n) >> 16) +, }+ X1 Z& X% h! j. A/ _( F
enHex((0x00f000 & n) >> 12) +* ?3 A8 ^' F8 n9 g! {. h
enHex((0x000f00 & n) >> 8) +& p! i* V% ]1 c' I; r5 \: I
enHex((0x0000f0 & n) >> 4) +
) u1 D( C0 |, ~& C$ y0 | enHex((0x00000f & n) >> 0))
9 M3 X- R5 c% B2 }7 M8 c' Z; E}7 p. {3 b) `6 J/ K' Z" d2 g, o
// Convert a six character hex to decimal U5 i5 h s( Z. c
function toDecimal(hexNum)! c/ C8 r& \$ ?% [4 W+ Z8 N9 L
{1 S2 w4 I. G' L
var tmp = ""+hexNum.toUpperCase()( n# A% M K. u' ?9 j
while (tmp.length < 6) tmp = "0"+tmp. c A: ` {" ?' u2 j
return ((deHex(tmp.substring(0,1)) << 20) +. F. p+ R# l% I. U, c# W8 ?2 K5 @1 o
(deHex(tmp.substring(1,2)) << 16) + w. M; s# z3 R, X. g/ S
(deHex(tmp.substring(2,3)) << 12) +, D4 v+ Q0 x2 j; q7 ~' X
(deHex(tmp.substring(3,4)) << 8) +
+ E- j5 w& a, H; o (deHex(tmp.substring(4,5)) << 4) +
( Q* U3 n3 M+ M6 j (deHex(tmp.substring(5,6)))); l. H, n: _! U; @, H4 ^! {
}& x8 n+ R7 _, y% R/ V
///////////////////Shimmering Links/////////////////////; n- A' y# \$ s$ J. k0 z' |& C/ }; w$ |& ]
//global variables
{5 G) P. M" X) K/ R7 xvar hoverColour/ o/ a7 z) U$ b4 o. p% u" j$ m
var numLinks;
" y; B( y$ }/ ?6 [$ K, S6 Kvar rate;
* l( z# p& k0 c3 yvar numFadeLevels;
& h: P5 r2 N3 R9 }9 w" Fvar bgR;2 L, _, r) G& X/ q4 h5 m/ l& j
var bgG;3 m6 w5 _& J. I/ b. W$ V- e
var bgB; U) m5 P1 v* G) R H
var currR;
/ `# q9 y8 g! N9 n$ m y( q$ z0 Svar currG;
7 O6 `. K7 {! A0 ]& [0 X' ivar currB;
) f$ p1 `. z4 ]; Q1 S8 d o; ~/ o, w1 ivar count;
8 o9 V2 J; [4 I4 d! C1 X' Evar fadeOut;
. f3 u9 U3 X6 t7 @: T2 _var continuous;
6 V, e3 G" h7 }2 w1 K; p8 z6 fvar newColour;
Y( o" S9 E& c8 }" n# tvar tID;
4 o4 m/ O# O/ h: y2 r2 d; ovar redInterval;
' P% [0 q6 v/ _) e1 {2 Yvar greenInterval;
0 c" b) y y* f# Ovar blueInterval;
( }' ? i: u }- }3 dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour), Y& T6 s' Y5 X: h3 |0 }
{; M7 b9 c H0 I
hoverColour = mouseOverColour;7 y# A% Q* X9 A
numLinks = numberOfLinks;
, T6 R, X- x" l% Y! c rate = 1;' z7 w; x1 e0 C$ W
numFadeLevels = 30;9 W9 d: A ^: j
function initArray(theArray, length, val)
1 u3 j5 `; [/ m1 G) M1 I! u {- D! W, o; i0 {0 w ?% P
for(i=0;i<length;i++)
4 f0 Y7 i* ?: Z {
! m- r, g( Y- D: s( d theArray = val;
0 `8 S' m8 ]3 v! |9 w }% ] @. Y/ _6 k# V1 Y$ P" z
}: E% M$ ~5 D9 o' u5 |
bgR = '0000' + fadeOutColour.substring(1,3)0 |; d/ s5 H8 `0 w3 R$ ~' b
bgG = '0000' + fadeOutColour.substring(3,5)
* P+ [3 o0 ]& _% N5 j- b bgB = '0000' + fadeOutColour.substring(5,7)
z6 ]! q4 \- B* d currR = new Array(numLinks);2 f2 K! ^; M* N0 x
currG = new Array(numLinks);
/ l8 x1 N) U6 w' M3 c currB = new Array(numLinks);
E% N9 G: ?/ \/ W. Q% P count = new Array(numLinks);
) t" S: a9 `2 V; A; j. A: q- _5 x fadeOut = new Array(numLinks);
9 m! h4 e: o5 z- Q' Z% v( {6 E6 b continuous = new Array(numLinks);6 ^1 K0 ]# `6 J$ J6 j! E! q8 f( T
newColour = new Array(numLinks);2 E9 h" r5 T* N" E4 W7 F
tID = new Array(numLinks);' W9 M, `* n: a2 X8 I7 p
redInterval = toDecimal(bgR) / numFadeLevels;
( f: F) h8 \& b1 ~0 g& V. w [7 Z6 p# p greenInterval = toDecimal(bgG) / numFadeLevels;% x( A9 [. x( k! y L
blueInterval = toDecimal(bgB) / numFadeLevels;
7 k" T) u* p Y7 P initArray(currR,numLinks,0);
: o2 {( Y8 s/ B* |" u initArray(currG,numLinks,0);0 @# F$ l* {5 M4 }3 w& m- x
initArray(currB,numLinks,0);0 I% _7 s, Z! |: ]7 H
initArray(count,numLinks,0);5 A1 `$ X. {! v# A. V
initArray(fadeOut,numLinks,true);
# g; I6 r4 g* B: E initArray(continuous,numLinks,true);3 H( D- [8 Z1 V& `7 o" S
}
o0 k3 O0 l h; d; W9 ]# d1 f& Ufunction startFade(id)$ ^8 n, R% j$ }' ]; a0 E: i/ \
{% c' o M! a, x
if(fadeOut[id] == true)
( q2 c1 u$ o: A) ~9 {) T { /*move colour towards background colour (increment)*/
3 u5 L' ?, p* S& b8 R currR[id] += redInterval;1 x5 Y( X; D8 _$ m" T
currG[id] += greenInterval;* b9 Z% D! h% b3 l. F5 X
currB[id] += blueInterval;# A3 @1 f2 a! o* q2 @" w; U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 \& i/ c0 n! w1 K) E
if(++count[id] == numFadeLevels)" ^& Q0 B N. I h! W8 w# X
{. F$ c' s2 ]( w% s* v' H9 I
fadeOut[id] = false;" ]; {- j% _$ O9 }4 d* p
}6 P# Y3 {$ [/ R0 t+ y$ E
}
( E9 k7 l$ G9 J6 o# g; \ else1 P2 L, Y" w4 T, Q
{
' _! W9 ?" [7 o0 m: i5 P currR[id] -= redInterval;
/ K" D' \) t$ V6 W2 i, p" M) L. T7 l! V; h
currG[id] -= greenInterval;
4 T9 i0 m- Q& l1 {" A) a/ }0 f, W; x) [5 @/ u# N9 h0 X
currB[id] -= blueInterval;
4 E0 d( U/ b A/ a- B; }+ U' a- s# a* V( A$ }% L: X
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* k' V6 Q; B5 L* M1 p% x! F; s
+ T- I( @$ ^. s* P0 z if(--count[id] == 0)- G( W# U' d% }& P2 e
# `! o Y# o& P# z" v {
2 H. c# ]' Z8 n. j
6 ]% y' O: B- v fadeOut[id] = true;. z6 I; |( `% |: t8 [
$ Q p) t* F6 |$ I
}. a9 m: S0 c5 J4 b6 S: o" S% n
" A( x9 q w, Y) A2 w$ ^ } F/ m- c, n" E1 z
$ ~5 ?) p5 v/ \1 l7 u% c) s6 w1 N if(continuous[id] == true)
4 `; }0 H! n5 M5 G( ?2 J7 G# `
6 N+ A4 s2 s( m! I# e/ w8 J {
1 ~0 C) n2 E0 P5 x$ D: e
" U# W" i, ~) w: Z+ i% y p# p document.getElementById(id).style.color = newColour[id];
; x( C/ J; w; \; r7 f5 [4 `9 J _6 _
}
: W; b! q3 @* o# D" d5 S6 l# U% h: o. n( Y. u8 S$ M
else. G- s* N9 j |8 b/ D/ b
$ A; p( j. o0 M- z/ ]: O
{
/ [$ O: @( j0 I3 q+ o: t( i e( q9 l: A9 i' l
document.getElementById(id).style.color = hoverColour;
: f5 Z- I+ I, q& ?! q/ q0 N
8 a" z, D( L: z- h# E( E7 d8 e& `* [ }
! `! T! I0 a& V: X7 @" h! \7 R) Z4 z0 L" n: _' ~3 a* f
clearTimeout(tID[id]);
' t a0 T: q2 C8 O- D G& ^( w( n- Y# ]$ ~# }$ g* \
tID[id]=setTimeout('startFade(' + id + ')', rate);
) M- ?4 u8 k0 X+ i2 h# \
/ r' ]/ ?$ |* S9 i}
! E9 b/ q4 x9 l& O4 K/ ]3 I, V8 K# _8 @0 A
function continueFade(id)
% W/ M/ j) V+ k* F# c0 y5 ]4 u
/ r( u* K' d3 W% _{
# z8 y$ \. k' c: L. l9 R8 Q, o& F+ l% m8 u
continuous[id] = true;
; @% a. d5 g' R8 V% N4 e4 F% e0 H
1 y) K8 W3 k6 O0 o6 \: ]' T}
% }0 {6 q0 o M2 @, T6 m
0 w1 ^, C! o; r* C9 ]/ N* u' D6 Y1 }function stopFade(id)
. F& F9 m) s; L3 F+ m \% p$ m% H6 Y9 ?4 N- H
{" M$ _( f: a' O: e+ L/ c5 w j
9 M s6 y' ~) Y) L
continuous[id] = false;$ q( [7 K( [! F d7 b7 s3 d
& m% \+ j/ Q/ X}- l8 f7 y3 I, o" e
! U$ R7 C# }) L. K# f7 n8 ~0 Nfunction StartTimers()
& O( h8 _' @0 A5 k6 b4 r( K. g9 |
X( T7 G$ ]% N- `4 N{ //set up an initial set of timers to start the shimmering effect
' k( Z, e$ l5 r5 }
% L% u. Z* y, _* ?0 c for(id=0; id<numLinks; id++)
9 d3 D8 B- }2 g5 _- `
3 o4 \8 V, O+ j% E- ]1 {. `" @; \ {
( T; T- O' H2 x2 S8 L$ h
# \$ J7 z2 A9 v0 e! x t=setTimeout('startFade(' + id + ')', id*100); `5 R" v# R( r, n( b w
) @0 i' e5 Z& p; {3 i4 T
}
0 `3 t" F d( R" h3 H8 z4 C1 z
# ?. G7 r% T2 l" @4 D" J, \* ]3 d}. |. p4 A m' A
) i6 g3 z9 N [* N
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), V( p3 i* |5 _2 N8 Q
, X4 {: ]- u+ b- `- S8 n5 K8 N8 \
initLinks('#FF0000', 6, '#FFCC77');8 b! f% ?% q6 ?4 Q3 Q! W
6 j( Z9 T- z0 H8 C& M2 \( W//-->% p4 v* d2 \6 U0 b
8 ~ k: e+ c e9 O* X6 v9 a</script>
, N+ r$ l2 _ \7 L2 S/ @8 H! d<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
( [- t& h/ u4 p$ Z, [$ O</a>
- p" z: n$ Q+ B9 [8 D. I- a% U/ n<br>2 }1 n- M) m" v9 s& _2 g5 C
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>/ v) V$ m. Z9 @7 R* f- f; K$ a: B& j
<br>
9 V9 y) x4 A6 Q1 W# ^5 E# c<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 s# N+ D$ `) y3 a5 W<br> + _- i( k4 Y# S9 |
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>+ a, |. V3 P% [7 p* U9 z$ k& k
<br>
% H q2 H: v3 q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a> t* x. d0 I7 @
<br>
, G2 b8 j+ x: J! F<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>- Y: L8 E* A' b
<script language="javascript" type="text/javascript">
z! T. n" }# I$ B2 S; U; Z<!--$ P: W. d2 q' w- q; s9 \4 ]. a% Q7 d
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
5 n# q. U: ^+ Q* b. e//-->
% A4 C9 _0 s" Z0 {, j</script> |
|
发表于 2008-1-21 20:48
|