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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">3 z9 J8 G0 E. m$ h2 d
<!--
( }; g5 c$ ]5 k0 f8 P0 u5 P; K// convert a single digit (0 - 16) into hex0 t* j6 [- s) J( Z. g5 m
function enHex(aDigit)
% j0 T0 Q, l" } Y8 J+ ~9 Q& O{+ f( m6 S" V! }- K' X
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
`" C D- t+ f% l( o+ O3 s) I9 m}" H6 I' B' K9 T
// convert a hex digit into decimal
7 T+ o. g4 `% E" tfunction deHex(aDigit)2 z6 x" i6 l9 O4 D+ q7 _- r; T, A
{
0 n( L" a. y/ P1 e return("0123456789ABCDEF".indexOf(aDigit))
$ D- J" H7 t8 I. M}
8 a" x5 y/ [1 q. ?1 Y2 H: }1 c6 T1 K. u. ~1 p
// Convert a 24bit number to hex5 f w; k1 }& d& q" s- e- O
function toHex(n); Y* Y! \8 j+ s O
{
+ W3 o6 |- j4 K" ?7 e return (enHex((0xf00000 & n) >> 20) +3 H5 i' A( ^& j& Z& ?
enHex((0x0f0000 & n) >> 16) +
8 k, y# P1 N0 Q; J1 H1 K# d- M1 H enHex((0x00f000 & n) >> 12) +
4 r7 Q% }' l5 F& a/ S; G, | enHex((0x000f00 & n) >> 8) +
- C1 T9 T$ J" ]- {% S5 l enHex((0x0000f0 & n) >> 4) +
) j6 ^2 ?! I# Q& `6 s9 L: c; s) n; [ enHex((0x00000f & n) >> 0)); D) q; {' @2 I! Q% r
}
# C# e6 u4 K5 T& B, D// Convert a six character hex to decimal
' w; h" C; a# T% o) c- nfunction toDecimal(hexNum)
( i6 H" X1 m0 D5 N6 F1 u{
) |% J1 Y1 G0 J1 v: y9 `2 \% o var tmp = ""+hexNum.toUpperCase()% c* ]& l. t% C3 N7 C* a; J
while (tmp.length < 6) tmp = "0"+tmp
h9 h/ K5 E5 V4 b1 m! l! j% _ return ((deHex(tmp.substring(0,1)) << 20) +! J0 c7 Z# Q& n% H$ F
(deHex(tmp.substring(1,2)) << 16) + * L3 G) E9 B$ @- x- s" L
(deHex(tmp.substring(2,3)) << 12) +
& J# l/ }/ ?5 z" n i F/ s" n$ ~ (deHex(tmp.substring(3,4)) << 8) +
5 e3 B; Z* _! U (deHex(tmp.substring(4,5)) << 4) +
: ?# w: M- c( K% Q; n5 X (deHex(tmp.substring(5,6))))! @7 i2 R$ L: l+ I
}7 ?* g$ [7 E& z! @! d5 g+ Q
///////////////////Shimmering Links/////////////////////' l% X$ _) l' B' v0 B. f
//global variables
# d; ]$ ~1 o' e: P$ W2 I) {/ Bvar hoverColour# O2 q& i# \* }' m! e8 ]/ x& n
var numLinks;
2 M H Q; G" k1 z5 j! G* S4 i- s8 [var rate;
. a5 ]* P) a" X& U8 r9 ?8 hvar numFadeLevels;+ z4 W7 ^4 E6 } }8 s
var bgR;
* j: s, G. P+ Evar bgG;6 i/ n2 M7 y! H" i" ^- P, D
var bgB;* M2 C+ [6 H: S9 }6 h$ e* B
var currR;
! J' K$ j; x( Jvar currG;
# n0 M6 A8 }3 j8 `7 ]- l Fvar currB;* t P) Y: I- j% T& C
var count;' E7 W# p# ]6 s/ @1 H. ^9 v
var fadeOut;
. I" g# t0 t1 ^( N, |4 tvar continuous;7 Z2 d' [7 J& ?8 h/ a4 O8 c
var newColour;' Y" e* n, t) F3 \9 Y, y9 e2 ?
var tID;
4 y. q& Q5 q2 X% Kvar redInterval;! l `: v! l* M% g# x. z+ R
var greenInterval;
1 Z0 T' w% e6 s$ K( uvar blueInterval;
% ^' t& U. H$ m' v: Ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
' |$ t w! m$ h& u* ^: }* f* U6 e{, i$ \7 U% h4 s V
hoverColour = mouseOverColour; P" s1 w4 o" a% U* e% O
numLinks = numberOfLinks;8 e& n" r% P) l2 I& T7 g
rate = 1;. a! h0 g0 W, W- g6 X+ \2 a5 y; M
numFadeLevels = 30;
" l' m5 H p, f# x function initArray(theArray, length, val)5 ?2 E7 V d! k+ h
{& a9 @+ R9 _. e) a# @& o) D8 ^
for(i=0;i<length;i++)
1 U3 h' n. p& B% o* o" H/ G2 X+ G {* z+ A! \7 H( U' s' S1 ]
theArray = val;
- P7 B0 E m1 x# C }" f$ {* N" C- ~' o+ f- i
}
; |! O4 @, H+ C1 d bgR = '0000' + fadeOutColour.substring(1,3)7 s7 M& } p2 W3 f! m+ q
bgG = '0000' + fadeOutColour.substring(3,5)
; \! k" F5 w' }% S* i# K8 s6 N9 p, _ bgB = '0000' + fadeOutColour.substring(5,7)$ j) o+ Y1 G# X4 z
currR = new Array(numLinks);
; d9 r* A8 @/ V currG = new Array(numLinks);
+ [% S B; z$ T6 c; f currB = new Array(numLinks);/ C0 ]) Y+ \; u
count = new Array(numLinks);$ {) k4 [, n% b3 @( p7 X2 U# t
fadeOut = new Array(numLinks); X l. \9 \) g$ M: n
continuous = new Array(numLinks);* t/ H- r5 r" v
newColour = new Array(numLinks);$ K6 h3 S6 C M2 F7 ^( @, U' i' W
tID = new Array(numLinks);
; N0 ^" C8 q$ m2 Z5 i redInterval = toDecimal(bgR) / numFadeLevels;: \( s& t4 ~9 T/ X H6 L; V7 R0 v
greenInterval = toDecimal(bgG) / numFadeLevels;
& J& ~7 f$ |. ?! t. D+ K) O blueInterval = toDecimal(bgB) / numFadeLevels;& ^ l! D% g2 H. e# G
initArray(currR,numLinks,0);" s. |5 B4 M4 b7 k. M# t9 z- z
initArray(currG,numLinks,0);
( U% q* x+ `( L n( ^( R initArray(currB,numLinks,0);3 Q! J4 N: s& ]( X& y; D
initArray(count,numLinks,0); C) }! d8 A/ D) b
initArray(fadeOut,numLinks,true);$ w8 I9 q( G/ R P/ k3 m
initArray(continuous,numLinks,true);1 _" V4 ^* p1 \; @
}
' R5 X/ Z! U# |3 C+ K0 [ \6 j4 Nfunction startFade(id)" Z: h7 P5 X" R- r
{
; S* i3 f) ~) B if(fadeOut[id] == true)2 a$ O3 P; m D( l0 b( N# R
{ /*move colour towards background colour (increment)*/$ Z4 r4 \0 f3 g% l* N L' o9 ~9 L2 X
currR[id] += redInterval;) |. a. s3 c. ~, ]
currG[id] += greenInterval;8 [5 U# y8 C9 H( |2 X0 h, N- u
currB[id] += blueInterval;
9 B8 n- I% W" J newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 n3 f1 l- i3 H
if(++count[id] == numFadeLevels)
4 Z: Y; H. r. K* u6 d( h5 \ {
/ f+ i% z# I- a fadeOut[id] = false;
! C- U0 b' C; Q+ D8 ~ }* G- G( _0 K" c% p" Y* r
}$ A" e' B+ m+ W4 |) b) F
else
7 _* `( J; E; h6 T; S$ H6 {: B {# f$ \2 C2 a% ]3 L
currR[id] -= redInterval;
H5 l4 W2 q7 B& [
, J \2 j3 K4 s& M0 K currG[id] -= greenInterval;
j' ]( V' j' S5 ~' S
. ~+ {! u: ] p4 g currB[id] -= blueInterval;
# H: @1 J6 m1 t8 Q' ]! J$ i7 a- @
: ?5 ^9 ?2 \8 q( G; U+ w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 R: T3 |1 c6 ]. [4 @$ n0 h% N
4 B+ U5 m, K7 Y4 z9 W8 a9 n
if(--count[id] == 0)
H; ~! A" e9 M" m; w1 @; \$ U2 c
% N$ N. Q7 _0 n1 g$ ~ {& k% x, W' T# B" I; E. T$ R( Y3 \
4 e* A; {4 P i% B; y1 J fadeOut[id] = true;3 S! ]+ r: u. m/ `
0 o/ G" J: U+ s& S& h' T
}
" M; V. N+ v* `7 U6 [
" r' A; T- r3 j$ a }3 [9 y, N6 r) ?: w
q9 q8 X! i, k k
if(continuous[id] == true)
, Z9 c/ C( v/ ] W7 H/ h# Y4 z* }$ C6 N
{
. P$ c# g0 l I" v, A; o6 {0 r9 M/ u9 A
document.getElementById(id).style.color = newColour[id]; . i. Z2 C/ ~: E! [( C0 T. {' {
+ n" p6 `# A s+ s# U }8 x' y; U' ~* t& G$ H% |
% ^5 D) d& e+ m! c3 @! a$ `0 {
else. k7 S- Q9 a& C! w1 S3 Q
5 ]" q7 F8 I# S1 X {% c4 W7 b2 E) E7 L+ _& H8 k# d
. L5 A8 f8 E5 r
document.getElementById(id).style.color = hoverColour;9 [5 @7 g* B7 I }1 M- E8 ~
$ X8 D+ m+ A7 h! C9 A$ r+ ~- B
}
7 O) U0 [* ?0 F2 k1 S+ t5 d% {4 s( J
- s' j/ ~& ^, Z- M. v clearTimeout(tID[id]);
$ Y5 h; u! }; k2 T7 {2 C+ t
, D; @& V7 @/ [; n Z tID[id]=setTimeout('startFade(' + id + ')', rate);
0 ~! u9 I+ C# W5 X7 z
3 Z) a w- |0 C4 N; k- }}% M4 A5 v% m; M
7 X6 t( p* a1 q7 [4 Sfunction continueFade(id)- ]2 v8 D7 W4 i$ D8 Y7 r5 l4 C
* @1 D9 H+ j: h7 U1 c3 ?
{
0 S# o- g6 f+ x- s
5 C* r/ r" r C9 K0 q continuous[id] = true;
! c n: {4 w/ T
6 g+ ?. w8 W" ~# V}
5 i5 p% C* W ]
+ q) f1 o$ x& v. ~function stopFade(id)
# L t3 j, C8 w" m4 H4 J% ?2 u/ i9 z h( m! }' |! s8 l5 {) Z6 g$ S
{/ O4 Y7 c1 M9 b
4 Q- L4 z$ I( b/ m continuous[id] = false;
0 v' p6 ^ v( t/ Q, n- m( K
, F. O' E4 w' V2 C}' ~ J. g) g' O, a
3 j$ w1 [9 L7 M% k2 \: x4 [; afunction StartTimers()! O( ?! p |$ {' A. ~+ N
; p0 S$ q. g( g8 v
{ //set up an initial set of timers to start the shimmering effect
$ R8 l5 C) O; Z ?, T1 }% B3 S! k: r" \) u0 W& C
for(id=0; id<numLinks; id++)
) G, D. j: `; Z. H0 V* q6 w5 H1 j0 x+ j. A( G. o q" x
{
. n) Y$ t7 [5 C% l! I5 N8 q" y
9 f6 Q9 [2 G, |. }3 l8 F t=setTimeout('startFade(' + id + ')', id*100);2 U" q/ ]) F5 Y% w- R
0 ?! {+ B+ k: C3 I3 s% O
}
+ n" Q: ^! C% ^+ N3 X: q8 L+ C
& }5 V$ w6 {3 k2 i7 ^/ p}- ~ v$ h/ x9 v9 [7 ?' T
3 g/ m, ~! T$ |7 w* D' i! p" ?9 |
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
" [1 X8 M6 x5 S+ q3 Q o# k, b8 W
" n% A, V" x# T9 cinitLinks('#FF0000', 6, '#FFCC77');# J9 s2 k' q, _5 N5 r/ U9 g* x
! b- x' D1 v& [3 I5 x+ ~//-->1 w4 X& M. q- h) d/ u
$ Q; }! p0 v3 Q9 @6 x! u- X0 e$ i
</script>
* L8 W# Z7 I3 f) G1 x; s5 _3 q* i<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
5 J8 k5 C; J6 O" s$ T* d</a>+ E2 P0 z* S& P$ R. s( `
<br>
$ ^. L: S( v+ W* ~! Q3 M7 h8 g3 G<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
" |2 d' u! Q. d; [& D& l# X<br>! X' J4 }( }0 O6 R; m" P0 M j" j
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
, r8 Z' o8 R. @" ?<br>
' H3 U5 I9 y& E4 t<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" X5 E: z" c" |/ O
<br>
9 L# x+ A! `' Z4 K<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
8 ?+ {- O3 R% {6 } a% L; J<br>4 `# x& z1 d7 `# b# j2 K
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" T! e8 [% ~+ t: C: k6 C# L
<script language="javascript" type="text/javascript">
+ [ f6 h, s) D<!--4 S- l, Z/ W' H* e, g
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
1 {: a2 F8 A% I6 x( C( |: z1 @//-->
4 y @3 y+ F' U; J3 J& O. T! o+ a</script> |
|