|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- U0 y8 T; n/ g* w: Z6 Y<!-- ]( p* d. f( ~' h k
// convert a single digit (0 - 16) into hex. ]' v$ D: t! A
function enHex(aDigit)
2 [& a! F j- z- e{
. d& f$ e( J. D. p& ?" J/ B return("0123456789ABCDEF".substring(aDigit, aDigit+1)), ^* P1 W/ m# C- j a! A" a9 V* j
}
]) ?) g$ z# U! P// convert a hex digit into decimal
3 a2 q' c$ U3 e( f8 yfunction deHex(aDigit)7 Z, Z6 m" Q* v) ~. \6 K; ?
{1 ?+ p9 b `: y+ E5 G
return("0123456789ABCDEF".indexOf(aDigit)): X T( N3 R* d2 R
}
/ r# v# I: A' x/ q+ V; F# K
! L, _( @# J3 n m6 e// Convert a 24bit number to hex2 I6 ]4 g6 d2 [# o( x
function toHex(n): C# u0 P& e* o- v* [
{
( k$ G ], O0 @7 \' U" D4 @ return (enHex((0xf00000 & n) >> 20) +
: m! r6 |0 U0 Z% O; m3 o9 J0 r enHex((0x0f0000 & n) >> 16) +
6 P8 s" m- ~( H5 E* C7 `% ]+ m enHex((0x00f000 & n) >> 12) +
& x |5 f7 ]8 r' ^# P- F+ J/ v- N enHex((0x000f00 & n) >> 8) +
4 Q$ U8 i4 x3 r) f6 Y$ n! N$ @ enHex((0x0000f0 & n) >> 4) +
$ ~) a! H( D6 R enHex((0x00000f & n) >> 0))# l3 `1 l+ F. r- F- b
}% n( X9 y( u# q9 D
// Convert a six character hex to decimal6 H' |: \8 z) U; ~+ I$ J
function toDecimal(hexNum)4 q# \& J0 o/ S! A1 z7 F/ ^
{
( G3 h' N8 J! Y: ` m var tmp = ""+hexNum.toUpperCase()) ~! M" V. b0 v
while (tmp.length < 6) tmp = "0"+tmp
* Z3 h; _' V# v; r. V, p: F return ((deHex(tmp.substring(0,1)) << 20) +2 A6 J3 p" M; T1 d' I; a) K* W
(deHex(tmp.substring(1,2)) << 16) +
' r" X7 Z' o8 Q) e, s7 U. d" c$ H (deHex(tmp.substring(2,3)) << 12) +/ b6 {) i7 e1 s6 Q7 S" q
(deHex(tmp.substring(3,4)) << 8) +
" c( D. J! s# v% H# r7 w8 x( `" w9 T" s (deHex(tmp.substring(4,5)) << 4) +- |" i, B5 ]$ d$ L" ]8 n
(deHex(tmp.substring(5,6))))7 I% R/ U3 V7 m% |6 m
}3 d9 H% t0 Z7 K, I" n4 {
///////////////////Shimmering Links/////////////////////4 l A0 n& ?1 g1 G2 y( q! _+ m& q3 G
//global variables* H# D# M! Y6 }8 c4 \
var hoverColour
( l; p6 @( ^: u4 ^7 _6 vvar numLinks;
+ t. Y: M" {, l' P0 F8 hvar rate;
3 Y" @" a& F% n0 Uvar numFadeLevels;
" ]1 A! n7 v1 j, X9 ~var bgR;
. _( x M; Y0 S3 Mvar bgG;
6 V _- J7 C, F1 H8 Tvar bgB;
7 h7 \+ w- e4 j7 c5 v/ n5 Nvar currR;, V* D$ l$ X# P3 `: q+ S
var currG;4 c4 Y* i/ u0 R# r3 w
var currB;) N$ D8 x! z0 z& @* o5 J3 r9 V
var count;
0 m, T; f0 B' T: j8 wvar fadeOut;
( Z( e" J1 t% d8 v: B# Cvar continuous;, _2 w' v, q6 @$ p6 @7 a
var newColour;
$ M& z; ^( Q9 M$ B/ v5 k7 ?var tID;
+ t3 z% k: v0 h' u& U6 H' `( _$ r5 ovar redInterval;
6 D9 ~ o/ ]9 dvar greenInterval;3 |+ P5 s) k3 }3 r- V
var blueInterval;
6 |9 f; `5 v9 {! Z1 s( \ h1 Afunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 B/ B; P9 _! w. q{
9 P- w% s' G. a) Y2 y hoverColour = mouseOverColour;
1 H4 R% j" a1 ~7 i numLinks = numberOfLinks;
3 b/ a1 @! y4 N0 ?5 d1 I8 m rate = 1;0 ]% \, j" J; c/ r) F5 p
numFadeLevels = 30;" x! m: Z6 e: N- b6 c0 A
function initArray(theArray, length, val); v. e7 ^1 [( z5 `" j1 {
{
, M4 u% H [# X+ ]" w for(i=0;i<length;i++)0 Q# i. E' C9 [* K; {
{/ |) ]: D$ @6 X) d* i- o
theArray = val;
6 U/ y9 j+ H" j' U! S! ?+ }1 X; B+ U }* d- |8 i0 f9 n$ i: P" Y
}
# y3 J5 t0 x% g8 z4 j4 U$ W$ ~ bgR = '0000' + fadeOutColour.substring(1,3)9 l4 ]2 @, ?, t
bgG = '0000' + fadeOutColour.substring(3,5)0 p) L# H( Q2 F: m
bgB = '0000' + fadeOutColour.substring(5,7)2 Z" N$ e9 D& l0 H( M
currR = new Array(numLinks);
5 N Z& }" K" } currG = new Array(numLinks);7 e5 a- E+ U1 G5 P; e- O% w; w
currB = new Array(numLinks);
: {, X- s3 B! a( \/ i6 v count = new Array(numLinks);/ N% w# Z! ~4 @0 }: U3 b# c( y
fadeOut = new Array(numLinks);# I. \4 i8 D- D p( T c( o- O
continuous = new Array(numLinks);
% }& l! W2 d) c- y. B$ { newColour = new Array(numLinks);. x9 B2 F5 i6 C8 `
tID = new Array(numLinks);
S! l- d# N% |/ ` L) o/ ^ redInterval = toDecimal(bgR) / numFadeLevels;
7 d a0 x( V6 J" u7 Q8 ?+ { greenInterval = toDecimal(bgG) / numFadeLevels;
6 y; T! _1 k5 L. B8 Y' L8 A blueInterval = toDecimal(bgB) / numFadeLevels;) E, C) E7 }1 _& _8 m2 |1 P+ w
initArray(currR,numLinks,0);8 b$ h7 d" C, K8 b3 ]4 t5 z
initArray(currG,numLinks,0);
; `1 y: M q* p" K initArray(currB,numLinks,0); `0 `; V" g; n% ?- E
initArray(count,numLinks,0);: c7 {9 @' P% i8 x
initArray(fadeOut,numLinks,true);4 J! W! p) V* g: R; w+ F
initArray(continuous,numLinks,true);/ B+ x( L+ ?! X8 t* |" v4 H
} , M* B0 b, \6 P4 F1 }& h+ v
function startFade(id)0 d7 X4 k3 Q* l" b, b4 c9 e
{ H$ t; E0 E1 ^( S3 |# o+ t
if(fadeOut[id] == true). `, [- F2 h2 ], j: N
{ /*move colour towards background colour (increment)*/
0 O8 N- H4 g) m* a8 J+ m currR[id] += redInterval;
) g- { J# i: V3 @' @5 Q( h currG[id] += greenInterval; v6 p; y1 _% Q
currB[id] += blueInterval;9 Z7 v( p4 s# E" d
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 ? g5 n: j! ~% h6 m4 ~
if(++count[id] == numFadeLevels)7 d3 l) L' I; B% [9 v; s9 A0 B
{
1 a1 p+ U$ H& ~$ r" I2 _$ L1 g fadeOut[id] = false;
4 X: v: C/ ^& ~/ k }
" g% ]- y h9 L. | s } S% Z2 Z+ m* X7 b# ?
else/ ? |- ?' A) B$ {
{
% A! \* F0 J$ W4 t" e5 ] currR[id] -= redInterval;
# g9 \7 K+ Y( o7 }4 m
) l. s- n: j6 O- e4 d- `! j0 q. x currG[id] -= greenInterval;
0 _6 T9 o( t6 v7 `) `0 [2 E9 H4 ]$ |5 E; A
currB[id] -= blueInterval;
0 x2 h1 p9 v, @; d0 V' q: s$ b# i6 @3 J5 F* `. @& V
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 s S9 c8 Y, ?3 r @3 ?* z) S& G3 h) b- j
if(--count[id] == 0)1 B3 o9 j* O3 H/ K2 B) p, g- x7 V
5 B! y% u: W& u: {3 ^
{" \7 \! ]$ r6 I5 R& G3 {
: K( I" B$ ]" o! ?1 F: z+ N fadeOut[id] = true;7 h$ v& n" |' v! Q" [
- c1 f1 ~: |+ o: i8 O6 x }
; T5 ?) v- [; g5 D* J+ g- W+ h% d) w6 b0 a* W
}' Y- U/ P7 \8 d3 ^& P3 z2 S, ?1 V
3 Z% Q* M) r5 c- M if(continuous[id] == true)+ e. Y. v$ h |) L- d9 I
5 R* T7 ], Z9 v
{# t' S7 Y1 g2 v! |# R5 w
& L& Y! U4 _9 D0 o
document.getElementById(id).style.color = newColour[id];
: O- w c6 m) b; E5 }) C5 c. p& T1 R% g7 E, W
}3 Q4 a9 P: ^" j! G( S4 Z' m3 L
, ^! g, }$ j. }* @/ v% ~/ ? else B- x* C. h" R; ~
. v/ R9 V$ x$ Q* U {
1 {# z3 V l( Z3 o/ F% @. h6 x( m
' A- x9 t1 r( c! T q document.getElementById(id).style.color = hoverColour;
7 j* s% z8 W/ c( h, \
/ G% [- o! y* {! v7 K }9 v4 a N5 F5 B, ^9 I3 \; c! _
8 f: z2 H6 Q N2 b9 R8 A3 ~ clearTimeout(tID[id]);
" f7 l3 B7 ?3 P$ z) t
) {* H( }5 ~0 }1 ~ tID[id]=setTimeout('startFade(' + id + ')', rate);
% z. y+ m% D7 X9 m) X2 {( u0 U; o3 v" g
}. J% Y; d8 W! i2 p
! A6 x$ R0 g( Z$ H% ?. ?8 M# Y
function continueFade(id)
4 }& w( G# e5 W# h( K
4 w: Y2 ^& ?9 ] W+ K{9 D: L8 r, j+ \5 f+ [: {! Q/ [- i
" r9 e+ H$ F" \$ l continuous[id] = true;. R( f: P5 u& {4 i2 Y( a: A
' z2 F# I K3 |4 G1 p}$ g" u8 O: M5 i) c& X# V
. d, ~; m3 L# P8 @7 b5 r, `
function stopFade(id)/ b$ P2 ] k' ?9 _3 S7 H9 _% ]3 D
( i8 g n& p" H; Q
{; w6 D/ y7 s% w5 M$ I
A6 j* d: m) d6 j) g/ y- j continuous[id] = false;
8 m+ ?9 F+ B9 _6 l/ I9 t
3 _) _- H" y1 ^ U, l}
- a3 Z8 P) K8 b/ F' S9 N$ N5 J! g z; O7 `! z
function StartTimers()& b m% {+ W- i+ W$ R4 {7 T
0 `# } G N% B% \; I9 O& F8 h! i i{ //set up an initial set of timers to start the shimmering effect4 O# X5 }( l6 a+ Y2 X
H# ^4 W( A1 [( }5 y$ ~
for(id=0; id<numLinks; id++)9 s) c& x- `( ?2 Y* S z
( x7 T: r% }( m( r f8 {- p
{
; m, [5 z# \% _. }5 q
; C5 n! s, P6 d, m t=setTimeout('startFade(' + id + ')', id*100);
% a" N! ?- b# |* x7 J3 B& w. C5 f
}$ a) V8 [1 X8 @" }- X) m
' t; P. C1 y# S7 k5 ^}
) K9 V) x& [2 Q) D" Q9 x/ f r
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ Z) @0 c; C7 s" u5 |& ]4 s5 A# T2 U1 d9 d
initLinks('#FF0000', 6, '#FFCC77');, l" q. {) E& _5 n
5 _$ k! \. \: E5 J% J
//-->
; N" W8 A Q* I% H" V; g1 D t" d* S+ J+ m# N" T4 x
</script>
o( U3 d/ Q O<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
2 Q4 ?! W% d! N9 h. B</a>
2 M7 N2 g$ p* M, h. r4 F9 y<br>
) b; a+ r t- \# S# f- b8 ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
4 T7 T. o; g1 M5 Y4 x<br>
- T' K) t! a) K8 D% w) @$ J, e<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
% Q5 _( U* y+ ^9 M: L<br>
9 C' y* G! j: f. r9 d2 r<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
2 H f7 u! m6 S) e8 r, X<br>
( E( c& g% e& W<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>, q! k3 r1 }. ~1 R2 u
<br>
0 \- F. M+ i4 z$ ^1 z5 ~' D2 k<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 F# l& E. L* P7 E+ R7 n$ J
<script language="javascript" type="text/javascript">& p, ^4 Z% r+ `) o" J
<!--
2 `' N1 {- F* I/ m. G4 q: s: psetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
' ~5 [0 Y8 ]$ {: E4 L, @& d//-->
7 V% `2 J- b. `; W5 k</script> |
|
发表于 2008-1-21 20:48
|