|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">; e- J% E2 w/ ]. S$ n
<!--
- H J* w2 K5 ^! Z6 ~) s// convert a single digit (0 - 16) into hex
) t8 y% O+ R/ C2 M# dfunction enHex(aDigit)
2 E3 Z7 z' i% ?# G9 P9 S7 j{" b+ `8 D/ B# j+ A6 Y9 |
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
( w# `6 x2 I0 ^( g5 K}
4 F1 t: V+ D0 p, a9 a// convert a hex digit into decimal$ C# p |# s- u
function deHex(aDigit)' {) ]* o! o% p. `! {5 S
{( O+ x$ {2 A, r" Q, j
return("0123456789ABCDEF".indexOf(aDigit))! l& |7 h& O0 z. _8 k9 M
}& U: x# b+ x9 b5 s( J# |8 `& J: `
. @8 `7 X- t) u! z
// Convert a 24bit number to hex1 V) i2 u3 k* {/ B
function toHex(n)
* w+ l+ Z5 g) P9 u0 m+ E" W{
7 o+ \% j, H$ V/ ] return (enHex((0xf00000 & n) >> 20) +" F% o, u/ s; t+ ]; _+ u V* l ~
enHex((0x0f0000 & n) >> 16) +% P/ i9 O3 o- A" s4 Q/ d
enHex((0x00f000 & n) >> 12) +
7 z5 l v+ v0 R+ ?9 e enHex((0x000f00 & n) >> 8) +0 C7 }( N3 `& J
enHex((0x0000f0 & n) >> 4) +9 b8 w7 ]4 T3 U, {# N/ G+ u1 u
enHex((0x00000f & n) >> 0))+ W# U- o3 J6 T9 j
}
3 K9 c8 y, M1 t9 S// Convert a six character hex to decimal8 L- P- f, \( R5 [7 O
function toDecimal(hexNum)
8 J$ d% R: @! k, b: k6 \8 u{
7 f: h! N$ z' y/ s7 c b& C3 m6 r var tmp = ""+hexNum.toUpperCase()
+ I9 p; r9 L% E2 _ while (tmp.length < 6) tmp = "0"+tmp% Y! H8 T8 \- G. F* W$ D
return ((deHex(tmp.substring(0,1)) << 20) +
4 X+ d$ }% q9 W& i3 \7 y; ~ (deHex(tmp.substring(1,2)) << 16) + s B K/ S1 s; b0 }2 ]( V
(deHex(tmp.substring(2,3)) << 12) +6 ~9 b* n" x: X
(deHex(tmp.substring(3,4)) << 8) +5 s' @) P( y5 L( g
(deHex(tmp.substring(4,5)) << 4) +4 G) \, O3 v7 G l
(deHex(tmp.substring(5,6))))
; r- S; y1 T. s" y9 p}
3 r% ^3 t9 A# z///////////////////Shimmering Links/////////////////////9 b+ V4 ?3 K' N o
//global variables! P% V# u2 o% W' @( C, l
var hoverColour5 q% |( R# Y8 Z' @
var numLinks;
! r4 U3 y, \. U- }var rate;
; Y& v; y4 w/ F5 |$ svar numFadeLevels;4 A0 t3 G2 O! ~' ~ d& @; B' G$ n) f
var bgR;- w4 g8 o4 \ G( d/ Q
var bgG;
`3 v8 l5 Z& o, Avar bgB; X Y X* a( n, P" r4 ]
var currR; R- K( O) ~7 {: l6 r' D# E
var currG;" _ D2 g W) P* H% H4 ^# i
var currB;
: P T# \5 }. t+ a3 X3 nvar count;2 u! k) }( U5 l( Q! E
var fadeOut;. R: S3 ]" Q! e; M
var continuous;
. |) `& y9 D7 G: }2 y; Mvar newColour;, }/ o3 Z5 ], W6 K! q( k
var tID;) H/ K6 N0 w$ O- |* l
var redInterval;
+ ]: V% @+ e( g" Y2 Bvar greenInterval;6 i, d/ u: K7 z+ e* e# g0 F
var blueInterval;% Y! V5 ^- Y1 w$ Q1 I3 |' S5 R
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
* M- d3 o4 G7 _ M: h2 X3 F{
) w& ~& n# {3 I" }: w0 G) d hoverColour = mouseOverColour;5 G! _$ P6 ]0 X) ^
numLinks = numberOfLinks;
) z! C! v! A; l6 e: E rate = 1;' y* `7 a, z n
numFadeLevels = 30;
& p0 `! l3 y. A0 `2 z6 x; o) U. V function initArray(theArray, length, val)! y5 E5 E6 ?+ T7 P4 ]
{
7 R$ n# Y2 U- L( K6 G+ E2 A9 ? for(i=0;i<length;i++)0 q& K8 o' A1 [" N
{, z6 ? `$ a, ~
theArray = val;
5 ^8 ]! [6 Z. |9 ?( ~' W }
; ^$ T- C; R% ^- e }
/ J7 F' b7 t5 o8 n& r bgR = '0000' + fadeOutColour.substring(1,3)
6 v8 h2 L* v: C/ d3 P7 m2 ` bgG = '0000' + fadeOutColour.substring(3,5)! A0 T5 R! d6 O% z9 {: a' p
bgB = '0000' + fadeOutColour.substring(5,7) D' U# r3 M Q# s, T i
currR = new Array(numLinks);5 t' @4 I$ a& c2 X) [
currG = new Array(numLinks);; N: {8 L, n3 i4 H4 M) @
currB = new Array(numLinks);
: N$ R) `" b: x ?/ e count = new Array(numLinks); K; J# B3 W1 `. Z6 A4 S2 b: K* j4 f
fadeOut = new Array(numLinks);$ c( i5 F( Z( `$ H) a
continuous = new Array(numLinks);
0 B- j H% F; y* T0 w% B6 J newColour = new Array(numLinks);
! o7 r' N& p2 y2 c9 [ tID = new Array(numLinks);
5 p- `; R; l4 t. u! Z redInterval = toDecimal(bgR) / numFadeLevels;( Z6 ^6 @+ f. f: g# {, d- X
greenInterval = toDecimal(bgG) / numFadeLevels;
8 E2 I% F0 v! n: U" q. R' t" D7 {% M blueInterval = toDecimal(bgB) / numFadeLevels;
2 _0 a7 J8 i/ U( f2 x6 C0 ] initArray(currR,numLinks,0);
1 u/ W! F" m( z7 O3 I' O initArray(currG,numLinks,0);* h; m1 f% X0 i6 Q: I
initArray(currB,numLinks,0);
9 N" V- _9 n9 v% N& a5 i initArray(count,numLinks,0);& a- a9 ^! ^' f' j! M
initArray(fadeOut,numLinks,true);
& m5 h: ~1 M* f$ r. y+ B6 n. J initArray(continuous,numLinks,true);
" v+ }# d- f8 @6 R$ I} : G2 `* Y8 p4 o5 [4 C, W9 ]
function startFade(id)
7 }1 N7 O" s. o3 U4 \ V6 v P7 x! F/ b{7 i0 U3 w9 G; a. j/ Q( c" l
if(fadeOut[id] == true)
/ Z/ x. ~0 b% p% M' O$ T { /*move colour towards background colour (increment)*/& U6 H$ c# {3 k, V6 F; S
currR[id] += redInterval;+ @. d4 x* u* c% I) I
currG[id] += greenInterval;
( U" p% w# ]+ u) N5 }" u4 k currB[id] += blueInterval;9 R- G0 D ~0 F2 d* Z2 y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' S0 e; _9 o- H/ S7 I. x b
if(++count[id] == numFadeLevels)
0 E& v! Q% w7 Y {
3 a' O( u. E" ~0 d fadeOut[id] = false;! h1 `2 \+ J( X6 _
}
4 @3 q8 F$ R- ^1 ~* _+ f$ Q/ X }: j; N! R" B2 W! u: I5 n; ^& I% \% U
else; T5 n4 K& b- x1 j/ S. O+ K
{0 v6 a9 c$ \' p, _
currR[id] -= redInterval;
( x+ u8 h1 ~% R; \5 w. v" r* G* ^2 f4 p" j! J1 L7 L" u# u! d" ^- R; Z. R
currG[id] -= greenInterval;
2 ]' h2 y; [- D* ~% u
1 `% R$ M) f( a6 k$ n+ ]6 u: {. R currB[id] -= blueInterval;$ {, `& Q+ _/ @1 Y
4 F$ z; _$ s+ C7 z( u6 T6 y. v
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: X0 C4 {# P& d# E, g
" r, t) T. P4 `: ~) O( ?( @3 {5 m if(--count[id] == 0)
* b5 ` k: H' V( P' u9 V# F# R, g h: H# d* e5 Y% S
{
. u8 _: O/ u: }
) Q# Y, a" f+ { fadeOut[id] = true;
9 U, L K- A: d- Y1 K1 y( h7 H0 s% E' m( m7 y, g
}# @; E5 ]4 h# d5 t7 H, l3 Z
- L4 F/ w- v* z* c% ?; X8 A
}9 ^& `( g2 _% c
+ e: p& w* z$ _. N5 `8 g4 T5 R
if(continuous[id] == true)/ d- t+ `' u6 L. ~ u
6 Y, J! p0 R( F, S& v) |, B {+ |/ N7 _" }7 ~2 a$ Y, k
3 ]% p# M* [ g' }$ I: `* x* ~ document.getElementById(id).style.color = newColour[id];
% c3 k5 h: H3 E: g0 M6 `3 T7 C! o) F9 @+ u* \
}
% b" S6 p' d& E, R5 W
, h# p' y9 z3 e1 ^' X+ \ else! s$ k0 q) f2 b: ]+ b& r/ [
) S2 \! G8 G' D+ ^ {7 N1 ^. k ?6 ]" s7 ~
1 n3 L4 ^$ _4 @- \
document.getElementById(id).style.color = hoverColour;
8 G3 y1 v* i1 b; c6 p, c
/ j8 y6 z$ X$ Y/ X* ^ }+ f1 S3 {2 a8 O! U
+ t3 i) H+ q' E" F {3 B& T5 } clearTimeout(tID[id]);
z6 n) G4 T2 }5 W, ?8 J
- z3 I+ k1 y* f0 ^( r0 p( v tID[id]=setTimeout('startFade(' + id + ')', rate);
( r1 s+ F* d8 Y+ G# p3 S; Z# d" l9 w4 r- k. r: P" O3 f
}: b2 I3 F9 p2 p, A6 L$ P$ M& f
0 E; D9 \! x1 K h+ y* kfunction continueFade(id)* M: V$ O f$ w4 ?5 z
; v/ \+ @8 m: \2 S1 Y/ z
{
0 g3 e+ R% R6 @( Y# l3 p- e/ m7 o: J5 n
continuous[id] = true;
( E0 N, v: |% T/ A
5 k. Y* I" [- \, F}6 {2 I" |4 l/ h1 k$ g# e
4 U; }) o$ s D9 l& V T2 V ifunction stopFade(id)6 i- R3 [0 y2 v3 P
& d+ S- ~- o' A{; \4 {& g: N* D; \; s k/ @
9 K" d6 }9 n3 \$ @& N- G; G continuous[id] = false;3 \9 P. a; N. l( j4 |# z0 ]
, ~/ ^, O1 Z! x$ h( f/ [% Y K
}
. ?, K7 `; h6 o9 A4 ?" e
( c" e! c7 }2 L# u( d8 t; p$ efunction StartTimers()5 F2 Q/ ^, ]+ H7 S' j
2 c0 E* F |9 B6 ~ \, s
{ //set up an initial set of timers to start the shimmering effect2 j% \' \8 J* c! \
, w- H/ o8 G7 D) W/ r/ h for(id=0; id<numLinks; id++). x7 K4 C" m0 l9 \6 P* }% P
+ E* ~: f. Y' j" @( P {
% B7 n2 }5 z( F: C% e
- t: B6 |# E' v( @ t=setTimeout('startFade(' + id + ')', id*100);
# P* |9 I' |4 C! i2 v8 _2 m# y
5 j, J0 ?1 w2 M' L8 w" X }
+ @9 C+ ~: [0 H m( Y
- K* A* t& A! L8 t4 E}
/ D/ X+ Q* `+ x9 P) [5 ?4 o' y
0 h" _6 d1 [0 y: P//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; Q8 m4 C5 h6 s6 c3 c& @7 y, Q. j% R6 w3 ?
initLinks('#FF0000', 6, '#FFCC77');; U7 d/ _4 n N
! q. r' p( D1 I% _' ?2 X
//-->
+ {4 P: E" W4 k7 d4 M' K+ R) U+ }* U$ G4 b
</script>
9 Q7 N& h/ M% L# i+ ]8 ^7 A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' E0 Y7 R3 `" q; S
</a>
9 l: w" d! ?. L4 ]* u3 [+ H( @6 m<br>
% K% r0 C5 H; C2 u8 a<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>6 p8 _) j6 @2 D# z
<br>$ ^; u, @5 b3 m* Z% O5 q
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' u8 a9 Q/ l! l) }6 L% b<br>
, a# }; u, l) ~6 e( \4 w<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>) ^1 u0 |5 q% b3 U! K# U/ \- F% \" Y
<br>/ k* P; A" X$ J+ x% U7 X3 i' b& M$ O) C8 _
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
0 l4 o7 z3 @8 i- K c, R<br>5 \% `+ Y& z: }5 b3 H5 Z
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>3 {- P9 V' r1 M( e. o3 q3 T8 r
<script language="javascript" type="text/javascript">
2 u# a6 Z% y% {1 }. S3 t<!--/ `& R: v1 `0 w" n; f
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
# t3 c( D a& s//-->
k4 l5 X+ O/ @: @/ _/ n( h</script> |
|
发表于 2008-1-21 20:48
|