|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
: B3 W# w8 A4 J1 P" h<!--
, x5 Z4 Z$ @7 H9 l4 c- n// convert a single digit (0 - 16) into hex
4 _1 P F, k" U5 r0 M1 g% afunction enHex(aDigit)" z& K$ d4 H! ^5 N: P7 c( ^
{
( d' @5 Y+ p n% I, C return("0123456789ABCDEF".substring(aDigit, aDigit+1))
) H8 k( Z; z0 ?- E' F$ O) ~}
. C: O! M5 d7 `3 d9 y; p// convert a hex digit into decimal
: {) e% ~! K- K% Lfunction deHex(aDigit)/ K, R" p# V6 k$ C p
{3 R7 J1 F9 @! Z/ R m* v1 Y4 P# j% \
return("0123456789ABCDEF".indexOf(aDigit))
4 X% }) B3 N* j0 l5 T- z$ \}8 i2 u" j1 q. s2 A1 ~# t) F$ f/ o
/ R. z; i9 {7 S: U0 z3 L7 u# C// Convert a 24bit number to hex" d P, F7 ~7 m' l
function toHex(n)6 L+ _0 o8 S* [8 N
{
! i: K9 B7 r. g, F5 |/ G return (enHex((0xf00000 & n) >> 20) +
4 k* i6 O9 A& _, l8 t+ C$ f enHex((0x0f0000 & n) >> 16) +
2 Z+ \2 _, k1 G0 R4 |+ }5 | enHex((0x00f000 & n) >> 12) +# n* r, K/ d9 V$ I5 z% K! F/ F$ i
enHex((0x000f00 & n) >> 8) +4 N9 K; j! }7 a) _ E! N
enHex((0x0000f0 & n) >> 4) +
o0 I1 S8 V1 n* k Z enHex((0x00000f & n) >> 0))
I) X. p/ x; }* w' r* B}
: o! f' O2 P' a/ ]! R// Convert a six character hex to decimal$ V" Z% u# p8 K' z% Y& X! R
function toDecimal(hexNum)
; P+ F& E. r& }% _( E{
/ L" V2 P! H4 `4 p$ m6 B5 |* O; J var tmp = ""+hexNum.toUpperCase()
6 S6 @' `2 X% K4 Y7 o while (tmp.length < 6) tmp = "0"+tmp* B! N8 G8 A5 a% S8 y' m, [4 F* V/ w1 S( H
return ((deHex(tmp.substring(0,1)) << 20) +& ^, { d8 y# P8 \
(deHex(tmp.substring(1,2)) << 16) +
% Y" o% D; u0 V0 ?# w (deHex(tmp.substring(2,3)) << 12) +
( C3 O# Y1 a6 _& n (deHex(tmp.substring(3,4)) << 8) +
9 u4 m/ q! F' S4 R) d (deHex(tmp.substring(4,5)) << 4) +: ], @; ]1 ^6 O. [( x k
(deHex(tmp.substring(5,6)))). L9 y. ~; i9 g! a3 ]8 @" F
}# h0 C$ f2 F$ z# Y: e
///////////////////Shimmering Links/////////////////////
0 c$ `' m5 f/ L+ N3 S//global variables/ L% U+ D3 ~, S2 w/ ]* I+ j) }
var hoverColour
* @! Y! d z; |+ D+ K# |var numLinks;( a% N/ p0 F2 ?! }1 |) Q! K
var rate;
' @6 M! |, h' H6 g, _var numFadeLevels;
; h. O2 V3 o2 K: E, n: v6 C- d$ g6 ]var bgR;
`/ V- G6 K1 T% U) F: }4 cvar bgG;: H$ Y/ T; w! M& b7 n1 b, M* v
var bgB;
2 L4 |7 J$ h: Y$ @5 rvar currR;
2 i& n7 }6 x8 T1 ^! S6 b/ mvar currG;, [* u+ P* W2 B6 t5 p9 _
var currB;' E/ U$ ]* W/ ]( s+ `4 u+ _
var count;6 i% j/ _- [ H: A! k, o5 H
var fadeOut;3 O; B# Q( N* f( P* @# P/ R
var continuous;* G4 X; J {9 V! [/ J
var newColour;
' b0 Z: }; c/ X8 {$ `( evar tID;
x0 k2 u& m3 H+ c5 n) @- c& yvar redInterval;5 i2 p' g, Y: q/ G
var greenInterval;* ~1 B" {- h! E3 Z' x. r" t
var blueInterval;
3 F/ X7 }: Y7 \, D. P: ]function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)1 W/ m# R& ^3 l. b, v- K- q5 L [
{8 p/ e2 d* Q1 x1 d
hoverColour = mouseOverColour;9 Y3 P) A- g+ n" ^9 Y- r
numLinks = numberOfLinks;
) d# ]; x* N) v e8 Q rate = 1;
5 u- |& ^: G) d# V3 J3 k numFadeLevels = 30;
( I% j2 e9 i/ X; ^ } function initArray(theArray, length, val)( l5 D$ X/ N9 j4 O! d: B
{
% R; ^4 U! O. z- f5 [ for(i=0;i<length;i++)/ S3 {( Q4 j0 l
{
' B% y9 q) E+ W theArray = val;- a2 W/ ]' p7 B$ q$ v* B7 c
}
+ M$ S1 {. s& h' Y }( e, A6 J0 }8 |! _' I- Q
bgR = '0000' + fadeOutColour.substring(1,3)
- O; a8 d# `2 o# ? bgG = '0000' + fadeOutColour.substring(3,5)
8 o4 v" p) x% r3 {+ _" U; `( ~ bgB = '0000' + fadeOutColour.substring(5,7)1 U1 m( a+ P1 v, O
currR = new Array(numLinks);( i U3 a$ H7 r5 h
currG = new Array(numLinks);! j8 b& f/ _: U
currB = new Array(numLinks);& W% D6 O. d9 Q# ^( Z. n! D, Y
count = new Array(numLinks);
4 S i/ Y% d' o fadeOut = new Array(numLinks);
. Y& i) s* K; m& V& z continuous = new Array(numLinks);
, f" D; x) Y6 u% U: L( G newColour = new Array(numLinks);
' o, |% n- J5 d% ] tID = new Array(numLinks);
4 K& n4 G8 w; g0 C& Y/ k- O. K redInterval = toDecimal(bgR) / numFadeLevels;
' m& N- r4 K& o/ }+ L greenInterval = toDecimal(bgG) / numFadeLevels;
5 r$ S2 G2 W7 m4 q4 c: K" A blueInterval = toDecimal(bgB) / numFadeLevels;& ?. @5 d5 e7 E4 w+ _. N, N. k
initArray(currR,numLinks,0);
0 k/ a- [' `+ f" d/ U initArray(currG,numLinks,0);$ |' Y2 t9 F+ B4 r9 j. S6 ~* V
initArray(currB,numLinks,0);
3 @# ?( a9 u! g initArray(count,numLinks,0);1 M. j4 H- ~( U. {$ x0 @1 a
initArray(fadeOut,numLinks,true); }& F; V) i/ a9 h7 B& _) A
initArray(continuous,numLinks,true);
0 Y: `0 _$ b" [, i0 h1 k} 4 D" k4 P {+ K$ C5 j8 O0 } O
function startFade(id)
7 c6 p. {6 W1 k3 a& G{+ o2 u/ w$ E7 U5 X1 r, Y
if(fadeOut[id] == true)
6 z% k* ~# p% B8 ~) N { /*move colour towards background colour (increment)*/- M+ N6 ~0 r" L
currR[id] += redInterval;
$ y! l% M9 e. i1 _0 H( J9 F _ currG[id] += greenInterval;
. { ]( L4 I8 \- i6 N/ L1 l currB[id] += blueInterval;
3 M2 q. H5 Y# D6 U: x6 E$ V newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 K9 P; x9 u6 ^1 @3 ^ if(++count[id] == numFadeLevels)
1 c$ F2 e/ Z9 y. I1 r4 n {
$ x: y+ ] W3 W5 O fadeOut[id] = false;
- F- M3 X/ F) S3 B& e, C* W }5 c4 z( ~6 d$ y
}
: V4 |: r% F/ T! X; U8 g, o else
% s3 w0 v5 a8 p( {1 I( r4 r8 X {
- {4 P$ e+ u. S1 m currR[id] -= redInterval;' p7 O8 o8 e9 k: J" q x+ `: d! F
8 M+ v3 H' c ?
currG[id] -= greenInterval;
) F: o$ R& H( e; |" ]( R& w2 R! r; r' d7 l! l
currB[id] -= blueInterval;4 E0 h0 @( q! ~/ ^: S( d
7 v# l9 u1 B! }/ {/ B7 @6 k- B
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) s3 N) ]6 A3 L% e/ u
* k9 V2 g) B/ B; B. M% _4 }; z if(--count[id] == 0)
$ Q [) @' b% f D, t
+ L# y2 p* n# n0 {6 B {
+ v0 f) f5 {) j0 f ^- l& ~0 ^9 n0 m4 u* l" R7 }% v. h
fadeOut[id] = true;
5 W [3 o1 J) F6 ]8 @, f0 |: R. ~; D& M; A! }1 c! I( `/ Q/ N
}5 i) `8 ?5 J9 u, x
1 d& t6 y5 Q! f5 d
}
+ ?( I5 X1 r4 y/ I2 q& W* K
0 ~% p9 }' d6 S/ T8 _ if(continuous[id] == true)5 V. w. z8 L" ^& W: g
; O" l2 S! h: T/ K
{& {1 Z! f8 W! i
# s/ c! _0 z1 Q8 B1 x& K
document.getElementById(id).style.color = newColour[id]; # G$ I5 R; ?; b: C' U
% l( R$ g( T$ V; ] }
/ m% |+ t a8 f- M2 A0 |
* A0 f0 d/ X( y% a/ V$ s& \ else( N, O7 f/ [5 j
/ a! e/ y' U& H1 }# o {
% u3 h6 Y! B/ H7 ~. I) j$ k4 K+ G0 F
document.getElementById(id).style.color = hoverColour;
$ z# _, K) a" K& B: L
1 X; j1 z2 z( T8 G5 u/ \4 Y d2 }) k }- q* V$ @6 }$ Z, S( V
3 E1 ^% i% y8 \' _* e, H @+ M clearTimeout(tID[id]);
; R! y. b+ l; l6 X: |- ^# }
+ \! ~6 u g' n0 Z3 _6 t tID[id]=setTimeout('startFade(' + id + ')', rate);; E. j& f1 m$ d9 i8 H
! s" B3 I2 k+ z2 z8 T- f
}
4 {" O3 C9 O0 [* q: o7 e3 W" E( M3 I! T1 |
function continueFade(id)/ P; R5 b( U" w8 e) p1 F
, `! J2 T6 ~+ i" F8 w, g{$ y* _* x, [: I
X) u) z, m+ Z) k7 R8 | [
continuous[id] = true;
3 P/ v4 T( L- k
. V; j; z2 W: Q: Y8 \}% f2 O) }8 {- V
l) k O1 a. `/ T, E2 @# o
function stopFade(id)
# U* T! V1 S `8 U( x/ o/ ~7 ]' p. [; H( _9 D* S* L; y- k
{
" u U Z" {4 @$ l% s% X; c) B* `; v. v t2 J
continuous[id] = false;
- U# x8 |1 k' b4 Y7 x: z! B/ X6 o+ c% m" y/ V
}
+ G3 N/ o) P _, z. n7 ^. f; {& K2 [4 u* S: G' b7 G
function StartTimers()
! q1 O7 }2 L( K/ X8 {$ s( h% t+ R! b
{ //set up an initial set of timers to start the shimmering effect
% G' G9 ^! N; X9 } }8 N; J9 J
/ X, f5 X, x( l: Q, r9 T for(id=0; id<numLinks; id++)' j4 N) W% q! F" C
) \, _- s0 t" x a
{8 F/ _& ?5 s/ E# i( |* X
+ h, V) s# Q0 W9 B x- m+ ] t=setTimeout('startFade(' + id + ')', id*100);
( J+ h5 R' ^! J" H7 v' Y2 t2 m4 J
0 u* U- _2 F0 v% o5 l. f% N& Q2 ] }, ]% W: {' I u" I
9 P9 _3 t' ?5 v _9 s8 E$ {, O- T
}
4 L0 a+ L. u C! G/ r
1 n- [% _. U! E, |+ D7 l# \//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')' O3 ]/ n' O* }2 P
& \ G& P8 q" K0 C) J8 J. m& R* N
initLinks('#FF0000', 6, '#FFCC77');
" L, ]! T/ x5 h4 ~( Y+ ]$ q) u* r- g7 V4 N
//-->* i' A( R# i7 g" P* D2 t
8 [; F( w! x0 Z' h' e</script>
9 f1 D) L3 d% o9 e; f2 F! t<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元" @+ [/ g9 z- C8 a" ?9 [
</a>
4 d9 G% W6 @6 U3 v0 n: f<br>% d2 f% J& O3 k; Q( [
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>9 e7 L3 K) t% ^
<br>
, x, j! e# F* O6 n3 X+ B/ T! b<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- O" I* o! |7 T- ^4 G0 l4 i<br>
+ s" H S! H' F/ R! U<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' S3 _% @8 q! n5 Q; _/ c
<br>7 C8 |% K1 m* [# G
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. J' T+ H1 [$ Q2 s( R7 j4 ^
<br>( ^; L7 A0 U' {0 u; t" m
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- n( S# v- j; F% m5 }( j9 S<script language="javascript" type="text/javascript">- r4 V& m) \+ ]% u+ o; Z. r3 m
<!--
* T. S; g* s8 XsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 H, l3 _' {9 ?! S' ]' B: E
//-->0 B9 x, @) S/ C1 S5 x- E
</script> |
|
发表于 2008-1-21 20:48
|