|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">* n! E8 y0 L2 T& G
<!--* I5 X% G, v& |: b1 T' ~6 {
// convert a single digit (0 - 16) into hex
, V# g3 T K; ^) m4 V8 m% ~function enHex(aDigit)% Z- `* m% @ u" Y
{, W4 a% ~% [% P! v/ m8 |( Z
return("0123456789ABCDEF".substring(aDigit, aDigit+1))7 q7 H+ C5 J6 i8 w+ ]7 q- s1 g3 o$ p
}" R2 f& w9 n/ l& U: i4 |: q
// convert a hex digit into decimal" o k$ ?. K8 d, T4 Q( B! N: O6 c
function deHex(aDigit)
: N+ }- u1 E; t+ G) x{
; @5 E/ U- C' }) Q3 G( ^ X, X return("0123456789ABCDEF".indexOf(aDigit))3 h& q3 p5 A3 q+ K& t
}
- N5 Y" ?5 E- ]9 Z) Q9 i$ v/ [
6 t4 C7 X( f; |4 i0 r2 }2 N) M// Convert a 24bit number to hex) j1 h L: v H4 Y4 `+ X
function toHex(n)) d7 A6 H" T6 o/ W% H
{
$ \; g! ]* R% |. P5 o- X return (enHex((0xf00000 & n) >> 20) +2 B( T0 g: y$ L
enHex((0x0f0000 & n) >> 16) +( i9 j! X* V4 _" s
enHex((0x00f000 & n) >> 12) +
" h- H9 p' y5 C) W enHex((0x000f00 & n) >> 8) +- F2 ~$ }4 y" B; B6 G1 ]$ }. K
enHex((0x0000f0 & n) >> 4) +
. [( Q6 ~2 t: C V: V enHex((0x00000f & n) >> 0))
2 A0 Z8 p" L: T `% l}$ z+ b9 F/ L) w& U. x8 j7 l
// Convert a six character hex to decimal
9 C9 u) W4 g- O1 L+ Ifunction toDecimal(hexNum)5 j3 N Q" E! x' F. E7 A
{: z i1 e& s7 Y5 ?* J& w2 i9 y
var tmp = ""+hexNum.toUpperCase()+ H% W! R$ [$ ]: X' F$ Z+ X
while (tmp.length < 6) tmp = "0"+tmp$ i$ m% V; p5 Q0 B3 t* u u
return ((deHex(tmp.substring(0,1)) << 20) +
0 P4 }: r0 |( ]! Z (deHex(tmp.substring(1,2)) << 16) +
" {* n8 y) i+ u$ L4 L6 W+ l (deHex(tmp.substring(2,3)) << 12) +
3 M9 y4 Y$ u, D% ?+ J" B (deHex(tmp.substring(3,4)) << 8) +* x% G Y2 K6 f3 N% N( R" k" h
(deHex(tmp.substring(4,5)) << 4) +6 p& U- B. P% x; I# \' k$ J
(deHex(tmp.substring(5,6))))
8 n* ?) X- y6 @9 t4 ~, d0 z}
2 \+ ~ H$ R7 T3 `* c///////////////////Shimmering Links/////////////////////4 z7 d$ l: {* `. S3 Z; ?
//global variables/ C9 A" T& `$ n. v& C% u; U6 |
var hoverColour$ h- B, |% t) t
var numLinks;
& i8 ^5 A4 v% b0 }var rate;8 } Y, d5 S: R1 J+ J6 ~
var numFadeLevels;
$ L& W- ?( @# t4 _6 p3 A( ~var bgR;& L5 _! s6 a: t& g9 D5 m
var bgG;# r; I* P8 b$ C3 ~2 ^
var bgB; \; M4 s% _' w- N* k2 Q
var currR;3 l' T# U* i3 k/ `/ c. e
var currG;
. ?1 g! t3 c, V$ rvar currB;
0 [/ b# m$ h6 R1 M+ E& {4 Dvar count;
' E& Y) ~% b# ~* P2 _var fadeOut;
$ H8 M5 f3 C' p' z9 h6 j# ?9 ovar continuous;; W% }( O( A5 g+ l7 ?
var newColour;
8 }' ? X t- E* W) Tvar tID;
, @* S4 w# X/ O% E: i4 jvar redInterval;! J- |; v, J' w$ H ^+ w
var greenInterval;
, N3 e- j; X7 bvar blueInterval;# h; i/ |7 L/ G
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)# ]9 p" i) C2 n( p# d4 [; U! b
{
+ t- b7 U- D# F5 e hoverColour = mouseOverColour;
9 t7 i; ], B. N: B; ^/ m" V4 t numLinks = numberOfLinks;
; A7 v8 Y, ^. x! ~' p rate = 1;5 H# V" b) P I/ K* h+ i( G
numFadeLevels = 30; [- t+ e' k" h6 t& ^9 n$ ~
function initArray(theArray, length, val)
! ` V& [% _9 c. P |& m2 N {+ R. J9 S8 o9 J, D+ s" u5 s
for(i=0;i<length;i++)
; G4 \% q. ~+ h {/ M$ q* N. v1 d/ i+ X
theArray = val;
q& Z) [; h3 P: ?! w$ X' i6 o }
" Y/ v8 ~+ h+ N" ?, L }
- o; m6 ]5 G) ]) ^/ _7 l: s, P bgR = '0000' + fadeOutColour.substring(1,3)
. n5 X6 R: v$ M, R; K) v bgG = '0000' + fadeOutColour.substring(3,5)
( \( H5 B! d+ e8 B bgB = '0000' + fadeOutColour.substring(5,7)/ W6 P, [1 r$ n4 D9 W9 Q) |% k
currR = new Array(numLinks);3 b/ f( F( i* [# u
currG = new Array(numLinks);6 R% u0 H! \! a) Y; Z, A7 N
currB = new Array(numLinks);0 P( Y2 A# I% D( ?
count = new Array(numLinks);
, u( F# w; N) p6 Q$ d2 \" L) Z fadeOut = new Array(numLinks);
1 X- @8 N( A! [, r continuous = new Array(numLinks);
5 E& Z( o j# P' ]* v1 K6 u newColour = new Array(numLinks);2 C2 c2 m7 z* }" ~% t. X
tID = new Array(numLinks);" _- X/ X. c: V! R# ?$ p
redInterval = toDecimal(bgR) / numFadeLevels;. F7 w3 M% T8 N& z8 b
greenInterval = toDecimal(bgG) / numFadeLevels;) ^: w' @/ ?( A2 F7 m' G, L
blueInterval = toDecimal(bgB) / numFadeLevels;: m y% t8 @% f& h. S
initArray(currR,numLinks,0);# _, O) F$ x" a
initArray(currG,numLinks,0);2 s& p( F. c. d6 l
initArray(currB,numLinks,0);
# v" a. ?$ `& M5 k+ W% | initArray(count,numLinks,0);# d. S9 ]7 s: `- k2 ]6 L. ?
initArray(fadeOut,numLinks,true);2 k5 Q( X S; x
initArray(continuous,numLinks,true);2 u( Z& @/ y+ d7 I! O' P! m
} 8 A) x% L9 S1 V( g
function startFade(id)
; K! ?) x7 q( N; ~0 f- p{
* s \/ t1 u# x if(fadeOut[id] == true)' z# E, _. v( z7 h. n& ]4 E& p
{ /*move colour towards background colour (increment)*/! r- o. B7 E7 U1 ? G2 Z
currR[id] += redInterval;
* J* H7 `! p; l% l& T currG[id] += greenInterval;+ k5 X& z. z0 ^' v
currB[id] += blueInterval;
; E& z, L$ V' U Y: A4 y+ b7 x. D newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& }- L- j3 y* U2 f- ^+ ^ if(++count[id] == numFadeLevels)
2 f$ b4 n5 n4 B {9 E, X Q$ L. z. c" a" K1 u' \
fadeOut[id] = false;; v/ i- e& f7 z8 g" V. s
}5 X8 |* `7 T7 E1 d! Z8 c3 q
}- |8 J$ J0 p8 ^0 Z
else" e! @. E' ^. r$ _, t
{
4 T2 `; `0 z6 y. E4 u# ]; Z currR[id] -= redInterval;
! h: E+ c' _! a
* A& m; i% D. I' P1 T! [. ` currG[id] -= greenInterval;7 s1 m( E# g3 v/ X/ K* W: O) c# @
: p0 X0 R P& U d currB[id] -= blueInterval;1 N# J- X8 F0 u! }. C
8 e* v, X5 K7 i; L {0 P9 Z7 _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! z/ p% ~" |, |5 k( `7 S. r- P) M _8 a3 C) B; P- j6 q7 V
if(--count[id] == 0)
: w! T" h B1 {! g& | @2 e, |2 T- B" V8 m" Z
{
$ P9 Z0 I2 N" ^8 v- ]3 m. C
' Q" L& I) G! u( K fadeOut[id] = true;! Z/ l! U1 [; W8 ~; t" p
5 E+ Q, @5 p3 k" D8 K4 r2 @ }
" b! b- D5 B/ V5 r
$ ~; @$ G4 W' M2 E" g7 L, o8 P% T }- k1 e" B* P4 t* {: y7 e
7 p8 t, r$ E9 r3 S8 y: H y! B if(continuous[id] == true)
& |: }* o6 E* M
' ~' K' D8 c7 k( a' a p { M0 }. b V- w7 e K
2 K8 \5 l% j; |6 y" W/ ] document.getElementById(id).style.color = newColour[id]; , P8 ~+ d' T& }
' J4 h! o# A @+ I1 S5 g: P2 y }& d; O* m) k3 V; l- h
% ~8 J% G2 k# N* h, n
else
' P( D! [. W2 k" Q! N: E$ F1 V2 W1 W
{
; D% W: |0 l0 @+ i% b/ X- C4 e; }9 H, r; K. {- @& f
document.getElementById(id).style.color = hoverColour;
, j+ ]- X- M6 ?0 o/ m
* ]. e4 G9 S# N0 | }0 R2 b7 H7 [. g* ~- ~/ W1 ~
1 a" f* [8 w B7 \
clearTimeout(tID[id]);
1 J- g B0 o. i. k! P+ s! \2 b/ O8 Z r
tID[id]=setTimeout('startFade(' + id + ')', rate);! }1 S, s# B$ Q: l0 G) O$ F
- D3 e5 h% B3 p}
3 q# G4 w' r" C4 S# ^) u
" b) I. f* B! W# ^# Dfunction continueFade(id)
: {( W! ?8 @0 ^. p) S
; j E. L3 p, l{
+ Q/ u3 t; A! ^) r( T
2 I. n- X o! B3 h# S, b continuous[id] = true;) s F4 N, B. g
) t# s& r' Q: a0 _" |
}
9 o9 f1 r4 R+ [) G( H5 C% Z/ d/ m9 S' y! `2 ^
function stopFade(id). H$ q1 A* _9 [9 o# X4 F/ t
; j2 B0 r2 S0 \8 \" H{" ~% B; `# e3 z' Z( g
) l7 w5 A- o: \4 K0 Q; J continuous[id] = false;9 c3 ^: e. c/ I' m* X
) `( |" S- U7 e% H, t! y4 T& m, C. ?}9 b0 M; e" o/ v' ]( R0 u
/ W* G [ r$ h2 F
function StartTimers()
/ E/ {5 b! N7 K
3 L U/ o2 K" [; {! g! s{ //set up an initial set of timers to start the shimmering effect8 p1 q3 z# \. t$ D' }+ z+ R
3 F7 B% D; T6 g8 D6 Z
for(id=0; id<numLinks; id++)* w& _9 N1 F2 G: w! ?& c
, S N5 _; s- W7 d9 V3 h( t" M3 U {- U& P4 M1 f* e
% y& R) v c8 v1 m r
t=setTimeout('startFade(' + id + ')', id*100);
* y9 c, d' A" t" X1 a5 }6 J, D& [( \6 Y2 N' h. z8 x. n: U- O0 T e
}
! w; f) A# } w. S8 z% g
2 c& B- ]- Q. S1 T- D}; t4 p5 G8 k$ o
4 h* R& v* u% R: x+ g//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'); x$ w/ L7 n. U, b/ }# I
. M7 V3 M8 H' M8 ^9 p
initLinks('#FF0000', 6, '#FFCC77');5 i' t* ?2 X* u+ q# B' V
" e& U1 q) `7 w! y% D' S# c" S
//-->9 P, L8 s6 K+ l% a n# `
" S$ k& ~* `. _' [; A5 A
</script>
: l' S6 k4 z& q4 W6 G<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
, z. l2 S- E3 a8 Z) I) d" Q2 E5 h</a>7 T. d" Q$ |% Y5 x# K" \
<br>
- S2 }1 z" a4 w" d+ M! {2 r; n# b0 ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>6 j0 U% s, x3 r" j: w& X) {8 I
<br>
1 ^ \/ q0 R4 S# {<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 d! X2 k" E& l' E. o<br>
0 \1 u! Z, u" A: A- m7 X<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>7 e/ c* l; }1 n4 R- c
<br>- p% r3 H+ m0 M7 i V
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>6 b W) n5 X" a1 s7 z, o ^
<br>) z4 e; o% ~# r: j2 J
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>! {$ h9 y: w& \
<script language="javascript" type="text/javascript">
S7 ]5 V- P3 F' { u3 ?<!--; ~8 S4 ?' [- {: M5 r8 r: u" c6 U2 e: H
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
, T) V" c. b& |6 T0 z//-->. G% N: d; `# z& q
</script> |
|
发表于 2008-1-21 20:48
|