|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ R2 |4 _) P5 J* u, Y/ e<!--/ W; k$ F* m0 k! c7 q5 i+ L* j
// convert a single digit (0 - 16) into hex9 P; h8 G. X( h$ l* w9 @& q! ?
function enHex(aDigit)- A. s1 u3 f/ N, ^3 u
{8 _1 {. n$ f1 F, e1 ?
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
o5 g) p2 P v: O% u6 b}
/ h3 l' ^" K- V6 J. g/ N2 E I2 _) k// convert a hex digit into decimal
3 q. b2 \+ k4 S2 L+ ufunction deHex(aDigit)
- e& V o2 K9 I8 r, X{- k2 e% c: E3 Q4 |1 C
return("0123456789ABCDEF".indexOf(aDigit))
8 v% i- v7 C! i! L}( D1 E9 g% }% a1 b8 @5 B( ]
" l2 L W2 H* w, _3 }" d3 g2 l. R/ |// Convert a 24bit number to hex$ ]/ I. A. Z# z
function toHex(n)
8 P5 s& R2 H3 X3 L, I, s{: [ L" h: N2 [7 g3 r0 _
return (enHex((0xf00000 & n) >> 20) +
. o0 N+ P) r* _! |$ X enHex((0x0f0000 & n) >> 16) +
# m' W! j7 N. C$ E- w' A5 c enHex((0x00f000 & n) >> 12) +2 ?' V0 j6 ]% R
enHex((0x000f00 & n) >> 8) ++ t% k, }: Y9 _3 N
enHex((0x0000f0 & n) >> 4) +, }. [) @4 E. F$ S5 g- ]2 W' h
enHex((0x00000f & n) >> 0)) e5 z8 z! n U% Y4 w3 L: y
}
0 A6 w# d P; k/ I( c// Convert a six character hex to decimal7 I4 R& f- j. S7 Y# {9 C
function toDecimal(hexNum)9 @; d: `; F$ j& P+ _5 r& [0 |& Q2 L
{9 ?# M t f* a) W. Z) P4 u
var tmp = ""+hexNum.toUpperCase()
* v4 J9 \+ M* T8 e8 A: ^ while (tmp.length < 6) tmp = "0"+tmp3 I$ V v6 H/ e, U
return ((deHex(tmp.substring(0,1)) << 20) +
/ \ L2 B& |- J { (deHex(tmp.substring(1,2)) << 16) + ) ^( i6 i; O8 @* ~5 C1 I/ V1 ?7 A
(deHex(tmp.substring(2,3)) << 12) +
8 R! h t( @0 B) Q$ w (deHex(tmp.substring(3,4)) << 8) +
6 }- |3 B3 T- m (deHex(tmp.substring(4,5)) << 4) +' {8 u' y& B3 n
(deHex(tmp.substring(5,6))))
, w/ Q, |* Y0 U! n0 m}
+ I9 w; |7 {, J6 _+ y. [///////////////////Shimmering Links/////////////////////
3 x& p+ E, z5 a7 |( c/ r//global variables
+ U& b$ `+ z- y' \6 @+ T! fvar hoverColour
# U h" M& h1 Z0 T" N/ P0 K* xvar numLinks;. C5 X8 m# u" l3 o0 E: N
var rate;
- G/ U% Z/ { a- Svar numFadeLevels;- d1 M" I9 g3 h* k8 ?6 [4 {
var bgR;
4 e% j# m, ?4 E& F. B2 lvar bgG;4 K1 B0 r: t( Q7 V( M5 I
var bgB;$ _( S' } k0 H, q. p
var currR;& k! v) \5 J" a9 x# }' e7 n
var currG;* }- U$ u8 D5 X$ [( q) j9 F# b
var currB;' y! @- k+ k$ K) s7 h1 C
var count;0 L% O. _% b% j5 x/ Y0 I: ?5 r* O& ^
var fadeOut;$ |: T8 Q' s+ Q) Q
var continuous;1 ~2 C: M4 a d2 z7 Q: Q
var newColour;) y. h+ _. f9 t
var tID;8 a" v3 G- J5 V
var redInterval;
1 a( i' k) V1 D4 I( w' _* Bvar greenInterval;
! }* P! ~6 W9 |2 h! n2 Y3 pvar blueInterval;, r( l9 ?6 C6 e6 v+ l0 ]
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)% j( `. x# X4 `2 X6 q
{
3 t3 A5 w l! i+ @9 `( h( y hoverColour = mouseOverColour;
$ t9 g" i& l5 @& [7 @ numLinks = numberOfLinks;* |( P/ N% ?! z C
rate = 1;! r) |) J9 e; L4 p( ~( Z
numFadeLevels = 30;
( F4 `8 K7 W$ g1 |& K function initArray(theArray, length, val)
% c3 A/ Z5 a& I# ^, W/ z {
0 ^- E H4 h/ Q8 C" L V for(i=0;i<length;i++)
! j h4 ?8 g7 h% c$ t( K! W* } {: H/ r& W3 n9 Y' d, |
theArray = val;4 n( O0 H( V; P# F( f# \
}% K$ `- Z! g [# g; z6 v _' r/ `
}/ E1 E! S0 y# y1 |
bgR = '0000' + fadeOutColour.substring(1,3)6 t; I% y. s; ?& s7 J6 b
bgG = '0000' + fadeOutColour.substring(3,5)
/ n) E& N5 z( ~. h0 d) Q% \ bgB = '0000' + fadeOutColour.substring(5,7)
' ]2 a' R7 @ h* I/ W1 C! e currR = new Array(numLinks);4 z: h U$ d7 a2 X- X7 U8 H8 C) q
currG = new Array(numLinks);
4 D0 l' \, F9 x) x: [. H currB = new Array(numLinks);
. h3 V5 K$ G7 i0 |, U count = new Array(numLinks);2 \2 _2 d z' O) B! ~- x& Q0 v6 U
fadeOut = new Array(numLinks);7 r; h% E- ~2 G
continuous = new Array(numLinks);6 W9 x1 H- }& d2 ]8 W- D- R- E1 f4 W
newColour = new Array(numLinks);" Q% y+ i1 n' q5 m+ u
tID = new Array(numLinks);
1 D7 e! `) Y, H- e" O redInterval = toDecimal(bgR) / numFadeLevels;
2 Z4 D/ Y+ \5 N# I greenInterval = toDecimal(bgG) / numFadeLevels; c; M3 I1 r- o, j) Z2 y
blueInterval = toDecimal(bgB) / numFadeLevels;, P4 z9 L a @& K. P* ^7 { g) B% ]
initArray(currR,numLinks,0);
/ a$ J/ p8 A+ s0 F initArray(currG,numLinks,0);4 U6 M& a1 I8 \
initArray(currB,numLinks,0);
# B7 ^' W; K! S6 q* Y) I& ]7 w9 n initArray(count,numLinks,0);! `: X4 L# G! R3 J. j" _
initArray(fadeOut,numLinks,true);/ p4 L7 J& J4 X, `2 M
initArray(continuous,numLinks,true);
+ ~! t. B6 S! K/ @: d/ u7 b: o4 ?5 g} 0 @0 ^$ |* ?% H. [9 E3 y
function startFade(id)) t- Y/ u7 G9 W+ m4 X, j
{0 W1 s0 ]! P+ H+ W
if(fadeOut[id] == true)
- u1 y; Y1 K0 i# E* _7 ] { /*move colour towards background colour (increment)*/
! P: p) _9 n4 J currR[id] += redInterval;- z7 q4 ~$ m, k: k3 z' H. o5 T
currG[id] += greenInterval;
+ n; T/ e# R k currB[id] += blueInterval;6 B, C7 Q5 d' g" A3 q
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 ?7 _ c( R$ x2 _& e0 \
if(++count[id] == numFadeLevels). u! T" U% p% L% b
{
2 P& h% w% w! e0 _7 B fadeOut[id] = false;' L2 W0 C0 H0 |+ q
}6 D8 e5 I: m- @6 h# R1 ?, f; C
}5 M: ?9 w% |# m+ Q8 A& t, R4 {8 q
else9 K+ x2 y2 h2 [( ^8 K. e& o; J
{
3 }9 }* P! _1 l; \# O1 L6 X currR[id] -= redInterval;
/ f, @6 ]+ x) l y+ W" m. y* m3 ^" q! z
currG[id] -= greenInterval;5 v1 `4 t' K+ i1 y. A! q9 j
+ Q; y4 o, \3 J+ W7 ^: E- n currB[id] -= blueInterval;
' H& c. u2 ^! u3 Y
1 ~6 Q6 M$ \) o4 W newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ C: h' r0 ?$ A7 ~$ U" W- y" Z, O( N9 v3 c- y
if(--count[id] == 0)5 ~* q+ B0 `7 y |; u
9 K, y6 |- b \& V F {
1 ]' v# ?$ h. w; E9 ~* t; B: Y
% Q7 x+ ]$ _; T- i( O l fadeOut[id] = true;' Z5 ]: u' Z# Q9 h, s
2 [- F' ~/ P3 B& Y" p }& g: ~ {3 h7 h% I5 Q+ ~" o0 x
) `2 ~' \3 W4 A2 f1 s/ T4 d7 t" _ }
# D/ F% w: V Q# }& ~
! |. s5 H1 k! M8 ?9 j9 h if(continuous[id] == true)
! k( E1 j, a, [" d0 ^, p5 a. }2 Y4 Y5 D" i1 [) Y6 c- v ~
{$ B! f# V7 ?4 k: ]4 t0 V
) q& i; S) R4 \- ~; ?8 M document.getElementById(id).style.color = newColour[id];
0 q2 _# F5 ^# s3 \- s2 S1 E5 K0 q" ]
}
( u0 T7 [" e* T6 I: m. o) W1 }9 l6 N. T& _6 H* C3 y
else
9 e1 u- x4 K- t$ n2 X" ~
: m0 b8 K% ~# ?, ^ {
( | M* {* C. ^0 `
" j; L! }; ]' R1 c, D document.getElementById(id).style.color = hoverColour;: m5 V8 t# u g# }6 i9 p2 u
- R/ I( l. D$ j& _
}1 b2 [% j9 q- {1 L; j; g/ t
5 I, b% N3 g# X& _ ~% U5 S# e J
clearTimeout(tID[id]);6 v) U. {: \' C3 f4 J
# g# R0 u0 Z( p; ] tID[id]=setTimeout('startFade(' + id + ')', rate);8 n |+ \0 Y8 _9 m: t
' i( Z1 g2 V) b" J7 [
}
& i+ u) V1 U2 ~) U) ^* B ?9 t) k- I6 z
function continueFade(id)
0 P! B; f/ `) Y. I: g2 e# |/ [
5 D0 q0 R8 t0 M) @/ C{4 \: ^3 \( {/ K; e- y* c; c
6 b @0 H: Q! N
continuous[id] = true;
; J2 l4 ?6 j# w6 A- F' f$ ]+ h! |+ G6 c& ]$ [$ b+ T
}
1 W% u6 f h, P) w8 ]: d
+ u, _: i) w, K* U! f9 C: ~6 N! Pfunction stopFade(id)
# Y9 d1 W% u8 J& @& ?7 h) f8 r$ \9 Y% N
{
* I1 s* T9 @) o' M1 p5 D2 Z8 K3 V3 U& h1 w$ m
continuous[id] = false;. B+ W6 W; P7 w6 M
8 D$ @; I) }+ B+ s9 r}* K2 f8 H; o( m3 Z0 k; g
# E- v) ]* u7 L q5 W
function StartTimers()
5 q' ~, g, D/ ?& z3 `
* J. ^2 g% e: l# u0 ]; \4 M{ //set up an initial set of timers to start the shimmering effect' {; l/ P2 e/ k" {. y+ w$ K
1 }' A+ X9 l2 t; N) |* @ for(id=0; id<numLinks; id++)
1 M! m8 M$ J" w# S
; A( d0 Z" C$ G/ P8 h {
( X% j4 X. M5 T6 @
' P0 x: @( o% S t=setTimeout('startFade(' + id + ')', id*100);
6 @: h3 |* ? {+ }3 h0 C4 {/ o
8 W! t! n% n& _" z9 Z }
3 c9 e. T- w6 {- {; c: H3 _- u* H7 ]' u' l4 `" i S0 u* Z6 _
}
- o5 b0 q& Z. a! O! C% G" ~9 U; `7 p
: O8 J2 Q: d: V, K- u- @8 S% S5 @7 X//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
) S! O1 Q7 \; \9 q3 T9 P0 p% S/ P
) s. N0 q: J6 G* sinitLinks('#FF0000', 6, '#FFCC77');& j3 l5 K- b" n& e6 H+ E8 h% I
- @8 I$ }5 k/ T# S' i& ~//-->' X0 ~# N1 @5 b6 B6 L
( F% _8 a; m- h9 u* Y9 B( o
</script>
7 g) O+ M3 s2 S6 W% _! v! X+ B<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" i) r1 g$ d/ S! B I& ?</a>
8 ^. X* b" a7 _) p- L Q. ?<br>
. s) @. X) S1 V<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>6 p' G' R) E2 P! S
<br>
' i2 y. U5 U: ]+ ~2 u- D<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
4 M8 ^' h9 g" b3 v, O" j8 N* A4 @ ^<br>
6 u$ `% X3 O) @1 `8 v<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' u. T: {1 Q% n$ W s# I) N
<br>
$ J+ I3 @/ L9 |- b# }9 V<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
: h9 M/ t3 ?+ G<br>
/ d$ Q/ a8 }/ K) i2 i3 m& t6 @<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
7 |8 n6 u- V4 o1 K" O7 `<script language="javascript" type="text/javascript"> q9 e4 ^' Y$ L+ ~8 V
<!--
+ A5 o' {& u8 W v2 ?0 fsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering) S: D1 ~" L1 I/ q" j
//-->
`- ]0 Z5 t; S</script> |
|