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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
3 U0 ~' E u8 H( x( @: S<!--
' v* C, Z; w- r) l" s7 N7 [// convert a single digit (0 - 16) into hex
8 H0 X% x8 y- ^+ J6 m; p! ffunction enHex(aDigit)) E% ]2 R! [* W( R$ V
{
4 T% I `1 m, g9 D8 u# @ return("0123456789ABCDEF".substring(aDigit, aDigit+1))* s; i' z! ~! Z0 T& t
}* m/ V; {" _) S0 @5 [+ a* P
// convert a hex digit into decimal+ }2 W3 ^! E" _8 f. H
function deHex(aDigit)
' {8 I$ M* u" x! T{- a I( y' m6 c+ C5 o7 y
return("0123456789ABCDEF".indexOf(aDigit))
, U$ W$ t9 Q k* x. \/ i}
6 I6 N8 ]2 t8 _+ h
0 {* F) Z4 I d: ~6 s// Convert a 24bit number to hex
" c$ e4 k6 s4 P5 O& @function toHex(n)* W/ v* L k# H0 K6 a9 @
{
9 F5 r& ?. i: |6 B) t' ] return (enHex((0xf00000 & n) >> 20) +( m0 ^) |# I7 b0 L, h
enHex((0x0f0000 & n) >> 16) +; G8 o3 V/ X( ], [" c% [- I
enHex((0x00f000 & n) >> 12) +0 E2 I* e1 d: }' `' o1 M; [: \
enHex((0x000f00 & n) >> 8) +3 K6 x5 y* G9 X
enHex((0x0000f0 & n) >> 4) ++ \0 d( Q8 R1 {" I# }! V
enHex((0x00000f & n) >> 0))5 m0 ?. s6 t' u* G/ R( Z+ A F
}
5 |+ l: U" ~6 f. r( \. h// Convert a six character hex to decimal: H+ Y2 g8 [! S) H5 ` S6 K
function toDecimal(hexNum)
1 T. i) i: f& z; r% d{2 z& D: N V0 J* G* \2 Z3 a+ E
var tmp = ""+hexNum.toUpperCase(). M/ p; `% _% Z. D$ ?
while (tmp.length < 6) tmp = "0"+tmp* }# I, k5 k! c8 r5 x8 x7 ]# S# |
return ((deHex(tmp.substring(0,1)) << 20) +
7 o. M/ u5 P; X! \) K) v (deHex(tmp.substring(1,2)) << 16) + ' \5 x. l6 [3 H0 t3 h3 s
(deHex(tmp.substring(2,3)) << 12) +
( T: X# \' [: @4 q1 [* Q3 N# O( S (deHex(tmp.substring(3,4)) << 8) +. h& c% C) p6 F/ g1 d
(deHex(tmp.substring(4,5)) << 4) +7 P. r! ]0 ?4 b9 S) P% W" S
(deHex(tmp.substring(5,6)))) Q) Z$ d X m' F* M
}
' _9 z# z9 U0 Y, x8 F7 G///////////////////Shimmering Links/////////////////////+ x8 o, c$ T/ L4 u9 M6 {* u8 O: ]
//global variables
. q& u. m8 y; Y4 w! T0 A+ svar hoverColour
) t7 f8 l/ R4 T4 x" b: W! W( w6 {var numLinks;/ v6 F% c& z2 K0 Z
var rate;
8 w( ?" I, L" m+ P2 r# z1 a% cvar numFadeLevels;$ z7 j+ R3 R- x4 y! O4 H* S# X
var bgR;" f3 w8 w& F7 G
var bgG;
+ V8 i, ~) b: e2 yvar bgB;
! g* S: F3 h' Q. Z |/ k+ Avar currR;
3 |0 {9 ]4 Y+ ?5 xvar currG;4 K9 j& t& h/ z, t
var currB;) v$ F$ t' H2 u3 R3 c& |
var count;- n" o4 z- z# }! l/ H# J' e
var fadeOut;7 C& s7 k8 h! U
var continuous;; S1 `5 m% b7 \: i7 T1 i
var newColour;
& Z8 `- a) d6 a9 I5 Rvar tID;
- D2 e1 m7 ?$ Z8 A A F9 Evar redInterval;0 w' K) d, x/ Q F& i0 {
var greenInterval;( q- I3 G5 I" f9 Q9 }6 h
var blueInterval;
0 B/ L) `) o$ p0 [) Bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# w9 S H; A8 a: e1 y1 b5 s{# K8 E# s$ w* b* G. H" m$ l+ n
hoverColour = mouseOverColour;
8 p" Z8 ?; M& R9 m numLinks = numberOfLinks;
. y6 j! t# j; t# P rate = 1;3 { B* C$ y: {# H1 S0 F
numFadeLevels = 30;& s* C# }) `* p# g4 ?3 w
function initArray(theArray, length, val)
8 p- G4 T ^- G0 Q8 L {
3 x) n+ W& x Y: `4 v; t3 q for(i=0;i<length;i++)* F& U- Y. |; S4 ?4 K! W, }3 n
{
) T- n9 \# W8 C0 y0 R, S4 r4 s& }- @1 H theArray = val;) G3 Z( n4 U' o* g5 H% C' g; s2 z
}( @2 l( Q3 @: y8 |) A
}7 `9 c: e( Q0 e% m
bgR = '0000' + fadeOutColour.substring(1,3)
$ N u' s8 U3 v3 K) i; J0 _2 p bgG = '0000' + fadeOutColour.substring(3,5)+ H/ m/ j5 {8 G: A; A7 X4 f- X6 T( z
bgB = '0000' + fadeOutColour.substring(5,7)
! `& r c+ Z" V; v currR = new Array(numLinks);
/ x4 e# @9 F3 r3 ? J currG = new Array(numLinks);" K) ?6 e6 V, B' V
currB = new Array(numLinks);
2 o) _$ `+ [+ j9 l8 s count = new Array(numLinks);
: m# o9 A6 b2 m, G1 B8 V fadeOut = new Array(numLinks);& N) l5 A5 n1 ]; u" {3 `1 [: M% z
continuous = new Array(numLinks);
! ]' y1 ]( h, K B newColour = new Array(numLinks);9 n% j5 W3 j) q2 V. R2 V
tID = new Array(numLinks);
6 i9 x& n- t" H: q! O: I) c redInterval = toDecimal(bgR) / numFadeLevels;2 r% t3 o& k' s( @% R/ U5 C1 }
greenInterval = toDecimal(bgG) / numFadeLevels;
- {& r4 I( J2 v: ~ blueInterval = toDecimal(bgB) / numFadeLevels;+ D" a' G) X1 e; U; k% e6 V* |
initArray(currR,numLinks,0);
1 |( S' ]( x: x* Z% ?5 r/ X3 Q initArray(currG,numLinks,0);5 Y7 Z+ O: T- w" W8 M6 \
initArray(currB,numLinks,0);: B" v. u H* W: b% Z8 ?+ b
initArray(count,numLinks,0);( P1 F7 z R8 W# M! ~# P
initArray(fadeOut,numLinks,true);
: X" A0 y' J9 j: s2 s- ~* s7 Z initArray(continuous,numLinks,true);# C K$ P- V; b
} ; Y5 L, _4 C L, J6 U
function startFade(id)
- q/ ]* ]( N, `/ @6 M& N{2 v' j3 n) \* ?; E0 d6 s
if(fadeOut[id] == true)
. w7 C: f# O, q6 `/ B" z# X { /*move colour towards background colour (increment)*/( @7 r4 d. z3 \, G
currR[id] += redInterval;
( k9 L' n! x9 Z' [2 o N currG[id] += greenInterval;
" o5 K8 C0 @& o( D V% p, I$ T; b9 c currB[id] += blueInterval;5 t* r8 p7 p+ i* J
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 G3 ?0 t0 Y+ t$ ^9 X+ M' u
if(++count[id] == numFadeLevels)
6 v) B" ?& ~- g& M, i8 ` {
7 l- b' ]9 G2 r( v3 [: F7 n fadeOut[id] = false;3 f: Y ~0 g' r+ }" M7 }8 l. v5 A/ y
} C' T' c) O+ x, z
}1 U! I: B( E X6 D8 Z3 e, c
else- ~7 E/ C1 O7 l+ L) e+ k9 r
{1 c/ t5 O" l% ~6 S& z+ F2 B
currR[id] -= redInterval;
2 w8 h8 ~1 h1 p, d
; h$ |: Q! f& L$ H currG[id] -= greenInterval;& k6 |0 v1 Q7 E( f4 @
; {/ J, M4 R) p8 t4 F3 I; y6 K' l7 S
currB[id] -= blueInterval;' x( U& V3 ^- n7 A4 O( G
6 x9 r& `$ {/ B! e8 |
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! t; n8 \# s/ K7 S2 g0 }
7 J9 W" \/ S9 n& j if(--count[id] == 0)% g9 r/ L$ m& \' F* m5 Q& L, s1 w
0 R6 P) e2 J) I& d {+ l& x4 W$ e/ `5 Y J
! n" c1 q1 z o7 X9 U% u9 ~
fadeOut[id] = true;
( E' ]! o: _& V4 v9 v& A1 x& F V' p. D8 a/ v, {3 k
}3 Q1 g/ N2 H" I$ y [
% W( U' [1 c6 Q4 Z
}
H, Y. f) K) i. C5 f4 E' B- T3 ^) Y9 f* P/ |+ l8 P r5 ^8 a
if(continuous[id] == true)# l V! A- r" d8 K
& k1 z: D5 G7 r# Z
{& g5 A9 g0 p# | h+ i
g% H" ], g" R- z document.getElementById(id).style.color = newColour[id]; / p! `- V5 K/ n3 O2 M) ` E. l
& L8 h! m- B. U | }; k" l) x7 B) g; H) M
1 B" _5 \0 g: k8 m2 p
else$ U3 E' h, J$ j
" e; L' P2 C5 T+ u' D) D \8 }9 r {9 l2 |4 m% ?; X: e
" }6 ?8 }3 v* {* z& f: L& u, T document.getElementById(id).style.color = hoverColour;$ h' W' ^. L! z- A; E* J
9 u/ O: g( l0 D8 \; s+ O }
( Z/ ], }( j, z- _, j6 G% k5 H) P/ i; X8 n
clearTimeout(tID[id]);
/ E( V5 r* p: {7 s+ c( G4 I2 S/ H+ z. L. Y9 G4 \
tID[id]=setTimeout('startFade(' + id + ')', rate);& u: R- U: ]; `
- \3 J0 K3 ~& E( ^: w* v+ J
}7 ]6 G. Y7 F8 m) U
( }0 Q8 n6 m+ ~* Z3 hfunction continueFade(id)8 V3 t1 X) V) _0 }
2 d+ H1 g# I. \8 S$ @{
" x; r) e( s: t7 C$ a* T+ I) G. A) X8 X7 S
continuous[id] = true;
4 D6 H5 e" q, R
6 G, o; T& A' G( e}
+ G: X u [# A1 b1 B4 H, d6 `: e$ Y+ e
function stopFade(id)
' }9 ~" R9 u- U' K# H" x/ ?9 z( H5 u2 f" k1 v9 h* D
{5 e d5 }* t7 w" Z3 u% u# E3 @5 t
! U+ {( P. `7 k. F0 P& M
continuous[id] = false;
0 Z2 V5 M& g& ~- n p3 `" J1 J) u& ^7 E: \0 j
}
) V$ D$ N3 Y1 p$ |( T) }7 }8 F
1 \, l* {5 u# q8 hfunction StartTimers()
6 S4 x! O; e0 {% t9 P3 W( g- w2 Q1 w: [& R
{ //set up an initial set of timers to start the shimmering effect* e. K! `6 N; t+ L
% I: K0 ~ ~) a8 ~( i for(id=0; id<numLinks; id++)
8 l. _( K' i f2 E7 y0 D P2 E& p9 U7 S& z$ c* E
{
( ?& W9 Y8 Q9 C- _2 x
8 [$ b& {) R- E t=setTimeout('startFade(' + id + ')', id*100);# D( E+ p: D9 q9 x- c
, c4 ?8 H; _& ?# L4 A: }: I
}
6 h# G# k y( q) q: z1 |- m0 n% _! n/ }9 s+ D5 n! d4 ?8 U3 Q4 [, R+ \
}$ H4 A6 s" |% ^, B' f& h, N, U
$ H% q9 Z. _' z6 p6 h6 @
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' h1 K% y! e% I8 M7 U9 z+ K% C. g! E" D, H% Q a9 Q' I' T* B7 i/ [
initLinks('#FF0000', 6, '#FFCC77');2 b: P/ F6 f( m" @
: {$ l0 ]9 G& l) Y5 v
//-->
2 ~% C; j5 g2 G6 A8 i5 ^1 |: N2 l* f0 Q) `5 R5 F
</script>
' E0 |% o- n$ b3 [6 `( m- n<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- q& a' Q( c y) {/ a- y
</a>, x* J3 E9 f) i5 c8 f1 W7 h7 B" J
<br>) v: @$ O( c6 g7 J+ o! Y! N1 O, |
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; M, Q& \; c. u" A; T
<br>
5 i! ^+ S; i8 S<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 c0 q' y" o2 q( V<br>
2 }& j% E6 ?5 k<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
+ c& R( H% ^- E e5 Y<br>
0 [8 p/ V, U5 Q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
r* K# v! L% h- x0 h6 D<br>
' _. p7 f; [0 S6 o# k( N/ [7 [<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
7 @5 \3 F: u+ E9 j/ N! z( T<script language="javascript" type="text/javascript">+ R7 s' _( T. k& [% q: ?/ H, }
<!--4 y9 }* Z; D2 t" c6 a
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
9 P u7 |$ V% f% [' W, t% a; r//-->
" ]$ e4 F6 I9 J# g</script> |
|