|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
, e f& u% X$ m! Y! t4 O/ d<!--
- Q+ W0 K, ?6 t// convert a single digit (0 - 16) into hex
; A3 d9 ^9 I0 W" J$ @ Vfunction enHex(aDigit)
e1 B9 p/ r4 V5 N0 Y: H{
2 Z+ l0 V" Q# a return("0123456789ABCDEF".substring(aDigit, aDigit+1))/ r; Z7 g, z/ O' C6 Y0 M
}8 B/ O! z2 W8 M) Z; R/ X$ |3 y3 R
// convert a hex digit into decimal
/ d! u w8 ~. Y9 Z# w8 i, Kfunction deHex(aDigit)5 k) ]- X7 ] K+ u% f) w
{# o- o8 P7 g0 [* J! `8 i9 |
return("0123456789ABCDEF".indexOf(aDigit))
1 l4 B3 _$ M( d1 d( r}
0 d- D2 i+ y# \! ]7 O+ F& P; H9 H* f
// Convert a 24bit number to hex
0 S4 c# L" Y, H7 K. c. jfunction toHex(n); N6 R% s( `1 R
{( ~% F0 N% d& P
return (enHex((0xf00000 & n) >> 20) +3 _. B. \: G- V! {" y* X
enHex((0x0f0000 & n) >> 16) +
7 D5 p# n# z4 Z. d9 V$ \: Z enHex((0x00f000 & n) >> 12) +
0 {6 F5 [4 T* Y! J M# r$ L enHex((0x000f00 & n) >> 8) +% E7 W; ]' ~$ E$ a! G3 l
enHex((0x0000f0 & n) >> 4) +& m$ o- u8 u9 t8 f
enHex((0x00000f & n) >> 0))
" X0 l. N) n, w( x2 r}
1 e; @6 s3 l. X! p// Convert a six character hex to decimal
7 j5 l# e& g( R5 E8 Ufunction toDecimal(hexNum)1 L# Y+ ]6 S0 f( X m- q
{5 s( ^9 s& T r5 z3 M7 ^7 G, v$ ` c
var tmp = ""+hexNum.toUpperCase()- ~1 e7 |* f6 y* r9 t
while (tmp.length < 6) tmp = "0"+tmp
* T3 X$ J( q7 a( Y" S& O. t return ((deHex(tmp.substring(0,1)) << 20) +, ]# U- o- P. ]% v6 W$ M
(deHex(tmp.substring(1,2)) << 16) + 5 _1 `4 C# T" E- X1 n d
(deHex(tmp.substring(2,3)) << 12) +
" b- \) C: v+ }; B: x: `- q0 o+ ` (deHex(tmp.substring(3,4)) << 8) +/ k/ y2 D+ ]( s4 j4 N) i! }4 ^
(deHex(tmp.substring(4,5)) << 4) + |: ^3 q" V# _% O$ i* P2 j j
(deHex(tmp.substring(5,6))))
7 b. n0 u! R" R; v! ]}
( o$ u1 T+ }7 o0 w///////////////////Shimmering Links////////////////////// K5 `' b7 v }/ E, `! B U
//global variables/ m3 F# G( D% P5 f
var hoverColour
, c8 y$ Z J m9 i0 L9 n' Mvar numLinks;# K' \8 h; ^9 G( T0 B
var rate;: p6 Q( R/ r5 s9 p# P0 D* J
var numFadeLevels;
& ]; h1 E) N: [- @6 z7 Zvar bgR;
2 `5 g0 ?& E5 l- T2 o4 | pvar bgG;# Y% M# U/ J7 A
var bgB;5 `. I4 l. G1 E/ \; O) F
var currR; W2 W" L$ t3 t- z
var currG;
4 |% s' x3 K( h# l& dvar currB;5 J5 c& A6 S7 _* }1 O/ C: K
var count;
8 ?# O# w3 b/ h; wvar fadeOut;% h( d: g; Q: g9 c: |4 b
var continuous;
5 X% m7 |* r3 F; ?! Dvar newColour;5 [7 {& N' q( ^4 X2 r
var tID;
* o, n9 @# Y" h9 x- a9 ~var redInterval;0 a' V; Q8 V9 i' o
var greenInterval;
; x3 Z7 b) D& b: |" Dvar blueInterval;0 v; I) B" W. b" d# l
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour), ^0 x2 Y# W$ S4 c$ R, J# y
{5 x" \ \. c6 J2 g+ f2 b" h
hoverColour = mouseOverColour;
- R B' p N- K5 B0 M3 d numLinks = numberOfLinks;* w) k+ O0 ?! e
rate = 1;
3 n; H5 [$ W1 a$ s k( c numFadeLevels = 30;, E+ R& m8 c. f( U' t7 ?
function initArray(theArray, length, val)" i3 G& e# ]! h& t
{
, m! `2 |8 T2 `- b; v" k% H* J for(i=0;i<length;i++)
4 {6 g( b( q$ o* V* {* v2 m9 r5 F {
/ [) k. {7 |: D* p$ {9 L theArray = val;
% |9 O8 G6 m8 [" i5 V7 I; i5 K }6 v) L, @, _! S2 A; \
}! t# R2 O' Q3 B) `9 K1 a. H
bgR = '0000' + fadeOutColour.substring(1,3)
5 L/ Z* g( P& m" Y$ k bgG = '0000' + fadeOutColour.substring(3,5)
) v$ G$ z: @0 o; b! u" s5 J+ t bgB = '0000' + fadeOutColour.substring(5,7)
% {! k! z! m) }6 j5 e currR = new Array(numLinks);( `5 W! M( a* V# I" @
currG = new Array(numLinks);4 g: _' @" T( G p6 o! h' B' N
currB = new Array(numLinks);7 e8 e* @( X; M5 v9 j t
count = new Array(numLinks);1 `& Y7 d0 ` a+ d+ g
fadeOut = new Array(numLinks);$ D) v/ |' n# b) i3 V+ H
continuous = new Array(numLinks);
# R( j( m# L3 Q% P1 L6 v newColour = new Array(numLinks);
, p7 z5 n* ^: @5 M( p0 u" |) w1 i A tID = new Array(numLinks);
' g) j( W5 E% f% _, V' f1 X redInterval = toDecimal(bgR) / numFadeLevels;. |& E6 @# C3 A! Y# S
greenInterval = toDecimal(bgG) / numFadeLevels;
2 f6 D; W- A* T, f# y, |7 \' \ blueInterval = toDecimal(bgB) / numFadeLevels;, o' E* o" y5 d; V. v; C; p9 v. i+ o
initArray(currR,numLinks,0);
. Y% m9 S6 `+ p initArray(currG,numLinks,0);9 ^+ q6 U) v! p3 Y8 P+ ]
initArray(currB,numLinks,0);
/ I8 R6 ^. z2 x: E% H6 V3 } initArray(count,numLinks,0);
! g+ f% v3 m( f$ o9 }" v9 X initArray(fadeOut,numLinks,true);
( |! [( f% h/ b initArray(continuous,numLinks,true);
+ ~: {' @9 q0 W9 y5 P6 [} . L1 c( `& s4 S# T# P: `3 A8 |2 i
function startFade(id)
* _7 a$ R8 B1 L! I2 h' i{
7 A. }( U( |4 v; x4 h if(fadeOut[id] == true)
5 U: M1 B& g/ z, y* g) S+ L! h0 M { /*move colour towards background colour (increment)*/
0 }9 ^( q: r+ ^0 E I8 C ] currR[id] += redInterval;4 M1 l6 t: V7 w4 w9 \2 b
currG[id] += greenInterval;
?# z8 X+ D7 C* h currB[id] += blueInterval;
6 x k2 {/ W7 J$ q9 m+ L newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* G1 p3 k( \) ]9 Z& `# j% s
if(++count[id] == numFadeLevels)
; D$ R! M( e B! c3 L {
6 v0 i' Q, l) K3 R6 o fadeOut[id] = false;) T4 B7 R& z7 [1 N9 }7 m$ ~. e
}, p7 H. X2 N/ I1 w" q+ [
}; _' ~) B- ]9 u9 T3 H
else7 w; M/ k9 f8 H; y- F$ l7 ]
{- j: X( o/ g: b5 Q
currR[id] -= redInterval;* D0 ^! K2 d7 X& p1 M& n2 {
8 J* Z# i d, R" x! G1 ]3 s currG[id] -= greenInterval;2 }. s7 U. E+ c$ l2 e! r
0 G2 d4 g6 r7 L, G
currB[id] -= blueInterval;6 j) B; W; m3 {$ R5 k& x3 \/ g: x
2 {; N5 h# k2 u/ N# H newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 \% h- ]$ d" g, X3 P1 i
/ V4 y6 V0 h4 _# Y( j' |+ s* h if(--count[id] == 0)3 y: h4 a+ G& I S
# H" L1 v1 U8 ~# D
{
6 ?& A* L, V# E* C/ a* {# a+ h& E& B4 i3 f& o
fadeOut[id] = true;1 ?5 @% d$ S5 t0 u5 G( u+ S* ^
' c( x0 y. |) v# w }; L# }7 C7 X- r1 ~
" C5 F5 A. k' n# L5 |
}
" b; R; V i4 L) e F. @; u& Z2 V8 X. q: H. r/ \
if(continuous[id] == true)4 B3 ^, n& c$ Q
( H9 P$ z5 y. b {. l) @4 K* N. K* e0 N+ |: P
3 [1 ?: o! {5 g0 K
document.getElementById(id).style.color = newColour[id];
; P4 f+ _2 y" f# \" ]( B
/ |) C+ x0 l9 Z- i" X }
* ]' V5 v4 u6 r: W$ F1 Y4 U- {) I& h, I9 n+ @) I" @
else5 K' D- i4 F+ M5 j" g) `; U7 B
0 G+ [! w: Q: }/ _) z9 _! G% L% R
{
; e) W- ]& H' A4 O6 c7 d7 i: d G' L, k/ e- x& i0 J- z: l
document.getElementById(id).style.color = hoverColour;
- m5 ~8 P: u9 A2 W: H$ z/ S0 W6 t0 ?8 ~( _3 i2 p" g
}
; z- Q" M, H% A# ^ \" }9 X9 K6 y0 j2 h1 X1 f
clearTimeout(tID[id]);
2 J& h# z# V0 s6 K6 i& e
5 O! P( r4 V9 s3 _, T( h tID[id]=setTimeout('startFade(' + id + ')', rate);
; `3 k7 X3 X1 K/ \
" F. y, U) {9 P/ s( q}$ ]5 ^6 P! S( t, N5 F: {& R; e. |' ]
# {7 w, ~5 d0 {function continueFade(id): U1 P q+ H) d. ]5 \
$ g: v( X0 v( i% D, @' x. o- e{
+ g" P9 n9 \) k# O$ n+ Z( a* c9 q% d" U* y9 }
continuous[id] = true;8 ], X/ g" j a0 A! k
, h/ l2 d- o) N- v}% r# T& D! O s1 s4 i
# G+ e# W4 Q- ^! a1 y P7 Gfunction stopFade(id)
{, Y6 d3 w, C% z7 U3 ~
9 X, m1 C$ [4 _; m/ v$ D{6 }& n! H# _" p0 a0 v: Y
7 B" b# X- R# w5 h continuous[id] = false;7 B9 m$ q- Y2 I* ]* a, }- T! R
# x% s0 S$ |" Q. H
}
% U5 G' V+ `* H4 z, R9 Q) s% }; D- f1 r; }( b4 ~
function StartTimers()2 d; q# h- L' f' ?/ V4 o
7 I* r! r# j$ H; C2 d
{ //set up an initial set of timers to start the shimmering effect5 v* u- ]( N8 [
9 ^% o( i: H& l* J/ ^' k! Y6 a" d7 W
for(id=0; id<numLinks; id++)2 x8 p7 q: \: z' s5 F9 u' u% b* H
; Q. {' Y6 j, h2 a {
" q. L5 M4 l9 ?! b4 G
4 k) J. R6 f& E, a3 ^% y4 ^ t=setTimeout('startFade(' + id + ')', id*100);
8 T/ Q3 R3 z/ T3 z& U5 t
1 k; v/ E0 _: y7 K }) L0 E6 g d1 M6 y
7 i4 U9 q* C0 s2 _5 ?
}1 r* `' H; q# J- o: b' ~6 C
) y$ B. u$ O3 I; y) S
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
0 z1 r! ^; n- s1 I2 ]
8 p& z" `" |5 k$ ? X2 EinitLinks('#FF0000', 6, '#FFCC77');# \) `+ Y2 w9 o+ C! V
+ D" Y8 |4 {( Y: J0 [% G
//-->5 E( [5 H' a2 \2 G1 d
[0 L$ s/ p8 M( A1 h: ?* D1 S" |; a</script>
9 N9 g& ~# q; ?( p3 N* I<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元- N# b* s* @% }" J0 }
</a>
6 @6 a7 S. S9 M- Z6 \0 `. r<br>
% N4 P4 Y! I! \8 C<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
# l1 t% f9 q( V: \: L% i<br>
1 | n/ @3 j7 U2 o1 F$ }<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* U4 R' e, V+ e4 `<br> , k: j/ j& ~1 f$ B8 z
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>5 q( Z- c; W. Z( K R$ K! d. I d
<br>
, q5 {3 f( ]( a7 r. {6 d" W4 n<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>0 k4 u) n* N' i$ q0 K" `
<br>
# v# ?, k; S7 |. G1 C<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
* J. Q% j/ M4 p, G<script language="javascript" type="text/javascript">
" n ~% L8 j- w- j. b% J1 v6 D0 A) F<!--
, Q* A [9 Y/ ?2 ?# ?- d6 rsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering' u6 `! x# I( v4 P
//-->
/ V1 o; m a; L1 S: ^' r) i</script> |
|
发表于 2008-1-21 20:48
|