|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">/ W1 r' o( t/ C+ b
<!-- V2 O# m; g8 m. A4 R
// convert a single digit (0 - 16) into hex
" k& B) k1 k& B) s7 Ifunction enHex(aDigit)( m; h- q% V8 p' s1 a2 |( y
{) M4 [3 m3 N, {8 v
return("0123456789ABCDEF".substring(aDigit, aDigit+1))* |; Z5 s; \) ^5 ~1 T
}7 U( s2 r9 J% L4 i
// convert a hex digit into decimal
$ T+ s2 N& k n! Dfunction deHex(aDigit)
$ Y/ U6 n7 |/ A7 u8 D5 ~0 w3 _) s{
# e0 E9 T1 a3 B, {) R: {% f- ` return("0123456789ABCDEF".indexOf(aDigit))! k/ j! t8 {7 f* W+ u/ L: b
}
* H y) j$ Z. _1 V: {$ u9 f
6 _5 u3 C& a" K. R// Convert a 24bit number to hex
2 A7 ~, L' w9 R- r$ V6 [" L5 C/ afunction toHex(n)! _; K* E1 ]# W/ }) v0 Z
{; R8 b V5 e7 H
return (enHex((0xf00000 & n) >> 20) +
; Y3 ?- S& r% }8 E4 v- n! u9 Y T2 [ enHex((0x0f0000 & n) >> 16) +
! u* K4 z7 y" R enHex((0x00f000 & n) >> 12) +
) F2 U: R# ?, a2 o* q9 K enHex((0x000f00 & n) >> 8) +
& N; O/ [ i% j enHex((0x0000f0 & n) >> 4) +
: A/ M0 v+ E( y' X6 Y8 p' w! \ enHex((0x00000f & n) >> 0))" {7 A9 i/ t4 v K6 I
}" x; q- W* s2 T: O- p2 p2 U
// Convert a six character hex to decimal
" O- Z: u& @1 a$ K) ?/ Q+ }' pfunction toDecimal(hexNum)0 u6 ]! A! d8 \
{; G- c L5 e2 F- ]8 d& \
var tmp = ""+hexNum.toUpperCase()
1 B' y7 `% B: D( @6 Y' n& h while (tmp.length < 6) tmp = "0"+tmp* p: O) L/ }. c& ^& v a# X' n. J; P
return ((deHex(tmp.substring(0,1)) << 20) +
& ?) A( V3 e0 J (deHex(tmp.substring(1,2)) << 16) + $ H+ \0 }$ V$ k$ }
(deHex(tmp.substring(2,3)) << 12) +) l( [7 L; V1 V0 L9 F2 t C" s- R
(deHex(tmp.substring(3,4)) << 8) +; d* Q' W- e, S7 l: [
(deHex(tmp.substring(4,5)) << 4) +
0 t [3 [ t4 ~, f# t, Z3 t7 I9 S (deHex(tmp.substring(5,6))))
; Q1 W. v, O' ]2 I}% S; d' G$ G; b: `8 O
///////////////////Shimmering Links/////////////////////
9 I5 [ X: x3 t4 l//global variables
5 O' v, T1 E. M% j" Yvar hoverColour
5 p7 a: d* s8 h& g0 Lvar numLinks;5 v! V! H$ O* h, F/ G
var rate;
& J$ n% K$ C; Lvar numFadeLevels;0 K4 B! i9 T% D& q. ]% z
var bgR;
7 l! q' H7 b# l/ I' L+ z3 Ovar bgG;& ^. Q1 j M5 S7 T7 a
var bgB;1 @( M, `. a# c. U& I
var currR;
y' ]# f1 x& a9 rvar currG;& r6 j4 A1 C4 {2 [
var currB;
: n7 \5 u8 j7 K# ~, ^- T3 ?var count;6 }' H, |' W5 [( S2 D1 w
var fadeOut;
+ o" X) d4 c. g" h( l+ I% fvar continuous;) U2 q) w! W, l$ J! M' y
var newColour;
: l! A0 C; y; D+ A8 }$ {var tID;- _; ^" D" q, c! A& }: ~% f3 r( a/ B
var redInterval;/ I u. u; \' c- g* i$ ^/ c
var greenInterval;1 `5 T+ h* ^2 j( z
var blueInterval;! `0 h O( C" N
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! m) D' T0 v7 c, j& K2 Y
{
3 y; L1 e+ y- l: D. Y& x8 M hoverColour = mouseOverColour;
8 r- g6 ]) a" T. H% b' v numLinks = numberOfLinks;" F ~+ Y( l' a2 b T/ U v
rate = 1;
7 V9 |+ `3 a# G4 e7 u- O% e& a numFadeLevels = 30;3 \! D4 Q4 D' {- e7 F
function initArray(theArray, length, val)& ]2 x' L. X; }- }
{7 [: w1 s" x3 e9 i8 ]
for(i=0;i<length;i++)
9 {" ~7 _1 X; {7 v0 n, X) ?; ^$ E {
6 m& b9 \, j* H+ A% n theArray = val;. f" ?- b5 S, ]
}. |0 A- r9 w/ G1 V6 D g
}
: |+ Y5 G _- p# ^ bgR = '0000' + fadeOutColour.substring(1,3)' ?/ `7 z) ~6 J: y8 c$ d
bgG = '0000' + fadeOutColour.substring(3,5)
* E0 B, r) {% t$ [5 } bgB = '0000' + fadeOutColour.substring(5,7): U. V5 F7 C6 ?% G! G
currR = new Array(numLinks);
; O6 E& W! G( y" }$ G7 p4 X currG = new Array(numLinks);3 P0 _2 b1 J# {5 f
currB = new Array(numLinks);
1 U( B0 z% h# { count = new Array(numLinks);
' _# C6 M/ `" S, x0 o$ [ fadeOut = new Array(numLinks);
! y0 j% O! ~: n: @# S continuous = new Array(numLinks);& g& |6 v m" y. s7 s& m
newColour = new Array(numLinks);( i1 d, i6 L6 z+ y p" j
tID = new Array(numLinks);& J5 i \3 i: H ]7 v' v2 W
redInterval = toDecimal(bgR) / numFadeLevels;
- u! w9 H; M W* d/ _1 ] greenInterval = toDecimal(bgG) / numFadeLevels;, W `. L9 Q6 V) B, h
blueInterval = toDecimal(bgB) / numFadeLevels;
9 s9 D0 O- `9 ~- c: T8 e initArray(currR,numLinks,0);
" d9 m5 W% |% N1 [- k* _$ S. W initArray(currG,numLinks,0);" K9 w* n" J! Y3 M9 [; P
initArray(currB,numLinks,0);
: n6 k1 a. t* V+ o. `/ e; k initArray(count,numLinks,0);
. H+ J, ^. J ~" V* n$ P* s9 f initArray(fadeOut,numLinks,true);
3 R* d, y" M# X initArray(continuous,numLinks,true);
/ R _7 J$ w6 G3 e/ u} * I, G8 [) O) |; ~! K
function startFade(id)! ^+ }4 j4 g, }1 ^0 K+ t$ M8 X: r
{
8 R, @$ D- P f. j if(fadeOut[id] == true)$ a q% f" y: C. {" o: N
{ /*move colour towards background colour (increment)*/# A9 _) p4 R: {: m. Q
currR[id] += redInterval;
( B2 X$ P5 J' f5 t currG[id] += greenInterval;
% g1 ]6 q3 A1 g- l' X# @. b) B currB[id] += blueInterval;$ Y% x. U# C2 \
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
4 b' E2 ?( K+ ^ ^# C if(++count[id] == numFadeLevels)
4 R4 i3 a' {, H) y6 b( c* T' J {+ R5 W$ B! K ]' a7 u- @+ x5 A
fadeOut[id] = false;
6 v h/ \2 X: F1 }: Y1 l8 X7 j6 e }9 j1 @# c5 b+ H9 z* y# x7 b$ X
}
# c" G2 W: Z* s* s else5 I! t' y$ X3 S o9 X4 B! [
{5 B! G5 ^8 }# G- B$ T: B* |
currR[id] -= redInterval;
s" \" H4 H1 ?# n
5 K2 Z' n. f5 M6 a# @+ S; h& t currG[id] -= greenInterval;
# f- i0 n4 I' l! ]2 @/ \! v0 ?- }, q2 b6 u
currB[id] -= blueInterval;" a! t) Q% {/ ]) T$ ]! M5 u# y# ]
9 \) c! q! q/ W4 x! @ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' M3 X2 a, u l( X! \' R' J$ r* g$ \' j/ D+ T8 R! Q! m
if(--count[id] == 0)$ s' S O! K# d' s
- w# W W% P2 J5 c4 n; }
{
3 ]0 J4 t/ J, G& P, I4 F, R9 m
) {+ x" x" @* _7 M* e5 x: U! X0 y) C fadeOut[id] = true;! }+ e$ P0 }* D6 V4 k; n) z6 |
U' T& t: p0 |. e0 F& d
}
) K9 G- P1 A, }* E( l( e+ l1 t( w5 P* S) i4 `
}6 R9 _& N) N! w+ B( `
) k$ ?- F) v7 A4 a' E
if(continuous[id] == true)
/ t+ L4 S, q! F' U
% L) k1 e$ D- l( {" y {6 |7 x: b. M6 A
3 b7 |: B7 Y( \ document.getElementById(id).style.color = newColour[id];
5 ]6 n: p: ~ G N$ R2 I1 o$ f( y0 J+ i
}: d/ I4 l8 F- t" X# J- N& e# J
" ~$ U; ]4 m# j else
6 \. }& T. ]6 g' F/ l0 ~: P- X+ Y6 _5 E- f; D. T9 D2 x2 _% N
{
7 z m- ~0 m; G, E2 H3 w5 q8 d) e4 E) o1 M/ U* U8 _
document.getElementById(id).style.color = hoverColour;
: E4 j. g2 h7 u6 X( \5 X9 U _2 P: P( f- w7 c: N) k
}
* v. R& \; g3 z y" T. d9 y D
: [' O" Q0 e- H$ N3 C5 A9 g6 x: } clearTimeout(tID[id]);
) o u$ D3 F @, h A1 c1 }9 L1 {# ` k# ]0 [
tID[id]=setTimeout('startFade(' + id + ')', rate);
# x+ h0 E5 e' ]% M& _ W
3 r" k9 Q" ]" S}
& J+ f+ k: \6 i" n$ N. _+ c9 X* a f9 `! c( E# v9 s
function continueFade(id)
5 W- s, \7 v! o# s" y$ v! Z3 g, J* |
{
8 W9 Y4 H' I1 o% w9 p
8 C) J9 J$ | _1 g2 y* C continuous[id] = true;! q0 f* s$ ]$ d4 _% x
# ]$ C( |. T* L4 R0 j, ~" R/ U0 A}
: J. d8 @& S6 x* ^* `5 w# D9 d4 N
function stopFade(id)4 K8 p3 {1 R% ?& M
0 i {& ~/ i+ d# @ M5 D+ s{2 a: y$ o! k4 ]; }8 D' l# Q4 D" Z
$ A4 ]; M- i, z+ E8 D) M+ S9 k9 F! j; t continuous[id] = false;
* A& r- m/ {% ]& r/ M F. D( j4 d" S Y9 |* q4 n
}: V9 i( n5 e0 A. [- e
; U4 V$ E. n( h- R: V0 Z. yfunction StartTimers()8 ?" A" M3 k" N& A5 ^- k
. K" N9 D" U% z* @4 W; C" p
{ //set up an initial set of timers to start the shimmering effect
5 c# u9 h: |* ^1 C- ^7 z% X" i6 e* n9 d1 H9 d, ^ i, \
for(id=0; id<numLinks; id++)
* k. Y; B# z0 i6 @; o! }* T* ]! Q e# k0 m/ @8 z8 L ]2 Z
{
2 H. M0 i* X/ J7 F) r7 n
1 a- [' _4 k3 ?3 X5 ^0 a t=setTimeout('startFade(' + id + ')', id*100);7 E0 v! ] z5 L! J+ T" ~! u
& X X, Z+ e+ d4 t }
% D* G/ H" _0 N K1 ]7 L r; t6 X* m @6 E( X
}
& U: j0 J& a0 g) m% ^3 m: f5 e2 f/ F
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')2 d; ?% B5 \' M) b* D/ J
' U& v1 ~1 z. A3 v5 U0 ]" w, }initLinks('#FF0000', 6, '#FFCC77');# O3 y' p5 j0 r- O
, F/ ]! T& A% b% c2 m' t) m//-->5 [9 n" P& ]7 D/ L, p* L" d% l
# z: J% O4 S9 f. A1 s, p</script>; N( b6 y' h+ C
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
) |+ `/ L% q7 p; |</a>
9 G* J2 a/ Y5 m/ |8 n' o<br>! M1 i$ t. J4 \1 z4 ~ f- G% b; C
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
4 f0 w- B$ |8 q2 P- p7 g<br>
, c: w, i, K* H# {" h& L. x<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ G4 o! i: z: ^5 W6 Y6 }* I
<br>
& @' x+ A' {# U3 ~# q4 d<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>1 c- J \. E( L
<br>/ L, l3 Q6 c: B( }7 @* I9 \8 ?
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" H) u" b8 }. K3 Q# G9 v' s9 }<br>
8 I3 C% u% t( U/ |1 D<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- ?# P9 O' ^$ b6 @! z% }<script language="javascript" type="text/javascript">
2 N' x/ ~, t% {1 Z( N! _<!--
& T2 U% D5 _( t' q2 BsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
* ]; U7 ~) d( `- w//-->
1 s. ? N) k) }! B9 b# l</script> |
|
发表于 2008-1-21 20:48
|