|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">& a9 z9 X, c* Q S" }
<!--- v, I, W& J, W( I8 [
// convert a single digit (0 - 16) into hex
5 H. n' k* q- B0 k! lfunction enHex(aDigit)
8 _9 w% b- e# |9 ]( T{
! ]! I7 v d8 z3 n' T B( ? return("0123456789ABCDEF".substring(aDigit, aDigit+1))9 h' ~1 {; v& d
}: {1 j. [0 U" e0 {9 G/ u9 y% \
// convert a hex digit into decimal
; R) v, ~' U, q, `/ \6 h. q; \ Wfunction deHex(aDigit)1 P. k2 o/ `6 M( j1 n: ^4 e: S
{, K" v) m) u9 @; p( O) T
return("0123456789ABCDEF".indexOf(aDigit))
6 S J" g) ]# L}
; D+ |$ Q2 p$ m, J! A* q0 Y0 K/ ^/ i5 ~) {
// Convert a 24bit number to hex; Q7 r7 t7 e5 t) h
function toHex(n)
1 }1 Q3 y, r# Z6 n{2 q% `( N" ^7 E' O
return (enHex((0xf00000 & n) >> 20) +6 @8 ]6 j+ a/ ` F$ ]' Z" J* O
enHex((0x0f0000 & n) >> 16) +
! `& o' O3 N7 O/ T0 H" t1 t: } enHex((0x00f000 & n) >> 12) +, r: b( h3 d; b- v5 c
enHex((0x000f00 & n) >> 8) +- U" A8 g! \, \% X! |
enHex((0x0000f0 & n) >> 4) +! z+ n6 G8 e! O1 A# C# I$ D) H
enHex((0x00000f & n) >> 0))8 a% w# E( c7 X& H# d
}
% O4 s1 V' X) D' V// Convert a six character hex to decimal
; W' w) g: Y+ a) j- r/ S; N8 P8 Mfunction toDecimal(hexNum)# c! m/ d+ ]* |
{" F0 {7 e5 j. |$ Z
var tmp = ""+hexNum.toUpperCase()+ P; M% Z: d% K6 x) X/ W, o
while (tmp.length < 6) tmp = "0"+tmp
5 y ?' R$ W6 d4 C. }+ ~ return ((deHex(tmp.substring(0,1)) << 20) +# F+ H! Q) {5 {
(deHex(tmp.substring(1,2)) << 16) + % S( Q1 N3 K6 K: s
(deHex(tmp.substring(2,3)) << 12) +7 _' \& ` L4 s: G0 n
(deHex(tmp.substring(3,4)) << 8) +
. l A( }9 S$ x' |% l) ]# y$ m (deHex(tmp.substring(4,5)) << 4) +
3 D! d3 E# l3 l, t; ` (deHex(tmp.substring(5,6))))+ g, N+ H6 S, M: G5 {2 Y8 z& W
}% D6 S; G, U ^
///////////////////Shimmering Links/////////////////////: I# ? W7 l" T1 z8 P B" V/ P
//global variables* [7 w( ^ L# ^# d+ ]7 q
var hoverColour% g9 e8 w7 D8 ^. ^- B
var numLinks;+ e- a7 e* N- P7 s% }8 g( u
var rate;0 T6 t) Z; t: @) H1 {$ B' o
var numFadeLevels;
1 b- Z* [2 e# v9 |: G2 rvar bgR;
( E! X* b0 _/ V8 Y; P( hvar bgG;) O9 v% D& q9 m$ `, h8 f
var bgB;
) C& _9 Y+ a" ^; z0 L6 i7 Avar currR;
" J+ n6 x/ r, T- P0 ^$ l7 Xvar currG;3 t+ X0 v; G( r! \6 L+ Z
var currB;* J; }6 t0 g" t; x( h
var count;
: }' R) l; c; f+ A# i- Yvar fadeOut;: @' X* e' t0 T. e
var continuous;9 O% E3 L- E6 W, b( p+ ~
var newColour;$ _ N5 }; [ g& I2 B
var tID;
1 a6 _' E2 J; a: Kvar redInterval;, L, Y- s6 ~& x, r4 Z
var greenInterval;
, p( ~; k- f9 d% gvar blueInterval;; W+ ]! f5 E% a F% Y P, }2 u3 T% @
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 [! ~" ?" J( d5 A" c7 k{
/ J: o4 V) p; K hoverColour = mouseOverColour;
% J; v g4 m1 }% W( G numLinks = numberOfLinks;: I% q0 n1 ?: q I `0 A Z
rate = 1;* {5 C9 c- y$ i/ t: b4 ]4 |8 p. V
numFadeLevels = 30;! C$ X9 i; _5 ?- {2 b) \$ }
function initArray(theArray, length, val)+ L, u! s/ D. k. g( g. t2 j
{
- }: k6 c7 x4 S5 b! n- I. K; {0 T for(i=0;i<length;i++)
9 h9 R ?& W, ~$ t+ n {/ o' |7 e" o4 ?9 i# N8 v
theArray = val;
! c* i1 @* B' z L- [0 z }
4 c/ D: x( \9 `+ ?9 N- t+ ] }
+ G, v" l; f2 ~' u: e9 D bgR = '0000' + fadeOutColour.substring(1,3)/ X7 ]. v) Q& D9 e, x
bgG = '0000' + fadeOutColour.substring(3,5) Q- \# ` n0 j5 ]1 Y
bgB = '0000' + fadeOutColour.substring(5,7)
, S3 R1 n+ M7 I9 b4 ^) t( R currR = new Array(numLinks);7 @3 `# t1 t/ p4 s2 D- O
currG = new Array(numLinks);
' ?7 N L' {- C+ V! H; W# E l1 m; N currB = new Array(numLinks);
+ D) P6 B) K! W count = new Array(numLinks);
" m3 j- X! y. P9 E1 G2 h fadeOut = new Array(numLinks);
x, L9 a% J' C5 g/ | continuous = new Array(numLinks);- N2 \8 Y! F( X. _: U
newColour = new Array(numLinks);
, q2 I' \( N- K5 `3 d tID = new Array(numLinks);8 z2 b. `, i4 |- n% E
redInterval = toDecimal(bgR) / numFadeLevels;
+ K$ G5 L& E0 q( v' Y! M! Z$ C greenInterval = toDecimal(bgG) / numFadeLevels;" i8 B# Q# V0 C0 ]5 x
blueInterval = toDecimal(bgB) / numFadeLevels;
( x# X" }1 g; o/ m7 C# o initArray(currR,numLinks,0);
( W" i B9 P4 J% [: }9 ~ initArray(currG,numLinks,0);; l; c. f3 a6 y) B) g: s
initArray(currB,numLinks,0);! `! l& F. h7 T0 U1 ^( Z5 M( ~
initArray(count,numLinks,0);& T3 O0 x! `5 V
initArray(fadeOut,numLinks,true);5 ]$ ~$ `; H' O: r5 D
initArray(continuous,numLinks,true);
/ m# N" q9 B. H. p% \3 M}
$ k+ }% e9 d( b2 Lfunction startFade(id)
, a3 S+ o3 O" D) H) t{
+ z2 b/ s- ^1 i3 J, U if(fadeOut[id] == true)3 I9 X: U# E7 @ Q& R+ y
{ /*move colour towards background colour (increment)*/
, T( D% p3 L e3 `2 T currR[id] += redInterval;0 a3 J2 l, p7 P7 @
currG[id] += greenInterval;
' H% Y; S6 l7 h4 } currB[id] += blueInterval;
) H; }8 B! N& M1 {! N# @ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% m% U% |& n- x$ U5 s, { if(++count[id] == numFadeLevels)
0 q3 \. T) h# ^; T {
) G6 e6 I2 P! f5 {# P# O fadeOut[id] = false;
4 {3 c6 T% Q5 J( G7 l7 `9 k6 f }
. |, ?0 V' [) I5 s3 G5 A }& B$ A% [6 D$ O: H$ q" {
else
' T, ?# M/ Y$ h. D+ F* v {* V7 @( `& O! B5 t. e0 i! f& f X' l
currR[id] -= redInterval;
/ E) ?+ z: `: I8 [8 d* Q2 J- W* |
9 V( j. ^3 ~) O9 {$ S" V; I8 N2 d currG[id] -= greenInterval;& f8 `/ C9 n5 t
& ]9 [/ v$ E4 l! x/ Y% g' e currB[id] -= blueInterval;( d8 N: O% N! B; i" k3 U
8 i' W9 Z5 p- }, C, j9 ~" I# Y newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: ~: ?5 n+ s3 m) o4 ]! I0 K& g* a% E) G: r& y- ~
if(--count[id] == 0)
( s+ F/ i C' m/ v4 @; I: }
; n& q* a' D6 u/ m F) \2 E {
; U% j9 J9 L) E. _5 k+ L7 a- B O D/ _' C0 `
fadeOut[id] = true;" a7 ~# m: R2 _ H5 @
% p$ N! L) X9 V2 K* _: F- Y4 D }% x- Y7 p2 }( i% e% U# z1 ^
) J: f) ~7 W, \" P8 d, A
}
4 m- R4 }! }! y0 l7 R, @$ B& t& O# P) m/ G3 F. B- o
if(continuous[id] == true)
% r1 H5 X: s2 }5 v, a
9 Y! R. y9 ~* y" X* V: ^ {
1 y6 b; ` V: e: R6 J5 C
8 S3 E" ^( d2 Z' \ document.getElementById(id).style.color = newColour[id];
( i5 F' N+ A0 S. x5 t. a0 B4 D, e4 Q' I& n
}3 V5 Y I* ?4 b0 O- w
4 S$ I& I7 p+ k
else
1 q. f r2 |; _+ _* }
; P* h( u2 P( G$ p' s {* D8 s. e/ e. E
0 k5 p: U; R$ w2 |$ k) l" K
document.getElementById(id).style.color = hoverColour;0 }) Q% t4 t8 q
0 m. c7 X" c& g. X4 S
}% U" V* t) s1 B1 A2 t) X2 @
) W- C4 t8 A9 s8 T( u clearTimeout(tID[id]);
9 ?: e/ @" O, j9 `6 H9 f
' O- O9 G5 d1 L8 U4 t/ i tID[id]=setTimeout('startFade(' + id + ')', rate);
& g, s$ V9 C/ }
) u, F& Z( P# Z0 J}6 e& p: x6 D; P! r4 B1 l
5 b; `. H5 ~$ X9 b+ J8 q7 ?function continueFade(id)
1 o+ ^* D' G/ Z: S3 H
5 g) _) K9 w/ R- V- T$ f; t{) w# Q8 }& V; i3 Z
4 M+ ]/ Y, }$ L3 J* I5 ? continuous[id] = true;" d; [; Y3 e* z9 W" U! f6 L# |; I7 ]
. ?3 J# y# S/ O. Q) S, I
}. Y" v% M3 j( Z/ d5 T1 A+ e
1 O+ z0 U! y: W7 |7 Lfunction stopFade(id)) r0 M5 c* q% m1 O2 y
, N% o2 Z% p& {/ E7 {, ~; Z; O
{
d$ k8 ~0 I% P" W8 h% W9 k: D4 U* a& s- ]9 r
continuous[id] = false;% }- U+ I& e$ T. z6 n1 O1 y; G0 ]
$ [2 o. M4 B* e}
# `6 Y( x5 Q& {3 X# a( J6 f S0 k+ ?
function StartTimers()
* A" ?2 j+ j. m, e& w c7 _
% e; K/ {' b* J{ //set up an initial set of timers to start the shimmering effect7 O% A8 g. F% @
- A3 x7 h1 o' P. J. V for(id=0; id<numLinks; id++)
- a- K/ g+ n$ [7 @0 ]
. T( O% Z; G- S. S, ^( m, t {
" Q% P6 B2 | e) a% N0 O% Y$ ~
+ s7 |5 R$ l, a/ ^: t2 x t=setTimeout('startFade(' + id + ')', id*100);% g" L: r" [/ v
1 i8 d# S4 ^2 B1 |; y }
+ J4 S' y: k" K) `# _3 g% S. D- U8 A0 i
}( p6 D3 E) }0 f o
5 e7 o( q: F5 F: q. j//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')3 b0 U% {4 T) v) o0 ?5 q: Y2 Y
4 K7 \. L1 p( J
initLinks('#FF0000', 6, '#FFCC77');
) F/ c% R9 W9 h/ O; w% K9 B- z; h0 |5 L; R5 b2 x& k
//-->" B$ F2 k2 e$ {1 n
/ Q. G$ j3 d* \</script>
+ F) S( F/ z* u<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' T2 X8 ]& a& z: l- {
</a>
) N' L9 ^5 z- J& N* q x; T0 A<br>- b N4 G' [& b8 Y- N) }
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>) I* p5 ^% N a. J
<br>- f0 n5 ^7 a! O7 p2 M
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 D: y3 s0 E) T% }' z2 d* Z<br> : l, A7 w' l3 g1 s; k0 L8 s
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
5 S# |( `. l6 N/ t1 W3 h1 z. { z<br>/ V# y0 N; M+ G' w, ~' ?
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>: F& P8 H6 E) [+ P/ J- W
<br>+ ~6 T( d" Z8 q6 S$ |
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 R1 }' u: M m0 e$ p, _
<script language="javascript" type="text/javascript">% _2 R4 E# e, G6 B8 g# E7 z4 ]
<!--; p; `% v( x7 X
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 F- y* _" U6 p/ z/ |$ Q
//-->
6 o* A9 L. p1 N X% U0 m E8 w* [</script> |
|
发表于 2008-1-21 20:48
|