|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
" E% u) ^0 L( L) r. ]<!--7 @8 t* a! m0 p
// convert a single digit (0 - 16) into hex
- k0 a+ C( Q3 x% D' s; ^, `9 hfunction enHex(aDigit)% r5 {. P2 s0 n% _0 S8 n; f' p
{0 \) T: C7 @4 t& w5 w
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
4 a7 P+ X$ X$ l* Z: _' }}+ X+ X$ \: A( | l/ J4 l' y$ |
// convert a hex digit into decimal* I! Y+ k; e1 t+ h0 Y: K+ e& h- ?4 W
function deHex(aDigit)
% _ [/ b4 c. h! `9 e+ w) `! N7 H{! C$ K _' I: Z, t
return("0123456789ABCDEF".indexOf(aDigit))% g" s; v# |! D/ e% g' C
}
3 C5 u! |9 k: i8 d5 P, ]) W1 E. b- w- L, O$ B. t3 W
// Convert a 24bit number to hex
$ o1 V% F( K2 E: Ffunction toHex(n)
( T% v$ q6 M5 G) y6 _! _{/ ?* V2 ~1 M) S% s4 d8 }
return (enHex((0xf00000 & n) >> 20) + G: A' m' `) V2 w3 u
enHex((0x0f0000 & n) >> 16) +
. D9 I) c9 r1 {: ? enHex((0x00f000 & n) >> 12) +
# A- w* P) D, H7 P enHex((0x000f00 & n) >> 8) +- R% f9 \( L6 G! `0 d1 l5 H' D! {! ~
enHex((0x0000f0 & n) >> 4) +5 E5 \1 |, h/ |
enHex((0x00000f & n) >> 0))
1 R( X$ B; {; o N8 }, c}
( R0 O8 N/ N( s- j% @4 r. h* z// Convert a six character hex to decimal8 e, K S, |2 O0 p9 f5 y% Q
function toDecimal(hexNum)( `- i2 Q) \7 W$ E; r3 V
{
" P/ I2 ^4 I( O. w9 ] var tmp = ""+hexNum.toUpperCase()
/ @1 K5 J2 _* _8 Y while (tmp.length < 6) tmp = "0"+tmp5 W( F! T) v- ]/ `; y* J
return ((deHex(tmp.substring(0,1)) << 20) +( O8 l0 H9 V/ m
(deHex(tmp.substring(1,2)) << 16) +
. ~1 W) ?- }4 _; G (deHex(tmp.substring(2,3)) << 12) + ]% t* n5 w3 ]0 a/ x
(deHex(tmp.substring(3,4)) << 8) +- W. C; @7 V2 ?2 H2 ?
(deHex(tmp.substring(4,5)) << 4) +
) S' P% {% y' Z! n8 _% I9 l" V (deHex(tmp.substring(5,6))))
9 N6 i1 B. Z7 W0 W h; o1 L}! h# z$ c& j# \6 h: N; t
///////////////////Shimmering Links/////////////////////& k Z: {1 T* v1 Z
//global variables; V, m. S# b/ K! M% P+ k- ~: ?
var hoverColour
& o. Q# K6 h5 xvar numLinks;; g/ \9 R( V3 ~* k, z
var rate;5 `$ |9 `. s" ~/ Z z1 N
var numFadeLevels;
: o# O+ J# T5 i% P! Lvar bgR;/ B: O# d5 D* M: {7 E0 ~
var bgG;3 ^: x7 s ~4 o# l7 y2 t g
var bgB;
6 u2 ^# F# x! n7 Nvar currR; A% ]6 k! C- x5 U8 r
var currG;# A: j+ c ]2 R8 x3 h+ ]& y
var currB;
" F: h* Y+ C. K! |2 n4 C7 I& f" e& zvar count;
+ P. X; k- `% A2 pvar fadeOut;: ~* w6 v- A' m, s, u
var continuous;: Z4 [3 w# a" _) c
var newColour;1 R+ K& s: I T6 k8 S2 H
var tID; t2 |7 [) H$ i
var redInterval;
7 l9 \- z' z/ D1 s9 vvar greenInterval;
3 p* ?% K3 N" t, }5 Z1 _, Ivar blueInterval;) m0 l4 [ |2 @3 H7 O* |2 a* S
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)" n2 ~* C7 w5 p% H$ y1 w
{* i W% ]6 D( t- k2 T9 l; z$ g
hoverColour = mouseOverColour;
% f- f! X5 f9 j& ~6 |' E numLinks = numberOfLinks;
' c/ V/ e& L0 I3 F rate = 1;' Y. q9 \5 `: o- x; y2 V
numFadeLevels = 30;
( d1 b3 N+ i0 E s4 n, ?9 I9 t function initArray(theArray, length, val)
d/ T7 P2 H* x$ Q+ g7 W% r {5 o) |* i# z1 {- k' Q" \, `
for(i=0;i<length;i++)
1 e7 s; J8 U( D$ w* {- [4 o& j {
5 _& Q) u! M3 ^9 A9 A4 R- w6 v3 x theArray = val;
3 r0 W& H. J- I- Q5 |0 P! P7 a- e }7 }& d, \/ a6 A& H1 Q
}
9 M1 U2 `; c& ^* b. ~ bgR = '0000' + fadeOutColour.substring(1,3), f% I! |1 o, ]0 F4 r
bgG = '0000' + fadeOutColour.substring(3,5)/ l2 Q+ d; G$ G
bgB = '0000' + fadeOutColour.substring(5,7)$ a7 c/ |) J# I$ R
currR = new Array(numLinks);( m* @# V5 Q+ E3 L0 Y. T, B
currG = new Array(numLinks);
) v& e# m* i" I0 m) S& d2 W4 F currB = new Array(numLinks);- p- c* m( p6 X1 B6 p/ M. x/ @
count = new Array(numLinks);# }& c' J; r0 @2 _
fadeOut = new Array(numLinks);- G7 ~. i& [! S! C- h/ ]; J, X
continuous = new Array(numLinks);
* o0 [% p9 m" |, Y1 i newColour = new Array(numLinks);
( C: Q8 ^: F5 _ [5 b tID = new Array(numLinks);
, U$ g% |4 R0 {2 Z9 @. X$ Z7 Q l. b* x redInterval = toDecimal(bgR) / numFadeLevels;
( @' k0 r8 b* t- Z greenInterval = toDecimal(bgG) / numFadeLevels;0 P+ L. A; c/ ?. ]0 K
blueInterval = toDecimal(bgB) / numFadeLevels;( C5 p7 Q5 l9 \" \3 A
initArray(currR,numLinks,0);: R/ m7 U. K1 } k6 Q* X2 R
initArray(currG,numLinks,0);
! N) y! i& d, F4 U& N0 S; ` initArray(currB,numLinks,0);; K! x' r! E1 ?" e8 L
initArray(count,numLinks,0);6 ~2 q$ b; }5 t5 W, U+ a+ _+ |3 D4 b: H
initArray(fadeOut,numLinks,true);
7 H, d5 M. |: B1 _: |5 l) Y( p initArray(continuous,numLinks,true);
7 [4 R/ x0 y# U# B9 y}
- T" _2 |6 }/ h4 ~5 v4 I H# z9 f4 p Ufunction startFade(id)
7 r- G5 m }3 ?8 w/ _{5 v7 n: E1 G, C5 M' Y M8 ^5 b
if(fadeOut[id] == true)
7 N& \, U# d k# l { /*move colour towards background colour (increment)*/
7 {3 A/ V% V% O p( s) n1 q0 s6 J currR[id] += redInterval;
8 r# \# V* G" D+ r6 o" T8 ]5 g currG[id] += greenInterval;- Z8 u/ t( `4 x, T
currB[id] += blueInterval;/ E/ H+ _' C$ U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 T( w2 P: W- G$ e if(++count[id] == numFadeLevels)
$ d5 s7 ^/ \) w9 V+ ^9 ?% L {
: T* z, L$ P1 D/ g fadeOut[id] = false;! }0 I4 a/ Z1 T2 Z6 M
}- G4 P g$ W" ~% u
}
, m- d+ l( ~+ k else7 b5 ]# M! | @/ g: X" f5 M, |
{
' \5 B5 n; S C: U& S currR[id] -= redInterval;9 M9 k: }/ G# R$ _) A. [
# X; E. T7 o5 v' j I+ u
currG[id] -= greenInterval;
- I) I1 U* f! w" O2 I7 R1 I* z6 I5 M- v1 t; A
currB[id] -= blueInterval;
/ {8 j. t) m( ^% l
! i6 {4 z( _; h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ W8 D0 ~* C. N7 o% m
: h6 L$ |9 `6 x1 {6 g if(--count[id] == 0)
7 a% R& m( E6 n% o+ c% T4 @2 k
2 X* d) |& \, ^0 c3 ?) b {
2 G* w+ Y3 J- |0 y9 L$ ^$ p( w/ x9 b5 ]- v3 ~& F1 ?
fadeOut[id] = true;( T p; F7 p- E& K$ T4 h1 O" a7 V" i
6 Y/ m" S* O% m) u- f
}
4 a+ R" K u5 y G: h6 B
3 {% _4 U8 y$ D2 A* e }8 s- c) x# |' ?: w, T
, z2 G5 ]! m, u. ~
if(continuous[id] == true)7 {+ t# t4 f, ?" @2 k( c, i% M) N
z( }$ c7 @9 E
{( q. f3 J2 l* {% `$ P% R
3 D' x- Z( n* d
document.getElementById(id).style.color = newColour[id]; 1 p# P% f( X% z4 n
- m5 ^) w9 w) X! q
}
3 _& n% Z& W/ g8 x. k- p! w9 o! {" A: p6 j
else
; n2 f% E: }% a1 X; M! v" L
9 j% Q: U$ r/ p' H$ q7 |( u! I {( u% |$ r2 n2 x
8 p7 ~7 H6 f ?% U document.getElementById(id).style.color = hoverColour;/ b6 O; D# B5 F! V
' L& c" t. D% ~2 g$ g
}
$ b& ]) }! @, l5 e9 T: C; P. }. m. i% ^2 `8 @ [
clearTimeout(tID[id]);
; t+ F& ~. C# a8 {4 M& @- e8 K( Y% |* p5 ?, t
tID[id]=setTimeout('startFade(' + id + ')', rate);8 w' E$ C8 d( C }+ P" v
4 \, t$ ]0 d; V, K
}- K X3 g7 g i: ?& j; ^( r& v
( P3 z$ U: i i) M7 u5 {; }
function continueFade(id)
" Q4 C$ D$ K+ x8 T: K7 G' `- J3 r! I+ D) g
{- C* s) J8 ^1 [7 z$ C2 a T
& I; z7 |/ B1 F8 H4 E- a H1 [. a
continuous[id] = true;
) b: n, w5 m6 j Q# U8 Z2 u( i9 c- \3 [/ W* |: Q# K$ R$ f3 v
}% ] _+ K) \9 D' i9 ~3 W' u0 J/ e
# i k4 c. k G
function stopFade(id)
+ K' B7 |% Q+ ]4 B, `4 O
9 i% [! E+ G* D{* Y$ `; Z5 O+ p9 ?. m% I: k
7 K" \9 I. Z. B" r continuous[id] = false;
8 _, R: L; S0 t$ g2 E/ ^" w3 B1 }% Q
}
" i5 C7 j& r9 ?+ R9 f0 W6 g
8 x4 Z8 S2 ?3 |+ N+ Y1 i- c) I& `- jfunction StartTimers()
- x( [( i% b/ V: z/ E4 I
5 o+ Z% A. P; L* ]/ o3 ?{ //set up an initial set of timers to start the shimmering effect
- G& u8 Q. y9 d6 o8 l% j/ ^- W
6 {: i1 C7 ? V3 ^' G, h) j, O, z4 f& m for(id=0; id<numLinks; id++), `" A4 J- G! z# }
( f7 x" p U2 f: X {$ o) f# p0 ]1 x3 M9 e
; R0 R4 @$ g( ?. K( O t=setTimeout('startFade(' + id + ')', id*100);2 d& [6 N9 c) C$ O: r4 M% v! L
! d4 {% R& p, i* b4 n, K }
0 p$ G9 {" d8 t. U' W, ^- F' @( U8 k! i2 N
}, h6 x. P2 l W( ?7 w) m7 N6 j9 Z, e
, |+ o5 F8 R* {. T% d! v//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')) j$ j0 V& f, F0 f4 `9 }5 [
; T, Q& ]( p j" h1 GinitLinks('#FF0000', 6, '#FFCC77');; W" |/ Q) k7 W2 t% Y
- Y( H% @0 K3 P3 K3 n8 c6 u. w
//-->3 P% S3 p' }* P8 u; V5 J+ D" u
8 b/ t* E9 `* C) p; h</script>
* M/ \6 ?( n5 C. ~; x! o6 W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
- R" u2 \- R0 u& t; @0 j</a>
, n. l' o) ^* g& w% T<br>
; | O; F+ }! G% l) [: s, m<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
3 n( ~: g7 o, G5 Y$ {* u5 z<br>
/ Z% m9 O! q6 F, r7 u. i! L<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># d8 B' [# b8 d2 V- c, g9 v
<br> 5 G* N" y2 C9 z/ q; h
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
7 O/ @9 p: M3 F! [7 f& K<br>
- J) Z: e9 Y) Z2 O1 q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
% }# O* N# R. c<br>
8 ^) O9 F( R+ E0 E0 Z) X8 J( V<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. ^6 q# G& b0 Y U
<script language="javascript" type="text/javascript">
* g X) h: t/ O# N- k8 n4 h) t<!--! I/ a: ?0 V1 y( t/ |
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering5 L! h% o2 l, c, n' |
//-->
* Q3 N% ^. e1 W, H8 |1 ^9 _</script> |
|
发表于 2008-1-21 20:48
|