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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">% m0 q) \* j2 Z/ i7 z; F
<!--" I9 |( M9 G1 k, Z; b) V8 x2 z
// convert a single digit (0 - 16) into hex
. f8 t! u6 L9 i/ b$ Cfunction enHex(aDigit)
$ K; ^/ j/ o9 [, C0 t! G. W{. K! T+ K3 ?3 v* G. |) H
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
1 X1 R$ j9 [$ n}/ g7 W, a8 `5 r
// convert a hex digit into decimal
1 @5 C1 ~$ c$ y$ l' K Y. s* Sfunction deHex(aDigit)3 d4 Q; B2 M9 L2 x
{5 M, Z( \% r- ]* B6 W( e
return("0123456789ABCDEF".indexOf(aDigit))
4 }- T* r' X% L, \$ H) s}
' a; }9 |- n3 H" Z% L& l& P! m. T
/ m- p5 m( H! l// Convert a 24bit number to hex
% o) [ j* @3 u: lfunction toHex(n)3 {" N- t6 J/ `. I# J; `' K2 q
{7 u3 b& A# Q1 y* ~4 u
return (enHex((0xf00000 & n) >> 20) +9 ~4 ^& |( }3 Z5 N
enHex((0x0f0000 & n) >> 16) +; h! k; A0 f; W1 {+ L: f
enHex((0x00f000 & n) >> 12) +; A- }% _2 U' `* [1 x
enHex((0x000f00 & n) >> 8) +5 L) ~$ N I! _) J- @' m
enHex((0x0000f0 & n) >> 4) +
: j5 _2 S/ @' Z' E6 q, E8 T) X0 w enHex((0x00000f & n) >> 0))3 |% y4 v0 g$ @0 D# d0 Y0 ~- y# y
}
e' e7 |5 O9 k H' I/ c// Convert a six character hex to decimal
7 ~' p4 m. N# {function toDecimal(hexNum)
% w3 ~8 E2 S/ s' |{% [% E: F" w" T9 C
var tmp = ""+hexNum.toUpperCase()) b8 j3 }7 L9 \( n( W
while (tmp.length < 6) tmp = "0"+tmp* F3 X* h9 h+ }- N5 D1 ^
return ((deHex(tmp.substring(0,1)) << 20) +
6 \# ]& L" L0 P1 C4 }% F (deHex(tmp.substring(1,2)) << 16) + 2 @& Q% R+ M P- J4 Y3 c6 u
(deHex(tmp.substring(2,3)) << 12) +
3 @# V+ H' W1 Y( \- j* ` (deHex(tmp.substring(3,4)) << 8) +% V& _2 Z p1 |
(deHex(tmp.substring(4,5)) << 4) +
; x" C# w) g4 p3 a' F: x (deHex(tmp.substring(5,6))))" E8 K" V+ w3 [6 a5 @5 P7 B
}, ?# n/ a! P% H. e. b; C
///////////////////Shimmering Links///////////////////// I4 W- j) d' O+ `9 c) ` |
//global variables
% g' `# [# V. M' Uvar hoverColour
. m. `! t9 ?3 o( {( D; {var numLinks;
, C% u5 M' V' Fvar rate;
2 ]7 n1 H2 M3 |var numFadeLevels;* E+ @7 c, P% S6 n: \
var bgR;
7 @1 e/ `) Y2 b8 L( j( ^var bgG;9 r3 r# o" G0 i+ _/ L# S1 ?8 I3 P
var bgB;
/ E& r$ R9 Q1 fvar currR;. H6 u8 f" g6 ^8 {5 F7 \9 ?; t
var currG;+ g% Y8 l/ s+ E) Q& b
var currB;9 U( `- p2 w; I; M
var count;1 P. {( n" l/ }- l$ T% u$ v' F( i
var fadeOut;
4 N+ u8 U; K( `% J+ yvar continuous;6 O+ l5 n, X& O' }, }& H8 T3 N
var newColour;
( _$ f% a0 ^/ d4 b* R; }4 ~' Rvar tID;
' W5 }; B5 G/ T. m5 X `var redInterval;
" {* L1 l- H) E, _var greenInterval;! i- |/ L. F7 h8 _$ Z/ Z
var blueInterval;3 m! D8 H6 w, M/ F: x# r
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)& J: U1 a5 U' S; e! Q( a
{1 A2 d$ O) z H$ i. j: Z! ^6 f
hoverColour = mouseOverColour;
. }) j- T1 V5 R) w' a numLinks = numberOfLinks;+ n& k, X- H" C) ~& K
rate = 1;- y8 m& ` k. H. c9 `
numFadeLevels = 30;
2 _" V& R& D( w function initArray(theArray, length, val), a2 k% h; c- `& `6 d9 ^
{" @( D/ H6 q8 p5 u. {( T9 A9 m: r8 O
for(i=0;i<length;i++)
1 \3 l8 J; @- A1 c7 w7 v1 ]# q {
1 Y; z7 l' R; { theArray = val;
( U& m: R" J9 K/ V. J' C# H }
t5 W7 `7 b& y' z% ^ }6 U- ?( ^' H! @" }% h( K0 J+ o8 O
bgR = '0000' + fadeOutColour.substring(1,3)) P) p" k) s) @# v, ~& z4 U$ W* J
bgG = '0000' + fadeOutColour.substring(3,5)
, [, }* E' D* z5 h5 u J bgB = '0000' + fadeOutColour.substring(5,7), `0 w, f0 z! Z0 O
currR = new Array(numLinks);
7 V. D: Y% V- r) Q) ~* t+ q currG = new Array(numLinks);* j( T* q9 y. ]0 X5 L( ]4 p( K
currB = new Array(numLinks);4 Q+ x. H1 Z8 \* |/ R
count = new Array(numLinks);
. X) m8 O1 w' D; n/ { fadeOut = new Array(numLinks);% U5 d' ?1 R+ [& N
continuous = new Array(numLinks);# ?% k4 W z( f8 ]+ M; W& y
newColour = new Array(numLinks);/ z$ |5 l7 ~1 S; Z' P8 G
tID = new Array(numLinks);8 D* ^" i' d g4 @" }
redInterval = toDecimal(bgR) / numFadeLevels;
- y2 N! ?; J- j7 B# \7 } greenInterval = toDecimal(bgG) / numFadeLevels;
V7 P0 e- ?" q9 N$ u( a blueInterval = toDecimal(bgB) / numFadeLevels;. l$ N# R9 `7 y7 j6 A7 J
initArray(currR,numLinks,0);
/ e7 F! @" c: G6 o$ u initArray(currG,numLinks,0);
M4 L, `4 i% c5 X. @- @' F$ I initArray(currB,numLinks,0);: L3 Y& Z- G" C- P; F! A9 N
initArray(count,numLinks,0);8 Z" r7 c4 l+ b. `0 V; M7 Y
initArray(fadeOut,numLinks,true);
% s3 V( P6 N( d _0 @6 Y initArray(continuous,numLinks,true);
" s1 C9 X. |: P8 U$ I+ ^0 g} - y5 L% S7 p8 S3 N' c
function startFade(id)4 `8 E8 V' F. q. h: u* `7 d% a5 ~% E" y
{
. `& w; b1 g1 @, B if(fadeOut[id] == true), Q7 y& O8 K; _- X
{ /*move colour towards background colour (increment)*/6 c/ ^. i7 v/ l, U4 j' J
currR[id] += redInterval;
1 W c7 B8 n2 s4 \1 ^* G% V currG[id] += greenInterval;' m6 H! t% u( b$ V9 {& T
currB[id] += blueInterval;6 L/ J3 B! E: T9 I2 l) p! t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! h! i; M+ j" H$ _- d& i' a) g% u
if(++count[id] == numFadeLevels)2 K$ D& V1 P6 M& K0 F* J
{+ V1 G7 y3 s) z
fadeOut[id] = false;
7 M9 A) Q7 [* C0 A7 y0 k+ i }
) Z: x$ d; C. m" w- O( Q7 b# r' w/ g }
& L s5 i! D3 H* {; b+ F7 [& M else
- _ Z1 p- ?. w$ l% E {2 K3 ~3 M0 s/ L) ]
currR[id] -= redInterval;6 G8 L# M5 k% @( `5 N7 x
+ s8 @4 P3 e& c j1 _
currG[id] -= greenInterval;
| h# q! a5 b/ s+ C! o& K% J5 K! b' S+ \! o
currB[id] -= blueInterval;
9 [$ ]6 {/ N: U0 t0 K9 _; R# h3 P/ p* d2 t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);. i; Y% \& Z* Z& _+ R2 f1 x: p: D5 Y
9 q' n' L1 T2 t0 S" p8 l, p if(--count[id] == 0)
6 i* S* G1 ?7 V- i* ^) `; N/ B7 m" q' @0 W
{
( o' R' M4 S1 Z% k+ ], ]- V+ \ o
fadeOut[id] = true;+ K! K' C" J9 c$ Y7 v4 n, H
1 d5 j9 _( j( ~/ @$ O }
% @$ P& z' ? v: b6 T
+ [7 T- L3 f( L9 u }
0 c% ^& e" d4 a1 n& \4 ]4 W5 t
1 |0 x9 w+ Y m, E if(continuous[id] == true)* k L5 a) v% {- L4 H
+ p5 y. o* x7 ]) `
{
, D a/ {7 a) l; s5 M0 D2 j2 C6 \7 t8 \; k/ ~
document.getElementById(id).style.color = newColour[id];
" e4 O" z/ h8 v" C9 h( ]" \7 D. B+ Q. f. C( q0 j) _6 C- d0 K1 X( f
}
/ e: K5 _( n% G) _
! O) L" y9 ~; ?+ k1 w8 t else4 D" F% ]6 B/ L7 t7 c E
- {7 p0 p! W$ `0 n {$ ?" N% M4 z, z4 v2 W% H
! Y7 |- ^9 u3 J' T: r document.getElementById(id).style.color = hoverColour;
" w$ K/ U8 L/ k3 I, s% t! |' @2 e% _# d( D; T% t: \0 L( y; y2 N% G4 _
}" g/ C# |1 G7 u4 c, G; O) h
: v# y- k& T9 R0 [4 P/ M5 \
clearTimeout(tID[id]);3 K# Z1 o0 `1 U C: X* x$ }
% P' z# ]7 r1 h
tID[id]=setTimeout('startFade(' + id + ')', rate);
5 T! y4 [4 w5 V3 e2 G7 |; i: g# r. `$ u4 [0 U/ ~9 C. d
}" T0 m7 u7 A; z1 r! j! O
; n% ?& ?$ T: a' k" d- C6 gfunction continueFade(id)
6 V, b! \! T8 s
# v: o( P4 d5 C$ `$ a* ]{$ I# [- @2 b6 B2 I% _( J4 x. w
, z, A- A- d* a continuous[id] = true;. P3 V3 y' T1 l! t; n
8 h' @* L/ j2 B+ L
}( @2 ~0 O( B& ^) I
y% T+ K2 p6 `! Vfunction stopFade(id)
( L* H# `+ C7 g o/ X$ ^* D+ V' q8 P3 n
{7 ~6 w( X' o5 G& Y
9 e' s, V" m, V! [* w; j
continuous[id] = false;- Y3 I$ b+ F; ^ v2 q
1 J/ P- r- V+ [, v+ ^; i& ~}
: i/ r' [' ^2 `8 s1 Y
0 Z/ t$ r# s8 Y# M$ X* Ffunction StartTimers(), f" n: ?% B# O' C% P9 F _( u
1 X$ F; |& e8 g+ Q- t
{ //set up an initial set of timers to start the shimmering effect8 T6 F1 z5 S4 l9 Z
4 f2 T! z/ c. Z1 i1 f: p: e
for(id=0; id<numLinks; id++) @1 f( M" \/ r) Z! r
" H5 ]1 d6 V5 @' [9 { l {
2 U" Q4 Z, \9 T% z( `$ F6 _% C2 ?2 K5 B3 U# k" f/ Z! W
t=setTimeout('startFade(' + id + ')', id*100);
5 { M+ R: u4 o3 p& M7 c+ o! `6 H( n7 u4 m
}* Y, R U; j2 c7 |. I# d8 t
' U2 q: q% }% j s}
) n: J- ~, e. F# l# p K
5 U4 B$ ?, r$ t//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
. }8 ?* n( E+ }7 }6 X
/ v0 q: C+ Q b9 p8 v1 g4 l6 f0 n' ainitLinks('#FF0000', 6, '#FFCC77');: ]: P6 b! \3 q0 [, w, \
+ e0 u" {2 O! O! ~ b; K3 K
//-->; V( O" O# D9 n% [% R
, c) I9 d% i% ]! U; J( [; i
</script>& d9 l. L3 E3 G6 u; D Z
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
. U, \8 Z# o( ?0 d</a>0 I' y7 I$ A. |: T- p9 \& z
<br>
0 J! P9 y C1 w+ ~<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
6 g" N0 `5 S' c+ u<br>
$ @( Y/ Y/ ~* M. g t# Q: Q% ~: X<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
& x& ^0 l: P& v1 s8 ~* [. i( F<br>
W. U9 V' }9 d<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 Q, b* `( N# i# X ?4 Z. W<br>5 f% S3 q7 B; x
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
6 C! P3 Y) L7 _; L) w# J' Y<br>
2 r$ ^: c1 N5 }6 U( h4 Q<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>8 V$ @* a$ I# u: c5 y
<script language="javascript" type="text/javascript"> B0 k, K2 C$ C. A& n
<!--+ z) m4 t& j7 O; n6 N
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
; C0 b* D. u8 @$ D i//-->
& w' P" q) @: u4 e0 b</script> |
|