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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">5 k; l$ l$ P$ C6 j- J
<!--
; l9 {! U( a+ o7 I// convert a single digit (0 - 16) into hex
5 O; s C: o( U- tfunction enHex(aDigit)7 `' j! l+ c+ B
{% u5 ]" l) `+ t8 e L' W& _
return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 G0 c0 R9 W( Q- Z8 b
}
. R8 U' }9 M; }3 t [+ k% ?// convert a hex digit into decimal" C6 h0 I) t8 \! `( Y/ A! V# L
function deHex(aDigit)
$ S! `$ z- v% r! [* V{- O# w, u) @7 ~! x' c5 S! ?7 r% W! [
return("0123456789ABCDEF".indexOf(aDigit))2 B9 |8 y' D: V0 }5 | c* D# r
}
$ P/ }# a6 y2 [5 w1 V0 p5 ]( E7 `, m6 n; f7 Q, i
// Convert a 24bit number to hex- O+ h. |' {* P; f/ {
function toHex(n)* r/ i/ j7 R9 L" E* e& I2 e! U
{
r' d" H9 N4 P1 k7 D- G& T return (enHex((0xf00000 & n) >> 20) +
" ^/ Y* |" y, ]3 a* z* a% h enHex((0x0f0000 & n) >> 16) +
/ d. a7 ?; I. |9 q4 R enHex((0x00f000 & n) >> 12) +5 t, _, G- w! O2 q! `& i6 U8 s# u
enHex((0x000f00 & n) >> 8) +
; `" }" p# O1 [" o+ y# P enHex((0x0000f0 & n) >> 4) +
: L! i6 I( n0 @ enHex((0x00000f & n) >> 0)), k5 X7 x" S' g$ I* L; _
}/ @! _/ ]& d( n
// Convert a six character hex to decimal
( \, L1 B; e/ T: o- O0 hfunction toDecimal(hexNum)
0 O* x7 ~" p _6 S{$ D& p) r7 w4 E7 q0 u" o9 L. Q, i
var tmp = ""+hexNum.toUpperCase()1 ~; l3 \1 X5 J j& K7 U! v
while (tmp.length < 6) tmp = "0"+tmp
6 r, t9 c9 ~2 n, T6 l7 @ return ((deHex(tmp.substring(0,1)) << 20) +& x& F: [" F7 e# s4 v0 o. f0 \6 |8 C
(deHex(tmp.substring(1,2)) << 16) +
6 f2 y! ]) f, a: V, X; P (deHex(tmp.substring(2,3)) << 12) +
% F( } s. @* I8 v, j2 \5 p4 l (deHex(tmp.substring(3,4)) << 8) +
' x4 J4 O4 a8 p/ s$ p (deHex(tmp.substring(4,5)) << 4) +
5 k |" ^) v) |0 I, q (deHex(tmp.substring(5,6))))
8 R" y5 U1 S( C' T4 ?* t% V1 r}/ I+ F* V( k v& F8 j5 m6 F
///////////////////Shimmering Links/////////////////////- k2 o$ O7 P; e0 J
//global variables
9 I0 z0 p7 W$ N8 y8 L9 zvar hoverColour
$ ]8 w% m" A9 I* E) e! A8 M9 Vvar numLinks;
3 P) ~$ n9 [/ K7 R& a9 ^var rate;
! B: m/ K9 `; T2 Cvar numFadeLevels;
& r5 S; V9 g5 p6 W* M& D( G* uvar bgR;( e; f# D7 g! l% H. y
var bgG;
8 S0 b7 |& }; U" D3 fvar bgB;; Q J& t, k' I# J2 F! t
var currR;
7 ]3 [( n* _' E0 }) }; }- e6 Uvar currG;, E( F6 A A% u3 N) m
var currB;
: x! n& e( f: d; l, x, fvar count;5 Y( {: l( F! T$ g2 E$ D/ K
var fadeOut;
0 z# @( q& U: D% C5 K* kvar continuous;
' u8 y+ [: p1 s( [# uvar newColour;; x" l/ x7 G/ r2 L: z
var tID;( P+ y3 R% |# h2 u! s7 ]" N. F
var redInterval;
/ o8 y! L# E% w/ c# A9 [$ g/ ~) ivar greenInterval;0 ?: M/ m. [1 I
var blueInterval;
; a9 P1 c. W' k9 ~function initLinks(mouseOverColour, numberOfLinks, fadeOutColour) T7 Z) q3 X" x/ J
{
$ C2 v/ i+ P5 a. s! L. K, x hoverColour = mouseOverColour;5 K. x. b F) k
numLinks = numberOfLinks;) a6 a! J1 E, c o# F$ ~
rate = 1;' z; M* W7 m. Z3 x" z& {
numFadeLevels = 30;
4 e% Q6 g0 d- G: H/ X0 J% A; L& c function initArray(theArray, length, val)1 j* W. O( j4 A! h. j- M( _
{+ M( v; x/ M2 \( b# Y2 B: b
for(i=0;i<length;i++)
( u" z% x& N$ d$ e {! ~6 ]/ S& _) x6 D/ r0 b
theArray = val;" j) C$ _/ _9 S+ T2 B
}5 H( i0 w( d$ W) _" E- p6 q2 w: p
}0 ~7 Q, M/ M1 h1 u9 h9 z& S
bgR = '0000' + fadeOutColour.substring(1,3)& O- A$ s! \8 h* i( V
bgG = '0000' + fadeOutColour.substring(3,5)
7 a8 k7 i: C6 Y$ h) Y bgB = '0000' + fadeOutColour.substring(5,7)
% w: d2 |' k0 F" v8 e/ v/ @( @ currR = new Array(numLinks);! f* A% j: Y0 k' f+ p' C) ~7 r1 I
currG = new Array(numLinks);
- m2 Q8 N- O, Y currB = new Array(numLinks);
, h2 E* m8 M; w ~1 z% \1 T+ r7 [ count = new Array(numLinks);
$ A3 g9 P& m1 c, o4 }" ~ fadeOut = new Array(numLinks);
: s- I( ] D0 y+ A. ^4 D continuous = new Array(numLinks);
5 _; u1 c9 W1 R3 V newColour = new Array(numLinks);8 O' e4 P5 }8 ]! ^9 J
tID = new Array(numLinks);3 u. h( Y; [8 _7 F# Q n( x8 W
redInterval = toDecimal(bgR) / numFadeLevels;
& G8 _2 e9 j; i7 Y/ m! f0 _* D. _. P greenInterval = toDecimal(bgG) / numFadeLevels;% E( Q$ h2 b# ?
blueInterval = toDecimal(bgB) / numFadeLevels;
! m/ e8 _! h. { s9 U initArray(currR,numLinks,0);' w$ s. C1 o) A" y: s
initArray(currG,numLinks,0);9 z/ T1 _, {5 ?1 T8 U6 X n
initArray(currB,numLinks,0);
& y0 g5 U6 ~8 B' X initArray(count,numLinks,0);
# Y- }8 ]4 @6 W/ d# [5 P initArray(fadeOut,numLinks,true);# p1 c0 B& `) |7 r! n. ~1 p5 e$ B
initArray(continuous,numLinks,true);
1 E! C# B7 S& d3 e}
8 u J1 a, M0 K9 S# Kfunction startFade(id)
+ E* V. r' l8 e{; M1 k3 b4 y6 d, `* i9 |, T
if(fadeOut[id] == true)# y, ]" `7 [! d, F
{ /*move colour towards background colour (increment)*/- c1 z% k3 w8 k) I
currR[id] += redInterval;
9 q& h) l3 k$ k) p currG[id] += greenInterval;$ C3 T# Q1 F) p# B, \) @4 c
currB[id] += blueInterval;; `$ H3 Y' f* J3 s+ X
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: R6 l6 `) A' ]$ b
if(++count[id] == numFadeLevels)% G1 e4 E# r. L F
{1 j9 p0 X- |* I3 ~
fadeOut[id] = false;
, _+ ]+ q) J% X } D( n7 g9 m* r! A9 I! w! W
}
. c; Q+ ~& X% s2 [/ b/ E9 z/ O% p. v& f else
/ K/ j; ?# m" U, x6 D& @6 c: k {
. h" l! c0 A- S currR[id] -= redInterval; J( }( `* ?5 \
# g' \4 [* h' J. A
currG[id] -= greenInterval;2 k: E; s+ ]/ d& W v
2 Z, W Z+ ?( c- B+ a+ C6 }0 F
currB[id] -= blueInterval;
4 s% [5 l- c: r) x, r" T" S1 T, Q; b$ Y% ^) P9 _, T& Y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 q9 F( K3 I) |' ^' p% \# x. I+ Y7 E
if(--count[id] == 0)5 ~2 ]3 \& W6 W1 w
4 K% i; l: o' c {7 S# a& p" E4 D. ?) q: W7 A+ ~
! ^( z# E9 F' O
fadeOut[id] = true; T' O/ ]6 I, d1 k3 W1 m) b
t% k( i. f* A7 H6 y2 {" _ }
1 C U: w9 N- N- x. D% ]3 d0 {4 {& o: G1 ^
}
3 a) y6 I% f0 J6 J2 H. B) [0 p3 H. H0 `6 g. n
if(continuous[id] == true)4 o; M5 T7 |4 P( U
9 n4 }1 Z2 C1 U( a( I( E; ]& w$ W2 n {
8 R+ K* D8 E2 G7 _% \
1 s6 v% A" _. E* P5 n" A; g document.getElementById(id).style.color = newColour[id]; : e( v3 S1 t! q0 n$ O
2 S. B! `: x1 M0 c h1 y, z
}
7 e0 [2 H) @$ ]1 C, h4 O5 Y3 r+ }8 d- Z& Z
else" j7 ^( H5 |7 A
6 [2 Z4 f3 G4 _0 K* a; J {
S- r) M0 f0 Z+ b9 A: f H1 J' ^% U# n6 @
document.getElementById(id).style.color = hoverColour;; W) f$ A. W) c: I( d* A" t
' ^3 ^# _: z& S% z; O. i4 ^ }
/ D$ i ?2 L1 e* y" f( O/ C5 L f0 u X. G! i7 ?
clearTimeout(tID[id]);
2 f$ ]6 b7 I" ?: `' s5 j8 S% @+ z& a
tID[id]=setTimeout('startFade(' + id + ')', rate);
- A7 \4 w V8 d1 q' K7 F% f- J: _
n' k7 V! ~4 }}
h [* U; F& P- G2 z: {6 T* Z# o+ m. X
function continueFade(id)8 |6 u, ~' U5 G+ n" y: _8 Z
8 u" O& l/ ?+ f
{
$ B! @" ?, t7 c+ l( j, h" Q; `+ m; K6 f0 j. P O
continuous[id] = true;9 @9 \5 F, @) A
O, c7 c. W( M4 Q2 @+ g}$ K4 X0 \! K, {
! a. Y0 p+ }4 Q- b5 y% V$ |function stopFade(id)
0 |/ i6 d% M# s8 C0 @- R1 Y) ?5 w& o* o2 W' A3 N m* l
{# m3 R3 V8 w+ }1 g; D3 Z/ ]( n
" V& k3 u0 L+ G( {. } continuous[id] = false;5 W8 T5 h/ T; R- H8 P
( p2 d* V- y7 A( w; v
}
+ A2 F: T6 D: y9 }2 L4 b
( b% w% |2 @0 [6 o3 r# _" \/ Vfunction StartTimers()
3 P6 b6 J3 i! p: U# @
) m% V6 x4 J4 k& k$ f* p{ //set up an initial set of timers to start the shimmering effect, J6 D( L2 u) [ c, p+ v1 c3 G8 X# B
2 t) e9 e: T9 I. B9 p9 w9 \
for(id=0; id<numLinks; id++)1 m! v, j- X; a% R9 ^7 R$ z! L4 l
2 |1 X9 p# U% O7 i$ P% D. S8 c {
8 P4 o& W/ O p( n d
0 F$ s Z$ U6 \ t=setTimeout('startFade(' + id + ')', id*100);
! l" s; W! K4 G- ?. s" t3 l6 l6 a0 D9 q4 N) Q% s
}
! `- R. }7 D! ^2 X9 T; \, h3 J# m# k& U) p- c& Q
}
0 v0 N' ]4 k! Q9 k2 f: }$ e8 e
# e3 h0 e: p6 i//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
) e( a4 q9 H$ f$ a' h. V5 c f6 H3 z
initLinks('#FF0000', 6, '#FFCC77');- {/ l* L% U, a0 C" F% J
/ T, G! x0 I: d) G//-->% U+ F) l6 R4 A2 s! A* w9 ~
" Y* x3 P1 |! T' }</script>) u* B! t- A" ^, {( a& k
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元1 y! y, P1 m% K" |# e$ w
</a>
. i' L$ h7 C- d% P5 I. L<br>
% S# u; o) c/ H7 M) i& e$ H; {3 y" A# r<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>8 K+ N2 c/ z/ L
<br>
1 j, k$ n4 k1 G8 d) b* {<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>, g5 T6 e% [1 Z
<br> 6 ^ s+ J) r! P3 Q
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>5 H1 d7 q- j0 d% A
<br>
# V b7 c) V7 N, ~$ Y. c: r. [! K- \<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>: b3 I/ E; ^. c2 r! O* y3 f
<br>, K) a, _+ |3 {( ]
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
+ `' O3 I9 I$ g+ U<script language="javascript" type="text/javascript">. J. Y. i" t3 F1 w T+ Q
<!--' u: H; I- M7 d9 @5 O) x/ C- A
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering2 W# V( h7 L5 f
//-->
+ b8 h' p, S: S" }- I; Q U8 o* ^</script> |
|