|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"> w" d% _" ]1 d0 [, P+ c
<!--
5 l4 W- o* ]5 r// convert a single digit (0 - 16) into hex
" ?8 ~9 x" w5 z, Q3 M5 L" ufunction enHex(aDigit)% j5 r* w# l% ~5 J' c) G) O
{0 J0 j+ p4 w1 D% D
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
, W! U2 f! ` H0 C}
" A5 Z/ E9 d# r J// convert a hex digit into decimal2 j9 J# p& w3 e8 C: p: V
function deHex(aDigit)- Z/ [3 z l, B `' G. A
{5 E D% r7 P6 D' C7 h8 l7 C
return("0123456789ABCDEF".indexOf(aDigit))
0 [* o7 a2 _# x3 ~; i- @) s}; }! Y/ t. ]: g0 d
; s% [' K' K0 o' e$ V// Convert a 24bit number to hex
o$ I. S+ b. K) y4 U0 m( Vfunction toHex(n)
! c. i4 B5 F6 H' U# Z- z{! H- Y/ C/ T( Q1 y
return (enHex((0xf00000 & n) >> 20) +/ U% x1 J3 |& B/ r, ]2 s% J- k3 I
enHex((0x0f0000 & n) >> 16) +# @' m4 d7 J" \4 W5 G- r
enHex((0x00f000 & n) >> 12) +9 i; ^2 r! F O
enHex((0x000f00 & n) >> 8) +
1 f8 Z) `2 F' D* D3 t enHex((0x0000f0 & n) >> 4) +! C3 I0 y/ H: r: E
enHex((0x00000f & n) >> 0))$ V9 v( M/ `$ }+ q
}8 n7 w2 H p; u
// Convert a six character hex to decimal
0 i8 K$ M5 ~9 ^, q2 J9 afunction toDecimal(hexNum)
2 Y" y$ s" }: r( c, G{" ~7 g5 G. }2 L% N; `2 U
var tmp = ""+hexNum.toUpperCase()
: v% U9 z, }6 K0 H while (tmp.length < 6) tmp = "0"+tmp0 L+ M5 J. u7 ]
return ((deHex(tmp.substring(0,1)) << 20) +
/ ^$ m. T) M8 U9 ]1 q (deHex(tmp.substring(1,2)) << 16) + . O. U% B; `& q q) `
(deHex(tmp.substring(2,3)) << 12) +
. ]1 N$ ?9 I8 [! z (deHex(tmp.substring(3,4)) << 8) +
1 L0 i. v! A1 @& R- o4 {7 ^ (deHex(tmp.substring(4,5)) << 4) +
* h+ t' m+ E j# A8 } (deHex(tmp.substring(5,6))))
2 a. p% x; o6 p7 K4 @, v" P}3 q$ v2 H+ }6 I; E
///////////////////Shimmering Links/////////////////////
9 b: v! R2 `0 R( k//global variables
. w8 `$ j0 s C6 N; v& L! r- bvar hoverColour
( B% E! I' W' ~/ o/ z Vvar numLinks;
2 y2 f- `' N& Y$ S0 ~8 g0 K5 Pvar rate;
5 m F" K! O; b! z. j- Xvar numFadeLevels;
* @! n2 m9 V1 g% E1 _" |. ?1 J6 lvar bgR;9 [, W8 t% r3 M! r' C
var bgG;
8 F8 t7 t) N' b0 hvar bgB;
7 D& T d. w" n7 \0 G' p/ H5 A7 R/ evar currR;
- [3 _3 j6 w* J$ Kvar currG;# |5 j5 M* b8 i
var currB;
$ h5 S; S& t9 C* @var count;
& g& c5 V- L T( \& f) Zvar fadeOut;
5 _+ M, b3 }. [4 nvar continuous;
& e9 n) P2 s" f% m! P9 ~+ Ivar newColour;0 i" W. w; E3 |% H8 V
var tID;
3 ~ q" M+ r- {6 i. Kvar redInterval;
3 b. m8 L# ]8 Q/ {- U- Dvar greenInterval;* d4 \* c' w; Y; U
var blueInterval;
) t h6 j- J D# j' H3 Tfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" k+ l: J, u; r{; i" _6 k' m; T+ f2 c; Q" M: A- _
hoverColour = mouseOverColour;% J* z* n/ K0 j5 C! o" Y: u
numLinks = numberOfLinks;, e8 E$ X( R4 _; F$ ?* F/ H+ t& d
rate = 1;
1 K7 E! i8 g! U" u u numFadeLevels = 30;
( g5 J; c, e1 x b! t function initArray(theArray, length, val)
$ l( @ F# q, B3 r* p {& X9 h! T8 T# ~7 c. N
for(i=0;i<length;i++)' T! N2 h* n7 \
{8 V4 C H" N* I# ~5 I
theArray = val;
7 F+ m4 r3 O6 Z4 h" {4 m }1 d. k% r7 u5 `6 o3 o$ Y* A
}, W" A& t' x- R) ]; j0 X: Z' D
bgR = '0000' + fadeOutColour.substring(1,3)
4 g: ]6 a5 @- p3 H* w# c bgG = '0000' + fadeOutColour.substring(3,5)
5 r3 }8 g' H4 p bgB = '0000' + fadeOutColour.substring(5,7)
* P, `# y! S6 K0 n2 o5 } currR = new Array(numLinks);
' i" B8 Q- h M5 Y! N* ~2 q( E4 G currG = new Array(numLinks);4 ], [6 e1 m& ^8 \4 ^# q, |" ]( _
currB = new Array(numLinks);
3 \. T6 P* R% q% f7 n( y7 Q count = new Array(numLinks);
6 |, e! P- n2 y6 } fadeOut = new Array(numLinks);5 W* l( ^4 x0 k8 O( m0 G
continuous = new Array(numLinks);
7 M9 I) X% i# t0 C6 X4 M newColour = new Array(numLinks);
+ W; o0 g/ h5 d: j tID = new Array(numLinks);9 z& ~2 s" @9 E4 B
redInterval = toDecimal(bgR) / numFadeLevels;; \2 U5 L L9 L5 ~1 s9 D3 g3 h# w
greenInterval = toDecimal(bgG) / numFadeLevels;
! v( M$ v+ @. L blueInterval = toDecimal(bgB) / numFadeLevels;0 L8 D7 f+ a. ^+ g5 |
initArray(currR,numLinks,0);# }: }0 f( i# L: }% w
initArray(currG,numLinks,0);
) \# |9 f. I0 W- r initArray(currB,numLinks,0);
0 T0 L* b! }8 n initArray(count,numLinks,0);
. N. H. w# F1 I initArray(fadeOut,numLinks,true);
( x0 T% n5 @" N) z; @, Q/ v* |# l) ] initArray(continuous,numLinks,true);9 V& R: r- t3 N: g [
}
1 |& ^. w+ f7 bfunction startFade(id)2 @: C. I/ u& u' f4 ]% I- t3 k
{0 O" q* s5 \2 M0 Z; c7 |; R5 ^
if(fadeOut[id] == true)% u5 J! k E' o! c. y( j0 S
{ /*move colour towards background colour (increment)*/: m6 B8 z* \7 h9 H
currR[id] += redInterval;
2 t5 D7 \9 h* A3 l2 F currG[id] += greenInterval;8 ~6 g6 |" ^. H
currB[id] += blueInterval;
- d. B! @# A( b& ~+ P4 O! }2 p newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, w/ m! v0 M$ d5 W if(++count[id] == numFadeLevels)- N/ x v+ s5 |: `" \
{- N+ T& [! B( C1 Q2 W
fadeOut[id] = false;0 W* M) Y0 X! @( `3 T8 W4 y! S
}
/ G# m! @; L( @0 K }# V7 y$ s9 U1 Z
else
2 s6 E. {1 G- D2 d# R' a {
9 ]6 w4 t; d! w7 ] currR[id] -= redInterval;6 ^) g0 a: X) {! o' ~% [( p" M: V
" ?" I3 x( \$ W4 Z- T7 O currG[id] -= greenInterval;& u) f0 l) q+ S
$ x$ U2 b7 R" H currB[id] -= blueInterval;
$ ?$ H! m" O {' r5 i! F, Q
" Y Z T6 f. C! c X0 Z, Q newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# j+ c6 C) ^# f& r$ n1 d$ p6 t4 k+ s# E& Q/ o" m
if(--count[id] == 0)1 X+ q# I4 j' m
7 ^; o7 d6 d) {* O- _5 B {
. t T+ D' W6 p2 F( a# y! c: [+ W2 |( ]3 O) @
fadeOut[id] = true;4 n- t" u8 J# I5 |6 B) f) S" \4 o( j
5 E; U! u2 V) A$ F0 m, E }9 i. {3 i$ m! m, J5 C& K& h
/ g5 {# Q4 o7 `8 L: k9 [ [6 H
}
$ f! s- W8 \2 [4 [' e' H6 @; K; k' A: U
if(continuous[id] == true). v6 r- w" A6 L* c: v& N2 d I
5 Y8 M: ?5 X, b/ |; m' q: U$ ? {6 O! f( f( a& j4 ]
$ X3 ^( s7 t" f, M
document.getElementById(id).style.color = newColour[id];
* l1 x T' }! I" t4 G1 [9 K) z* @' a; b. ]" S
}: y2 Q+ N6 T u$ }& \! [
6 }# d$ _/ B* }. M) k
else# ?8 `* {* e7 K" t0 F! U
1 j. P% {/ v9 K6 O
{3 o1 {; N7 ^! I' ^
' ?9 t0 o' D/ \- ~ I6 y3 O document.getElementById(id).style.color = hoverColour;4 f8 ]7 |1 v* S/ _5 g0 u
& s+ i4 h* y( g }( j7 M) b }
6 D: i) _. j t: V/ J8 s; H# ~5 l4 G" R, G. X7 `" X' b
clearTimeout(tID[id]);3 x) l) k- X& l% S% ^
) L* f; X: L4 G I
tID[id]=setTimeout('startFade(' + id + ')', rate);
! h# T' M. V* d% p- g- L+ L3 I0 b3 z1 b5 l# \* Z0 S
}
4 L/ K; a5 z& Z% x, x
H L4 e3 v! lfunction continueFade(id)
- _: c- D1 |( L& C# i+ Y) Y
0 _+ j6 z2 s8 ~$ _5 a4 g; G{
( b3 o3 N( D1 s3 p. I. q( i+ F. ]; I; @
continuous[id] = true;7 [' R) D4 ]3 s2 {0 P
; G0 N& D' r/ S
}9 y8 U0 \8 V; i3 {5 c, Z. ~
; }( R2 i0 d8 E- s/ @& ^6 U+ ]function stopFade(id)( J& x0 _! ?. J6 c! a
/ E M9 c+ M0 r) G! F2 _# D{
) E# C) S P+ ? M* R4 J+ M0 L% p
% w. g. b1 Y& ~' b0 t4 w# R continuous[id] = false;0 s% I9 I& |7 }9 U+ g
, w" A, x9 a& V* F! s1 C; R
}
$ i5 n, z0 k& B4 I6 [* M
/ E8 O* F, U3 v. @function StartTimers()/ h3 ?5 {1 W: l! a
, Q1 z. U6 ]/ t
{ //set up an initial set of timers to start the shimmering effect
6 u, ^ {9 v$ b6 D& p1 j6 ]- @3 G' \% B' v# x: b. L/ c; P6 ? V& r, U1 z
for(id=0; id<numLinks; id++)& Q! j5 t4 v j
( V. _$ E6 J1 `8 E4 n" Z; |& C {
, C/ g$ g* g& P1 T! |0 g9 e/ d+ x1 e; k! F+ F2 z; g8 C8 X
t=setTimeout('startFade(' + id + ')', id*100);
2 ?1 i6 C+ U/ c9 r8 t4 f! X
% @. X, n2 t' ^1 x, `% e }
% v1 |8 b0 J5 Z. |& y. t7 J9 n2 j* k$ `8 C# J6 q' }
}" w% A. K* q& c- J* u h
1 t# a# l# b# k; M9 m+ i' r, @+ M//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
) _+ n- T. J6 R( H+ F8 M& e& S
( \6 i* y; @ `$ f/ O7 ZinitLinks('#FF0000', 6, '#FFCC77');8 K2 A6 x* U( }
. n$ ^2 l0 T( ?* l! M6 L8 ^
//-->9 {/ d+ E2 Y( F C
% |% K, g3 i3 P. b; @2 |- m* J1 E</script>
: O/ F M& Z4 o) e3 _9 l# ~# h<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
! O" a2 f) R- J# n5 D</a>
# P* Z& z+ g8 X3 W9 x( \<br>
6 o' n# G6 I4 P7 O8 ]! l9 H( w6 R" l<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
' F0 ?. u' G" _- C<br>2 ?. n7 ^# I. H9 t
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* Z% Q4 p2 f: i9 `<br> # {4 `$ \ b2 T0 x( }' U: t
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>7 W6 h* T& J7 H7 b" m
<br>, w0 I, b) {0 W6 W0 S* J
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
- t& l" B7 E. u. Y8 f<br>* R: L; G# |/ m x7 t2 y5 E: P
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
E0 p. V, o6 k<script language="javascript" type="text/javascript">
3 D- P* F, v* ]5 H<!--% P' W9 t- }; q% R- C
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
/ s- S- m6 F. m: C: }* S) l//-->
) Y: A+ Y' @; |! h# ]* o* } b</script> |
|
发表于 2008-1-21 20:48
|