|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
2 G' y6 Z- N! U; q<!--
" D$ u* {9 p' c# D- M' p// convert a single digit (0 - 16) into hex* ^2 D4 ~# p- e
function enHex(aDigit)
' k T+ L! M" B3 N9 q4 S3 m{
' O% `- r& |1 P return("0123456789ABCDEF".substring(aDigit, aDigit+1))
* z# F4 h% K- r. B% ]* N% s}' Y! i L% l! L8 @0 O3 l
// convert a hex digit into decimal2 A1 o- a; k& q* }
function deHex(aDigit)! h% r) F5 t3 a. n, Z9 [
{$ g! H9 U! d- U ?
return("0123456789ABCDEF".indexOf(aDigit)). T( r, }8 P4 n+ \: U9 \
}
, t6 Z, _; }5 K3 z
8 M3 X0 _; ?: q0 N7 t// Convert a 24bit number to hex( s9 O* B# ~& b) f( D
function toHex(n): t4 v4 |: d" I# w$ K) ^
{+ C# E( B3 B) G7 ]! i. _
return (enHex((0xf00000 & n) >> 20) +
2 g" `1 z: d( O; o! e enHex((0x0f0000 & n) >> 16) +* K7 e! V# W9 b! C, d/ `
enHex((0x00f000 & n) >> 12) +
' y8 ^8 r( O8 ^ enHex((0x000f00 & n) >> 8) ++ _( \$ \& ]; F" @/ Q6 J: P
enHex((0x0000f0 & n) >> 4) +
! O+ L9 D9 k9 d. o6 @ enHex((0x00000f & n) >> 0))3 ]8 R+ D2 z5 P- D4 o3 f% S
}
$ Q: G1 f7 f; |8 c// Convert a six character hex to decimal
5 g8 ^* u" c/ ~8 tfunction toDecimal(hexNum)( F( b4 Z& M& b, |* N. h
{# d( w* r9 x, {1 b9 E: ?% n+ ^% w
var tmp = ""+hexNum.toUpperCase(), N8 ^: d1 ~+ ^" f# d
while (tmp.length < 6) tmp = "0"+tmp
0 y: \- `2 E' p# t& o return ((deHex(tmp.substring(0,1)) << 20) +5 F6 H. v" \8 X- P# |) `- ^
(deHex(tmp.substring(1,2)) << 16) + / u: {$ S' F/ W; w& d" P
(deHex(tmp.substring(2,3)) << 12) +
- U# O& r5 I3 E/ u1 v (deHex(tmp.substring(3,4)) << 8) +
T- f( c0 T% L1 M9 ], [2 x (deHex(tmp.substring(4,5)) << 4) +
' K5 ]- N5 r+ o (deHex(tmp.substring(5,6))))
9 P4 I F9 j- z2 O8 k% ?9 @6 f: R}
c0 Z) ?& r, t3 E7 w+ Z///////////////////Shimmering Links/////////////////////# y+ e' I, e' d5 Z; H
//global variables
; {) ?+ {/ [. W8 gvar hoverColour$ M2 G p$ I4 M5 U
var numLinks;9 W* l* G- `% B7 {) c' t* ?) `
var rate;
2 o* c# i) n. Cvar numFadeLevels;
) o2 ~% v5 y- o" E* X# V6 r( Xvar bgR;' H' e' y; }. x- T A9 I5 `
var bgG;% A; Y3 I+ d9 g8 o1 u# S) R& L
var bgB;0 L- w2 G; P8 `' K# S! `; H3 S
var currR;: u9 p* C* C8 r
var currG;
9 C0 L. P( {& F5 wvar currB;
4 W! P, w4 G2 Svar count;. t& o' ~+ b7 }5 S
var fadeOut;
9 k0 @5 \& ~( qvar continuous;
1 c" o# `; j5 [$ p [( y+ l$ wvar newColour;
& e) r1 b$ U$ y/ gvar tID;, T+ D' `5 p# k
var redInterval;9 g! E/ {$ B% l* h2 W
var greenInterval;
$ M7 U3 X, f3 d) O" b" X3 G+ c) |var blueInterval;; d4 ?& Y' Y8 d0 Z9 ~+ H( X- x6 Z
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)( l6 I; q1 p' [6 x5 J1 _
{
& G; W+ X, K. I6 @- ~, | hoverColour = mouseOverColour;
1 i& J3 a( Z: U2 ?; L8 } numLinks = numberOfLinks;
2 z7 r N3 V! ]( T- z rate = 1;- \( A0 [+ e( h
numFadeLevels = 30;
& ]9 L4 c7 V3 S- z9 ]8 l function initArray(theArray, length, val)
$ T N# T) b1 u# g, `( O {
" v) ~3 f. |6 f' D2 g4 \+ T' \) t1 Q for(i=0;i<length;i++)$ H5 B+ e% T" d y
{5 @# S+ c! N9 {+ n2 q
theArray = val;9 D1 l: [, y2 V
} b/ ?0 n" i/ Q6 G5 `0 f
}
3 R9 _5 I: m% R bgR = '0000' + fadeOutColour.substring(1,3)& B3 P; c& N. a8 Q3 a/ T; _
bgG = '0000' + fadeOutColour.substring(3,5)
, W) L7 K' Z# z5 v4 N# I) o- L bgB = '0000' + fadeOutColour.substring(5,7)
$ p2 e, q; A; y8 M3 Q currR = new Array(numLinks);
0 D0 W% R+ S( U currG = new Array(numLinks);
$ I1 z3 i; [2 M4 ?2 T2 z9 C5 H currB = new Array(numLinks);+ r8 h$ m' V( U5 }
count = new Array(numLinks);
& k# i: x9 D: r& ]6 F- y. v2 ^) i+ C fadeOut = new Array(numLinks);
, V5 t0 k1 ~2 ?, S. v; ]: {9 R continuous = new Array(numLinks);4 B, D& e# z& I' M. I) y
newColour = new Array(numLinks);8 `$ T2 ]$ i9 W# q
tID = new Array(numLinks);6 ^7 o5 t/ r9 y+ V! v& r. L/ P: X
redInterval = toDecimal(bgR) / numFadeLevels;
% d6 [! T8 w r$ I# b greenInterval = toDecimal(bgG) / numFadeLevels;
0 P# z* b; i& l5 k6 x4 d blueInterval = toDecimal(bgB) / numFadeLevels;5 r8 k ]$ c3 T/ z* Y; j
initArray(currR,numLinks,0);; P }+ r- x# T0 L7 s3 M4 ]
initArray(currG,numLinks,0);( o f0 Y. P4 [" q
initArray(currB,numLinks,0);
2 h+ H3 k A u7 f initArray(count,numLinks,0);; }& u F9 ^4 J6 f+ c
initArray(fadeOut,numLinks,true);
3 t6 ?7 g1 O) P) f initArray(continuous,numLinks,true);
/ k8 s% s2 S: e}
3 j* g- \5 e+ T" cfunction startFade(id)4 k+ H6 K) j. F0 N! p$ i1 y
{; F R) h+ q+ D3 s! @# \
if(fadeOut[id] == true)+ M6 A: g9 [1 V2 b- w! \0 j/ ~' D) ^
{ /*move colour towards background colour (increment)*/
* j& R u( x ^' g currR[id] += redInterval;; H5 x4 T$ U% A# a0 v
currG[id] += greenInterval;
% s( M2 V9 ?" i( k! f currB[id] += blueInterval;
& y5 z1 b6 W- ~0 b& y# ~; W& E4 x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ u2 x4 h6 @* \6 A
if(++count[id] == numFadeLevels)
) j, c5 m( F. z4 B {" q% w% p: F& R0 e/ R- q
fadeOut[id] = false;7 w: M- M+ R4 l( v
}
7 R/ C$ `, Z/ E ^# u9 _7 h) t }" q0 B0 {. H m! n5 c
else
) B: g, i4 V1 E4 J2 P {1 C ^/ R$ y: C) @, k! j
currR[id] -= redInterval;
2 z0 u9 x S4 M- i$ R' O O+ C
1 H, i. G D% V6 h currG[id] -= greenInterval;# i I! [! t& R6 ]- Y" U
! ?+ y, [* A+ t. O8 N currB[id] -= blueInterval;
, s$ S8 ?# |/ B% Y4 s+ s" ~. |0 a
5 Q4 f2 }: g6 | newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 j# r' Q5 ~) b
+ Q; g3 ?* y- B if(--count[id] == 0)
& e# J Z; ~ ^) p8 N
$ D' U9 i+ m& l {
0 B) c$ l' E; Y8 ^8 [" l/ G0 N, V/ U$ `
fadeOut[id] = true;
1 N- N- L/ a) t8 N
: U' m) g3 v. k }
7 D; B% y2 f A# @9 u1 Z5 @
% K( ~, R) E; O/ n6 e1 ]5 `3 f }
( m7 \6 F' w P& T& j& H
1 L1 ~: X% T8 b if(continuous[id] == true)
* U- v- Y' s* D+ t3 Y4 l& ^9 @3 S3 Z8 [ h! W2 i" w. S
{
' T) z9 \! g( @! I2 b2 T, a1 |) f/ @0 {
document.getElementById(id).style.color = newColour[id]; ) z' b. G6 r% @/ h2 v' U
5 V6 ^: z; G8 W$ l5 ~
}6 b6 u/ m6 m* m( O% o+ \
7 ] w; }/ ?8 ]$ B8 \. e else" A l6 t8 l7 ~0 ]( r6 o
" E9 V9 T% L( v {
0 g. H f- S/ c) `' D% I/ |( T6 ?* a8 _
document.getElementById(id).style.color = hoverColour;
- Q8 \2 r5 Z: l
1 v1 y1 u+ q. X2 K2 I% c }5 o+ e: R) W2 W3 I- m
: [9 I9 a5 w0 [% y: w+ \. l4 p
clearTimeout(tID[id]);
6 j: k( \# d7 u% z# Z
. a. |; X1 s @0 L! h/ U" ~; G tID[id]=setTimeout('startFade(' + id + ')', rate);
- Z4 U& v& P5 a* ?6 N' M' ], @3 F2 k$ q
}
4 L' S2 {8 M) H! V: m" N) Z; b% r3 D/ N+ S, [ h- C' d
function continueFade(id)& l+ P2 g: J/ P* b6 [+ h6 e
6 ]. G& N7 y/ c4 \0 h
{' x W8 I1 [: F) c, j; T0 C4 Q
; b& ^# B; f, T" E
continuous[id] = true;
" _! n- Y& r h7 u, \% v; ^ J9 ?& ^/ }3 O9 S+ ?9 y
}
: B7 f/ `5 B, n( [( n; J0 N; m# y- E# M+ ] A$ f0 j; w& ^
function stopFade(id)
5 z3 \8 [5 e, Q' r6 \( H! r' ~6 @, j' z/ ]
{
# e$ ^! j3 q% `* D% ?- h! }. F! l9 B) v% \! _
continuous[id] = false;
. K1 J" X% {+ ~' X8 k
$ T& \8 [' s& v2 k3 y. o$ l- x3 O}
3 h3 a/ `* {: R; \
5 q Z* O# N" j. c, ]6 dfunction StartTimers()
) `' J6 v7 k4 v5 L1 M# }
& S# e2 Y+ H; A- B# r2 x{ //set up an initial set of timers to start the shimmering effect
, z5 h% X5 e5 s! N
0 t$ Y# }* ^9 E- s for(id=0; id<numLinks; id++)3 D+ A- X( t$ ?& r G$ |6 ?. B$ V
9 d! P- k: g+ y; l* H3 G: M9 s& ]
{
( ?! J% n9 S. Q6 `! r; ^1 A. r$ n: r/ T6 S6 Z( m2 c0 n; G: _
t=setTimeout('startFade(' + id + ')', id*100); w* _' }. H, t4 v A" m
9 k$ v) v1 v7 L" D* I$ a# Y/ H0 l
}: e: z" B2 D* t# J1 r" O
2 _. j0 ]+ S0 W9 w: o) J- A+ H}* }& T' t+ }/ w9 C7 x/ L/ X
2 D4 L3 U$ J- h n& Z* Z. e, r//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 @3 C! h+ l/ R+ D+ B2 U
0 V5 Z2 I# l! v s8 _" k
initLinks('#FF0000', 6, '#FFCC77');
7 {6 b+ P: H3 `0 W# N7 v
! F( g S7 ~3 I% ]# x//-->6 S" t- d' K0 t
( }7 [; G. F: k! v9 C</script>' O5 K( v6 Q+ b% j9 b! D
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
9 [8 r; }% s0 ?5 x* Y$ N</a>: T; {' k/ t- `% ?0 E- K8 ]! ?; C7 M* c
<br>
% \! `) K& S* h* P<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
& i) z7 j9 B/ M* G$ P9 N% M<br>' s, v8 Y' u4 x6 B# d7 r* I
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 g$ [ q/ w9 M4 _<br>
3 i- ]! ~+ a0 s3 R* k<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
+ G6 ?& V* H Z<br>" \ y9 _' \4 S. Q' T$ P' V& u
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
5 K7 @& A. s% }0 h {. y- U4 {<br>
! ? g- ~! h. l7 h<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" k* q: z" ^$ |) e {8 l4 X! z# q
<script language="javascript" type="text/javascript">1 n& \7 l! B/ R$ A: \
<!--3 R. m r9 c% e; \, p" s2 x+ l
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
, [2 W* G( B G3 J+ }$ v8 q//-->& |3 r) H) [; A, I$ l( ?8 v
</script> |
|
发表于 2008-1-21 20:48
|