|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
8 [4 W( U. w+ P! o! x, |<!--# T; Y' P+ n& A* D
// convert a single digit (0 - 16) into hex
0 Y, F8 d) k, H! ?3 ufunction enHex(aDigit)
. R- D! f/ N2 v- h4 W; z" w{$ D1 F) e' w. a2 `* `- J' X
return("0123456789ABCDEF".substring(aDigit, aDigit+1)); Y- F# ~ P# P% f3 ] o0 K: j
}7 n4 }9 Z+ Q. `! ^
// convert a hex digit into decimal
; [( e+ E/ d/ i5 B( D) G/ pfunction deHex(aDigit)! v) K( G# p6 f( F
{8 ~/ N) a# L. }1 b
return("0123456789ABCDEF".indexOf(aDigit)) B4 k! U1 ]" r' F+ J/ W
}. R9 a; K6 o7 C' V) J( V
9 A4 [3 {" g- p, J! ~8 P
// Convert a 24bit number to hex7 y" N0 j# p/ E- H& R. U, w
function toHex(n)
# p) ], H! ^. A: y3 R; i{7 N9 K/ j; b( K% ], a% F. `5 U7 M
return (enHex((0xf00000 & n) >> 20) +* e5 s5 n% k, l; |& k$ I; x
enHex((0x0f0000 & n) >> 16) +/ J/ ?: S2 N( G: G, ^3 V+ `
enHex((0x00f000 & n) >> 12) ++ M- Q7 N6 {7 h" m5 w
enHex((0x000f00 & n) >> 8) +
+ @. f: X& r( m- ^ enHex((0x0000f0 & n) >> 4) +8 ~5 G+ l$ f. w4 y8 ~7 `
enHex((0x00000f & n) >> 0))% T+ O5 ^2 F+ [4 n
}( s$ `$ C5 f& w) u
// Convert a six character hex to decimal
. _! q0 H( b$ Lfunction toDecimal(hexNum)1 Z' P; l! {/ {- ^* K+ t: _7 @5 {2 J
{
, K9 _, f$ I3 k' Z$ j. _ var tmp = ""+hexNum.toUpperCase()' ]+ C; B" L3 l0 S3 @- D/ t! j9 \ A
while (tmp.length < 6) tmp = "0"+tmp& f+ R6 y9 { f$ g S, M1 r
return ((deHex(tmp.substring(0,1)) << 20) +6 N: u/ c4 R: z& [( g+ L
(deHex(tmp.substring(1,2)) << 16) + , n E/ ^5 S) q; M+ u6 G
(deHex(tmp.substring(2,3)) << 12) +8 i0 T! \4 G4 f( N0 P/ R( a2 f
(deHex(tmp.substring(3,4)) << 8) +, P* i" _, j6 `0 H/ S5 g, M/ X
(deHex(tmp.substring(4,5)) << 4) +( y* O; W* h9 G4 f% _* y
(deHex(tmp.substring(5,6))))' s7 o+ u) D& |
}) n& j# k! V9 A8 D8 j
///////////////////Shimmering Links////////////////////// I3 A) x% i* Z
//global variables
8 {' Z/ I T' B' x# k: H+ Xvar hoverColour1 f4 Z1 m3 K5 b3 i" q
var numLinks;
3 o8 w( L3 l! G: hvar rate;
! }3 v5 Z8 n; v, Kvar numFadeLevels;9 ?0 E* ?( I( h' U* z
var bgR;
# e' e1 `( z% x% ]4 c" s5 lvar bgG;
* m0 T7 V+ `# |. tvar bgB;0 }& x8 k/ T' X( D1 ]" {3 f
var currR;% V8 |! N! a8 M3 f/ m1 ^% P! t
var currG;3 z; {( C& ]2 u- G
var currB;% a5 g0 }) B7 k$ l8 o
var count;
1 G p% U1 {1 g( _5 Hvar fadeOut;
- Z' y/ I4 F& u$ L! c5 c8 N3 Cvar continuous;
% A1 D0 } C' v1 T3 i8 |1 ovar newColour;7 g' P; j8 ~% t. g% i
var tID;' ?: `# n x P6 C
var redInterval; Y1 a* I$ r; k" D/ z5 {/ G/ ]
var greenInterval;8 J9 M$ e2 s5 o K# Y0 |' k
var blueInterval;
3 Z. M2 J1 }5 a6 v" K* m) lfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! p- f+ R( e! G% j+ ^+ [$ ~
{% Q# ~$ H: b' y6 D I3 b+ _
hoverColour = mouseOverColour;
( {/ } g, w" C( f numLinks = numberOfLinks;/ _ a5 |; i( w" U& R! g
rate = 1;2 {6 V+ L6 n& o y; i. p& q
numFadeLevels = 30;
1 D ]( G/ h1 w! V" e) i' m function initArray(theArray, length, val)$ r3 ^, D% s8 J3 u6 v, u" @7 }
{# B3 N3 N) h- N$ \- o
for(i=0;i<length;i++)! n8 \) s* g: O7 I" a
{
% ?$ n; K6 A. \& @% R2 s theArray = val;6 o1 v$ x. `' J# `5 U4 F
}" k1 ^4 ^* F, J o( d
}
; n5 U5 ~2 \- [7 | bgR = '0000' + fadeOutColour.substring(1,3)" R$ h4 m/ q, O( V" j& w
bgG = '0000' + fadeOutColour.substring(3,5)! D- V$ G" Z/ k4 G* C
bgB = '0000' + fadeOutColour.substring(5,7)
# q9 P5 E R' `, ] k k) w ` currR = new Array(numLinks);
i- ]9 T Z" B currG = new Array(numLinks);
) b0 L! x3 _# a3 g7 f currB = new Array(numLinks);
) K! c e) [. C1 W0 d0 V count = new Array(numLinks);
) y7 M" P' V {/ ? fadeOut = new Array(numLinks);6 ]1 e, n* h+ Z# J- }5 W ~1 f, J
continuous = new Array(numLinks);' a+ s1 f/ ?( ^- a
newColour = new Array(numLinks);
$ h! A9 h+ n- l% E9 k$ z tID = new Array(numLinks);
& R0 j# _7 F$ E6 m$ M0 ^ redInterval = toDecimal(bgR) / numFadeLevels;
: p- I+ g2 t, u) N) h greenInterval = toDecimal(bgG) / numFadeLevels;; A+ O) Z5 K+ e; B) [
blueInterval = toDecimal(bgB) / numFadeLevels;; o" ^* g' i' b" r. {/ c
initArray(currR,numLinks,0);
7 F9 [8 A: m3 v0 b" |# n# j' a initArray(currG,numLinks,0);% C, y$ K7 @ k4 o
initArray(currB,numLinks,0);
, e, F. _ z+ b. o) O$ h0 z/ w9 t0 O' b initArray(count,numLinks,0);+ u: t$ }5 x. d; Z
initArray(fadeOut,numLinks,true);* Y0 I3 T: f6 V3 s; R
initArray(continuous,numLinks,true);3 m7 Z3 }: a9 N# \5 S
}
. a8 g5 O1 j* n$ N5 ^2 s; dfunction startFade(id)0 l& R' I1 m, L" y2 J/ [) v* W
{1 K% o3 @( @! M8 L* I0 l
if(fadeOut[id] == true)7 }4 k7 |! `) I! X# G* m. C
{ /*move colour towards background colour (increment)*/
1 t* M+ h; F3 d {- w. f n8 J* c currR[id] += redInterval;% q! s X; d/ N, P9 M; K" R9 b
currG[id] += greenInterval;
2 W9 m* c Q7 S/ X- p currB[id] += blueInterval;
) v9 w3 z+ W. ^% h, p1 _% M( P0 R newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* w- Z* F: C! }0 [
if(++count[id] == numFadeLevels)+ Y/ M' N- X3 f6 h4 O
{, x# E) `; I" l! Q7 Z& h- A
fadeOut[id] = false;
. H. S0 _/ ], |. N }9 t. [* ^# B1 e6 N1 ^6 |
}
1 G e/ A: P9 \; v else
7 i( k7 `2 y0 b5 v! C7 j {
1 ~. R$ ^( ~. f W# ~ currR[id] -= redInterval;+ C4 K/ v5 \+ B( z
3 E' c9 ^5 ^" }4 r# V/ | H4 O
currG[id] -= greenInterval;* U9 Q* b& \+ q- v1 Y* ?. ?
: k* @' q. w* @6 D7 Z, ^ currB[id] -= blueInterval;
9 x) V o% Q0 g6 M1 S# b A+ D9 Y0 z9 i2 Z, U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ V, J) F* ?/ p0 G8 R2 ?2 H/ I2 N5 p# h6 C v
if(--count[id] == 0)
x2 T$ I7 M) B/ Y+ Q1 O6 q
% l5 L* F6 `' B" H3 p: i% I3 M9 Q {$ |/ _ @9 D4 ~( X* B
, w& b+ Z- _8 Y, Y7 B
fadeOut[id] = true;
) }' \, ], U+ D6 i1 o2 b7 @' n# {8 f
7 v u* L8 [& v( f }/ ~# c8 ^ o3 n! y' U7 m% ?
; X/ `9 Z$ A/ G" \; `% Q
}
# \" T/ ?1 O& q, Y% p* c+ S$ v& H% C4 d# C' g( f/ s8 ~7 F! [$ I/ J" d
if(continuous[id] == true)1 @* u Z* |: X
8 i9 e- H2 n( V* { {
% t2 W' ^* C. Z* B6 T S, a4 q7 n+ _7 a& Y7 b& Q
document.getElementById(id).style.color = newColour[id];
% E9 U A* @5 Y, E; a: r% R4 G+ s% u5 q, ?/ z6 Y) n
}
3 u7 A6 T: \9 a6 Q& L- n/ B; T# n2 T' j4 M: m3 P
else
% s- h, f# E$ G8 H) V" r3 n: R ?7 W* `
{
/ N K+ J s: Z; V- g" i- Y5 p7 G' E$ l
& C, o J+ ~5 V% Q. c9 U1 }5 s document.getElementById(id).style.color = hoverColour;
0 I4 M0 \) i+ O6 I" {; b8 B$ V% Q/ w( \* S
}
& D" |* w# _! @! x+ {3 k% @
" Z8 p7 |; P; J9 b `% I$ A. Z; B clearTimeout(tID[id]);
1 v9 e) l# s' P: Q _8 ~
9 d6 Z8 ?) [! U! |; A% @ tID[id]=setTimeout('startFade(' + id + ')', rate);+ C1 C% Y! [, y! @! o7 D
0 X% _2 \9 \* @
}
4 B m% ^; U' @" O' g: x" R
$ Y1 k( U; s3 z1 _( h, v9 zfunction continueFade(id)& S4 W0 j% e/ O# b. K) k
- L6 ^' [/ V0 X N; c# P
{
- U2 B$ u0 \" l9 b* [4 E$ A* w6 S: R2 i, a! m% n4 G* W+ M5 c2 J
continuous[id] = true;
$ J7 O5 b7 g8 [3 b" a
! b0 l$ W, W" k; J6 N6 l: L' ~}
" i' T" w* x( x+ l0 c* K8 N- t$ o6 @
function stopFade(id)
/ ?9 p& a0 Q8 u$ n2 F& I8 ?$ F/ E8 ~+ U0 |2 Q% g9 b+ ^
{
/ s/ n# L2 A) [
; v3 k' h* Z8 W; N. d% z4 h continuous[id] = false;! Z- J2 B% b& f7 H/ I
9 b" t# ^( F |}, x$ ]/ e! \# [$ K% d. ?. r
4 i" S* i1 ~. q: {. b
function StartTimers()* x" H. A: u% K: @
i0 g9 ?" F- t, E{ //set up an initial set of timers to start the shimmering effect/ n3 K# ~& e: `! ]( s: c
8 P- J" l+ ]5 | y# g( R& g9 D for(id=0; id<numLinks; id++)
. z6 `- [) a, O: L
# b0 Z! Y u" v) M {
/ m F0 ^- v) h# p3 g7 U2 {8 q# T9 U
2 C7 d* w! ^% k# @" G4 [2 N t=setTimeout('startFade(' + id + ')', id*100);
3 P2 S9 u, q6 f" H6 w
3 a3 Y% O1 s, _: V$ }' k0 X }, N3 g/ L. e& m0 S
/ z# U4 I+ w- \% }9 I7 c, k2 d3 ~
}2 M' M8 D/ L, t; O0 D
# P2 B. e, j6 Q& g6 e1 k
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
7 f: b3 r* ?* b; A; b+ s
* [, Y0 q& i7 U( LinitLinks('#FF0000', 6, '#FFCC77');
7 K3 M6 L) t3 o! a6 V0 H* O# l. z/ f4 O- g: X% b
//-->' J6 A9 b1 x, D. X' b
' _8 x6 z! H' ?/ u2 ^0 K
</script>7 ]) `$ I* i$ l4 z1 J5 H
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元, J6 M" d6 M0 n2 r# `
</a>
2 W) i7 B& Y3 M7 ?: K<br>! Z! H7 x7 L, f2 L
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>- V l: f' O( V
<br>
) G+ @5 d3 Y0 `) E& g<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>* ?, V! f' g) g, M$ r9 i0 Z
<br> ! |. P+ _$ g1 h5 s0 p
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>* c3 ?) T6 l2 [0 H
<br>4 E1 ~9 v# A& C- E& ~1 y1 t& b, K& n
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>% y4 D& b* q. G
<br>6 c Z* Q+ u# m; N5 g
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. \6 P* E! g. O: v4 y# _3 ?: G Y
<script language="javascript" type="text/javascript">$ E, j: E! y) e
<!--
8 q0 E9 [: k6 I* U! A5 q) ssetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* Q. Z% W$ K7 |. K
//-->" |3 J) ~9 m5 P, p( R$ g
</script> |
|
发表于 2008-1-21 20:48
|