|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
$ X! B( a. k4 g. v3 L- a<!--
! `/ p- S0 F; i: G+ Y8 c: n n0 n" j// convert a single digit (0 - 16) into hex
S7 Z0 l: w( V1 G. F' J9 |function enHex(aDigit)
5 u' }! j+ r* F" r$ P- r+ G{; {4 \ S. C& C0 G4 E) z
return("0123456789ABCDEF".substring(aDigit, aDigit+1))# w1 }3 a- w/ @/ `- b
}
& Q+ r0 K( \; U/ I( X/ N// convert a hex digit into decimal6 O" A# \; b6 P" N% Y
function deHex(aDigit)
6 k* \5 I* F7 g" i k3 m4 T, `{
/ F8 r: r4 V2 b" |* T; L4 E. L" n return("0123456789ABCDEF".indexOf(aDigit))/ K8 S7 ^" G. d E0 i, K" m
}5 V3 \0 P* W% z; S- p
) o5 e2 o6 ~# e- O7 H
// Convert a 24bit number to hex
( x. s) k' D7 r, x4 M3 Efunction toHex(n)3 O. W) K6 l+ `- ?5 b# X* a1 r
{! n$ s. @5 y: P0 l0 }) a- N3 t
return (enHex((0xf00000 & n) >> 20) +! j" r6 F# c b) E" I& d; E+ X; {$ Q
enHex((0x0f0000 & n) >> 16) +
# b \# M3 T$ v3 L+ b- h) c( W5 p enHex((0x00f000 & n) >> 12) +
0 k, P# H9 z3 F+ w3 U enHex((0x000f00 & n) >> 8) +
; s$ w8 U ]( k enHex((0x0000f0 & n) >> 4) +* L: l& V ?! S, x7 X% z
enHex((0x00000f & n) >> 0))% C) o0 `% Q4 a! b6 }6 l. o- U
}. Q" a9 O( O4 }, {6 ?( h
// Convert a six character hex to decimal# y5 U7 M% d" D1 E. Z
function toDecimal(hexNum)
/ i5 E) ~9 E6 p# @! R{
0 g9 N$ H& Q& q7 A, g' U) n+ C var tmp = ""+hexNum.toUpperCase()5 ?4 D, |0 Q& `) S6 G! e
while (tmp.length < 6) tmp = "0"+tmp
# S. z# y0 Y9 B4 M5 D return ((deHex(tmp.substring(0,1)) << 20) + g- t% c' }. w0 x/ F5 J; a2 Y
(deHex(tmp.substring(1,2)) << 16) + d% n7 V+ n) H9 n& @; T
(deHex(tmp.substring(2,3)) << 12) +
: m* {+ f# h, T. T* {: I (deHex(tmp.substring(3,4)) << 8) +2 V' ?" K/ }. l1 g; t2 b4 }! i5 z
(deHex(tmp.substring(4,5)) << 4) +. a3 K) b' s4 ~& A5 N
(deHex(tmp.substring(5,6))))
- {: m8 g2 I+ w6 \}
, @- O2 \& H; R$ L* u, O///////////////////Shimmering Links/////////////////////
- o2 H8 z2 u2 v2 V, M5 s7 O//global variables
! r1 Y5 D# L3 r- Y& s# r% j0 yvar hoverColour
! `) x: j; ~3 c6 E$ tvar numLinks;2 \" |8 R. T7 k+ F- c4 Y0 c
var rate;
( v5 Y! D% u+ n k) `- ] hvar numFadeLevels;
4 L5 W9 t8 c/ S$ w7 C: [7 tvar bgR;
" m) X9 Z9 v) |" Cvar bgG; G# P) B& P/ N1 R1 d' X; w
var bgB;
( X! X2 N) P% avar currR;
! o6 P8 d* d+ I: K/ y3 dvar currG;
. v1 z! |' {; K1 `* _1 v, x7 yvar currB;
: V3 A# w# ^4 e3 y- `( nvar count;
. m% c/ \+ M) B9 a% c3 r6 {7 Cvar fadeOut;7 `; y/ c7 h" V
var continuous;
! O* e6 D# T" Z7 yvar newColour;& s1 r; ?/ O) g `8 Z
var tID;4 d2 i5 |( h5 R! l7 M+ w$ D1 Z
var redInterval;6 b! }/ D' q' n" Y% q
var greenInterval;
! @2 a1 a/ V' H3 cvar blueInterval;$ b9 \9 H2 |4 L& j% f
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour); Z3 B) D0 b# D7 |& A
{; D4 d7 J" I0 Z# x, e: u( ^
hoverColour = mouseOverColour;
) b1 n r F8 g# O numLinks = numberOfLinks;' @1 f) \. s( Q# k4 f, R( S O& y
rate = 1;% ?' J+ `" h* H4 F K9 b! r
numFadeLevels = 30;
5 t j/ F+ v8 C Z2 i6 ~( E% d function initArray(theArray, length, val)# `! B& r" O! V1 R6 R2 T
{4 j- V" x0 n# G
for(i=0;i<length;i++)# Z, S. }8 f0 R# l
{) {& D0 r3 w. A2 k8 n j* T
theArray = val;
0 P4 I# v1 l. u3 p. \* } }; |( x8 P2 s4 }+ h7 g+ G' b
}4 Y& p. P7 r, V s8 z: Z
bgR = '0000' + fadeOutColour.substring(1,3)
" w/ Y: Q* b* X. G bgG = '0000' + fadeOutColour.substring(3,5)/ J6 o/ w0 S9 e4 S4 h) l
bgB = '0000' + fadeOutColour.substring(5,7)% x! y9 E8 a' g# v; K9 g- q
currR = new Array(numLinks);9 ^. L4 @+ B$ ]3 K! ~$ U
currG = new Array(numLinks);4 J& J3 J& u1 y, b0 F
currB = new Array(numLinks);
& H# H9 D" H6 q. _: i count = new Array(numLinks);
. [# e2 }# ^6 F; H fadeOut = new Array(numLinks);2 i% {+ Y' k4 ^7 q+ @% G6 }
continuous = new Array(numLinks);: _3 K) r# M7 q$ c1 L
newColour = new Array(numLinks);
- n9 j ?1 k& X1 s. `% S: t tID = new Array(numLinks);5 ^% m" t( c- V# M( E; H
redInterval = toDecimal(bgR) / numFadeLevels;- }+ O1 t$ z1 _4 l+ k
greenInterval = toDecimal(bgG) / numFadeLevels;
% {* x9 V4 M* s) D/ k/ o6 d blueInterval = toDecimal(bgB) / numFadeLevels;
+ R |% p8 N* r/ W" k initArray(currR,numLinks,0);
9 m3 |7 z7 a" x. f' g initArray(currG,numLinks,0);
2 U; `) b3 v7 B initArray(currB,numLinks,0);
2 w9 ^$ q. O5 u1 [ initArray(count,numLinks,0);: s5 Y) S5 \6 x
initArray(fadeOut,numLinks,true);% s! p$ {( S8 X0 v( L ?$ n( [4 a
initArray(continuous,numLinks,true);
, Y8 |3 q+ Y8 v3 t U} 2 x' {( C0 p7 X% H0 h
function startFade(id)' @& }/ I4 x9 i" N# T/ Z4 i( G
{
+ g1 _4 ?9 q* Y+ W1 F if(fadeOut[id] == true)+ W( i& y U& s1 B1 U9 l
{ /*move colour towards background colour (increment)*/
$ f- @1 F l( A/ `$ e3 } currR[id] += redInterval;. x. n9 ]1 T- b4 h9 K& D2 H# w
currG[id] += greenInterval;
S3 P' [- K+ t# P+ J h currB[id] += blueInterval;
( }; b4 X6 v$ g) C9 ^* K newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
" B. t) q+ p! l+ r; D( S0 o9 j- b if(++count[id] == numFadeLevels)
# }5 j; w( a; @" k4 X1 \$ g { l/ P0 n/ ^8 D h
fadeOut[id] = false;: {# n+ P; g+ A) _% Q2 H/ U
} q1 M1 |/ V1 L: {3 O% m
}6 Q, q1 L6 l) `% j+ e8 F8 p, m
else3 A( y6 P6 k( g/ c X1 u+ ^/ C, `
{4 {& @$ j0 w8 G$ k! n/ I
currR[id] -= redInterval;
\ ^$ ]( @, W* [3 U
' ?0 }9 J& w: U' R8 e- T currG[id] -= greenInterval; s3 F+ V4 a& T( |& f% Q
9 m* X# v$ o4 [7 a( ]( \ currB[id] -= blueInterval;
' R/ C! ]! z D2 h
6 Y4 t7 w" O. m newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 o- c/ `( Z+ i, w) C4 ]. d& d, s' U
if(--count[id] == 0)
. {& B: z# q8 ]1 N- K$ J* q9 i2 j! L3 w% S
{+ ]/ H* W1 G5 ?' Y
6 I, v8 p. d# o
fadeOut[id] = true;* F* J$ h9 b- v* I: q
6 P& U- R+ z4 | Y) Z: I/ u0 z
}/ S0 {* K! F; L+ G* y9 J+ F
4 b, R' k# D& N2 ~ }
5 }+ O$ |" g3 Y: ^- l# |3 A2 ~
# [/ m6 A5 y( @' J5 I8 N if(continuous[id] == true)
+ n! X3 m8 d1 x7 I1 k/ [9 ?) N7 a1 \ Z
{
4 _' o A+ m. @! l
7 q$ q ?6 R# ^2 d document.getElementById(id).style.color = newColour[id];
2 ~5 j: Q% H$ i8 k- y" I1 X, ~" d! O2 Z
}4 W* _- }* [2 H: X! E/ z
; G* F z% p# T) x else& y e: u: j0 \% ^# x
8 ^+ f$ l Z, L1 d7 M
{
6 ]0 G: T" L: t7 |1 x" f8 W. D* K* l! [0 m; n/ U" s y: h- F8 E
document.getElementById(id).style.color = hoverColour;
2 z9 {7 f) ^- G9 t! P* c( v+ b" A+ |+ Z2 {" {2 |3 ]9 X. ]
}* Z) h3 g \9 X: ]* P4 \6 _6 a
# V t W/ G" O8 e- Y
clearTimeout(tID[id]);! m& {) ]& Q# S7 p
; m) c; Q- S& f3 V9 w tID[id]=setTimeout('startFade(' + id + ')', rate);4 v' W& Q) S' H- U
6 y4 m: R& I0 R6 L) h+ H" {0 x}9 N/ Z: A2 W3 G( V2 U; \0 I5 v0 X; [
$ U: A, D$ r! b- V! I$ s+ L# @function continueFade(id)1 B+ V; |) I. D0 ] L
( F3 r4 J" [8 v8 K, L! z- D$ Q! \{
, }8 D+ ^, i9 g2 c$ n0 w0 y% E( @/ I5 w l) f; r) {1 e; L& i
continuous[id] = true;8 W/ s% e: K# y+ Z
B( v: F7 a, \, X& x! a
}, @, J9 X( Z; @, N* N
% u; ?+ A4 \0 B! P, G- i
function stopFade(id)! {/ p3 q7 [( B" v
) r6 I6 h9 G: M. Q& o6 U* B0 _{
+ b+ R' u; P1 x- p
- f' G" k+ l$ p* v continuous[id] = false;
# D( E! ^4 r: K' u5 W* J+ y; x$ O9 j# Y+ j+ I; S
}
0 T0 J/ A C8 q5 M2 {6 ~2 P: G f8 p8 z! C6 ~' @+ y8 l6 U
function StartTimers()
* c3 h# W2 V: l
7 i+ N) ^& t: r{ //set up an initial set of timers to start the shimmering effect! D! ?1 I$ C: y$ Y
$ f* Z! T! U% B, o- D for(id=0; id<numLinks; id++)
: @: C n* }% {. D3 L' |. c
6 j% ~. L' f+ |, Z( a- L" } {
( f$ B4 c& ?0 @0 g5 v# i3 ?( L% k
9 E n! J7 G! P2 A1 a% e) Z t=setTimeout('startFade(' + id + ')', id*100);, L8 o3 w1 O: ?
6 w1 Q6 M5 h. ?8 `
}4 y% c, y! o) J/ R3 [, x4 G
2 f2 H0 j/ `8 `, ]
}
! V' z0 p3 H* m2 g$ A0 h O- t+ z9 z7 C# f
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- |. C7 S9 `+ Y1 ~0 K
3 n; ~) D* r1 [) J! Y0 d
initLinks('#FF0000', 6, '#FFCC77');
0 K2 c7 p5 z# Y1 |% Y$ [- l3 @
1 \5 T3 z# E: d: {$ I//-->& M' s8 G" G$ r6 b( Z
* z7 P3 x9 u3 G5 S' I2 ?7 M; P
</script>4 `' R3 ]2 g; T2 o4 a4 e; c
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
3 l, p, S+ I O) U; T) f</a>
$ h3 F6 u8 U& ^& |( C2 g8 |7 W* b9 Q l<br>
: E8 A, m; M k$ e( Z) N4 {, y0 X9 ^) ?<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>$ ]6 o, a4 m" o3 n
<br>
' ? C: Z' l% E B9 V+ v# w<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>, h1 q: P- ~3 O* j' m! \) x
<br>
) F9 D; M$ ~' i/ j$ s' N<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
/ m/ j. H! w8 h* C* i$ c/ a1 h0 z<br>! O% U; Q9 o$ }* y, K# y6 x& a+ O( k
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a> c0 x6 A0 ^0 \$ D
<br>2 J0 K D+ h3 ]7 C3 x1 e
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
: f1 w5 b2 z$ V0 g3 s) I& B! K3 j3 P<script language="javascript" type="text/javascript">& Y4 D! v, ^% ~( J5 N G
<!--
5 j3 I4 j6 y# I& c3 asetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering( z5 e; t) U3 j& }; E8 k% s, [4 q, C
//-->
- W2 `7 s# [+ }" o</script> |
|
发表于 2008-1-21 20:48
|