|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 |- n6 M; |) `% [( a$ B- v<!--' \$ Z. H9 q8 Z" S; a8 T E# ~- g
// convert a single digit (0 - 16) into hex
3 R6 F3 T! K( c+ ?4 b; e1 f5 W) c$ cfunction enHex(aDigit)
, ?" l5 I4 v+ |$ L W' ^8 c{
* |9 K% V0 h) s9 t0 Y7 D return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! b( ^9 S+ i) L2 |1 d}' `: w& X6 |! U# \8 Q7 Q
// convert a hex digit into decimal
! g) {; G5 L5 T* x% A, F8 yfunction deHex(aDigit)
9 ?; D% X4 Q( V% R{" H) O! @9 {0 K) f+ q3 t* a
return("0123456789ABCDEF".indexOf(aDigit))
5 f1 ^ y4 [( @# t# s+ ~}* {. Y0 A( Q' ` O4 I
) k* `6 w9 z1 U( S# y// Convert a 24bit number to hex
+ X/ J5 {6 E, m c C4 E1 Dfunction toHex(n)
9 L/ k" l) F* T3 l6 B{) y1 z) B0 T8 @
return (enHex((0xf00000 & n) >> 20) +) v3 j. L- L% Y( C
enHex((0x0f0000 & n) >> 16) +% A' b# e; B2 k* }4 q
enHex((0x00f000 & n) >> 12) +! ^. P- n/ l5 {& f; I. H5 g
enHex((0x000f00 & n) >> 8) +
" O* {( e! W2 X) y4 h enHex((0x0000f0 & n) >> 4) +
) n, v% D; H; @ enHex((0x00000f & n) >> 0)). Q7 _7 ?& {" T1 y( p+ b, Z- ]
}3 S) d: v1 L2 P* y8 M/ |& f$ c) V
// Convert a six character hex to decimal0 B: ?! K- d# F( X
function toDecimal(hexNum)! W5 K) i1 Z0 l j0 c+ E- U, E1 O7 g
{+ y% M5 {# C* L, w2 V, U
var tmp = ""+hexNum.toUpperCase()
' {* x" v# K+ I" \8 o, \ while (tmp.length < 6) tmp = "0"+tmp
4 v+ p4 B+ S% |% W5 X& t return ((deHex(tmp.substring(0,1)) << 20) +
; K7 Z4 b [: y* v$ t) U* B! D (deHex(tmp.substring(1,2)) << 16) +
0 L/ F4 X' f4 F9 G! S H4 L6 B (deHex(tmp.substring(2,3)) << 12) +
( U9 h) y% W) B+ e$ F (deHex(tmp.substring(3,4)) << 8) +9 q @2 a6 Q* I6 @' h; B
(deHex(tmp.substring(4,5)) << 4) +
7 {. C& ]! u$ D4 c* G# C! Q' O (deHex(tmp.substring(5,6))))
# Z- u9 T7 o i1 F}
! R) _' `7 P* b' ]7 w8 ]/ x m///////////////////Shimmering Links/////////////////////3 ?. K$ ^8 u' m( r
//global variables
! o9 R- j* V( U5 B0 h4 `var hoverColour; O5 X. l# R6 W& I4 h* B
var numLinks; N: g7 F! V6 f
var rate;
$ U3 X" q; M4 T* Y- c: b' fvar numFadeLevels;. l; Q4 K. i5 C0 l& }+ s- u
var bgR;( u8 m4 k) K6 y- y
var bgG;- T4 ?3 f# t2 f, Q8 Z- H+ S j
var bgB;& @8 q. c! b. }
var currR;
- a; [+ _& a1 {( gvar currG;/ v1 Q$ J9 f' y( z2 Q
var currB;, _( ^( {4 z4 T. @; Y, X
var count;2 ?: Z7 `9 d2 I8 h" ~
var fadeOut;6 }, u% y! t7 F6 p
var continuous; b/ T2 }7 ]& h2 C) {
var newColour;
# B- Y3 u) @' J" rvar tID;* b3 _ N9 Z' |$ P+ W B! T; d
var redInterval;. K' |: U4 [ o9 Z
var greenInterval;
" B& I$ p! [; ?! q- tvar blueInterval;
9 c8 m# Q6 O7 j9 u3 E# d' ofunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, u7 {3 K/ w9 \, U9 X" f. Z' v" r% c{" w6 y& ^: ?) b! w3 D! B; C/ t% L" g
hoverColour = mouseOverColour;
, r( z7 d0 t" m/ I% C( g0 w% h3 G numLinks = numberOfLinks;/ _6 Y' @* c* _& _( R
rate = 1;
/ I& f0 B) p! D) [7 E+ P numFadeLevels = 30;9 c" F& B6 X1 k9 I# Q
function initArray(theArray, length, val)
4 f! |* s' E! F8 a- o4 ~ {( S {
+ ]% z/ F* O1 |' Q- a0 U" @ for(i=0;i<length;i++)
`% l- P9 @/ ]8 P {2 M- W* W0 r$ T' _0 m+ l& w( ]
theArray = val;
. ^. l @% [/ ^3 B7 C1 v }, }! p1 N$ t" S2 _ O; L
}6 s& ^6 v& K$ n' v
bgR = '0000' + fadeOutColour.substring(1,3)& W- s# e7 `' \$ V2 _6 ]; {9 H: H6 K
bgG = '0000' + fadeOutColour.substring(3,5)2 n) b0 o: k& j7 \/ p
bgB = '0000' + fadeOutColour.substring(5,7)
" w' T+ P! }3 [4 g6 f$ \ currR = new Array(numLinks);( E8 i; f5 M& g9 Q
currG = new Array(numLinks);2 r3 Y5 \ i* y+ p
currB = new Array(numLinks);
9 k+ A. \ b' f count = new Array(numLinks);, g5 s' A5 ?! k5 O* Y: F
fadeOut = new Array(numLinks);
2 {# G; e0 M' r' \( ]0 |, G continuous = new Array(numLinks);
- q8 `, n: D# d) r& ] newColour = new Array(numLinks);0 D1 x' v+ S6 ~7 p) h( u+ j
tID = new Array(numLinks);
4 f, [8 [* r: j* [; S/ ` redInterval = toDecimal(bgR) / numFadeLevels;
" H+ l H( s$ u" F& } {' B! n4 V( o greenInterval = toDecimal(bgG) / numFadeLevels;
7 T' b6 q; p3 f/ p3 L- J blueInterval = toDecimal(bgB) / numFadeLevels;
: H& `* b+ b& p. N1 r) m: [ initArray(currR,numLinks,0);6 |; l' n0 u2 E1 m) b) K# {
initArray(currG,numLinks,0);4 }: S4 o2 L: }$ T3 q& f5 h5 E; W
initArray(currB,numLinks,0);1 E" m8 H# v- h3 W" |& Z: U- r5 k
initArray(count,numLinks,0);+ l% x0 r4 d* ~$ k
initArray(fadeOut,numLinks,true);
6 m, J/ G Z0 q+ j8 W' I1 }& ^ initArray(continuous,numLinks,true);
1 o% j+ ]! K8 {0 {} $ j% B; p; b9 y' D
function startFade(id)
, o. ^* b' b5 [$ ]: L3 P{. f3 M/ }& B( b9 u
if(fadeOut[id] == true)+ a" t9 o2 D* L/ A+ E
{ /*move colour towards background colour (increment)*/8 h* G# c/ r4 z" _4 S8 g0 K
currR[id] += redInterval;
& F6 C5 K9 c- _" r$ |8 B currG[id] += greenInterval;
) t; \5 A3 w0 s0 U8 I: H4 s currB[id] += blueInterval;3 o" o# [/ ]+ I/ I0 Y5 t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% Z* P( A& U, f; Q4 k3 ]* R1 Q: R if(++count[id] == numFadeLevels)
* {: R1 q: H5 ?0 x2 ? U" O {
0 g! Q; ?' D4 t, i5 r fadeOut[id] = false;
2 `! k9 ~( k5 i4 ?6 V! M }" M ^# X& ` x- e% Y V8 v; \; N
}
/ D( x8 I- \' c; z \* U+ E# `7 E else0 P, _4 G# ]6 x
{
& V, |) r2 Y4 X* c/ h currR[id] -= redInterval;) L; i$ g! l- u
5 F# }+ C9 g, V# c4 j) n
currG[id] -= greenInterval;/ S. [8 V' G; T6 R" \
S' [ S- L- f) T currB[id] -= blueInterval;0 W/ L4 d* m0 O! F/ _
7 _1 ^, S$ a7 O% K0 ~ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! y; m/ O S8 l& O* }* [6 p
5 N! G& ?" x/ t& c$ F$ h4 R
if(--count[id] == 0)
\# K) }# N- k# ]3 `
) u6 Q8 V& U0 g {
( U9 o2 b. @' i
# F# `! S2 L$ K0 Z8 U# d fadeOut[id] = true;
% s) V1 k2 e1 K: c/ d
" B, p0 w6 Z8 ~& q# _1 s6 w+ |' q }
" |% R: v& |% \, B2 }! y+ w; S: U0 L2 B. q, E7 q
}) k& E3 N, j* J# c* Y8 P
5 N2 E# j2 H" c2 I8 ]9 k if(continuous[id] == true) H. z/ J) j. e8 d2 L8 r* x
9 E1 u1 n- W) b/ k9 a9 E
{ J7 G# z9 m- Q# L& Q3 j! K2 K
( i* s* B- q8 `3 r
document.getElementById(id).style.color = newColour[id]; / q; Z$ h9 r% D6 k. h; f+ g$ Q
, t! [% c, c4 r z" b; C6 t }9 ?5 V+ m( K; b. k& `0 Q: s
% I: y$ u$ ]# R l7 a4 f4 ?1 j
else j" m9 m# Y+ ]8 S; _
$ t# S* o6 a5 B3 S1 m {
/ q; x s8 N4 h4 a# S' m; h
" d, W& Y" a' v( |- p1 a* Z document.getElementById(id).style.color = hoverColour;
& L5 r% G2 o4 v3 i5 V
1 [0 b: X4 c" w }
8 c# r; k' |! G3 n* w+ b9 Y) M" e, U/ f9 [. Q8 P! z0 ]
clearTimeout(tID[id]);+ M( u3 g2 ~: l: _5 f
; F& K4 @7 }3 F" I) Z4 X
tID[id]=setTimeout('startFade(' + id + ')', rate);
( I; X$ b7 V: e y! w/ ~
9 X% k/ s% I& k& J& P/ X" W Q+ l}
9 R4 |* U1 _$ s% Q& K* ^/ X, D1 _5 _0 B* s* v/ N, `! E9 u1 I
function continueFade(id)
& @: O' W3 z( [9 D; C! w& U
7 P7 e2 Z4 L4 o' \, } c{ s& k5 s8 j8 i4 G4 I
' E! u8 r$ W g# U" T continuous[id] = true;
' q; ]) P& E+ g* d- O: Y% r( }. K6 M2 u5 u+ Z
}
, V# K/ c. g# {4 J: k2 Z
: v4 B2 V& h; Xfunction stopFade(id)# E( I6 ]) m9 U+ {/ Q0 U G2 P6 W
- h) ]. k- h4 R. m
{5 n: p1 p* k; A) a4 H& v* B
* z" }; \1 g! E$ ], z
continuous[id] = false;
, r' K* P6 F: x$ O# f
& k$ |! u' y& U4 Z& R. P}
4 @4 {! A, X$ I' F: L2 s. b7 ~- C$ O0 P0 \
function StartTimers()5 i6 h9 y: {& b. j% u, h
5 `' h* i; F# ~! V9 j3 C$ d& {. I{ //set up an initial set of timers to start the shimmering effect/ y4 m! w/ ]2 Z; V, Z
0 `$ m6 k, {+ t5 R: r2 h: z- T$ r. c for(id=0; id<numLinks; id++). g" t, @- q4 Z. l' B1 J
" \1 }; A+ E4 |( t& V {
2 h" z' x j% K# y% r ~
" q3 G* y% U$ h' `0 }, T t=setTimeout('startFade(' + id + ')', id*100);
! v1 s4 I |9 j: H5 O+ ^2 u4 o! N- Y% B3 a2 w1 F
}
9 M# d; _+ V; [* z4 D* ]9 r# A8 G/ b) c3 W
}
6 k- z5 ~: H( d+ b- R1 T! A6 b5 b' O+ r
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' R8 W4 P( M9 U" I5 O* K8 ]8 r7 }9 ^5 I4 Y7 L
initLinks('#FF0000', 6, '#FFCC77');
% {$ i% j& O3 n- Y" A/ e1 L7 T1 V9 G! x
//-->
8 [' i) G7 \3 n' i
. S$ O1 x3 f0 z8 }1 O</script>
1 Q0 d8 n/ o% M<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
) j& j. ` V e# q& e" ]</a>
, y$ g6 q( P6 s3 Z<br>
, M) h1 ]8 e9 z" I/ @) V$ {<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>0 D6 w/ V7 S5 Z' o
<br>
' w- s) k! v! `) {<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>7 P! V6 s. f3 Y2 K. f( U
<br>
8 r6 M/ D: b: Y M, \0 _, R<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>! ^: f, \: y; a1 {. H4 e1 w% n
<br>8 o: _- ^7 ?! n- D1 g9 a! s
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ \* n0 G- V- z" `1 P$ x S
<br>
" L5 @0 H' k) h" a. n% B3 n<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. s" d( l! ?7 [. n# h: e
<script language="javascript" type="text/javascript">
7 N! S+ E3 N7 P<!--
4 ^; g9 C. u8 O* RsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 |: q$ B" A. V: o! {//-->
; U0 }. H2 i. A, a' r/ H- f- C</script> |
|
发表于 2008-1-21 20:48
|