|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
) J0 h) u0 J4 }+ z' N3 Y; i<!--$ B. X2 w$ ^$ t- e
// convert a single digit (0 - 16) into hex, h# o" N3 i7 L5 Z; `8 }
function enHex(aDigit)
0 l! o. p( W7 t9 g9 F5 A2 A{8 ?; H' C X$ s, |) a
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
: \1 {/ F& {4 c6 j' S/ e2 _}, y9 Q1 U! J$ i# Y a- x
// convert a hex digit into decimal
?& B8 U* e1 B( Zfunction deHex(aDigit)
5 h) L% ?: J# ]9 |0 v: w d/ E4 s3 v{. O/ o$ q8 k2 c3 t$ b/ S
return("0123456789ABCDEF".indexOf(aDigit))3 A' p+ ]9 Q( D" \7 y- w
}
5 M/ r, v( A" R) d8 H
1 e; b3 z n2 S5 z5 \$ V/ ^! q// Convert a 24bit number to hex
C r+ C7 f& Q1 q# _function toHex(n)8 x8 Q0 M3 n% E5 y' J7 U" `
{
e5 s+ J* R/ b' r return (enHex((0xf00000 & n) >> 20) +
+ c' T% ~9 x/ l9 E0 t' y" ? enHex((0x0f0000 & n) >> 16) +; K _! N* ], C: `, g$ s, q+ U
enHex((0x00f000 & n) >> 12) +' ^6 X5 r5 n' N
enHex((0x000f00 & n) >> 8) +
( ^- E& [) n" v6 q# N- t, J enHex((0x0000f0 & n) >> 4) +0 X; J$ w, t! @& _* B }+ @
enHex((0x00000f & n) >> 0))# n$ E: H) ~5 N6 w: ~
}
" k0 P6 L" b* f7 u: V// Convert a six character hex to decimal; J6 Z- j$ q0 J/ R
function toDecimal(hexNum)7 o! g2 S" f+ V$ E7 v
{" g8 O" l' K( U& C+ G1 O# o" L9 ?$ a$ S
var tmp = ""+hexNum.toUpperCase()
3 d' |7 S1 M. @' y while (tmp.length < 6) tmp = "0"+tmp! `" G; Y+ N, g6 i
return ((deHex(tmp.substring(0,1)) << 20) +
* B/ X+ T2 U" S; b: G! a' @% C (deHex(tmp.substring(1,2)) << 16) + 1 A, ?1 ^9 D2 `( f* u
(deHex(tmp.substring(2,3)) << 12) +
4 N1 B- M4 U4 i0 o |. O: M: i (deHex(tmp.substring(3,4)) << 8) +
$ e! O F1 }3 i8 q, F" }+ G1 [ (deHex(tmp.substring(4,5)) << 4) +' J1 F4 t5 R, f( d
(deHex(tmp.substring(5,6))))0 Q& C; b, {$ x0 E+ W0 ?% T
}7 j& h( B9 J' ?/ S5 j6 [
///////////////////Shimmering Links/////////////////////
: H9 S9 _3 u; N7 W//global variables
; |2 Y( E' C: H8 e' mvar hoverColour
) ?+ h' d4 A/ T9 Uvar numLinks;
) A5 g+ t! \) ]; y( E! N% Hvar rate;2 A6 q3 I: g- o e( V! k
var numFadeLevels;% U, Q7 P2 X8 j' z. w1 C
var bgR;% I5 o P7 m& L7 X* L2 W0 \
var bgG;
( i5 k- L) g2 I" G1 R1 Lvar bgB;4 C$ \1 Q8 }' A0 r
var currR;
0 n" F# T* w$ A# a% Mvar currG;# I# z* T# @# q% G+ W* K
var currB;
& r/ Y; Z5 F, dvar count;
( w. H4 D ]5 t7 o/ rvar fadeOut;
1 z! ?9 O3 b+ I8 x/ ]4 o% x* Mvar continuous;
0 L+ K' U( {0 Z& m4 C8 Q/ y- xvar newColour;
' r, a$ ?/ q( f8 c$ V" H' ~var tID;
: R7 w: x8 H( u3 F" x6 _7 N; @var redInterval;5 t' o: j5 Y: D( L4 x
var greenInterval;
; }" }4 |8 a$ X# s% {var blueInterval;
' s0 j6 A/ n7 F9 T8 y: B& Ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour), \- a. x% s6 w/ ^- ~
{9 }6 _5 g8 j, n; k' @4 {9 ^1 s
hoverColour = mouseOverColour;
$ {9 a: E; j, `3 F3 R. Y: J) _" A- @* Y numLinks = numberOfLinks;
6 O3 z: [: n! x5 c( T8 T rate = 1;& w: Z1 D( s# V4 H+ R( i+ ]
numFadeLevels = 30;: Y3 ]6 h2 I2 L* u
function initArray(theArray, length, val)
: N4 W4 C; y! {& z$ A {
# ~, J1 K' s. l for(i=0;i<length;i++)" v- g& W; f$ h) e. y* h# h
{( M) J( Q5 G# T! L% e& ^
theArray = val;# ?9 X7 n a9 k/ a0 N: {- ~
}
6 y: T* r( L2 ?. W0 V }$ i. \- V4 W$ t" x2 @- z
bgR = '0000' + fadeOutColour.substring(1,3)
( {( [. e1 X: u+ i% N bgG = '0000' + fadeOutColour.substring(3,5)
. m- u" d) A' q* X4 ` L* g- a+ b bgB = '0000' + fadeOutColour.substring(5,7). m+ X9 o+ D. q" l3 I- R# u9 p& C
currR = new Array(numLinks);
" S; d& E# p* l* ?/ n6 Y W. k currG = new Array(numLinks);$ L5 U$ C4 r+ `- V! P% w
currB = new Array(numLinks);
6 V" K' b. @8 a& \9 t$ ?( d& M# D- U. p count = new Array(numLinks);( H: j2 N1 |& s
fadeOut = new Array(numLinks);
( J/ C& t3 M' l" M. ^& t continuous = new Array(numLinks);" L3 f1 \* y# k U; c* ]
newColour = new Array(numLinks);
6 y/ {3 u; \3 ]1 C tID = new Array(numLinks);
# `% J8 K/ R' q' R" A$ I7 p, n5 u redInterval = toDecimal(bgR) / numFadeLevels;. [1 ?) _& j: p/ F
greenInterval = toDecimal(bgG) / numFadeLevels;# j* H4 Z x5 j
blueInterval = toDecimal(bgB) / numFadeLevels;
) \$ x) ~+ }5 ]4 a( H; k( G initArray(currR,numLinks,0);
! `* H/ y, A& |# e initArray(currG,numLinks,0);/ O, R* g& z' E& R1 R7 V7 S
initArray(currB,numLinks,0);( D4 j5 h: w4 c/ O2 A
initArray(count,numLinks,0);. V, I+ t' E! O. k" f$ C
initArray(fadeOut,numLinks,true);% j* M& c2 v. ?) M
initArray(continuous,numLinks,true);1 h8 d' C F! ~0 g9 _: k$ m3 r, r
}
9 w1 r- u5 g& E' ~+ c7 ^function startFade(id)
! [; n. I) O5 H, \+ F3 X{
( L+ p" Q+ m6 ?, V' @, @ if(fadeOut[id] == true)' G, O% Y% ^9 Y$ P# T# A3 ?8 `( q' k2 k
{ /*move colour towards background colour (increment)*/
- C0 \' t0 v" v! l: q7 v3 W currR[id] += redInterval;$ q4 L# d5 X" R- p0 t
currG[id] += greenInterval;7 E, k4 P9 |( w+ r2 V
currB[id] += blueInterval;
2 F9 @1 v' J! A. M' `( @5 W! r9 n6 V newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
o0 b( i8 p* L# ~% C# P* ? if(++count[id] == numFadeLevels)2 M4 T. \3 s/ ^$ U4 b2 z' v
{/ D$ l& U7 ]9 @+ l0 j( K$ Q' A% `+ J
fadeOut[id] = false;+ _' N" T9 a9 ]1 Q, |: z
}
" A! O3 g5 t) H7 b, V# i }
* c4 \4 I" p4 n: D- r { else/ T9 x0 v/ s9 N' O* b$ e, I
{
* ^" I) m7 c. [1 V# d {* H currR[id] -= redInterval;
" R! i/ g- O& J ?" y5 u! e+ ?+ J5 T0 }8 J. a4 F# X* i
currG[id] -= greenInterval;
/ B4 W* R$ E' Q$ @+ ~& k
5 @1 I- @( s$ v1 @' b0 F0 X currB[id] -= blueInterval;4 @# g$ q2 W! T8 f& A
6 D$ f7 S+ C w6 ] newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) R* C+ L' @8 F* z8 Q
8 k) e7 ?! s$ {" o
if(--count[id] == 0)
M; O. C+ N3 C0 J. F, Q6 r% L- r7 u9 |7 P5 U2 R$ I0 X- R
{
5 d6 L$ w# S" T5 T3 B& A2 ?. k5 X0 r, Y& r3 z4 A$ {; k+ _2 I% B
fadeOut[id] = true;( l5 ~, y& U' C" e' b: J8 _
: B) H; y5 Q2 w0 p
}
$ `. f' E& e( d5 I4 |/ t. b% Y4 C9 i( Q5 `) i& j+ m0 w* j
}5 O. U( l7 Q9 z$ H% G
' F1 B7 t3 G/ c8 Q$ Q if(continuous[id] == true)
8 C' J) P% R3 C; _
6 y, s! {- o3 U7 M D4 j8 ~ {
! _' s$ z) d( `2 \2 F. o/ v# y* y& V/ Y; I' v' E! D+ Y$ p- |9 B
document.getElementById(id).style.color = newColour[id]; . \9 G( y8 J& ]* t1 ?
& O. X( Z; P. b& h% C7 Q- h* k* J; P
}# K2 y( g1 P" r" p7 R8 l
7 M# Y! T7 v0 \* v else( d# Y9 |& w) o5 C7 X! H3 N
0 ?, ^. W) Y4 V {
; p: q; G0 Z0 A, G1 }, j+ e. V
6 p5 T+ J' J4 X% W3 W+ h document.getElementById(id).style.color = hoverColour;
: B, _- y4 `5 _7 y; m
& h R8 r$ g1 s: j, K1 @; O }
5 c d/ F- j0 j, B# P' | i
- k, K, w* n! Q clearTimeout(tID[id]);* K# L% V8 V' o: l6 x
}4 @4 R4 r" N3 D
tID[id]=setTimeout('startFade(' + id + ')', rate);, |6 T& f" ^/ ~7 }" ~
/ W2 ^: [- |/ S
}
) j+ U' M) [/ @" t" Y' u
% y3 |; ^3 F( Gfunction continueFade(id)
, W, z; r* s% q$ Y9 F' S/ [, y
2 ~' s4 }- m$ c9 s& [{
+ x# K8 U5 W6 t& I! l: k l) a
! ]3 `' y0 L1 c/ c- W" S$ p continuous[id] = true;7 P) O C! P: z. L$ x6 z4 n- \" _
- e, L2 Z: n- [1 ~}- [; W J$ z5 V$ g$ |8 ?
+ r _* O- d4 R1 N% Rfunction stopFade(id)6 T, ]% ^' I- s) w2 X6 l# M
: r5 `/ Y5 }2 o4 m5 @4 z x{, H& Q# q4 y0 m2 T4 \5 A8 z2 h" I
' V) q7 k$ A5 t2 T4 v continuous[id] = false;
. U6 Y' o# ~$ E/ N# g* T% ~& t( a$ |# x
( v+ m. Z. X/ e# \* M* A. B}
1 ~& p1 S4 `2 f
# N: c. A& [( xfunction StartTimers()
# q8 f2 f+ _4 a% V
0 U5 v: e6 Y) C+ g, `: `: [2 N{ //set up an initial set of timers to start the shimmering effect+ b" ], q% H, n9 G# J2 q
" Y& B0 w/ q( ~8 L1 G2 m/ u3 M ^ for(id=0; id<numLinks; id++)
3 S! \1 J' P1 }) c9 H) Q; v$ d9 m h# g; E- ?
{
2 o2 o9 [0 v5 T5 A1 H' A3 J
: [% D2 O, N/ w! J6 S t=setTimeout('startFade(' + id + ')', id*100);; ?; I. q* H/ B" i/ I( {! r
0 z! l4 F, e8 k
}
9 R' w1 D4 ]% p" s$ i C( s. @) j% b+ ?
. @, y f6 k; h}( ]- x$ h) b2 _" R; v
/ d9 j7 ~. n8 \//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')+ Y- J1 v$ F" M3 `
; o; `* `$ ]0 o5 _$ S9 @+ e- {8 |( F7 binitLinks('#FF0000', 6, '#FFCC77');
5 f# s$ u& \/ b% Z) H2 ^. _+ E9 t5 N( f0 M" ?
//-->
: R" j6 L' `* @" ~6 {+ s5 j2 T* q; W9 z+ i& Y
</script>
0 a* A6 t- s# _' S<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
# R7 r2 P3 I- o9 `- s; I</a>
! e6 d3 h' ?$ U: w# N! O) y7 F1 G<br>, \7 s& _. B! c
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>" Z3 r5 F" J& E3 U( K! D7 L
<br>; h+ U0 A' \( A# ~
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- } f4 D! D& M9 R& \0 d6 ^; R4 l<br> 3 ^! s. V. a! I
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>3 B4 \$ A' L2 z) C" ?
<br>
0 q, y3 a& J! f8 l; d<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>3 Z* F5 n m; K# ~3 q
<br>
8 G% V/ P$ N1 {6 w<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( ^3 p3 S7 d* f) f# |- \
<script language="javascript" type="text/javascript">
4 V. [ v/ B, |4 W5 q<!--5 \ @7 `" o2 P; }
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering0 p$ i* W) ?' P7 i8 x
//-->( M0 H: q% U6 P: a
</script> |
|
发表于 2008-1-21 20:48
|