|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">1 D+ R+ b9 u* B7 m8 N/ |
<!--4 \5 V0 L3 j1 u( b/ g
// convert a single digit (0 - 16) into hex9 u; N5 t1 B: z- `
function enHex(aDigit)
. P8 w* q' N/ |. _% e/ a{
% w) L& Z% s8 n! y2 S: g return("0123456789ABCDEF".substring(aDigit, aDigit+1)); g+ @4 o7 Y, \0 g- _
}- S& D3 y' q, ~( E% B
// convert a hex digit into decimal
! \7 S1 d' a+ d; t+ W, |# `4 ]+ tfunction deHex(aDigit)- l1 k/ V7 s% N; {4 p
{8 g* M- Z- T+ p& V" D) h! m# b" p
return("0123456789ABCDEF".indexOf(aDigit))
! z9 n+ i* f8 B* W3 t5 v}
3 N& _) N) I! g# r8 ~
) \! C1 y- t% u# U// Convert a 24bit number to hex
/ V' W$ B$ K! d% g j. \. f/ qfunction toHex(n)
0 ^: l- A4 ^. e- Q. k, t) K{& }3 @- d. a% |
return (enHex((0xf00000 & n) >> 20) +4 p) [0 \% \; v
enHex((0x0f0000 & n) >> 16) +8 E. T" L1 o* W2 ?1 V
enHex((0x00f000 & n) >> 12) +/ Z: T7 S6 V" \, E' l$ T4 {8 y
enHex((0x000f00 & n) >> 8) +
* p5 `" ?8 e) K2 B" i% u enHex((0x0000f0 & n) >> 4) +' X- P8 t" x* D3 N
enHex((0x00000f & n) >> 0))( @4 J1 }& u6 _' T7 u) D1 s
}
8 l: _( D' [* J1 Z// Convert a six character hex to decimal1 l4 a. O% H2 L: L3 y. } F
function toDecimal(hexNum)# Q/ {$ ^& A# S; S7 ~
{
$ l* ~2 @0 `% I! N4 V# \6 L var tmp = ""+hexNum.toUpperCase()1 X8 b1 o' _' ~
while (tmp.length < 6) tmp = "0"+tmp
7 S2 K; w* c9 b2 U4 @8 Y5 o/ o return ((deHex(tmp.substring(0,1)) << 20) +# @& X6 S5 A/ W, C
(deHex(tmp.substring(1,2)) << 16) + ; L2 u6 B* v2 D: T
(deHex(tmp.substring(2,3)) << 12) +3 w4 C& b! z. [% }1 {
(deHex(tmp.substring(3,4)) << 8) +4 E2 A, a4 p7 g) y- |) }
(deHex(tmp.substring(4,5)) << 4) +
: @; r; N# n0 O (deHex(tmp.substring(5,6))))
) Z, j$ i5 r/ a, T0 f( ^3 k+ ~}
0 j6 A: m' |. v///////////////////Shimmering Links/////////////////////
) I. H3 R0 J% l% e: H//global variables
& A9 L( E5 w) V, r& r8 P* M$ `- O8 e- kvar hoverColour
! z9 ^3 W5 `/ B( `) a0 P7 Tvar numLinks;8 |" q) g7 Z4 Z" i
var rate;
/ P& N5 `5 Y- `/ W/ d; j( K0 Avar numFadeLevels;- P& \2 o v @5 r7 V3 O
var bgR;: d# ?1 q F. N8 J3 E
var bgG;; ? l: G$ i" T3 c+ [) P
var bgB;
& R- d4 H* R& E1 b* b; M9 F' @var currR;
4 C" N0 d5 s$ j, D3 W* i% gvar currG;4 j/ N& H$ z1 a! Z4 }; W! O& w
var currB;
* f; y) P0 H) Svar count;
# |" O' m; n d! h, L) ^* ?1 J6 Ivar fadeOut;
; G/ j- Z( I, w" i* f& Evar continuous;! D3 I6 ~% @7 ?8 D" N! }6 [ E: N
var newColour;$ B0 ^ k ]2 \$ m
var tID;* \" m8 X5 R, b! t
var redInterval;, }- T) ]* i1 ?: Q A2 A4 K0 P" K$ h
var greenInterval;# @& l/ [9 `* R6 U7 L
var blueInterval;
$ Y* A8 F. Q+ ~4 E* D( K) Efunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
- s& S7 K& x9 l$ ~8 `; j{
: x( R, [$ x" @" y6 j6 ]) v2 H hoverColour = mouseOverColour;
$ C: W% x+ v6 N; [0 t1 {) _* L numLinks = numberOfLinks;
% D, D+ o) a N* f) _1 }* h rate = 1;; C- b: K: k9 I4 M' L; |& H! N4 C B& ~
numFadeLevels = 30;
0 m+ X' ]; M+ h9 n9 |. p' s function initArray(theArray, length, val)
' c& x: X- s& g {" @1 m" s& U; `5 n: [
for(i=0;i<length;i++)
) ]0 w1 t" U( g {% a4 y9 I. Q8 s& ]3 C
theArray = val;6 _& j0 g0 v3 F% x5 C8 k/ s
}
1 b/ _& A f2 {! b" T$ f }
: l2 C& m# @ ~# U bgR = '0000' + fadeOutColour.substring(1,3)6 a; }' u: Z- y, o
bgG = '0000' + fadeOutColour.substring(3,5), y3 \4 c1 C8 P8 j+ m
bgB = '0000' + fadeOutColour.substring(5,7)
) H# t. N7 n/ D+ b. ?' _ currR = new Array(numLinks);8 m/ u& J5 T- q3 }* I. X
currG = new Array(numLinks);& _" x) Z6 ~. S. K D F! R2 U
currB = new Array(numLinks);3 F7 r% [7 I8 y. w! x) D
count = new Array(numLinks);
3 n/ W: ? ^3 L+ ^( \ fadeOut = new Array(numLinks);
! W* U6 O' j- z2 k# C1 N4 U continuous = new Array(numLinks);
, _* O2 d) Y- C& t% B8 ]+ Z newColour = new Array(numLinks);
0 v1 G( n. E# r$ e$ v# @$ @! s tID = new Array(numLinks);% f/ |/ A( G9 v: z: ?. w
redInterval = toDecimal(bgR) / numFadeLevels;; c Q+ D+ s9 U& k5 V
greenInterval = toDecimal(bgG) / numFadeLevels;
, Z/ r$ E' B! B8 F. _ blueInterval = toDecimal(bgB) / numFadeLevels;
* G( \3 O% x8 [* K6 x initArray(currR,numLinks,0);
1 M9 [' ^" V3 ]: t initArray(currG,numLinks,0);: W a% U9 i# U/ m
initArray(currB,numLinks,0);
1 O! p0 i) {5 Y' b% W* ^8 I initArray(count,numLinks,0);
$ d. i# ^: h; R) Y5 [) w: p9 { R j initArray(fadeOut,numLinks,true);: P4 ]4 o( F' B4 m
initArray(continuous,numLinks,true);
3 Q/ ^: |0 k* j- q9 n5 q}
3 A2 b. r% Q! }* D; k9 K1 g" _function startFade(id)
& H4 S5 R* K; r( g$ G{
# q! v! `" I/ B5 Q4 T# r R if(fadeOut[id] == true)) h0 T1 O& ?! _7 ]/ a6 _ f
{ /*move colour towards background colour (increment)*/
$ \7 F, p9 J, |+ U( Q+ | currR[id] += redInterval;
% p- b& s* t1 p+ N0 u' y3 h3 q6 B currG[id] += greenInterval;( U. O: T2 L% M$ J L0 A n9 h
currB[id] += blueInterval;, Q) B& e m& s! U2 J. ]5 R
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);& w; c: W( z; `$ M' S& S
if(++count[id] == numFadeLevels)* c9 I' I0 c+ [" P3 P2 G: z: N
{' C M) V: |0 q) c2 i# n5 d
fadeOut[id] = false;# H; l2 {. x' F2 V5 ]! I
}, O4 r' l; w, K$ }/ `" w8 W
}
: o( W7 b% t: l, V else/ t! W! k) [% ]2 |3 h9 R5 V
{3 x0 [8 z5 v p( K* ?: v% ?
currR[id] -= redInterval;
$ O) q' O( f+ x# T
2 H' y# o: r- r0 B# C: Z currG[id] -= greenInterval;
5 v4 R @) p5 f: x4 [4 @, l+ r0 i. ^! K# k/ O& \" Q
currB[id] -= blueInterval;
* r" M. t. d/ h8 u8 O
( e8 H/ d+ b6 d+ Y. j F/ g newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% U' S: G9 ?/ d; z
' L: q$ s) H5 L+ `; X if(--count[id] == 0)
) m" b V% d: N2 i% R+ N' F8 {. q+ H* E f ~
{# ~# \, a% d3 C+ c1 s: ]+ v
, w4 d1 {- m9 [* _6 q fadeOut[id] = true;
+ x3 X( i$ E9 q5 r `' m* Q
' c' N! p# _# y. T/ Q }
- I$ ]' C+ c) \, E
0 B# J8 ~8 d. y% u( z, P2 t }
* M% ^, g, q" N" V: U8 I/ u' x$ l
) n! p) i9 O6 I if(continuous[id] == true)
' e) ~. E% a8 z+ t5 i
8 b+ y' ]3 m- W8 \8 o1 }2 \ {
8 j' c$ p5 @- i9 W3 g8 }+ T
, S7 c& ?4 [1 T2 r1 _" C, V document.getElementById(id).style.color = newColour[id];
$ m' Q/ G, K; ?! J) r+ \
5 K9 \- } R9 `; M* k$ i8 } }# V. l/ n4 ~+ T. d" Q
1 D7 ^7 s; P' @; M: a
else& m. s: r5 b1 C( a6 v
+ C( F7 \9 q8 o. S {; _& E( r `: ? z
' c$ L9 H2 ~/ C- w, g* K
document.getElementById(id).style.color = hoverColour;
6 I9 [2 T4 e4 F5 M) z* } P
" s* c9 k( K( O& Z8 N! s }
) S( n8 S/ i3 N w+ L6 B4 W' C. L& N' ]& `3 }/ Q& ~; a7 q/ j
clearTimeout(tID[id]);
2 E- n0 S; \* O* ]- }* e& t4 z8 C/ `3 V" x! J
tID[id]=setTimeout('startFade(' + id + ')', rate);
; H) O$ q& n7 a- u/ ]- M, {4 n7 _; }( S6 d
}4 b, u2 a+ X0 D9 V) O, ] }- p
9 N' L( u' Q( Yfunction continueFade(id)! p, z3 Y' q7 U% t# Q/ G
8 e$ [9 o: C2 N* q6 `8 S) P! o2 @{
# u" L) U# U# o' R& P
V [4 v& A9 A. v, D8 y continuous[id] = true;
% t; b0 O) m; G/ t& w& H8 k& q
4 r7 ]! Z2 ]/ c) t2 N1 W}# F" V) d' B1 j8 k: \7 y. m
6 ?2 i% f+ P/ _5 g9 `) r5 o
function stopFade(id)
8 F4 A! _2 ^6 ~5 L' n! U0 O% R# v
$ I" M A+ S7 x/ O/ {% r2 C{
: s# w* Z& C& {5 Z9 p# g5 |: p6 ~
+ W8 }, `0 ^% |1 V continuous[id] = false;0 j" Z6 C& Q! m# y$ c$ L
9 R9 I* v; U0 O/ q7 ~% J. v}
" W7 ]3 b0 c: h7 g! e& Q5 m( Z/ P* P: A" @% Q, v- t
function StartTimers()
$ V; _) |$ [/ O* Y( z4 |
' e3 y0 {8 c" d! i{ //set up an initial set of timers to start the shimmering effect
" b5 Q- }# c% ]! k8 w8 [
, F4 H" S A" I5 p# H5 ^% T$ c for(id=0; id<numLinks; id++)6 w, e) d$ m* b4 x b
) m1 I7 Q2 i+ E; Z5 G) B {6 _1 {! e- E& A% S3 L6 m
9 W/ D: b/ U9 j, f0 O8 n
t=setTimeout('startFade(' + id + ')', id*100);" _7 `5 Y% I* I4 N
0 C; P1 b" K+ b. \+ k# B4 m# S
}
$ O, b2 w7 H7 N9 z0 ]7 U- W' m3 D- D7 D1 ` I1 i1 n
}: ]( J& S5 L% `9 ^
& A2 S4 }( Z% N1 u//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- T, g- i8 ]/ ?# u* H
) c8 F8 i3 s+ z! Y9 | s6 dinitLinks('#FF0000', 6, '#FFCC77');8 R6 _8 Y% x9 H( o o) V: j
s; \8 z a1 ^' g* C2 A. P8 r$ Q
//-->
& @, Z7 ]& C# |
: o* z" w- o4 ^3 p</script>
% H5 r$ j1 A6 [2 Q- @4 K<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元# r% a; l: Q. ^' O6 F* n9 U7 i
</a>' Y/ ?7 h. K X7 @6 |
<br>: d+ q: H. O' _3 Q! K
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
( F' V) k7 \( \4 t" N, [<br>6 k% B. | n1 S7 ]4 K/ @! Q
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>( H/ S& u# k3 G% I* M5 D! t& G6 U
<br>
4 \2 ]" h3 h) \7 d: A& j<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>- S2 i0 e" T. K* } o6 `. a" _
<br>
3 F$ h3 f9 `( }( M: l6 L( I<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
6 y* Y! k; {9 s9 {" U# `<br>
6 @ a5 O0 K; b/ \+ t @8 W7 J5 S<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>1 y7 _/ V2 m/ {! H" T
<script language="javascript" type="text/javascript"> ~6 L% ] I' C4 l+ O8 V
<!--
# Y9 f9 g2 H7 ~: J$ \ ysetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering1 Z8 g( ]+ w, Y9 l/ `
//-->
+ i0 g7 H0 O8 E$ \8 U+ y9 j) m</script> |
|
发表于 2008-1-21 20:48
|