|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( i2 {0 O7 v* P# M! B8 W1 H" u, {5 e
<!--; \% q5 h+ c; Q9 X- j/ {
// convert a single digit (0 - 16) into hex
( [" L: |7 C- s; C# T# `$ ^1 O3 Efunction enHex(aDigit)6 }; C' G5 ^+ }- a* G& d! v. U
{9 e4 S6 p. e8 ?. O7 S3 ~. ]& G$ }
return("0123456789ABCDEF".substring(aDigit, aDigit+1))/ c" [9 ]( p0 x: K
}
4 [/ p8 O1 e4 v6 y# ]' M// convert a hex digit into decimal
+ O+ Z) o) j5 Y2 e6 Nfunction deHex(aDigit)
& A3 l0 w6 x) A: s5 T+ @& X{
, ^( Q- V( b- Q8 t. [+ z$ ? return("0123456789ABCDEF".indexOf(aDigit))
: r1 b& O7 e2 x" c+ x) F8 p6 _}9 V' f# Y a4 |% ]8 R y
2 A% n0 w5 ]# Q$ X d
// Convert a 24bit number to hex
4 y# K5 N7 v0 l q: R$ q# {5 ]function toHex(n). d+ ]( N; Y, k4 Y
{5 A6 w, i* I2 B& V
return (enHex((0xf00000 & n) >> 20) +) Y- a) s9 w2 N: t$ i) x ?* z
enHex((0x0f0000 & n) >> 16) +
3 M6 s- V& g% w enHex((0x00f000 & n) >> 12) +
5 ^* m6 r ~: \' n' G; E enHex((0x000f00 & n) >> 8) +0 T v- {$ E3 Q' N6 ~7 n
enHex((0x0000f0 & n) >> 4) +) P, \) d: F7 w0 f4 W5 }( U
enHex((0x00000f & n) >> 0))
% o% J# `( K5 n}6 a. b9 L) l; [8 z3 J+ j i
// Convert a six character hex to decimal
+ U5 ?6 ^: X$ d- ?! E- u) C5 U, ^function toDecimal(hexNum)! z7 s1 O$ Q, Y3 f/ I( A" o
{+ b& z3 [( c3 x+ ]" J7 t# Z$ J$ ]
var tmp = ""+hexNum.toUpperCase(); c2 h/ g3 k2 x, u; s
while (tmp.length < 6) tmp = "0"+tmp$ p( V# u# c: r _
return ((deHex(tmp.substring(0,1)) << 20) +
# T# L5 C3 O! x$ _ (deHex(tmp.substring(1,2)) << 16) +
& {' p5 f/ V, @+ ? (deHex(tmp.substring(2,3)) << 12) +. d( v7 R+ Y4 H* @7 x- K
(deHex(tmp.substring(3,4)) << 8) +
4 ^, U( D) I4 d. a7 I5 d1 e (deHex(tmp.substring(4,5)) << 4) +
6 u( U: s3 I* V" m2 `6 ] (deHex(tmp.substring(5,6))))1 M: V5 L0 x" H: y# R. T5 D
}
2 R/ R' D7 {& o. O+ @///////////////////Shimmering Links/////////////////////1 w. f+ @" n6 A g( ]; O3 ~# F7 t
//global variables" M ^2 U2 N0 c; L
var hoverColour
6 Q E; Q; b5 g2 t; w! P5 Qvar numLinks;
% f- X7 v z- i0 b0 s5 Avar rate;* B, ~# S3 a. c
var numFadeLevels;
( N9 c- {0 w* ^ S$ w7 ?8 Bvar bgR;
" R) S: P9 W7 ~) u# lvar bgG;
6 U8 B3 h( s- Y" B+ Bvar bgB;# @2 c3 j r1 }# o8 ^* J" V
var currR;
$ M5 U. _* t$ Uvar currG;0 u3 g* i4 _7 V6 ?( y9 [. y
var currB;" Y- M2 j. N {6 _, g2 X; F
var count;" N+ @. h2 s6 `! a3 A5 R% Y
var fadeOut;
5 |! _; l, |; L, F' Wvar continuous;
; a* G F/ @+ l) k+ xvar newColour;6 \" {$ S5 ^* d7 W
var tID;
+ {2 i+ S: |% }5 E5 nvar redInterval;
! u+ }) P: V9 p9 p- dvar greenInterval;' l: h- d# l% L6 P
var blueInterval;
; Q8 D2 ]6 b8 c. E4 l7 qfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
/ D; j9 i) |# I! h{
: O% k8 r0 z: r, M) z, O; J' L hoverColour = mouseOverColour;* m0 }1 O; ~2 O7 }* f
numLinks = numberOfLinks;- s3 s) t9 u% P7 O: W8 [* X3 v
rate = 1;
4 W% x- Z, C3 A/ @ numFadeLevels = 30;* P, b- V6 B5 y& s! `$ v5 Q3 E
function initArray(theArray, length, val)9 `% v0 t) ?1 s3 t
{8 ?; h# x% Q* k- m6 ?; F, `9 `# a3 A
for(i=0;i<length;i++)" W' ^9 N; p! o4 E" E/ K0 D
{
% h7 s6 A8 z7 ]6 g+ V: J theArray = val;
' B( V2 I2 A4 S% `' N6 O }
, M% p; ~7 u1 A A, i" }( W }
& e1 W; d8 v; P! J) J bgR = '0000' + fadeOutColour.substring(1,3)
; b8 {( ~; S) E& f bgG = '0000' + fadeOutColour.substring(3,5)
; D, O5 C! r$ M& _ bgB = '0000' + fadeOutColour.substring(5,7)& U; X+ N" R& d# {
currR = new Array(numLinks);, S& `. w* I. j, Y' W9 x
currG = new Array(numLinks);
8 A/ G; F/ w6 W" r% ^ currB = new Array(numLinks);2 j- {' A( i. s, G' Y8 ?" Y5 V
count = new Array(numLinks);
. w% [* M7 {% M& u" Z {( q( h8 ^ fadeOut = new Array(numLinks);8 a% y* R: A( A( `0 h/ B
continuous = new Array(numLinks);
6 ]4 A, V4 Y, y9 `6 U4 c newColour = new Array(numLinks); S5 ]+ ?1 z$ ~& h' ~
tID = new Array(numLinks);) X8 b+ I9 J6 G b6 a
redInterval = toDecimal(bgR) / numFadeLevels;
% k# |$ V8 q5 U4 J5 x greenInterval = toDecimal(bgG) / numFadeLevels;( ]; F7 l. n' o0 _9 Q# N
blueInterval = toDecimal(bgB) / numFadeLevels;) a! B1 c: i( O9 c, y6 W3 ]: E2 ]
initArray(currR,numLinks,0);
* N- s9 F7 V, y( V initArray(currG,numLinks,0);+ }5 r5 Z% K* B L0 d1 {
initArray(currB,numLinks,0);
" k" z4 v4 l/ _6 N1 a ]; E initArray(count,numLinks,0);( y1 D5 z0 E7 E2 L+ x( L
initArray(fadeOut,numLinks,true);
' @( H6 A+ j0 k c+ a initArray(continuous,numLinks,true); D2 P" |8 Q; |8 G! x- s$ q
} ) R7 L" @/ V% \: Z+ g; B3 G6 Q
function startFade(id)
- E! z, c7 x$ V6 [/ D4 `{
( G2 j2 T7 [! Z if(fadeOut[id] == true)
3 _! Q8 ^+ G; j4 x" @5 e- _ { /*move colour towards background colour (increment)*/4 [. B1 T% A2 \+ u
currR[id] += redInterval;
5 x' g, D6 H$ O0 o% I& e8 a currG[id] += greenInterval;$ y5 z- J. P+ u
currB[id] += blueInterval;
. i- q& p- H# w6 S3 O* ^& W" @5 @& j newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' t# X+ i, c* \8 g' z( E1 B if(++count[id] == numFadeLevels)3 z K. L) B l" G3 L
{% i1 I3 r; _& i1 S$ M* B8 Y
fadeOut[id] = false;
- E. N2 W6 P! A& v }
. `0 a, |* v5 H! @% X }1 `1 G/ f8 o" O) w
else
. k: n* q3 J8 q {
# f4 [$ p; N4 u2 J) b' Y2 J) y currR[id] -= redInterval;
% c: G1 y5 B; d1 t" k! `- u* N Q# L+ V/ Z* d* b6 H
currG[id] -= greenInterval;
; F) z# L* O( F/ L
$ N% I6 Q* D1 B9 _( h5 ^% F4 J currB[id] -= blueInterval;, i4 b; j, I: t
' v; ]8 T( S% g
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 w# a. `* r6 y* v$ |0 u( h5 @
0 Y, d; C' N0 O$ x- Q2 a if(--count[id] == 0)7 W5 w& b+ e0 a3 o6 n$ |) [
5 x1 v5 w l( I( P! S) n0 C" D
{" W& c8 S8 S3 h% [) {! L
8 _" j8 S' d! b. I fadeOut[id] = true;- F2 q1 N b$ M- L4 b
; E/ s; L5 T, [5 Y4 @
}! a, y% k# l" J* p z! m
9 f. k; m5 |+ G. d2 H' ~
}5 j8 m1 V7 ^ \* J2 p* _/ h
" C0 t4 P" z$ }
if(continuous[id] == true)1 ?0 L% h6 E3 N" c0 F" e
W+ E' x( j! b: {0 y! t3 M {0 T1 I( z7 D2 x3 l
4 R" a5 c$ n5 o- K2 B, N
document.getElementById(id).style.color = newColour[id];
- x' y; g8 f/ J6 c' s/ H( F, `" V. ]! m$ k* N0 K
}, Q. c8 i. L$ P6 b( Y( Q, B R
' e. B# n+ G# S else
4 x: c$ P! C. Q" N& ?0 [) O0 K3 u( p) s6 f
{+ }1 ~3 V* W; S2 a$ S2 h
2 r0 [/ Y) K7 p7 s' `" @; w6 c/ _3 g document.getElementById(id).style.color = hoverColour;& B1 P2 D8 J& {2 F2 h
( o5 i3 o" Y; f# d+ q0 Y0 b }
# P b& t- P3 h! @9 P7 `
( R# \0 X. T! r clearTimeout(tID[id]);
5 }: O1 s7 T/ z. c5 G
* R; y2 i. F& h+ y" N1 c% B tID[id]=setTimeout('startFade(' + id + ')', rate);2 e6 D1 G+ z# f
, o0 u y+ b. O: P5 ~: l, A. S}
6 |* X2 }2 b" A7 D" H
/ W* X. f) M' q- k: \! n. hfunction continueFade(id): o% w, m8 Y: N( p! S
1 o) J0 n" N6 E: R K{' U; [- [, h4 V, K
( u( b3 ~; h9 e3 e1 u1 o1 m* j h/ B continuous[id] = true;
5 u* \5 y! D' {8 \3 ]0 U# G
7 S3 B/ M0 b- U}
+ E, k8 E- }8 @7 B1 ?
9 [. m9 C5 M& F9 ^8 {, V. }function stopFade(id)* C8 K% G3 K1 n9 d
: N: i; \$ D+ W
{
: h6 u4 a& b- [7 a& z4 [$ {5 K9 T5 v6 D( P" [. s3 N6 f! @- A
continuous[id] = false;
# h) S4 y( a. l9 r7 B7 a9 a* L0 h; o1 H4 j
}
& j4 @8 e; y# D$ U
. A& Z' ?& N% L8 e6 rfunction StartTimers()
- A% R- E8 d( Z. [7 e' p
- G( ^5 e% ]+ r2 T{ //set up an initial set of timers to start the shimmering effect
) c1 z8 c7 s6 R, m2 y' a" O
" x6 r+ ^1 x" M6 R/ v# t- A for(id=0; id<numLinks; id++)
! H3 r3 {# g# T6 g z
1 f) J8 k2 V+ ` {2 {/ m! s! u2 i" u& F( X5 G! O9 O( u
" @& n) g8 _% F3 v; Z
t=setTimeout('startFade(' + id + ')', id*100);: h; b7 x) J6 G+ @
! j& @/ z+ L; z }- M# ^/ I6 i: ^: d1 V; M
/ f5 H: P) _8 O# S}0 w4 Z& y. Z$ L7 @
/ G+ A5 }' }* d9 F- R* X//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')8 k7 _, ~) [6 y
) J2 p/ N3 W: v, R5 V/ r; u) j
initLinks('#FF0000', 6, '#FFCC77');1 p y0 @- b/ E' |6 q3 r2 d
. O4 t* j# C9 E2 u2 U
//-->
# R; h7 Z4 T: [! X$ ^0 ?; {( i! i2 C% k. A$ O& g
</script>
' m. u3 X! C, m) x" L0 J<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元9 P% l" G4 z9 K. A% p& h' |
</a>. h" p# p) M3 t
<br>
6 P2 a9 W; J7 Z. N% A8 F1 p<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>+ K- L: P; h8 s& y' W8 `! V3 i
<br>
9 D! F% o8 H- F9 e% o( f7 ^<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
7 \* k2 c, b, Y6 w<br>
, j* d+ ^) V+ T+ y- l2 S<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
5 G6 B) y& ?4 h u0 T) D<br>1 O4 f- g- B# H* Q" d
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>2 \# n+ C* W1 q0 x
<br>& H u( r% X; F; ]
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ a2 P( }6 c1 a6 P( _
<script language="javascript" type="text/javascript">
. M( h. {# O: F3 P, \+ |<!--$ Y3 p' u& g f2 _2 |& _; p9 E- Y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering" ?8 r& Z" q1 W% N9 R
//-->
) e- \6 C+ |' d6 Y3 |2 c</script> |
|
发表于 2008-1-21 20:48
|