|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ P. C, v4 u" R- E/ l<!--$ @, s& C/ A1 O d1 J; E* E
// convert a single digit (0 - 16) into hex
: I. I* k' p! a6 z' V/ Kfunction enHex(aDigit)
3 M9 h* ^" i4 s+ D! W1 @{
8 z2 R! b- d k return("0123456789ABCDEF".substring(aDigit, aDigit+1))
- V6 B% E! u. w) G) E1 Q* ]0 {2 q}
1 K- P @' k3 o: z9 D// convert a hex digit into decimal
$ |) n. l! [- g' y, hfunction deHex(aDigit)' K) y4 H* `# o: `9 `: D8 \( ?7 E
{
# p0 j: T# i2 X2 J4 J D6 ]1 E: x$ ? return("0123456789ABCDEF".indexOf(aDigit))
" N5 {1 N* E- L1 [& d; p* U2 ?}/ K2 t8 J2 k6 I5 O7 L' c& C
8 K" Q. g7 P3 O7 u: [2 P8 ?
// Convert a 24bit number to hex; v# E' ]7 N( w$ F. f2 N
function toHex(n) T" T% B6 n( x I* W, o4 b9 T
{6 T( ~% R% O, O, y# @$ y
return (enHex((0xf00000 & n) >> 20) +
1 V0 B3 ], f" x( Y9 x enHex((0x0f0000 & n) >> 16) +9 r: ]+ a" ~4 J7 k
enHex((0x00f000 & n) >> 12) +# V" x' ?2 h3 [9 ]# l1 d' F" a, h
enHex((0x000f00 & n) >> 8) +
* z# S* u8 E* }0 X& Q6 s enHex((0x0000f0 & n) >> 4) +
) D$ w0 D3 d" J0 w9 r2 E enHex((0x00000f & n) >> 0))2 J0 M! i, }# J
}( @# G5 P$ d$ q& h0 D, J$ a
// Convert a six character hex to decimal
0 i- g7 s5 t( Sfunction toDecimal(hexNum)
5 \* D& i, ~6 ^; e; N' m{
4 h @7 y& p$ K2 h: Y8 K5 V% ] var tmp = ""+hexNum.toUpperCase()
6 z8 Y; T9 M3 z' k+ C1 n" `3 }( x while (tmp.length < 6) tmp = "0"+tmp. \5 j: k/ x) r2 B. w% M; f+ A
return ((deHex(tmp.substring(0,1)) << 20) +
8 F2 [- d6 W) _ (deHex(tmp.substring(1,2)) << 16) + : w& k1 |- {5 j1 D
(deHex(tmp.substring(2,3)) << 12) +( k6 |# D) f! k" p# _7 H
(deHex(tmp.substring(3,4)) << 8) +0 U& M- d# K! k
(deHex(tmp.substring(4,5)) << 4) +
2 T0 f- }* ?9 c# y (deHex(tmp.substring(5,6))))' i. l' f; R1 I, b! r. Z p2 l3 M
}
/ R/ ?1 l$ ?* \# f( U3 v! j///////////////////Shimmering Links/////////////////////. L* M& P6 |) U% G; e
//global variables/ O7 Q( C5 H% _0 O$ H0 ^
var hoverColour; b1 G/ @, j( h: \# H7 `' [2 S
var numLinks;
3 n# F; g2 ~3 H# C: rvar rate;0 G" z: b$ p& P) n4 `8 G
var numFadeLevels;# K x7 G- F4 t# L8 C# y) i
var bgR;
6 C7 x C% y: y9 K* |4 yvar bgG;% C# \( g, r* \; a2 [
var bgB;
2 J2 j0 z+ r b' z: W p# p8 j. yvar currR;
( r0 p- [: g( ?5 W3 A/ Jvar currG;
6 T! |2 B: A8 @0 y7 s4 N; Lvar currB;
; e1 `9 F' s% h0 \var count;
3 i6 o/ W; M2 Y7 Z! Pvar fadeOut;
1 W9 {* m( F& Q- nvar continuous;( M. ~) O4 f+ v: C3 M+ v5 }: h f0 I
var newColour;3 p1 J; z$ |, F! K+ `3 k5 i# N7 ~
var tID;! r2 g9 {/ {3 H! p+ n4 S! A$ r5 _$ O
var redInterval;/ }) n0 I a1 H1 \
var greenInterval;
4 ^; k6 Z+ [! r4 Kvar blueInterval;
( E/ T% J9 O) c) n' v1 |function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! k: }3 E, k( w4 ?9 x6 Y s
{
3 s- m; W! \' m8 j6 [) n. t" l6 o hoverColour = mouseOverColour;
; X7 {' S" I) g+ w( K numLinks = numberOfLinks;8 L: Q: a% o2 F: ?
rate = 1;
`8 R0 B$ r [( X. ` numFadeLevels = 30;7 V: k9 {, d5 W& o
function initArray(theArray, length, val)- r' T6 {0 L7 d5 p9 G% e
{/ t9 o0 w$ K4 E- p5 d5 Y) }
for(i=0;i<length;i++)0 H. l9 M$ O; p
{
7 m( T" |9 x( O7 ]: r theArray = val;0 @* m- w% Q3 @( \
}6 K7 b" |' Y2 W) D; z$ l$ H. v
}& I& ?- o+ k+ U6 |
bgR = '0000' + fadeOutColour.substring(1,3)
' o& n6 H0 R# f! O2 x/ K bgG = '0000' + fadeOutColour.substring(3,5)0 i4 J* `2 n5 ~$ v. @# C% l
bgB = '0000' + fadeOutColour.substring(5,7)
. {0 a$ a: _# I. G0 ^. s* | currR = new Array(numLinks);+ e4 g8 ^6 Z% G. h* @* E
currG = new Array(numLinks);9 o4 n; f0 u4 |3 g6 ^, z
currB = new Array(numLinks);, O( ?2 [+ o* p% M
count = new Array(numLinks);2 l. h3 V& [5 c) P' v
fadeOut = new Array(numLinks);
9 ?4 B. r1 t" w& ]! N u' j continuous = new Array(numLinks);
6 O( L* ^6 O- t5 W2 w# h newColour = new Array(numLinks);
5 M1 t5 Z8 l- z4 C: P% C* F tID = new Array(numLinks); j# K( D, A4 A* f! _
redInterval = toDecimal(bgR) / numFadeLevels;" a" U3 z+ r& J- Q. |# |
greenInterval = toDecimal(bgG) / numFadeLevels;' T5 r' p6 K f
blueInterval = toDecimal(bgB) / numFadeLevels;' Y5 }) G. G' ]' c# m9 h
initArray(currR,numLinks,0);3 L" _1 M* u. V$ j- G# j
initArray(currG,numLinks,0);
$ i0 J* l5 }$ M+ M% d initArray(currB,numLinks,0);
$ @. c6 Z) {0 v$ b" {1 |: J initArray(count,numLinks,0);
5 j* I9 q) W' n) J initArray(fadeOut,numLinks,true);' G& D. b0 {* c
initArray(continuous,numLinks,true);
% B/ m% W' {7 J" \, F8 |( J8 N6 s} 6 y$ m8 p9 @8 c7 L
function startFade(id)) U6 X3 z8 C# b/ v/ w
{/ V; r1 j8 ^% ?- B4 ~2 c* T
if(fadeOut[id] == true)4 v+ ~ c+ N- c1 l# W
{ /*move colour towards background colour (increment)*/7 f" y; i- {% W, X* b- C% U
currR[id] += redInterval;* K3 _7 a. Q6 d6 [# v2 J
currG[id] += greenInterval;& ] ~5 v' _$ q( R g
currB[id] += blueInterval;2 o' a* j, E: G1 J J% G! T6 s2 E
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- d) o" r4 X! ?1 V3 B if(++count[id] == numFadeLevels)5 J. ~# h8 o2 u* W5 s
{
, l% B7 B( o" z) m; Y fadeOut[id] = false;
, V4 i! o9 p7 e& B6 S) |2 z }* l* @8 ]& J9 Y- \2 X5 W0 s! I! j
}
! c" d* u1 f! ]6 J' ~' Q" S else5 Z0 S8 S; g% E/ r9 W
{
6 u( ~, \8 z# a1 y2 ^ currR[id] -= redInterval;
9 y, ?% @0 D1 a K$ r. }2 W t L/ j6 ?, q1 P
currG[id] -= greenInterval;: F7 R8 z( T5 |! L! R
* t- M5 M+ h& A1 y0 n, y" K4 `( s
currB[id] -= blueInterval;
6 |& t$ [: f* h2 t5 J, q/ w& K( X
& ?4 H: k$ w$ m) I; X# E newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 \1 N/ X1 q* R4 |7 }& \
% g- [/ I9 U. l2 c: N: z if(--count[id] == 0). Q/ C2 Z- f2 t/ P/ o8 z% p! i
& t# Y4 w' I8 B' N; U$ \% ? {: e7 _& E: u, v8 i+ K
& B" G2 H8 M, N# G4 s. c3 r) u
fadeOut[id] = true;
- M9 J3 P! N5 ^0 K' u- }
5 G8 }0 X, d1 K/ A) H8 e- m5 K, C- F }
]/ a: W7 x: U2 ?
9 L: z1 j( c* Q" a; y { }! ]; c- `- u+ F( ]
1 {/ B# h4 m; H5 K% I
if(continuous[id] == true)) G h4 t1 ?% d1 Z" ^* d) r0 t
3 g5 a' v' _# u% \+ q1 l
{
( U2 f5 K; R E2 o& O9 U, [4 ~& p. ^! o: v. T, c% ^/ n, m+ t
document.getElementById(id).style.color = newColour[id]; * n# T! Q# z5 y
- U% L4 F+ Y. u2 [5 y }3 T$ \) f& [! |& n9 u/ O# a" d
2 l$ m9 Q! m: d* x" k else9 H0 R# U3 J. k/ e( b" _
6 D* O9 k7 Y7 \9 B( }* V6 f/ {
{
* P; x( h; t L! F. S% {- I4 x5 d* M7 @8 N9 \
document.getElementById(id).style.color = hoverColour;
; o& f, K1 H# d8 [, _; G' i$ t% y! B
" W8 A* i6 G0 A9 W: O }
5 k3 i- ]+ p; G1 I/ o* y3 p& D3 D6 I, {' n* d" g; P
clearTimeout(tID[id]);
/ v+ L( d/ _* O2 c# j
, O( C8 z, T1 A# ~/ c tID[id]=setTimeout('startFade(' + id + ')', rate);8 m: _( w" S6 N% o/ ~# n9 m
7 m7 M; q) ~; V+ r2 f7 M8 D4 }
}! }+ C3 _- O( C( {
* k$ O4 N; h1 i+ l1 |function continueFade(id)
0 W# U# g% z. F5 b3 T
$ V* c. r1 x7 h{ r, V8 I4 ~! t' c9 I
6 ]- P7 c, k- o. F: d9 R1 K
continuous[id] = true;
& R1 b; w2 N. [( r' F; c* E5 a! K; ~! l8 X
}
8 H# R, X1 a/ O& I. N+ h0 p1 [
9 h8 V: F) i; J+ Kfunction stopFade(id)
( Z k) [, z3 |1 a
, X2 Q. I' H% t{
% p0 p$ C& ]7 s A) B/ I5 H" f4 @
continuous[id] = false;
4 b& H) s0 X, Q% k
6 v3 [4 Q! k! F}. M( w- I% n0 P( i/ B3 r: Y# O
8 m# U4 ^4 h, w! ]3 T# }4 \
function StartTimers()( a" z, u9 `/ a
% e5 ?5 D. c" e& s' K. g" ^3 Y{ //set up an initial set of timers to start the shimmering effect4 g! c! u) m! W) _5 g
0 X! F- g$ S8 r1 N5 n
for(id=0; id<numLinks; id++)0 L" D3 N3 ?3 |' w8 G# T2 l
/ [5 e5 k% j7 m7 m! f7 N
{) f, M8 m- u2 ]/ F' g6 d* q/ f
1 a5 _( U4 [7 G t=setTimeout('startFade(' + id + ')', id*100);
* G3 S3 `. j% r! A: U: j: s7 y1 W4 y B* J5 q. K8 u
}1 U* M L/ {7 h! ^1 A% C2 P* j. l* S: {% h
& n; K7 g1 R; y; ^
}/ P% Q# `+ T' @4 w. c, i! D+ u
- H0 U) [' x* }; \/ i. O
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
0 i( ]& N7 h, b E5 D
8 _$ f2 P! A* |) ginitLinks('#FF0000', 6, '#FFCC77');
/ k# f' R% ]8 H5 L4 \2 V# A: g
) e4 E% B' X7 z# {5 x//-->
. f3 [, s1 m7 A/ N. H0 F4 |
$ h( ^/ s$ E+ h, n' j</script>
. w' R: U: T; B+ I; W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元4 A, x$ ~0 p: C
</a>. m) @6 V! q1 X: F/ b
<br>, ^8 l. P c/ ?. S
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>: a$ b& v% i4 M3 z* K7 V
<br>; t9 l5 v( N, ~$ C$ Y
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
. I3 u! [, T% }<br> 0 t! v- w/ g) i/ \) k% V6 o
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
: o/ j, w6 u- Y4 o& Z! f<br>
3 v, h2 O0 J# y; P& `6 _. j, L' H<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
; o) g0 M% k3 ^( i% g! L' U<br>
4 Q/ ~: T. J0 @, E+ `. B; H# H<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ A, f/ V! Y9 u& [8 u
<script language="javascript" type="text/javascript">' z" _# I8 G( O" D2 |6 M: t
<!--7 N: V" k+ G$ W: E2 a
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering) Z( h. n9 E( ~1 Q# [8 l& U
//-->
, r! j4 ~: X' C* p: D6 b H- `</script> |
|
发表于 2008-1-21 20:48
|