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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">' b' Y0 c G/ V' P
<!--$ G" a, X& t7 [( P' k; @
// convert a single digit (0 - 16) into hex; P6 m7 W* w1 u! ]* Z
function enHex(aDigit)
5 P J1 h- T5 j! I{3 I( h3 z: @# Y' \; p P! N- N
return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 l" t$ c H, t0 C
}& R+ G) H3 U2 l' N) e3 I
// convert a hex digit into decimal
3 x0 Q( l9 F9 e5 Z$ vfunction deHex(aDigit); b Z2 J, i' |( I$ i
{* L* p0 N0 y) y: M2 f
return("0123456789ABCDEF".indexOf(aDigit)) a0 L- k4 J2 A3 s8 `6 F1 H5 n& d: ~
}
$ E! N, A" T' @9 d$ v) Y R, i1 ~
// Convert a 24bit number to hex
! N, Y' }) A+ r* I7 Sfunction toHex(n)
' T4 s" u# G3 t+ q! s, t! F, {; B{
6 `+ Z5 ~2 E, o9 B0 P" y return (enHex((0xf00000 & n) >> 20) +
- @6 s4 T# D1 E0 q2 E# h4 D: g enHex((0x0f0000 & n) >> 16) +
0 o( X6 V% @3 j/ C enHex((0x00f000 & n) >> 12) +4 v3 V: x2 L& M# @+ s
enHex((0x000f00 & n) >> 8) +8 L! z: d S0 N$ k+ L
enHex((0x0000f0 & n) >> 4) +' \4 S7 e7 p8 a( k
enHex((0x00000f & n) >> 0))
- ^+ c1 }' i" x( N( i: p4 V7 Z}
' H i7 x" c. ?6 f a5 w: ?/ K// Convert a six character hex to decimal1 i9 h7 R w/ z0 M1 S+ h
function toDecimal(hexNum)/ j: o+ l; N% W& w `0 p
{
* S+ y( u( c5 x var tmp = ""+hexNum.toUpperCase()
/ K! a7 f0 M% P2 x5 L) T while (tmp.length < 6) tmp = "0"+tmp6 { }9 s' N( T# F. }2 F
return ((deHex(tmp.substring(0,1)) << 20) +
. h1 N* t# T# u4 }0 r% K (deHex(tmp.substring(1,2)) << 16) + 8 i$ {* ^$ @0 X/ ?' S D. x
(deHex(tmp.substring(2,3)) << 12) +
' R) P, @1 z! z1 ^' l' }; u (deHex(tmp.substring(3,4)) << 8) + C: Z4 a. [! G8 `: N5 {
(deHex(tmp.substring(4,5)) << 4) +. n' K( ?0 c0 Y& q6 `" L* S* Q! N
(deHex(tmp.substring(5,6)))) p$ l, Z3 b0 ~- E$ E
}
/ @2 F( n, P0 J) u2 f6 c///////////////////Shimmering Links/////////////////////% i" ?0 h! k2 C; S9 h) d5 j: |- K" }
//global variables
) g7 ^+ A) o- y( ^, i2 Avar hoverColour
+ ?& ~8 M% m+ v& i0 e8 |; s5 ^var numLinks;
L- Z& R. k" _, y/ t. A* rvar rate;5 o( G. p( k3 ~/ o3 T3 _
var numFadeLevels; [) e! w8 q" g
var bgR;
0 n$ N) ~. h/ g% X& w8 R) Tvar bgG;9 T7 p% g$ \! F/ X' M0 U
var bgB; j6 A$ U6 Q7 W
var currR;0 a) e% o6 J# e; Y
var currG;% U4 C4 F4 I, x5 a4 m& O0 u
var currB;& e6 e# a) L5 `+ |
var count;
- R3 w) O/ D8 z7 {* Lvar fadeOut;# }! [% a( R8 ^) k8 Q, X
var continuous;
! o& V- B8 r1 }( G6 f: F5 S6 Dvar newColour;
$ d. E& Z# a; ?" v: D; E. r7 \: \/ Y, ^var tID;
) P) I `* z7 kvar redInterval;
; F* e- [: b- Q3 p: s% {" t; Qvar greenInterval;
% d& Z8 S; n* |4 ^0 N) V; a) ^3 E+ |var blueInterval;( Y$ B- s. G3 [% U
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)- q. h1 E$ i$ L6 r2 z e' X
{) L l( Q9 {; h+ `1 o- x
hoverColour = mouseOverColour;- ^( H3 E( Z! C* w0 j1 W
numLinks = numberOfLinks;% } [6 [3 q# P7 z4 W
rate = 1;
+ K# X0 o: W8 } numFadeLevels = 30;# s( z* Y, s2 C& O( C6 P/ u0 D
function initArray(theArray, length, val)
7 B, J; g' O5 p& t' D; | { J4 \% y3 l) \; n) d! _
for(i=0;i<length;i++), d' Q" L* k. A" `# _ r
{
d5 m" b; x9 [6 a7 q) Y& L2 I theArray = val;
9 F, e# C3 v) P# h! Y+ [/ h! a: F }
5 F( Z" ~( x, n" X7 x }, r: Y0 I- w7 c k" H8 V
bgR = '0000' + fadeOutColour.substring(1,3)$ E' L& b. L7 a0 ^6 N+ T
bgG = '0000' + fadeOutColour.substring(3,5)) @5 s; W4 k" e h7 z% u) k, N
bgB = '0000' + fadeOutColour.substring(5,7)6 q* o0 z2 D+ j# B% }
currR = new Array(numLinks);$ [4 Z S9 q6 d
currG = new Array(numLinks);' |& h9 s' i' l& S
currB = new Array(numLinks);2 s+ ^+ |( k$ K0 }& k! @- j* t
count = new Array(numLinks);9 p: U" a- E2 J: X$ e
fadeOut = new Array(numLinks);
0 \3 w \* j/ P. a( } continuous = new Array(numLinks);2 Y$ S6 k# B2 @$ }' k$ R
newColour = new Array(numLinks);
5 z. \( S% f% F tID = new Array(numLinks);' F/ |2 k& U7 S( H
redInterval = toDecimal(bgR) / numFadeLevels;9 d! H" m. u$ `3 H
greenInterval = toDecimal(bgG) / numFadeLevels;, k, Q' A1 C$ R, o$ ~3 C! o
blueInterval = toDecimal(bgB) / numFadeLevels;0 O/ {& \ [0 T/ ]* R% G
initArray(currR,numLinks,0);: a. R: O% @( Q; Q! x
initArray(currG,numLinks,0);5 n9 H' @+ P$ J
initArray(currB,numLinks,0);7 L5 s4 p% `8 s6 n8 J( m4 [
initArray(count,numLinks,0);
3 K) o/ O* z6 j. J% G! W initArray(fadeOut,numLinks,true);
! K2 O% E& o! b! U1 K1 n initArray(continuous,numLinks,true);! m. s) V" v! X) a# G# @2 ]1 X2 d4 U
}
8 D1 u/ e& i$ P4 I8 b6 f8 h" O; }function startFade(id)
) U) w. T2 x+ w4 Y. l- z9 [9 k4 u{; Y# j7 a% e! c& b/ ~
if(fadeOut[id] == true)5 }, @8 z+ S5 p" H+ L+ F+ G1 T
{ /*move colour towards background colour (increment)*/
3 [$ m2 C1 L2 m; O2 P% l) k" d currR[id] += redInterval;2 |# }+ v7 z3 g
currG[id] += greenInterval;
- {& g' v& m4 i. _ currB[id] += blueInterval;6 x( [( z; E- z3 ~) Q
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% R1 Z1 m X) `, \: T2 v if(++count[id] == numFadeLevels)
0 Q' X# Z' A/ \- d" R& X {6 E2 W5 z' ]4 ]2 Z# x
fadeOut[id] = false;
9 ^2 x/ p) w4 F8 Q+ G. z' L# w }: x4 l, v3 e- r' Z
}
: k B1 H% k. I0 M& j# N; u, u else
) k* ]9 f8 e8 @0 j {
7 a; L2 a, s9 B' U8 q currR[id] -= redInterval;, y, D+ a: h; ~4 g
# W! t7 T* m" U+ y3 E3 t currG[id] -= greenInterval;
8 P7 B( f9 d8 ^2 m# c( i8 ~9 y+ |* P" Y, Z$ f+ n3 B8 e% z; u7 M
currB[id] -= blueInterval;
3 n" ^; ]- i+ a4 r% }# C; {' A# z" D5 Y" F- a/ {( e5 o
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ z1 J4 s# V6 d9 i9 S% m1 F X" S3 @# e" u6 Q
if(--count[id] == 0)# f; w& c; X" [7 n% T3 z
# @$ b1 @" v9 m+ {# |; N4 |$ S" M
{7 h1 m+ X$ g! C: o: Q
0 O, @0 P' K0 C1 ]3 q" }9 Q fadeOut[id] = true;
4 ?+ e6 k4 g- |, `
- P: o. I' c# k, N }9 a4 q$ V1 D# ~. h( m! V: c2 {' l
& P8 I6 ?; x6 d' @+ [ }" K. o, }3 Z$ J6 E# p
# U0 i7 b+ T- {7 A
if(continuous[id] == true)0 D, m6 _5 n/ R1 u8 c
) T4 E/ g* ?/ ~0 i* q8 `7 z4 v2 ?- @! t
{
0 L$ N+ N4 Q7 P v* |( @$ W# `
4 ]; l; _" I; s- m3 u, o0 x/ B document.getElementById(id).style.color = newColour[id]; % E1 n- m" u5 Y" I+ ~6 y! m
+ V" V1 D6 A* A5 F }
% d$ M @+ X% ]- z, @" g0 Q( M; C0 c. Q0 F& c
else
& s' b" ]" O# w3 U4 b
$ |+ H* X, e$ s {2 X5 k% f. Y" G; z
) X) o5 a/ E8 K% N document.getElementById(id).style.color = hoverColour;5 W2 s! e8 K( G0 o7 y9 {
! h3 `( \/ |( R5 g
}
. E' S: j6 y5 R* J1 @
: Y) G, a5 u* R8 ^# l @4 n* W clearTimeout(tID[id]);" h# }2 g1 f% Z" n5 T1 S# b! \
' u) ?% c& E, i
tID[id]=setTimeout('startFade(' + id + ')', rate);; ?+ ~8 |. n( u. h
9 p* u& [7 B; ~- p6 `8 Z# ?8 e' {: ~}" R9 S* E4 e' E) c2 n3 \
, U3 h, |+ p% X- cfunction continueFade(id)
+ L/ B- M9 H& ]. `+ ?
$ }3 B( W, J1 x u# ~{ ]* I* z A1 q
5 u/ p1 y4 X" O9 K5 N% j# t continuous[id] = true;3 z1 U, D+ R6 U- ]
t. F- h8 `& @/ ~}
3 H/ U" y0 U. L4 P* w$ d. F/ J9 K6 m
, f5 r. I# B) P8 w2 Efunction stopFade(id)
" l6 U) b5 q6 \& B) w7 O4 t8 m; }; s( j
{% ]2 u5 v8 M2 @7 G4 O5 {' c
. l/ T' p) q# I. H, m
continuous[id] = false;8 I0 f) p6 {! ]2 a
# w4 r. i4 i X/ {4 t}
8 X! h8 I) y" n& u
4 G$ U5 J* z6 J9 Nfunction StartTimers()
4 y, |0 M, E# q
: @% p! W! f# u6 m& V2 a1 r{ //set up an initial set of timers to start the shimmering effect
- |! n: m& h7 P5 }1 s" M
7 w L0 ~% i m$ R for(id=0; id<numLinks; id++)
8 C+ K' z! ?5 ^& U( {5 g; T7 f' c. b; {. u
{
, k! |1 U& E% i6 R4 [
1 o& X$ V* R. j6 e. p0 l6 M/ B5 w t=setTimeout('startFade(' + id + ')', id*100);7 l4 k8 b4 @1 |( v( C- l
* q7 ^ f" c* {, a1 o# N
}
2 Q/ ^5 Q; B: k9 f6 [
8 q2 N4 q# ~7 k2 H) P4 m}5 C3 b/ W3 ]( W( [
& f+ e- N( k% e+ X. ^//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')4 j6 z" F9 p/ u' M+ \
7 ]( ^0 q7 K3 T- u2 u6 B' C6 w
initLinks('#FF0000', 6, '#FFCC77');2 | [% e1 m, ~" X1 D+ \
. W" ~4 s& R. `. y) K5 t! h
//-->. @5 u* [! l9 n, k( }$ I% s+ A8 n
& O) A- m$ A7 @+ [0 C9 X2 c
</script>$ g" X2 d2 E4 y' o6 ^! e
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元' W, @4 v+ L7 |
</a># O! `, D" W* a8 g$ u- O
<br>+ {) _# V! S( s
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>' \- W! h D& ^( r4 B
<br>
& S9 ?0 ^( P7 u* [( p2 o f<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ l+ l# Q8 G" X<br>
/ [ I* l/ U% s. A% C& k' k/ B/ x<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
- R" g7 N2 K) E7 r9 N' j* B<br>
$ L/ }+ F5 d* A: m6 E; \<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ E" u' d# X2 `- W' W
<br>- m& {$ B% x6 N I. D& p3 d
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* U6 o2 o+ w$ V7 g* e) @
<script language="javascript" type="text/javascript">
. C3 W ]% w' v6 V! w; L- j3 B<!--
2 F) y- D& _+ R3 I2 \7 ZsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# j) v5 x1 ], v
//-->2 B O7 J9 V) P- z
</script> |
|