|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
+ W, q" x! q$ U! v<!--
0 f, M- r& ?! Z) i: J) ]. p// convert a single digit (0 - 16) into hex0 `! J: K& t o/ l( ?' ]
function enHex(aDigit)
" X" i, W9 q0 e0 p' [{( y2 H" [: W8 y0 [
return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ }7 i |; u% p+ S3 T! \/ ]
}
' O( g+ H% D9 N- z6 m// convert a hex digit into decimal
7 z, V6 M$ o; u, a5 I( J) |function deHex(aDigit)- K5 V5 p& S. Y% X$ r7 Z4 y
{0 E9 o1 T% S0 i0 V9 c
return("0123456789ABCDEF".indexOf(aDigit))+ C7 U5 _7 O7 `
}6 Q5 [2 [. k6 |+ j' W' q1 B
4 |& Y9 ]; Y1 z% P- N// Convert a 24bit number to hex, M! M" D+ z, n( E( ~
function toHex(n)) l: N- n' U( T' i# L
{
1 w- _7 O( v' M2 y; y return (enHex((0xf00000 & n) >> 20) +) Z. Y! d/ n- W9 ?% f: U1 J
enHex((0x0f0000 & n) >> 16) +
j( O6 g2 }5 ]7 i3 ~! I enHex((0x00f000 & n) >> 12) +0 I1 @6 W! P7 h, B } Y1 }
enHex((0x000f00 & n) >> 8) +, N8 }! [9 H+ r
enHex((0x0000f0 & n) >> 4) +
# f8 V- }6 H+ V: J9 H enHex((0x00000f & n) >> 0))
6 C$ ^+ ~6 ]; t}
" G' D+ U) c. c: R a Q# r, W7 t5 K// Convert a six character hex to decimal
: c5 | g1 i6 y4 Pfunction toDecimal(hexNum)
8 D6 I& }/ c" ?; F" F{. W8 V4 R/ d) ^/ e, ^8 R
var tmp = ""+hexNum.toUpperCase()
! t" h1 B! D7 c+ p5 ~ while (tmp.length < 6) tmp = "0"+tmp
& v O2 c, {6 P! J! D5 F# l return ((deHex(tmp.substring(0,1)) << 20) +
. J, W& N ~) v4 U8 {6 @5 ` (deHex(tmp.substring(1,2)) << 16) + # W j# e$ j8 D! Z |4 x
(deHex(tmp.substring(2,3)) << 12) +
0 U3 e0 b3 e; r; s4 `6 T) o (deHex(tmp.substring(3,4)) << 8) +
- K0 u2 p2 z0 f4 Z (deHex(tmp.substring(4,5)) << 4) +
& L3 E( {& }% \5 R (deHex(tmp.substring(5,6))))
, k/ d' P0 s/ A5 u/ `}
$ U) d8 a6 w; d& [* z///////////////////Shimmering Links/////////////////////# r: s: K. _2 G4 c) u2 R! u* _: `
//global variables
) ~ s! S D' rvar hoverColour
. `' W. U1 A, o {; Ovar numLinks;9 |" j& P+ S0 d2 \
var rate;
2 ~$ P* @- Q( p/ p+ p! Ivar numFadeLevels;
9 B6 F4 l! c- o! h' Yvar bgR;
1 v% x2 Q! B/ o5 M. n3 e6 fvar bgG;
O$ G$ x5 g. M! H* ^/ G( ovar bgB;6 U( X3 O0 K/ E3 P8 }& O
var currR;
- v) m+ w! i( R- f D8 _var currG;4 E) N8 y0 E0 }: x1 N, ^3 F8 x# S: o
var currB;3 j& h* v/ g6 e. H) j4 k
var count;, ~; d# {% y6 F0 }" I
var fadeOut;. |5 v5 Y: e* ]5 `
var continuous;
# F S) J/ P6 R# [7 y0 y Bvar newColour;. q6 h/ L5 _- M( k: J# L! o1 }
var tID;
9 U7 j% n( S5 R8 ~var redInterval;9 L. P3 ]% g V5 o6 k- C1 z2 w: m
var greenInterval;
9 t" }: N' b. {5 i% u6 wvar blueInterval;
9 ?; J& q5 |, ~$ _: A* ]4 dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)# a' u7 @ w# o- f7 m# t6 Y
{
* ~& K- m* c4 j hoverColour = mouseOverColour;2 e+ C) L L5 n& j+ Z6 q l* r
numLinks = numberOfLinks;0 [+ Q- M& I9 B; g
rate = 1;
( Q! [& x- P6 H numFadeLevels = 30;$ S4 K4 }) m& g, T# x
function initArray(theArray, length, val)0 E8 H. n! F: u# l; U
{$ ^& _: \! P8 j: K2 Q5 s
for(i=0;i<length;i++)( E) b% z' O9 T% H8 ]
{
; I% H4 n! U& q' ?2 b b theArray = val;, c' C& a8 N! u5 ^1 p
}
9 L5 B5 c" B' u8 z }
' P* g' m6 I H' k: c: q/ n5 } bgR = '0000' + fadeOutColour.substring(1,3)! T$ K$ u3 C$ p9 b# D+ Z* o2 p
bgG = '0000' + fadeOutColour.substring(3,5)
# o: d, n& Q, c Z! | bgB = '0000' + fadeOutColour.substring(5,7)8 C+ h, I9 W6 ^
currR = new Array(numLinks);5 W) x- c, p0 Q% {
currG = new Array(numLinks);
* r" [+ N' M- ]6 R currB = new Array(numLinks);! ^" g' p3 ?* h# A, ]% [
count = new Array(numLinks);
/ L* m% g: \, T. f3 r6 e fadeOut = new Array(numLinks);
9 w3 S9 d$ [3 ?6 t, M continuous = new Array(numLinks);: z) P, u8 I/ L* t' I
newColour = new Array(numLinks);
6 o. X- ^ R2 C4 y! e3 M tID = new Array(numLinks);
q% v; |* ]& B7 i5 ~5 Y* W redInterval = toDecimal(bgR) / numFadeLevels;) A+ d- \4 E2 ?( K% C5 J- c
greenInterval = toDecimal(bgG) / numFadeLevels;- K4 B9 I3 l, R/ R! W; F
blueInterval = toDecimal(bgB) / numFadeLevels;1 h3 B4 Z" H: D
initArray(currR,numLinks,0);2 u7 b4 k6 ^8 P+ z2 k* D- g
initArray(currG,numLinks,0);
9 P* [. ` w. k# S5 k initArray(currB,numLinks,0);
@ \; [- f8 Y9 T5 j- P. E, B initArray(count,numLinks,0);* f3 |. M2 Y( J9 `; ^7 @! C% T) \
initArray(fadeOut,numLinks,true);
I1 H7 E/ W5 I# v& V0 K; O initArray(continuous,numLinks,true);
" \' b) X3 L& v( i, n2 q& v1 R* k7 E}
1 l, E: `$ G5 v" Mfunction startFade(id)
* m$ H! F' Y2 ]: j8 V{
1 U/ y7 ]7 q# C! Q$ L& c- I if(fadeOut[id] == true), D9 R4 J3 J0 ?6 S" s9 M
{ /*move colour towards background colour (increment)*/
5 v: e! O; ]& ]/ z; @ currR[id] += redInterval;: {$ H1 }+ g' ]7 ]1 P
currG[id] += greenInterval;9 t" k/ [* a( i% U/ U3 H4 h
currB[id] += blueInterval;
; e+ x! E2 T& z, e newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 Y) M p7 {3 i2 r! a; ` if(++count[id] == numFadeLevels)
- a( a" @% o( e8 W# G F/ D {+ \3 B7 h' P8 Y/ w6 n- l
fadeOut[id] = false;- z. |; Q6 g- P( C; v
} i/ d7 K. i8 _& x' e* o& V& m
}! Q0 K0 o6 ]( H. l2 w
else* q7 d" S: Y6 p$ N! J# G7 O1 J
{5 D6 S' c, b+ z, X" N8 {( o$ \
currR[id] -= redInterval;
0 h: ]' @$ |* l- f; p# x {. q
$ w& h# { M7 K7 B currG[id] -= greenInterval;" ?6 `7 w! O0 a
3 E3 Y& f) ]. j1 T" r" u4 p currB[id] -= blueInterval;
+ z( i+ V( U; O' J" C$ V: F5 }0 o6 G# W4 x
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 B d6 r1 t7 q) c; f" f5 K0 p3 T9 e! l2 i( | [0 ^; d- G
if(--count[id] == 0) f4 F i4 Z( p# b1 {4 F, y
6 J# W. ]# w" \: `( q3 f. B X1 j {6 S8 C2 E: d8 \* E
: {; F4 p7 V+ I. D, ~ fadeOut[id] = true;
0 c) z! v/ [, t
6 U, ^% y0 J' I }
; P/ O6 e* I% B0 \% m* n0 b6 n! t4 \7 Y5 C* \6 L9 J' i. Z- D
}
7 T" N' y- j) L% I; E$ S9 p( p3 T& a* E5 f8 e1 t/ ^
if(continuous[id] == true)
, L' Q) v8 I7 [! Q0 B6 t y3 k5 N7 e I% P
{
1 W! i. }# W( `" M# U& j1 M1 a H. q+ _5 _. c- ~3 O$ l' Q Q
document.getElementById(id).style.color = newColour[id];
5 I2 B( M- v% ]+ S. r' X3 s9 H9 p4 A* O; R
}
1 m7 F; [/ o3 Q. j- U9 C" ]6 B4 S% E5 W
else
/ q/ A" h5 l" k* o6 k0 u2 n: h6 `# b; L# F! ?! t" g
{. v5 ?, @9 \, T- q: ^+ j3 j
+ P( [. d$ }, W) G document.getElementById(id).style.color = hoverColour;
* u5 Z# O& c- a
7 w) g6 s$ I7 b: C' h; \ }4 L0 I; {* h3 r" M; @7 e5 V
; d: k& Y# _7 K9 n clearTimeout(tID[id]);' J# X7 q5 E& c
' q( ~% ?1 d7 e- J$ u
tID[id]=setTimeout('startFade(' + id + ')', rate);% ?' y& L( f, w8 r8 x
: i7 w/ u# [1 U5 m6 j
}6 H9 K" v4 n4 c$ ~
. I- T4 u2 A5 Z) P1 h& O, `
function continueFade(id)" D' @# L& \5 t7 l
3 H+ X) v- F$ n8 {; d) _{' D: \' Q- G) o3 m2 p w" v
9 @: i( H) m1 B0 B" C. c
continuous[id] = true;
+ ~* d u2 S1 Q0 Z0 E
' F S; J7 K8 i; p}8 }( f7 T. P% z: X c# U5 K) s; u
8 l+ T; M4 E _/ n
function stopFade(id)
3 _, a' ]: ~: s! S ?. ~- g7 O) F( Y. l! D, D9 q C" A4 w* y5 j
{7 B, E( l9 T' r5 M3 V( h8 |
) G& f6 q6 D Y1 ? n3 J! p continuous[id] = false;
: f; j" f5 ]4 a. H7 ?& X, X- i# A: m4 t% j5 }0 x; V; H
}8 j, u& u4 J% R7 n2 ?
+ a7 w- U4 U! q0 D
function StartTimers()
1 \) @8 k3 R3 a9 M
7 C K* ~% [3 i% x7 D5 D{ //set up an initial set of timers to start the shimmering effect
/ `2 u9 l" A% w" O, b
3 a! m0 K, R1 n2 _ for(id=0; id<numLinks; id++)6 ?0 H6 e3 N6 a
9 U1 ]$ _2 [% a: b! w& } {6 P, W$ M0 @- `# _4 p1 K- m4 `# n2 J
1 c/ g3 k& k% `! h
t=setTimeout('startFade(' + id + ')', id*100);9 r& P% g' A3 j! r& g
' d9 U# c" V3 l/ S }
1 a; {& C, m7 y' E9 Q! r
$ ?+ a" H3 D: N! q6 W n, M- X}: \- m- V! [) I
2 O5 a {0 E5 A8 T8 ~; L; ~
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')2 K) f" C6 s1 [
% U& V9 I" |2 P5 i( [! c
initLinks('#FF0000', 6, '#FFCC77');
5 j( w* O1 L+ w
$ g" K2 q7 J( c" ]) L5 L0 {* G//-->/ ?! x, n# J0 B, g
# l& Q; {/ }, m1 X2 y% |
</script>
* k" a' x& U2 s( K8 Z0 q6 M<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元$ ]& o: e& u3 l
</a>
. M1 S2 b* [+ V8 ?( a/ t- [8 f |! B<br>6 g1 M- W) j, y; T$ W2 c8 \5 ^
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
4 N9 N. g$ I* G4 j<br>
, f2 t( V) M' @<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ e/ U. S) \; p5 o7 S* |<br> . ~; w9 ^) ]7 W% A
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>) k. w: T' @+ f2 h- O% C9 X
<br>
8 V6 I( p( h' W$ e+ Z' a<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>: [. M* ?. Y1 ?! ^
<br>
, P$ l$ M" z: u0 |$ ]<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>8 ` u$ ]% g# J/ J& M
<script language="javascript" type="text/javascript">1 [8 e7 V2 w( X7 ?' E
<!--
9 y, p5 K2 a+ V: W: vsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. a5 D/ w% z9 {! P4 d! c9 j//-->6 H/ d# r( s" Q2 e: Z/ U; R
</script> |
|
发表于 2008-1-21 20:48
|