|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 P$ y! Y8 `+ y+ Q2 G<!--
6 }* g: o! v* U% r0 o3 {: Z7 p9 W/ G// convert a single digit (0 - 16) into hex0 J1 x) O0 E$ [
function enHex(aDigit)
2 G/ ^" K! ^- e7 I# T0 U{
% ^5 s( J7 N! C; p1 e return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! g5 m7 ~/ Q1 U- F+ |}0 R6 X6 \/ h+ |# u
// convert a hex digit into decimal8 B9 X: [( X: {. f
function deHex(aDigit)! m9 ]2 b8 E+ p- ^
{
9 {. i! `% {/ S$ z, i return("0123456789ABCDEF".indexOf(aDigit))* o1 M9 u( T- x7 Z( c: F1 D
}
0 X6 t8 K1 ?7 G5 f! r
0 M. D5 a8 j. b- L/ A5 j// Convert a 24bit number to hex# x- s9 M9 S m1 ~, V- P
function toHex(n)
6 P5 F. a: t( \' N: Z+ F: v% a{
; L7 f: l: ~1 N9 B- O( U8 `. U return (enHex((0xf00000 & n) >> 20) +& t$ `6 q6 @1 f6 Y9 I
enHex((0x0f0000 & n) >> 16) +
* S! d. M8 M5 G. b enHex((0x00f000 & n) >> 12) +5 A$ b: a1 W2 P0 I% t
enHex((0x000f00 & n) >> 8) +( ^- }" c* _& u9 R; ~
enHex((0x0000f0 & n) >> 4) +" a" u% B+ L7 L
enHex((0x00000f & n) >> 0))
7 Z( {1 [8 o, K$ j}& r8 V, K9 u% _: M* }- Q+ `3 Z8 b
// Convert a six character hex to decimal
' D, F# o2 B8 f) ufunction toDecimal(hexNum)5 W3 a3 b+ A: f9 U4 [5 K
{* d+ x; }5 l1 e
var tmp = ""+hexNum.toUpperCase(): W$ B: K) \! g" A2 V
while (tmp.length < 6) tmp = "0"+tmp( S# J3 @# T) d6 X2 c' f
return ((deHex(tmp.substring(0,1)) << 20) +
; M4 J1 V: |! v; q (deHex(tmp.substring(1,2)) << 16) + 3 o* U t0 E0 }! H+ v+ P
(deHex(tmp.substring(2,3)) << 12) +, W! K" `2 i& Z0 ~( m
(deHex(tmp.substring(3,4)) << 8) +% v& ^. K: m, J) {0 A2 m7 g% U
(deHex(tmp.substring(4,5)) << 4) +
! r' s' x! v0 V( u5 b( T (deHex(tmp.substring(5,6)))). ^/ ?" h: d; N1 _8 p" ~ A
}3 C6 y6 |) a: [6 ^7 v* q
///////////////////Shimmering Links/////////////////////
$ I- E8 \: c/ r2 `, I0 o) R0 z) B//global variables
+ z3 C0 W# C. Z3 g% `var hoverColour
0 n" `/ M1 i: n( ]9 L( Q! s; Xvar numLinks;
8 ^" y6 r2 H/ g+ I9 jvar rate;
! R. F& ]0 e# @7 M( Ivar numFadeLevels;( A, s& r2 p' E3 B, O5 h0 L1 S1 h
var bgR;+ w* J3 B: g M! G; {- U
var bgG;2 Q+ W5 d! j/ c- q. t3 p
var bgB;
; O1 M# t+ R- v3 o6 W/ Tvar currR;$ E) t* d# t" A& b# J
var currG;
$ H: \3 }6 j, svar currB;% A! K3 b8 @ K/ v+ w7 m" o0 w
var count;
e4 m* }" G' _( Wvar fadeOut;
- ?, ]0 W8 Y. u3 @4 Xvar continuous;
" i+ P* p8 H1 ~$ `$ t' |var newColour;
/ R- Z3 w8 q# X- T/ y1 e" svar tID;
+ I& B! N( G7 ^var redInterval;9 {2 P- X( j; o4 y2 N+ h
var greenInterval;
: _$ U K: d3 ]9 [/ Qvar blueInterval;
5 v V1 H: _9 F, X$ E7 \! D& a; hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& o$ k8 c) M' B* C/ z. s( a{
# Z& M- V& w- [# x+ B* ] hoverColour = mouseOverColour;) s' P" U- m" Q5 j, {+ P- `
numLinks = numberOfLinks;
& S* U9 Y8 h; M rate = 1;2 D6 ~& ]. X, E; g
numFadeLevels = 30;& o& c7 J2 U& ^$ P- y% |3 l3 [+ y
function initArray(theArray, length, val)6 M, f- ~- d; z |! r
{8 }# p9 K) j9 `! L8 z8 V/ N) m
for(i=0;i<length;i++)
9 X0 O8 B, X3 j& L$ Y9 o% M. c {/ I- @6 o( C7 c
theArray = val;3 p! n% e/ c0 n6 H/ Z
}) r( b8 n/ M, f4 a
}0 d& l1 {4 [% S7 \
bgR = '0000' + fadeOutColour.substring(1,3)
% H- n( S. S( F) r bgG = '0000' + fadeOutColour.substring(3,5)
! |" s( b# s1 y bgB = '0000' + fadeOutColour.substring(5,7)
& t: v7 v2 ]) ]3 b currR = new Array(numLinks);4 X% ^1 `- X4 }* U/ j5 u
currG = new Array(numLinks);
0 e o' |& z: U/ }1 ]+ l4 S currB = new Array(numLinks);
- g* w& P" ]+ K$ c* F8 |# Z" }* x% ` count = new Array(numLinks);* f- A' h2 I! { c" a
fadeOut = new Array(numLinks);
: ^& z6 R F- p. [( M) v continuous = new Array(numLinks);# M- F j4 k$ B9 V% t; i7 [4 }
newColour = new Array(numLinks);2 c6 |* i3 s) k) j3 k* u
tID = new Array(numLinks);
+ i7 S& R4 b* i O3 R redInterval = toDecimal(bgR) / numFadeLevels;
3 |+ H0 w& d1 s& S* V greenInterval = toDecimal(bgG) / numFadeLevels;- Z8 F& S% t# k9 t
blueInterval = toDecimal(bgB) / numFadeLevels;# j7 S: T6 ]- Q
initArray(currR,numLinks,0);
# B+ ~- w+ p5 _% }) F initArray(currG,numLinks,0);
# {5 I k0 ?+ M+ O initArray(currB,numLinks,0);( x, l/ ~% ^% w1 n; M3 j, @, @
initArray(count,numLinks,0);
# R0 }/ R, v% W+ Y. `7 o initArray(fadeOut,numLinks,true);
' y+ U. O" F% l initArray(continuous,numLinks,true);
p2 M2 M' ?# u' e) G6 e4 l" g7 M}
; \2 v: S) e4 b6 F5 Rfunction startFade(id)8 u+ y% c; O8 t0 ]0 L
{
0 s, W* h; X; ^: Q: \3 y if(fadeOut[id] == true)
7 K. V+ }/ Z: y { /*move colour towards background colour (increment)*/
0 T8 k* b& q! A$ | currR[id] += redInterval;5 H! K- ^& j* |
currG[id] += greenInterval;
7 Y7 e7 c6 \8 _ currB[id] += blueInterval;. [6 L% I+ _- ^; e8 r7 j! o* Q
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) I/ z; S8 e0 l; k1 |2 |- Y9 M if(++count[id] == numFadeLevels)
' O3 T- i1 t# e- ?3 b {, y* ]8 e; K6 i( B; V
fadeOut[id] = false;, T6 \' U& h- r
}7 r. I% U2 Q# @1 U
}
3 ^- T0 |8 Y" I4 @; _ else h) B: o5 Q3 d# H/ `" w% e- F% O( D( \
{
& {+ }( o9 e( I' o+ ~ currR[id] -= redInterval;5 X" N5 _0 Y. Q( X% v7 Z
' M) M, v/ ?7 d# k$ U currG[id] -= greenInterval;
/ I6 v$ E( _" n u i, ^& H/ {( x' |
: Y; X! ]( C& z. A( |9 a: q currB[id] -= blueInterval;( L$ M: x, @6 T
& ?' e% p: Y7 H* o
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
4 S8 `- Q4 W0 Y( G: X% K* K: S% w7 j$ b6 _/ o$ ~
if(--count[id] == 0)+ X7 R9 `( R4 U0 M6 k% P
: C5 ^6 t' V) M( g9 n/ X4 o {
: H6 Y$ X6 T. ?/ k0 q- y: a3 d6 q& V! r7 E3 n! \4 n& D
fadeOut[id] = true;
' G) y9 M/ {2 x
' p, K, d& L$ a4 Y }/ V6 ]" {% x) S# p; d( j5 O
& O) `" S) `! j# \ ?9 G1 o }: V8 ^9 G+ A5 k& A3 n5 A6 g
( P6 L1 @& T4 C2 j& r if(continuous[id] == true)- ]* E. N' q/ a+ z& s
$ e9 l {& V, H" ~8 a% {1 a0 i {
2 u0 W! A: M, l2 p
+ s$ L! C) @- W8 E document.getElementById(id).style.color = newColour[id];
0 c/ @( T5 K6 _; T! u8 d/ H7 G2 O- H$ s
}0 J; Z+ c* l) d1 [8 R0 w
0 t" x/ o5 u1 D2 W# P0 ^
else
: D* R s" A8 m, E/ p1 H$ n3 V4 c( n$ M$ R
{- |% e3 q' Y T
3 j9 D5 j5 y) X
document.getElementById(id).style.color = hoverColour;" b( M% _1 _# S
, Y1 @, O* v* M$ G1 E. X9 p
}9 a& b0 e- l8 g$ ~, @
# t9 ~; d6 e& ^- ?+ l! O( g clearTimeout(tID[id]);
0 B y) U, K% @
/ g: p* ?0 |9 W& }1 r# l& I0 N) a. _ tID[id]=setTimeout('startFade(' + id + ')', rate);7 l ]$ `- D H t9 r( `
$ m" k8 T0 J' x) h! l3 |
}
& W) q* C# H' Y( U. ^. \* I3 M7 H2 x: D
function continueFade(id): X. z7 J- m# U9 @
! @% F! S/ \. F- J& F9 [4 ~* ?
{. ^/ n% ]' ^. G
: [- Y9 V. D& A9 M* e
continuous[id] = true;
- l4 \; u0 I7 S- r* [
* A- m) `2 F. P7 e}; _, ?. L4 I3 v+ Y4 s: S+ k
. O9 W1 h/ r; d; X$ T# T0 n
function stopFade(id)& T7 ^" Z! M- R! H X4 ?
+ S5 A! P; ^2 x# c/ ~2 ^' Q% w: Y
{
1 {3 F+ z! C2 R) s/ ~; B N
# y( E/ t& B* |7 t5 R continuous[id] = false;
4 B& t4 `6 L% K4 h, ^
. o! y+ U( D4 g/ V1 Q* s/ D}. \) w" a9 T ^& J8 h
& h( ~* Y% ?) h/ @2 |! lfunction StartTimers()
' F9 z& u1 g+ L, l) V0 K6 K
9 f5 v6 f+ i" g: N! @{ //set up an initial set of timers to start the shimmering effect
% a6 T0 h! N5 d: ?8 L2 | _
0 C9 H7 N' f8 p+ O for(id=0; id<numLinks; id++)
2 \5 _" ~3 y/ k4 I3 P
, `8 n! m4 B1 I3 n& u {
7 b+ @" Q8 w9 m* R3 I- D2 l9 f c- h+ m/ ^3 f( j. e
t=setTimeout('startFade(' + id + ')', id*100);5 s: `- U8 j# i$ p9 I1 o
O4 m- q; J. l( z$ U/ R }
, R1 V6 ^% Z" g. S8 ~. ~8 |) t! p5 _8 ^2 y
}, T) c, S: ~5 z2 @0 L) e9 q
3 ^1 G( {8 ?/ X/ E* p//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
% r) e- |( B. K5 f
0 q# M) u+ U: `' @1 k2 xinitLinks('#FF0000', 6, '#FFCC77');7 H U* m& S0 t/ v8 o4 B
( z) E8 k7 r5 O, `+ N$ m
//-->
: t. t( f+ R% f, v5 O7 i7 C/ b% g
. S7 Z( p7 C2 r6 P7 z; y6 v</script>
2 \& w0 ~: t; H& E, R* \<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元; B& Z) z& @8 P' G( u1 g8 J
</a>) `' { \) ]9 S. u5 `( } o
<br>. i( P9 J9 L$ i9 ~
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
. n$ ]' i) T/ j<br>
# e( f" ^& l/ `# `. U<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>5 i% e. s( R" W
<br> - s: I: Z) X; w; t5 Y
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
& h& w, ]+ h) I% }. X: j<br>
r4 i8 G n- \" ]" C<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>7 ^ a, Y7 U, e6 _( ~8 E
<br>
6 b/ u5 n6 I. j/ ^) y6 g* e# a: ?( P<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
. F& f( Y5 v2 W5 k( q<script language="javascript" type="text/javascript">
, H. M. e) l& ]' S<!--
- G. G& L6 O3 Z2 [& HsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
; i/ n; e% w7 E" h7 s1 k0 l//-->1 w5 e0 {$ }( [: z6 i/ w7 p
</script> |
|