|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"> q8 V$ n# W$ z) D
<!--
7 C: a& U4 `0 p& V+ U4 h// convert a single digit (0 - 16) into hex
. f# n& c' U" }$ }+ |, zfunction enHex(aDigit), F0 {5 Y2 z4 l6 L2 p7 ?5 D* M% p
{( B4 q% v& {6 A
return("0123456789ABCDEF".substring(aDigit, aDigit+1))1 y# @; Y0 u. H/ g
}
5 s7 c: J2 ^ J% L5 D, @// convert a hex digit into decimal$ l1 u1 {& A; t
function deHex(aDigit) ^# S/ w+ c! ?7 p9 p
{/ h( G. m. w+ w. ?/ t
return("0123456789ABCDEF".indexOf(aDigit))
/ l3 E6 c6 a3 v- d+ Z}
8 o: j8 G) z( W' n# g$ [
; I3 C6 z T4 x4 O' S0 B8 S! j// Convert a 24bit number to hex
( U" ?8 Z4 ^4 u5 I8 h; q7 U& a5 Z5 Bfunction toHex(n)
0 [3 ^* _) L+ @+ o$ L* v{
/ K/ u' P( r% _6 R* t4 V return (enHex((0xf00000 & n) >> 20) +
* w$ p% _6 J, ~, `9 R( D enHex((0x0f0000 & n) >> 16) +# t% r/ R3 S6 b( S& [
enHex((0x00f000 & n) >> 12) +
0 J9 \$ h( T; n a7 x, [+ | enHex((0x000f00 & n) >> 8) +8 l/ r b' U& K- b. v# L C
enHex((0x0000f0 & n) >> 4) +, ?9 |0 K: T6 h' t0 O1 ]) [% D& q
enHex((0x00000f & n) >> 0))
% G* J, N" U/ z$ R- X: @}
) I# ?( U% u5 S1 Y/ F// Convert a six character hex to decimal
3 I3 V7 N6 T/ |9 Q! G* x2 Jfunction toDecimal(hexNum)
; H+ ^( L& b* R8 T$ N) L0 M{
1 f7 I/ r) w% b5 d. l var tmp = ""+hexNum.toUpperCase()9 ?5 I0 `" d0 F6 c$ P
while (tmp.length < 6) tmp = "0"+tmp
* |4 j/ n0 n* v7 a6 g return ((deHex(tmp.substring(0,1)) << 20) +1 V* _+ Q. _- o# a; m1 O
(deHex(tmp.substring(1,2)) << 16) + * y, v3 O) Q; `4 T. l1 U
(deHex(tmp.substring(2,3)) << 12) ++ R3 Z/ O+ U7 J* G {6 V
(deHex(tmp.substring(3,4)) << 8) +
; A/ ?, y! N/ _ (deHex(tmp.substring(4,5)) << 4) +# V" ^( K1 Q; r, V
(deHex(tmp.substring(5,6)))): G- p: h1 }/ O6 {* l
}
7 H5 z$ f! @' E! S m' k" S* Q///////////////////Shimmering Links/////////////////////
7 R$ F; W# H# i( A* Z* y//global variables6 j5 |' f3 G1 y% P( N4 s1 `
var hoverColour
( ^2 j; V2 ^4 S8 @# D N+ ~2 B: xvar numLinks;/ O. y5 W/ E7 D# m9 B0 ~
var rate;3 L8 I# N5 O. V3 K: d
var numFadeLevels;( U8 } X j1 i: I6 }/ c. v
var bgR;( f. J' g. J+ }6 H+ d( X5 \
var bgG;$ F) F1 H! V: g; p3 R; x8 D8 Q
var bgB;
7 s: U" L8 g6 d( `var currR;
' S' `$ ]( Q+ q. Mvar currG;% D3 {2 a1 O4 y0 ^4 [
var currB; {! i2 ~0 `0 P. f( W7 a( t$ Z
var count;# @# f$ l, C E7 [) @/ H" {. N2 g
var fadeOut;+ h5 @+ E+ P- `8 U9 ^
var continuous;
# n" W) T8 B/ z. j/ _var newColour;: J. J2 `2 n1 @/ ?! m( m( q
var tID;
( S3 `) p4 a( n7 t8 U* i# O8 |3 e g3 uvar redInterval;9 ~- s m( u5 R1 j% d; v+ G% L
var greenInterval;
3 E4 j3 L9 I3 f3 v5 Lvar blueInterval;' D9 H# z2 J4 j6 U& l) ]( e! m
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour) |1 Q b! Y4 e- r
{
1 z1 T4 z) h# K2 Y+ ]: _) F" Y! k hoverColour = mouseOverColour;; f5 o- W% k4 }2 m
numLinks = numberOfLinks;0 j0 ~" _+ `. |6 K6 }3 O
rate = 1;
+ R$ ^/ |9 W4 J2 ? numFadeLevels = 30;
b% d7 R c- @6 f; ?" _6 t6 @! _ function initArray(theArray, length, val)) s1 h! n; X9 @3 c- v9 @3 j
{
. i" p) v* ~( E9 a for(i=0;i<length;i++)
7 a6 T0 o3 W6 h" |: m {
1 A1 F2 V: @; t) \& @4 C K: Q0 v theArray = val;; C) s7 {0 Y0 u' E
}
! P& b% I' k" ~ }
! i( t4 ], F% L bgR = '0000' + fadeOutColour.substring(1,3)8 X: w7 W0 t0 O% o8 E$ B3 m
bgG = '0000' + fadeOutColour.substring(3,5)
9 W ^6 ~* F6 K bgB = '0000' + fadeOutColour.substring(5,7)
) x Y2 o, p" {9 p1 h9 w/ \/ M currR = new Array(numLinks);
9 p5 T8 b7 s6 ^; }# H* x6 c$ u0 L currG = new Array(numLinks);
: F: B# c( L. W currB = new Array(numLinks);: }( m7 k7 y5 w# g
count = new Array(numLinks);7 a6 V0 p( S% T& ~8 n( c
fadeOut = new Array(numLinks);
0 |+ w# B! T" f( [9 u continuous = new Array(numLinks);
% }5 x: @. R% w, e+ k$ e& z newColour = new Array(numLinks);
! U$ F" S1 ~; q2 N: M' [# P# \ tID = new Array(numLinks);
& a5 b( ?. G- O- j redInterval = toDecimal(bgR) / numFadeLevels;
( c3 e7 ?; ^# ~7 s greenInterval = toDecimal(bgG) / numFadeLevels;" c: c$ Z2 J, {0 Y2 v
blueInterval = toDecimal(bgB) / numFadeLevels;/ M8 g/ k) O. J( u# p. h
initArray(currR,numLinks,0);5 m" d% w J3 o; q$ ~8 [' U* I
initArray(currG,numLinks,0);
7 k& S0 A' D3 `# ^3 Q8 P initArray(currB,numLinks,0);
! ^0 y1 g* x2 F' U initArray(count,numLinks,0);
9 E4 I4 G, E6 \4 I& l& `4 V initArray(fadeOut,numLinks,true);
* {6 f N& D2 n {' P% ]/ e initArray(continuous,numLinks,true);
- _: m; e7 t/ g# K9 e$ Q& ^/ O% [} 1 a4 \+ k# z* V9 {; f
function startFade(id)
7 _4 P" d; L( U- @" x1 A* ?{
m: h2 v6 j9 ^/ v9 B if(fadeOut[id] == true)1 v% E- f* X6 H4 p& [$ s, ^% I! O
{ /*move colour towards background colour (increment)*/
3 C) L" _% V7 ~2 n9 ~, v! R currR[id] += redInterval;; f4 S" F# a0 [+ a' c
currG[id] += greenInterval;
, W! U4 n5 t) t! D% c currB[id] += blueInterval;
, d( A) k! a! ? newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 \ J9 ^1 E4 | X1 o if(++count[id] == numFadeLevels)
! L1 U) r" r7 n6 \9 ?; {! F& s {
: Q m9 d2 l" a2 Z T2 U' ^ fadeOut[id] = false;
9 l/ W; L+ S8 B+ d" o, |# d }( O5 p* \3 e+ u3 |4 s9 ^9 t1 Q$ i
}1 i% p& }6 I% h! _6 y+ a: F
else
8 `: F, z6 Q9 { {! a1 N- ` d |
currR[id] -= redInterval;
* m% L( Y0 t+ V- f8 n* R4 K, [+ d! K5 e' O* z8 v
currG[id] -= greenInterval;
* S, U: T4 e2 ^. d
3 J+ m9 o4 Y1 j% S9 t currB[id] -= blueInterval;
; B5 R; D1 [' A3 G3 E4 n, n! M+ U" z. F( I+ z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( I0 H; d1 j, c1 r! ?- X2 p* i4 Q. W
if(--count[id] == 0)' m. c& t* U- y6 v; D2 i4 _3 T. L
* j# J" L* a5 R' M6 x2 X% t3 k/ m {/ w5 s4 Z9 m9 T- w" | j
) @- `& E! s% p% B/ l4 O0 y; y( l fadeOut[id] = true;
* @5 z+ h# H2 C1 h3 b( W
# f( `- R6 K6 B/ e3 Y. S) j/ g }
4 n& [3 L" F. h! C
( P, i8 j5 P" H) W }
( L% E# P' s! u% W' G& s" W
7 A; e' M% X1 I$ ]: @ if(continuous[id] == true)
1 v+ |2 G! x6 Q0 K6 K$ Q1 h6 ~( V: L5 B _3 f
{- \. ^8 O0 d, E4 z6 E
8 @: d& x1 j2 {$ A document.getElementById(id).style.color = newColour[id]; 1 K; N# F: I, F3 _4 k
' s+ B. F' Q/ n, a9 o
}
" z8 W ]' H( r. m- D% W9 L( D7 P; @( a" d0 S. E
else; v. B; I; P- `5 g
7 K8 ^" h v" Y$ O6 Z: c {
' }( s8 g2 E! Y/ l% F
& t% m, l$ h T( x7 y document.getElementById(id).style.color = hoverColour;7 l/ e4 B p- V5 {/ ?' v0 o5 H
2 f) S1 q1 y% ~* n6 H
}$ p* ~3 Q6 s6 W
/ k/ D! L$ A+ ^) ^$ D) T- u clearTimeout(tID[id]);
/ q) q2 t L7 q0 ^4 N
; `- P) L; q P* N, v# \2 X tID[id]=setTimeout('startFade(' + id + ')', rate);
7 V/ R: z% e; c$ ?8 H$ K8 M: o" e0 w0 [3 V) V- z4 i' J* S
}6 g5 o& i2 X/ Q( b4 Q2 ^
9 M1 f M& M' z& e
function continueFade(id)0 E `8 J v* N1 P, \
% M; s4 E" y4 ]2 W+ P1 _
{$ V) x3 c' @( \& k
% j. F/ T) h# e, G1 ?
continuous[id] = true;8 |- m# e6 C6 Y
7 i3 _5 W' h" E+ c4 K6 m' Z
}
) S( B8 J! ^' y7 ^* r5 j- e% P4 ?
function stopFade(id)' o' [ j$ M" ]5 M, h
' R8 X0 |$ }# T$ K6 N{* x4 ~8 U% H; c, e/ y5 F* e: g
0 q$ |6 d; ~$ Q$ D continuous[id] = false;5 ~( Z3 `$ c' U& E7 h
2 O7 d0 G9 L! D+ z" ^ {* S}
) `$ @3 D( I, s. i& M* f4 R7 |$ T4 V- X2 D! o( b
function StartTimers()
& @* _! b; T K, \, K7 ?, h0 B+ q' u4 p
{ //set up an initial set of timers to start the shimmering effect2 U* ~, R- T, b* l% R- Z0 {
: Q$ K# t0 b, R5 d for(id=0; id<numLinks; id++)
+ v8 h6 l3 A+ k! m* E J
/ G6 s- j+ T1 V1 b! ? {. z8 O. C0 Y1 \+ V7 m* K8 @$ D }
0 U+ J* x- j, x6 [ t=setTimeout('startFade(' + id + ')', id*100);
% n* I" _ |) t* @
6 P+ u$ l! L1 `, T# H& `* ^ }
1 [& m; v$ n+ e1 D' {% c% t
/ V: j5 a2 v4 _, x8 F}
# A& ^$ J$ x1 E. ~1 w
2 B! [, Z0 V7 V# |: s//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')% ~( C$ f9 q; h* z. A5 q: O
$ H' t1 a6 `6 v0 B( p! t
initLinks('#FF0000', 6, '#FFCC77');% {" q7 ~+ H7 g7 o8 T
/ J: k5 V1 M" V: x1 I. q
//--># C Q, Z* M( a2 H: c
; m( t1 h) G. J3 ^: {, H8 n</script>: t9 E1 o; n1 w& r( ?7 [
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
, N$ f4 y2 a# m</a>
' m6 X8 n. J5 @7 N7 U<br>! f5 h Y8 j* _& A+ x
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>. U0 I$ J' B1 e! ] a; R/ _% J
<br>
4 j: D0 M: O2 j. J$ h3 |/ x% U* Q<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>& I7 s: z6 v3 X+ n1 Q9 c9 w
<br>
/ R$ a+ U" S4 i6 Q<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ X: d; Y: |+ A$ {+ b7 }
<br>
4 B2 Y7 ~6 L) H: t" y- R7 c<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>2 R7 R- G3 P4 d2 k( d( a4 i
<br>
$ k% y/ b9 U' u1 E" V# g! E+ ~<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
4 t8 h4 p, _0 v$ w8 p<script language="javascript" type="text/javascript">
8 r* i1 m# ]7 o3 \& K( X$ ^' h<!--
2 o; g7 o0 ^& F4 i" `, r6 RsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 Z. y/ u6 P/ v9 u, a9 Y* Y+ x//-->
$ v( \4 Q+ C J8 o</script> |
|
发表于 2008-1-21 20:48
|