|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">) Z+ k8 k" p: d- C3 n8 H$ ~/ ~5 g& |
<!--
. b# `; }2 c' |9 p! ]4 Q3 |) m; `// convert a single digit (0 - 16) into hex
# s# b8 h, I8 B: y' ]function enHex(aDigit)! z- ~& x7 C" w) @# ]! q
{5 X& ^# q* p2 \% a z( H
return("0123456789ABCDEF".substring(aDigit, aDigit+1)), F [: y% Q9 e1 b% u1 G; i! H
}
& y; X/ {7 {" I! H4 [// convert a hex digit into decimal4 p1 C; V' R3 X
function deHex(aDigit)
) {( E& G$ y0 N8 |* k{
2 Y4 r& p* r' [( o1 l8 Q7 ?. r$ X return("0123456789ABCDEF".indexOf(aDigit))
3 C9 F" M( {8 U3 q/ G9 e# f" x/ P. Y}5 C# C- H* `0 x0 B. t g
: d7 b1 M( J- n8 ]2 L1 b1 V x// Convert a 24bit number to hex2 ]/ K1 r: t# Y' Z
function toHex(n)
/ V! p2 q3 K8 |$ n, l$ q9 I{9 O) y7 }' ^, {- A' E+ P8 ?$ i5 m$ {) N
return (enHex((0xf00000 & n) >> 20) +3 h8 A7 i `4 q; G6 ?+ U* U
enHex((0x0f0000 & n) >> 16) +
+ l9 a6 y3 s: P1 Y' ~" A enHex((0x00f000 & n) >> 12) +4 Y3 b; X$ B6 D( ?5 x
enHex((0x000f00 & n) >> 8) +' E& c2 a( [6 t
enHex((0x0000f0 & n) >> 4) +
( I: A F8 N$ M' G: U enHex((0x00000f & n) >> 0))5 `- U0 |, L) @
}
0 ^$ F: [: q9 r6 F// Convert a six character hex to decimal3 Q4 ]) D3 T8 _' t$ L
function toDecimal(hexNum)/ ]/ a" h4 x; @
{" D l8 o4 a4 w+ a
var tmp = ""+hexNum.toUpperCase()
. Y3 H$ }9 m5 X# Q9 C while (tmp.length < 6) tmp = "0"+tmp
g+ W6 f1 M- x" v/ E; C& b, E return ((deHex(tmp.substring(0,1)) << 20) +1 I/ W X3 \1 Y3 P& v9 {% ]" l
(deHex(tmp.substring(1,2)) << 16) +
2 |9 L, a3 D8 R: T6 C c$ t# U (deHex(tmp.substring(2,3)) << 12) +
& c" A! g# n& z9 w) B8 K# ] (deHex(tmp.substring(3,4)) << 8) +
' f: _9 U1 s( K+ _9 N% {% O (deHex(tmp.substring(4,5)) << 4) +; n. l; e* k, L5 g8 O- q3 b
(deHex(tmp.substring(5,6))))% s- }/ t% O y w' W# D
}
" m) @5 v. ^( i* S8 g% }* ?///////////////////Shimmering Links/////////////////////
$ y' v. P# ]5 L* v5 t0 i( \//global variables2 G& \9 P. Q+ A8 }' M5 |
var hoverColour: @7 g2 [ J$ `2 |# B
var numLinks;# I' c( u0 z/ ^# w1 l; H- i# f0 ]) ^5 e
var rate;
) o' i1 P( j1 Q8 o3 e: jvar numFadeLevels;" T/ C M# W1 F7 O6 B" D
var bgR;
! q5 O. A" O( ^# Pvar bgG;
, [. P) [+ V8 E' p. zvar bgB;6 d. v- Y! u3 o7 j8 ^
var currR;" |5 C4 `( m9 e% D; r4 d
var currG;
6 f; G# A) u, Y& {4 P8 S/ Lvar currB;3 f2 N5 E1 m/ T, z7 t! R
var count;
t/ U0 N, K2 m; } Hvar fadeOut;
1 b- z7 u( A: ]7 d' wvar continuous;+ \- O, w/ q/ J+ T$ |8 f) y* K
var newColour;
) Z0 w: E) ~2 b, |7 y$ p( }6 Mvar tID;
X, q3 `1 B2 M* ~& X# |( Hvar redInterval;+ o' D7 M% H' G
var greenInterval;
5 Z9 [( @5 s: D& j3 B- mvar blueInterval;
8 ^, [7 y9 u2 I% k' F. f* \function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
7 F( R4 z' c+ j) v. C' q. M{4 L; }5 L$ B' l. v$ Z
hoverColour = mouseOverColour;
/ N( b/ E$ ~2 Q/ d; d numLinks = numberOfLinks;
% X' A! H! ?# G rate = 1;
# x7 t, E% `% N! b! H' [8 _. o numFadeLevels = 30;& D# U/ `1 g; o9 e( I! V6 k ]
function initArray(theArray, length, val)
+ l; s3 _$ n3 u, | {
1 i+ e5 a' c& W5 @- I" @ for(i=0;i<length;i++)
- b% a; ?9 l& k {4 s% r9 b3 G$ E1 S9 x& b
theArray = val;% b. d. B, V5 r, W+ q; ] s3 ^
}2 ^8 h# K$ |3 u
}
6 p$ X& }4 [# l8 W# v bgR = '0000' + fadeOutColour.substring(1,3): ?' d6 f, x0 n* m: K- \7 A( ~
bgG = '0000' + fadeOutColour.substring(3,5)
3 ~' l& o" n* F! T% [8 j bgB = '0000' + fadeOutColour.substring(5,7)3 c# n9 e5 ?4 ~+ \: L
currR = new Array(numLinks);# U5 }5 ?' @6 u$ y- o: e1 q
currG = new Array(numLinks); [0 r. U% a N+ x6 V; @' P" t
currB = new Array(numLinks);
/ P8 M! y0 X _5 e! j count = new Array(numLinks);$ R0 ^* L' ?4 h0 e4 t; v8 x
fadeOut = new Array(numLinks);
9 W3 }; X4 m% D0 y" W. |" Q continuous = new Array(numLinks);
" ~% T/ u" d( ?8 C+ p newColour = new Array(numLinks);( f# P5 P! B" C) e1 w5 ^3 F
tID = new Array(numLinks);; C. @# G; P- Y1 y/ O2 S
redInterval = toDecimal(bgR) / numFadeLevels;
+ y6 s& ?# ?* a, p* Z greenInterval = toDecimal(bgG) / numFadeLevels;
6 v+ f# W# U! b y blueInterval = toDecimal(bgB) / numFadeLevels;
) J) l$ L" y! b+ x7 ] initArray(currR,numLinks,0);
" u( l3 y( E0 D# d0 K l- b& a initArray(currG,numLinks,0);# ?5 X0 Y6 a B( J
initArray(currB,numLinks,0);2 [% ?6 s3 l) S F% [( e& z
initArray(count,numLinks,0);6 u1 E" n7 ?' X$ l/ v$ J$ c) ]& e
initArray(fadeOut,numLinks,true);
+ D5 X* T @7 A$ {6 e' n/ j" X7 W0 g4 B( ` initArray(continuous,numLinks,true);- N+ j$ H3 Z2 g9 E' z- u/ ^$ U
}
2 R1 Z5 h# Q8 H4 G7 I# ]function startFade(id)
; q7 w6 Q8 |" b4 \- L' R{; r- d3 b8 M% o0 R5 k
if(fadeOut[id] == true)" Y% z1 z3 }( |6 J
{ /*move colour towards background colour (increment)*/
; R B% x6 u8 A6 x: o" b6 t currR[id] += redInterval;! S+ L5 p" R5 H8 E" K
currG[id] += greenInterval;
" W) d6 \% E8 t V currB[id] += blueInterval;
% q$ H; L6 [& o9 T% |6 u2 B newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, u3 l, m) E# Q9 ~. b7 Q( q( | if(++count[id] == numFadeLevels)
: { O# w, u& U- v* ?4 M {5 N0 t% C% A. E: @0 s
fadeOut[id] = false;/ J% D8 V/ L9 b3 e
}# w8 x1 J6 H' u: \( c
}& Z/ e. f w7 L8 }
else
) f9 ?4 L& G- S/ n. V {
1 t' D5 C3 P0 a$ n" m currR[id] -= redInterval;
3 O/ j' e5 g& p% D0 M& y* F9 e' F7 c/ q; B. Z7 x
currG[id] -= greenInterval;
6 j: j! P c& W) J; U
B, p0 L$ v1 o currB[id] -= blueInterval;2 x& N* z' b% ?
* n" e$ p4 Z( B; J newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 R3 v# u' l; d" v# [& b- s) S8 v
( e d, B5 {8 e% I1 ^
if(--count[id] == 0)
& v2 X' |0 w' ^ F
$ z6 u# D5 `' m& Q! ?( q2 n {
/ o$ r0 u' t7 q) `; l* y$ i3 H- `8 d5 e. f8 x1 @
fadeOut[id] = true;
/ o! S7 q: V. [7 p6 S( J9 ~
. m, Z q: t7 F. v/ h* }( M }5 O# `$ H/ g: K0 ?9 t# _$ i% w! k
/ s( s4 z" P; x9 p7 S6 P }
' J/ @! G" R8 N& h5 \. f
0 l/ \; S# R7 C8 s if(continuous[id] == true)8 Q' I. R. g" ~# q! h
3 b6 p" C# y5 e A! u
{: ^3 v" a4 e& k, s# S: W
9 s: k- V8 Q) w. N( J3 C# R document.getElementById(id).style.color = newColour[id];
0 r0 u# L( \8 C
$ d7 k) X0 @0 z" ^) H& u' S3 E4 \ }
3 c3 X; T$ J! z9 P- S/ Z
. i2 ^: _7 [9 R$ t- z' m2 a else) i1 p, w/ [) @( v4 I
. w" ~/ m- O9 N: z/ o; i
{
/ ^% Q. p) G! l" f# c' M4 `# \2 X6 P
document.getElementById(id).style.color = hoverColour;
/ f! p" s: i4 B9 l
7 E: o/ M+ J( \+ _& l& j8 F$ R! U7 E8 V }
8 |1 @* u. D2 Y& X( L$ O) Y8 Z' |9 j4 @
clearTimeout(tID[id]);
+ S% Q# ]9 d8 v0 A
$ W" H' W" F8 g' f5 P tID[id]=setTimeout('startFade(' + id + ')', rate);. d U+ Q8 ?7 ?5 b) z
) T/ Q: q. q/ _/ `4 x6 ^. `& f1 y}% q5 |8 b; y) m/ h& S4 ]
- S# D& j0 q1 s" g# H) x8 A1 ifunction continueFade(id)$ R1 C& b% w) D7 W1 z
4 q; B7 W0 u- _- c{7 E4 v n4 L: B0 V3 K
) z1 @( Y* u" c3 {, @ continuous[id] = true;8 ?% c5 n; _ H, a8 @; u! e8 b$ P
7 ~" Y& G9 i! ~1 b$ }& h: m6 y v}% F0 `3 c+ u0 \( u% h
/ ~! ?' R3 r2 A1 ^( ~/ K
function stopFade(id)1 v, c) V, W& _
( n( F1 b% k0 h0 y3 W( w! m8 e
{. K4 Y9 j4 G6 y- L: d
, `* c+ R+ d4 ?" p+ q; ~
continuous[id] = false;" V. Y$ h, w E8 \& ]% K$ p
$ h5 t- T2 Z$ A' X3 ]8 F- [
}: V1 @" S. ~! f1 t- W/ P f
: F6 l. b5 g7 n1 i3 T- N
function StartTimers()& h- \- i0 [4 w: Y6 o! H/ D
! A5 u0 ^) E1 A* V d{ //set up an initial set of timers to start the shimmering effect j X C* n4 m( S
! S6 ~% ^+ Y7 ], a9 C8 j/ W for(id=0; id<numLinks; id++)
# g; y+ Q& m, z$ U+ R2 p% w
( J# X8 ^+ Y& k% D { h1 e. i" Q$ n& y
6 X, f5 |! f6 g
t=setTimeout('startFade(' + id + ')', id*100);# W! `( g& O# Q b B
' I+ y: v9 J. }0 u1 n }
/ R4 u% p( c, X1 P8 l
8 _! ?9 N F0 x0 `5 m: S/ O g" i}
- D: @% F" M9 _" q
& ~0 q( a. J9 ^1 M//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 M, U4 p% k! H6 e! S8 y k( D% m
1 h4 I, S6 Q, Z% C2 Y/ B/ G
initLinks('#FF0000', 6, '#FFCC77');, j' P; i& k+ x" Y. @' b8 h/ E
3 ]' b l6 a* k/ t! t2 ?. D
//-->
$ [4 e5 ^! \2 \
: F! ~1 ` J1 F j" K) j</script>
" ?3 [! z% Q4 F3 O1 \5 U& p<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元, ] C0 w' \0 F- G- [. n. N
</a>
/ {" o9 z* Z2 p9 l5 S! @( W+ e8 k<br> I0 W9 ?& w: A. g* s( ]
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>5 R0 r3 q7 u7 Y* L, I; q
<br>
+ N- s- p* J6 r0 I/ M Y0 z<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 \. v" @/ h5 z0 ]. n: ?( K<br> & N! `- [, a; J+ X9 O# B- L% `8 o
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
8 E4 d- Q* \& k6 l5 X- `( k& l5 A6 [<br>+ E4 v; e' @% Z! O
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>1 m' n8 }) b/ O6 _( m) Y
<br>
' C3 `; Q- m7 S9 _7 f: C<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>, u8 Q2 B/ N7 n! ^* G
<script language="javascript" type="text/javascript">$ l9 F# b! w2 G# e0 @9 b$ @7 o8 O
<!--
( w- i6 x7 x( Y |3 D: B+ c$ ^% LsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# O; F& L. b4 m* J0 T4 @
//-->
; @$ X/ g, }* C: R</script> |
|
发表于 2008-1-21 20:48
|