|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">- s+ P1 h p' H0 x; O
<!--7 Q% l6 Y5 \9 c, h& m7 o, P8 z
// convert a single digit (0 - 16) into hex
5 Q4 C* i0 Y7 f* F3 Dfunction enHex(aDigit); d. A5 V2 e4 F$ T; P2 w. g
{" y" G9 _& \0 w* ]8 F# K6 Z: t
return("0123456789ABCDEF".substring(aDigit, aDigit+1)): ?- n+ a/ ?( ]. y7 G
}
. S% }4 Z9 L: k/ q// convert a hex digit into decimal. u+ S" i9 N' u7 h
function deHex(aDigit)
& d6 g) d, n; s5 I% v{
: W3 t" v+ y) }0 T2 d7 G$ O6 q return("0123456789ABCDEF".indexOf(aDigit))
. S5 v6 o6 F6 @4 w& s: B$ ~}
! _. m- A0 P$ y3 ^: z6 B2 L6 u
( q( D& }' `7 H$ s$ H+ j// Convert a 24bit number to hex$ k. ^3 ]3 h' w# L
function toHex(n)# p: o9 ]' ?* a/ }2 ]
{( A/ R; D) M, \* Q5 |+ T5 L
return (enHex((0xf00000 & n) >> 20) +
: M4 R6 f; G9 _ v& n& `1 I enHex((0x0f0000 & n) >> 16) +
# x: r- Q2 m$ n& y0 e enHex((0x00f000 & n) >> 12) + B& `/ I! G: I! D# Z* y
enHex((0x000f00 & n) >> 8) +
o- V7 C% o" k8 E% H$ L& `: e; [ enHex((0x0000f0 & n) >> 4) +& Z$ E+ j* u! b) P: b
enHex((0x00000f & n) >> 0))6 f9 F) i8 b, ^9 W
}
; R1 T- Y! E7 r/ o9 h// Convert a six character hex to decimal/ J* ~8 I; P9 C+ |5 i
function toDecimal(hexNum). I [! \+ t% E! A& ^7 D) P* s
{
3 V8 ?7 Q4 i! \* t9 @6 M var tmp = ""+hexNum.toUpperCase()+ z+ {; o/ c4 ?( H
while (tmp.length < 6) tmp = "0"+tmp( {" K6 W; R8 ?( [* H
return ((deHex(tmp.substring(0,1)) << 20) +
/ F) v# V* b" e; X5 Z (deHex(tmp.substring(1,2)) << 16) + " F) O5 [9 h" @% l2 _
(deHex(tmp.substring(2,3)) << 12) +( f: K' K6 L: ]5 k* v. F# X
(deHex(tmp.substring(3,4)) << 8) +
1 z; C) d0 m' b; K$ ~ (deHex(tmp.substring(4,5)) << 4) +; C# @6 T5 E e! ^, M5 e9 g
(deHex(tmp.substring(5,6)))): I$ O& ?) T. L
}
0 E \. {. p& s5 [3 C# { J; o! Z///////////////////Shimmering Links/////////////////////
[& m3 c: x7 `/ m//global variables
) R _" _% z0 W. w4 C) t! B6 wvar hoverColour
# G- \/ U" F, p# E+ Svar numLinks;
/ L' e9 i8 E& L2 o6 Wvar rate;
( n: S5 }6 t0 b, |) Y- m, Kvar numFadeLevels;
E d6 E# O7 Jvar bgR;. t7 P$ e+ e5 D# o: s+ k) G
var bgG;
; Z5 P4 \1 b- }6 Qvar bgB;. G# ]4 y. h2 d0 V3 r$ x
var currR;
& `" z) W) p: ~var currG;
% D/ k: [9 ?2 J# k9 Vvar currB;9 }; s5 ]. y) o+ g- k; `) e
var count;* ^6 z9 a9 O" u% _. ~: V6 K5 u& a; B) ^
var fadeOut;
- D, c$ H; m% b- n% Evar continuous;
+ e& `. k, ^ P. ]. Rvar newColour;# Z7 u) \% l ~. H6 B! C, l* u
var tID;( c5 D _5 x0 u
var redInterval;
% e3 ?3 m4 m" u6 J, e& k9 n1 jvar greenInterval;
* h7 |# b8 a0 z; C8 Hvar blueInterval;
n3 u. s2 T# ffunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 D9 ?& K! T0 x' B- X Y0 v{8 i. ]* b, F0 a# O+ S0 n2 a( X
hoverColour = mouseOverColour;
2 A/ m1 k! H+ ]7 Z2 N( l9 F. O% t numLinks = numberOfLinks;
5 z. [9 O2 h: h/ X# q5 ?$ K rate = 1;
9 n l& H. b. [* `- Y! V numFadeLevels = 30;
' ^( Y& t8 q: e4 y! B7 a$ N function initArray(theArray, length, val) k0 v5 u/ [( L! K/ W: C
{8 j. M' e5 j6 N3 U; S0 J& g ~8 j# y
for(i=0;i<length;i++)
9 V ]5 g# V# D$ Z0 v: W {& m/ m) s* Y j* b$ V) K) a
theArray = val;
# Y% l+ k' e3 T, ?$ a- y }/ A$ Q; {# _$ h6 j9 }
}! ^( E! m( d' h5 w5 }
bgR = '0000' + fadeOutColour.substring(1,3)7 z" ~9 z- w. Y( F/ P$ y
bgG = '0000' + fadeOutColour.substring(3,5)
6 c* B" A; D7 @5 F bgB = '0000' + fadeOutColour.substring(5,7)
# G7 o% T* y$ y currR = new Array(numLinks);
' C! b* `) n: \2 `9 h currG = new Array(numLinks);% F. m4 h- ~( j& l, F0 f$ I& y" J
currB = new Array(numLinks);% E& |$ y; ^8 P% A& R
count = new Array(numLinks);
) R7 [- N' O( N6 e0 ] fadeOut = new Array(numLinks);9 b! q3 k; c" m6 M0 z4 a* n
continuous = new Array(numLinks);
: w$ U* X- ^! S4 }4 d, z7 N, f- H) X newColour = new Array(numLinks);% ?$ Y# E# o6 i3 W9 l
tID = new Array(numLinks);- X8 T6 S$ ^+ X- @- v: y
redInterval = toDecimal(bgR) / numFadeLevels;! o: l0 X2 O; P7 ]* q
greenInterval = toDecimal(bgG) / numFadeLevels;
" X& K& p* s- A% e, G) K blueInterval = toDecimal(bgB) / numFadeLevels;+ \+ H+ U+ \8 u0 ]- z
initArray(currR,numLinks,0);0 \4 Z+ @" _4 H1 k& d3 H1 \3 E; H
initArray(currG,numLinks,0);
7 j( J' ]1 S* A! l) o initArray(currB,numLinks,0);/ p4 ?6 p" ^' d0 o# d, B
initArray(count,numLinks,0);
8 T( { z. ^: Y0 Y$ h% a/ B W/ r+ u initArray(fadeOut,numLinks,true);
5 H, e. ^; y- I6 o9 w9 D+ j, O initArray(continuous,numLinks,true);! C$ w' v, j! z; R
}
8 n) G7 D9 ]+ z0 G1 ~ t3 d; v+ I) Ffunction startFade(id)
+ c3 T5 d9 [7 X' P{2 j5 P2 I9 O3 L! v8 J( p7 U
if(fadeOut[id] == true)
2 q& R3 c# R! P% x B { /*move colour towards background colour (increment)*/# ?; e5 M. a- u) ^- k, N( O
currR[id] += redInterval;4 T+ w/ y+ ~9 b
currG[id] += greenInterval;
7 B2 H- ^' O0 m6 j currB[id] += blueInterval;
3 g o2 \) b. g3 z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- Z/ Y" C, R- D) N9 @ if(++count[id] == numFadeLevels)' K5 S8 `, U1 S3 O# F
{
* z1 M, x' R$ J( ^( x2 @% h fadeOut[id] = false;
6 M/ c1 K# [! l) R1 E }4 R4 o/ V3 a; N: P
}" `5 h& ]9 h, F* W
else
& k& u. m; Y. B( }( b {! W; E& ^/ C! o6 m! z2 p
currR[id] -= redInterval;
1 ~" C7 \& Y- u% O
5 z# v4 f# R+ U8 v currG[id] -= greenInterval;; Z" Y9 c+ ?0 Z) o- t2 s0 B
7 q; N/ j* h9 {% z S- N
currB[id] -= blueInterval;
# z+ b$ U& ]# G z5 g8 x3 r" Q E- ^
- n) q' g( k/ f' o* d, D# L! n newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 q |+ T/ _7 V. u$ q
" v, X0 m1 G* _9 g if(--count[id] == 0)
% Y/ z; R9 {, @7 F+ T* V6 ^
7 b& n* U, x! i, ^4 o! V6 }2 M {" J( N: o2 Q% ]# ^) D
3 ^' o; G) S/ ~& ~* y
fadeOut[id] = true;! u% d& C9 {% T) p2 @
) z1 ]& A- O' l2 D& [
}
/ P0 F p- n; B$ k2 W! J- [+ D- r2 ~2 q. s, S
}
- I# e( ^- v- A. h! p% `3 K
3 v$ r, }. y% j$ k# R if(continuous[id] == true): ^1 ^8 I! s8 o4 y: U8 O
2 A+ i5 y7 e" E: ^8 z+ k' i
{0 f: Z, R# w8 r' W' L! v3 _# u% @
$ u8 I1 j$ f# ~9 d3 X% u
document.getElementById(id).style.color = newColour[id];
% T$ m1 E; c# q* \! b
5 q @8 W$ ?. g9 W( ], g }
1 k3 e9 z6 |* j6 R" U& \9 u- W% E& B% J
else
( X/ F9 k; |+ Y, E5 k; ^: d: g: G) c3 q; j! F5 R: U7 H; _
{6 @0 }+ P+ X+ V1 c) `- I
& r% h, M7 W3 R- M3 U document.getElementById(id).style.color = hoverColour;+ J- l/ p1 M# O
) w( O7 L z) B) k: C3 |! f$ r' s }
5 S( Y" J/ I5 @5 ~2 F6 z) \- {# b3 F1 u0 k% A$ j4 W
clearTimeout(tID[id]);2 U) e% n6 Z }, Z3 ^2 e D; o- h
( v: N( q/ }4 M0 |, { tID[id]=setTimeout('startFade(' + id + ')', rate);
: }7 l7 o( g( a$ r9 \0 A" [3 W) w* R
}7 A9 q, }# l2 ], P. y( O3 F
' v" ]9 G) {6 l3 [: f5 Yfunction continueFade(id); R) A# p. K$ F
7 D8 ?1 c$ _8 S; @7 \1 d. K- ]
{7 d" F$ E3 W* d$ C
1 ?* ~/ B8 u8 p1 _( m7 k
continuous[id] = true;$ G6 B3 X3 @& \! L' I; Q
3 E9 X: A7 H3 D* L1 Z
}. I: w" c$ _$ _7 i& }& h* g' k. T' Z
, Q& O- r- g! `6 W+ {" p( qfunction stopFade(id)
2 O( E# `6 {! ~$ x( K6 `* }
7 S# b" j+ {5 [$ g% \3 `{0 `4 X* m/ A0 f& P" I
& i. z' C/ `* w0 \% V( e7 k
continuous[id] = false;+ u n3 s( m" f
. x0 G. t1 I! `$ t" I+ B
}7 c: }% ~4 h8 @* u2 G7 y
$ k# G' ~0 K3 c/ Z' H
function StartTimers()
' s/ t8 U6 M# j1 ]4 p/ I4 m
' s: E7 O" u5 h9 J( Z- ~{ //set up an initial set of timers to start the shimmering effect
- D- r+ ^6 K9 t! o- B. z' Z9 z4 [
" s8 H% T, D' ~ for(id=0; id<numLinks; id++)
t" W( v, i" `' Q0 R
5 |$ L4 l. X# v4 e7 e {! G c+ N8 S- a, m
- X' C! J3 P0 W6 k0 ]& K! C
t=setTimeout('startFade(' + id + ')', id*100);' @& H! v4 B# k9 a/ I( Y
9 t1 G$ b# Q7 f
}
( |7 ?1 f5 N4 |% L! h! ?* h% L5 X
o/ _ B& S1 C" A% M}
/ X* {6 m, F& B! M4 o$ U1 H$ w! j' r& J5 }
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour') J; U4 W5 A! @; j6 }" V$ A
/ f/ x3 o I* h5 D+ E1 G! m1 IinitLinks('#FF0000', 6, '#FFCC77');6 ` W0 g8 j5 A. c) d! V
3 \# p$ F- R" H" G, i4 Y//-->
6 F/ Z; e, Q" o% g3 O0 s- R4 O3 ?4 G+ n7 Y9 p% [# O1 Y- W
</script>9 i5 y6 v1 b' v( u: m
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元3 ?6 B# A) h, l
</a>* ]; K6 L1 {3 ]1 v* f$ U
<br>7 O, T' f/ s3 @" o( g$ Q
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>; Q6 D; w) U, z5 z, Z$ D1 E) x
<br>
& z$ c q3 f* n7 t& }( Q) r+ Q<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 r! x9 s4 d" J% s Z2 ^<br>
' ]. p9 V' d* F/ M* _<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
3 i- r+ z" Y% i' Z2 A5 N2 F<br># z \' u2 z3 }" t
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>; o4 I5 H8 b: Z" ]
<br>
* U$ l" t/ Z' g G<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" z6 J$ m0 X. E u: _
<script language="javascript" type="text/javascript">
/ X- F- M9 y2 H7 }. w1 o, W<!--
9 a- Q m q6 x: [5 K3 OsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
2 P' Y! }9 B4 P# ~1 `: {' l//-->" C" J* p- s; v6 N4 J9 L
</script> |
|
发表于 2008-1-21 20:48
|