|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"> K {( A0 H! `! ~
<!--
9 ~3 }# U/ k' W, d& c0 C# ~+ ]& ~// convert a single digit (0 - 16) into hex
3 L5 j* u" N% Z: q5 w' b9 Q# C. e4 A1 [function enHex(aDigit)
" Z/ ~# Y, B7 w: @$ m{
2 _2 R9 e7 w' V4 g) w o' O) F. O return("0123456789ABCDEF".substring(aDigit, aDigit+1))) B0 U2 h; \* z7 ^( I) y
}
6 a/ u$ p. \) t! e2 {( Q// convert a hex digit into decimal
4 l4 C! T+ G- t, e* O9 Z0 vfunction deHex(aDigit)3 o) d0 f6 l( m5 v4 ?0 J! S
{
/ m% k$ v8 X) |5 a: M' l+ G7 d( w return("0123456789ABCDEF".indexOf(aDigit))8 y4 i8 \; K! q8 R* C% y
}6 n+ m2 r6 s; p
0 A- S! B& T- v" k7 n
// Convert a 24bit number to hex* ~+ ~5 a% o( v$ P' i: k# H2 X. F: o
function toHex(n)
% I3 k4 B3 s/ D3 b; a) T+ ^{
* g7 b ^+ b5 d- j) t2 f C return (enHex((0xf00000 & n) >> 20) +
: A- d/ N" x9 s6 ` enHex((0x0f0000 & n) >> 16) +
( N# l/ p7 i% w( N! s3 C; \ enHex((0x00f000 & n) >> 12) +
9 J6 T/ n8 n' |4 p1 B enHex((0x000f00 & n) >> 8) +
8 Z+ v0 p% `8 d6 n: j- b& {$ E* ^ enHex((0x0000f0 & n) >> 4) +: @( s( n% r3 w$ L$ r; X: W
enHex((0x00000f & n) >> 0))
' q. j8 k; \& ~- v}
( `0 K* j. R: F1 D" }# R& w// Convert a six character hex to decimal
' m; v* L1 i. l: n/ _function toDecimal(hexNum) d) ?' k* N4 j! k9 r0 e/ P' Y
{7 v" ?: _1 f: V: ^
var tmp = ""+hexNum.toUpperCase()
: f, q# W" z { W while (tmp.length < 6) tmp = "0"+tmp) l7 D6 ?* y1 z, {" y% V- z% u& u
return ((deHex(tmp.substring(0,1)) << 20) +
* P4 J4 `4 w9 o% z (deHex(tmp.substring(1,2)) << 16) + , o y! {8 E O2 T
(deHex(tmp.substring(2,3)) << 12) +
, H: ?9 u( Y; F. C4 f (deHex(tmp.substring(3,4)) << 8) +
* Q$ ~ _8 N: ^9 P1 a: F (deHex(tmp.substring(4,5)) << 4) +
& D! B) P" g, r, _5 e (deHex(tmp.substring(5,6))))
1 `& [ ~" l8 A( f8 Q}
' a! K; N1 w0 _4 ~4 `; v. ~///////////////////Shimmering Links/////////////////////4 |; @/ |" A! H; K1 ?. ^" }
//global variables9 Q. ? C" g* Z+ l1 I3 {
var hoverColour
' [# _* k8 o `* t# \8 K0 S4 wvar numLinks;1 U4 O7 Y, \2 @1 ~* @" [1 x# o4 L
var rate;5 n' Z5 ]# x Z5 M! A* p" v
var numFadeLevels;0 R2 V9 N# J. |! h
var bgR;5 L9 B7 c0 J' T3 I
var bgG;' o6 q5 v7 S. @9 ~7 ^' I
var bgB;
( C# o9 j3 V: U& E8 dvar currR;
7 ~1 Q4 |% s' W8 Wvar currG;- \: ]/ p! {& g0 T
var currB;2 L* S* n2 J* ?; F" {& U" w
var count;8 `0 E7 `& d% v5 V r8 A$ d v
var fadeOut;
3 ~5 _1 { B# }5 y/ A {2 pvar continuous;) ?9 d s- |0 [/ g6 D5 E) m* m
var newColour;8 e: u% P3 d" {* i/ g6 t _9 \
var tID;( U- |& @% ^$ s3 g. T$ o
var redInterval;
1 s9 ^# b; y2 X. q$ l2 jvar greenInterval;0 a2 n/ \7 L/ r# l/ a: x1 ~8 J" l
var blueInterval;
$ r0 s. [. n! f% N; ofunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)* ]0 s8 C5 ]$ s }- Q, I3 U& R5 Q5 T
{5 o% C7 y+ y( T, O
hoverColour = mouseOverColour;: ~. Y3 d) H- ?, |
numLinks = numberOfLinks;
8 R4 R5 m7 T: R, Q) ~ rate = 1;4 }8 {- l( g% d
numFadeLevels = 30;
/ I6 S9 t" W' D3 o; w& F$ L function initArray(theArray, length, val) c- [- ^6 S" g! B& t4 g1 L
{5 G" l4 A+ L* Z9 g4 l
for(i=0;i<length;i++)6 g( f5 N) E; k( M6 \$ G9 M8 l1 {
{: x0 X: `2 f4 H9 v1 |9 G, Q
theArray = val;; ?6 H+ b+ D3 ]- z9 c! v
}
6 i- b, Z$ e" @ }; q* A4 V+ @7 ]6 [4 a' _$ M( _
bgR = '0000' + fadeOutColour.substring(1,3)
' { V9 o/ Q! u/ T6 V( S bgG = '0000' + fadeOutColour.substring(3,5), i l+ m4 Q. }
bgB = '0000' + fadeOutColour.substring(5,7)
. Q; z3 }9 u( f% V- V currR = new Array(numLinks);; d9 }$ d3 T. _! C: q
currG = new Array(numLinks);
0 q% e8 x7 k1 H ] g/ j# ^ currB = new Array(numLinks);
8 ^2 P1 I3 s) H( g' D' T. O$ e S count = new Array(numLinks);
1 U/ G; d* {+ f fadeOut = new Array(numLinks);
% k2 n0 `& U1 {& E: j( D) [% a continuous = new Array(numLinks);
3 ]8 o6 z7 s- J" I; O1 w6 p newColour = new Array(numLinks);1 ~0 |0 O) a6 y
tID = new Array(numLinks);2 n4 J7 _. F1 {0 I% z
redInterval = toDecimal(bgR) / numFadeLevels;
% L2 s2 H/ |; l. R; }' r greenInterval = toDecimal(bgG) / numFadeLevels;
, p* X {5 r* @4 D blueInterval = toDecimal(bgB) / numFadeLevels;
( ]+ o; w- j& c% ]9 ^, o7 M8 A' b+ i( u initArray(currR,numLinks,0);
- R c F! \* F( c7 k+ S6 F initArray(currG,numLinks,0);
4 H( k9 m ~5 _ initArray(currB,numLinks,0);! k1 w* c s+ i+ g& z! x
initArray(count,numLinks,0);1 v# I, |" h# q2 _
initArray(fadeOut,numLinks,true);
0 _% i$ }* j+ x# }4 d initArray(continuous,numLinks,true);
8 [6 @" g, M9 ^! c% z* P& s} + D' u F X2 a9 f2 T/ J
function startFade(id)
9 T: j& L7 K( Q. T0 ~{
; p) D& {( n+ R( V2 n if(fadeOut[id] == true)( a1 R: s; E8 r0 [4 E
{ /*move colour towards background colour (increment)*/
6 b! o L* u9 Z0 i6 t( V currR[id] += redInterval;
( G5 V, J j9 h- C currG[id] += greenInterval;2 J, e' {* ~ h" P
currB[id] += blueInterval;
) ]! V7 p$ O5 b9 a) q newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 b( F+ U) Z* \4 L( N! L4 |2 o# D
if(++count[id] == numFadeLevels) r' s& l( w v, \! I
{5 u+ g% Q$ W7 _8 q6 @( B+ V
fadeOut[id] = false;. M0 r+ n4 x# A2 ^! L/ ?5 D- i- c
}
/ x2 @1 j$ j: ?( }8 s# N }
7 t& z% u) S' N" Q. z+ V else* x2 ~/ P1 _! ~0 F
{) H+ ~4 a. ~2 ^7 @$ q% h% o
currR[id] -= redInterval;1 |- o# O9 f$ R. |* c- W: ^# c' N
/ p# ]! f" @- H0 b currG[id] -= greenInterval;0 v" t& O) S: d3 z, u9 n( }
; {% V* ~5 |! Y
currB[id] -= blueInterval;" J5 n( ^! b" b7 X* X( ^" D
) ^& n7 g# M: M# M, e, ~
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! m7 K0 a* M5 ]! t$ G: ?8 h
/ _! n" P1 y) m+ N. x if(--count[id] == 0)
. P+ T+ T6 W: b* {! O1 U- k. `% F3 c5 M2 O
{
' W' O- w3 ]! a0 D, ?2 s& J
# ~: s, h6 C. L5 I& w fadeOut[id] = true;" r A3 ^2 ~9 W& [9 I
( g* [1 a! i! c2 y
}
, E2 ~+ C' U5 V A* h
6 i- _; @- }3 G* C# G T. {5 E }
9 p+ B- t1 S/ L, U
9 f) Z# U( H1 V5 t if(continuous[id] == true). A$ @1 H2 C/ t( v0 L! H
3 {9 m- y. ~7 }8 ~' t- j
{
: I. F v# s% l
1 c0 P- R. ]$ ]) R7 i# I document.getElementById(id).style.color = newColour[id]; 6 }! b( i, {# G2 m+ J
3 e. Z- k( w$ j$ h% e$ K' M- ]. z }2 k' j3 _) B% X5 c2 A
, Q( l5 w1 ^2 r+ S' R7 `8 G$ a
else2 y; s( H& Q9 {
( ^5 O/ \' r# d! ^& u
{8 O9 @1 D. ]. b- Z7 X9 A
- _2 z! B; d3 U document.getElementById(id).style.color = hoverColour; m+ m6 ?. ?% @0 L/ D% A3 l1 f a, l
& o: s7 r0 u2 B8 F* E }! M! b8 m! ]4 W. v( l( D; m
: U3 a. p8 ~. J# |% r" k" M clearTimeout(tID[id]);5 s: l: w! v" N+ P5 q
' R# z6 \/ p9 m @& Q tID[id]=setTimeout('startFade(' + id + ')', rate);
9 B$ [( O- p' u0 r Y: @* N8 ~, ~2 {6 b( r& v; Z
}7 B2 A' S2 ?" l/ m7 I
! k* ]8 d/ U: K+ `8 E4 Lfunction continueFade(id): v' H3 P0 N6 K+ r( y- x
A: \; ]; d6 D{
9 L K# C! [! |% k0 b+ o! N1 ]
/ s# X& f" H) e" J0 @. Q3 } continuous[id] = true;
% V( z$ P) N, o
9 A" K* @$ K& \' J# Q8 @}
! m# j+ g- k8 T, f3 i: E0 Q
+ h$ ?, B! p9 D6 r7 c( n; Sfunction stopFade(id)
) D+ V7 Y9 c7 l' B( _7 m: [/ O' e8 B: }9 F: A
{
4 J; ] f5 u- y5 A
& c- Z" ?1 n* p, d3 G continuous[id] = false;
/ K* g- H- x# ]( R/ {! V3 ], V) P+ Q6 N. l" I w5 n
}! h, K! b1 m! o0 ?7 {& @: k; h
/ H* D3 k' b( f
function StartTimers()
4 D% c& g$ P* g; H6 }" x
, ?- V: G8 T( M$ K2 q{ //set up an initial set of timers to start the shimmering effect. \8 r1 c& D* V T% T
4 d& W# y7 @! p u" ^ for(id=0; id<numLinks; id++)
( V' R. U7 r+ ]* I) r8 ]& |7 o) ^& ?* i
{
8 G$ C4 y E9 E8 |7 H
9 f: ?) M" h2 T+ D t=setTimeout('startFade(' + id + ')', id*100);
' T* f. |5 P; ^! t' c1 |9 y" G7 u+ k& t$ e2 I
}
4 l% o% B9 J' T+ f" @* U
9 B' b/ L. O9 J% l* c) c; ~}0 |. b' W6 J5 {5 I0 R* m& i
# \0 A& m8 H& j, J
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' Q( p8 d- b9 U; `
) P6 e$ G( U. z+ h, I7 \6 BinitLinks('#FF0000', 6, '#FFCC77'); {3 j7 T; q. y0 d
) \8 R ]; t( h! w$ ], l% v% N
//-->3 A$ T" g; e$ r- G
! @+ h% E" [. @</script>! M: n4 m/ Q' p# {
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' ^" B$ k, c- [ C- g3 a
</a>& ^( `5 s" t* ?- s7 G
<br>5 Y4 B+ ?4 f$ d) R5 E
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
* i' ^/ h3 i0 k4 l% r3 N4 G6 k<br>
) \, L$ M5 n6 g( U- _# r" A2 Y<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' ]9 r! ~1 k8 \3 s* O$ T: g0 c7 h<br> $ Z! ^- C/ c1 @
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>2 }" \. ]6 J- F# |. h
<br>7 f- k) v( }0 L1 S
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a># y* \/ d4 M3 T9 t* ?2 F# m. y( f
<br>$ o/ J9 i5 h3 u7 e R* a
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 |/ p7 R" \" f/ h) ] d. I3 U
<script language="javascript" type="text/javascript">3 q2 N$ X: ?) R4 W% l0 C# m( o
<!--
8 [- J9 V* k! t# E$ } zsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
, ?9 m! @' J7 \' G( ^! @//-->
- o0 V9 X6 ?' c3 d8 [( b</script> |
|
发表于 2008-1-21 20:48
|