|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ \$ [# W6 I8 B1 b& ]<!--
! d& D, ^. Z2 P" `// convert a single digit (0 - 16) into hex7 r# u5 H# [$ K0 `! v0 w
function enHex(aDigit)8 h: T& t/ K; A
{3 Y& w# @: _8 A$ b5 o
return("0123456789ABCDEF".substring(aDigit, aDigit+1))5 q$ Q+ N0 P' G( n
}& j: P) B; n& Y8 R- T; q# V: t: j
// convert a hex digit into decimal2 K: E/ X; V5 t, C2 ]
function deHex(aDigit)" |7 G* r4 S4 C, d: u
{
# G2 x6 K; G7 U5 |/ B return("0123456789ABCDEF".indexOf(aDigit))
% ^$ P; U, l6 T; i- Q4 {7 Z9 G/ R}/ V3 z3 e" \9 k& R3 h+ `6 L
; F/ i+ B2 {0 T- o
// Convert a 24bit number to hex4 z& n2 w* T! l5 K7 {! P$ q$ E0 e
function toHex(n)
3 Y% x: n* F' s{
0 a1 D% k4 h' N7 u return (enHex((0xf00000 & n) >> 20) +
2 Y5 E9 h1 R, \. o enHex((0x0f0000 & n) >> 16) +
/ a$ b8 ^6 z5 A7 M! d enHex((0x00f000 & n) >> 12) +
2 U" K8 P) C6 a: _; y. a enHex((0x000f00 & n) >> 8) +
( o& c( C; _: u4 u4 k6 d enHex((0x0000f0 & n) >> 4) +1 x- i8 k& ^5 B+ [7 T0 }% d& J( ?! n
enHex((0x00000f & n) >> 0))
, u! Q$ v& Z: `}3 j( c( C# P! D' R: V- k6 p
// Convert a six character hex to decimal. c( Y+ X3 L, L& L
function toDecimal(hexNum)
9 a* ^9 y( F+ }& H{
% v/ t$ R2 `- W$ j! Z/ s var tmp = ""+hexNum.toUpperCase()
' u ? g. `+ k- M6 ^/ H' U while (tmp.length < 6) tmp = "0"+tmp
3 \- C* u" q: n* A+ b return ((deHex(tmp.substring(0,1)) << 20) +
, N' u3 e0 n/ [& J (deHex(tmp.substring(1,2)) << 16) +
8 \& _4 ~! V# S$ J. w (deHex(tmp.substring(2,3)) << 12) ++ V( [8 R B+ c6 c; X; J
(deHex(tmp.substring(3,4)) << 8) +. X6 b6 a, ]) K* z8 L* F8 U2 }9 z
(deHex(tmp.substring(4,5)) << 4) +9 S* X+ D* s: I3 L2 F( d
(deHex(tmp.substring(5,6))))+ P& |3 |" J/ ]
}
3 ~/ s$ Y) H, P6 t///////////////////Shimmering Links/////////////////////$ l% \& V( I# y" R* U, m
//global variables
( Z+ o3 g' g3 M5 \9 Y, ovar hoverColour. z6 T3 f* G8 ?2 ^, ?$ A# l5 l
var numLinks;
9 {; T$ @0 I" u, g+ r$ k. ^: Fvar rate;
, V3 g( n' `& z& f, I! hvar numFadeLevels;
* i) L5 l8 X3 O/ [" s% A% Mvar bgR;
- z* j; h _+ A! F" P2 Nvar bgG;! Y( _% C: z4 e8 d- u5 B l
var bgB;. P: W# S: P8 [2 D" O3 `
var currR;
" {% c; x/ j& x3 D) M6 fvar currG; g, v5 g; Q& p$ f. |! r
var currB;8 S: j# c, h1 T
var count;
; b: w; J& P( T6 [* ?3 dvar fadeOut;0 ~) A7 T2 F4 s- H7 L* h' W9 {
var continuous;
) G$ Q% T" i/ d5 n" p, H( evar newColour;/ Y9 T9 }' F X, s
var tID;
2 |- f8 J% H0 G* ^- D v6 bvar redInterval;
, l6 N* q( B: ?' H% z" x) Vvar greenInterval;6 k9 V& O- i1 h1 M
var blueInterval;
% l4 B! K8 b$ W6 z. y( Zfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)0 M/ ]. B5 c' i! g) s! O. w3 d
{; ?5 L* w+ M' \5 |2 A
hoverColour = mouseOverColour;
& P5 N) W" [- H' [. I& F numLinks = numberOfLinks;- {1 ~" w: k) |7 [
rate = 1;! w) \9 N6 n3 s" {3 }6 h$ B% _
numFadeLevels = 30;8 F2 ?, m2 C9 A- a$ D
function initArray(theArray, length, val)
' O ]! @5 W! c2 g# ~. V {3 _' ~4 w/ q( O" X+ R7 l
for(i=0;i<length;i++)
K; [& {6 a8 L; z7 h7 ? {/ U: e0 |0 Y- R; s& ?
theArray = val;1 b, A5 d, ` j; Q
}8 f4 ]* R+ F X1 g8 }
}
# H6 d9 @/ N' H! J! G bgR = '0000' + fadeOutColour.substring(1,3)5 H. [% E* e4 Z, C, O
bgG = '0000' + fadeOutColour.substring(3,5)
( P1 s# e o% @: ~+ Z bgB = '0000' + fadeOutColour.substring(5,7)! Z/ p% _1 z8 j O1 B3 x1 u% j6 }
currR = new Array(numLinks);
) F' p( ]9 x" g: m! u: i currG = new Array(numLinks);
1 b9 W4 x" R* D3 e currB = new Array(numLinks);" m! x' e/ u( m
count = new Array(numLinks);9 O$ x/ m3 A: Z7 ^: G9 {+ A
fadeOut = new Array(numLinks);& g2 U( ?; i6 O
continuous = new Array(numLinks);
2 c% J7 t' f' \5 G$ | X newColour = new Array(numLinks);3 j+ Q0 y9 w# S" i
tID = new Array(numLinks);! q6 ?7 n6 |8 }3 g) i+ a
redInterval = toDecimal(bgR) / numFadeLevels;, t9 k. g. ?* D: Z: f, M
greenInterval = toDecimal(bgG) / numFadeLevels;' m& L- r9 g: {) o. n
blueInterval = toDecimal(bgB) / numFadeLevels;+ }/ ^3 U" g* P9 _
initArray(currR,numLinks,0);
' N# h" E0 E9 @! U/ B initArray(currG,numLinks,0);
7 N: ?0 C8 u8 ]& d! U initArray(currB,numLinks,0);
9 [( a/ a2 `* N4 D! D initArray(count,numLinks,0);. ]4 @/ m+ o& E) Z: z6 I
initArray(fadeOut,numLinks,true);
: B9 ]4 e' p! x& P9 f initArray(continuous,numLinks,true);
) ?+ k, T) `& N, h7 |}
e8 u& v, r9 Hfunction startFade(id)6 A! O# q2 q5 l8 ]) V' T4 T
{, d$ i: n0 t5 O% I9 a
if(fadeOut[id] == true)) h0 V( x9 a5 W |
{ /*move colour towards background colour (increment)*/7 w8 R. N0 r1 q5 g/ w8 E6 Y
currR[id] += redInterval;
$ d1 a! e0 i0 K* m. y5 [) P0 T currG[id] += greenInterval;
j. ~- I3 J/ ?" E currB[id] += blueInterval;# c- X% w; W3 j# s- \8 A
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);. J, }/ D9 U. G3 g+ X7 `& z
if(++count[id] == numFadeLevels)
\" d' f7 J e; [3 G* {7 E0 ^ {
% N: U/ ]7 x" ?2 b. E( H" Y% Y fadeOut[id] = false;+ [9 t" Q6 U) s8 V
}
! H/ u' O- ?1 H3 `8 e }; I/ x5 o& I+ F
else
4 r9 O% F; K' n! O1 ]! L# m {! M+ ^/ Q; e! B) E$ }
currR[id] -= redInterval;
7 r# C( y) Q4 s8 k2 j5 f( q) q- g$ s* J9 o6 }
currG[id] -= greenInterval;9 `0 p6 D; O4 y2 l- a2 I8 G, F0 c
& t7 I' D; U- Q# q# E% ?/ e
currB[id] -= blueInterval;
$ y4 S6 r1 C4 L
5 W1 @+ _& u! {9 |5 L newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( @& h2 ~* h3 C: m
% N. |2 f" _0 t if(--count[id] == 0)" l' D: k Z* Q) c* q8 W
9 T2 H/ q7 {$ ] p$ D, B+ q
{% E) A$ O" ]; b, I# F; I
! N! X( O9 q( `% d fadeOut[id] = true;4 r8 L! u8 J$ D
6 `) O _% m. e% w) u1 ^8 o2 L
}
+ C/ [0 j- ?0 L3 B; i: V) s6 r2 U; q% q9 k; ]9 s
}) ]! T& N' j, L7 ^( T* x
7 G2 H, r- B7 G) `" w+ p if(continuous[id] == true)& F" i2 P. g# ^5 L5 f: n0 o
7 @( X6 R+ j6 N- F& ?/ G: J
{
6 R, C4 a* g. z( }6 S! Q. L7 m- o+ _5 t# {. m- m
document.getElementById(id).style.color = newColour[id];
8 o. e2 X$ p; W- i
3 j3 q; T/ H8 U; m; y/ E8 U }) O4 v, u( {* f) c
. |0 R' X1 `0 j% _* R' f
else+ x# ?) ?0 ]9 [6 A& x
- r3 _- F( L& _6 B4 o! X" a4 X
{. Z$ O% g6 T: Z; H) Q/ N2 ~
# J+ k' ?, Z* l" r
document.getElementById(id).style.color = hoverColour;
) q. `; G- f* I9 x, I w& q# M0 i3 k0 L; ^
} Z- E( A2 \6 N) b
. `& q* r' [3 D, V clearTimeout(tID[id]);- s4 M' p/ W* E3 o5 n* c* f
# n. U1 D- J5 r# L( [& M2 `
tID[id]=setTimeout('startFade(' + id + ')', rate);9 L p" Z) ?0 b* _% \
( @ @9 \8 \, @) b" i' J5 R}- G# M) ~; I2 w# o9 i
! x0 M! y1 z% @. ?4 {9 B# Q3 Ufunction continueFade(id)
* ~1 F, H, E$ O- v2 i$ H8 d7 |4 I. i% D( d% ~' u. F
{
2 ?0 N9 _- |# X( r% Y
7 D, I8 S* p e1 P0 s1 ` continuous[id] = true;
8 L) F2 B( ~8 R( \7 Z; y& W/ t% Z" I6 A8 L2 ]- P
}
4 W% a4 ^, {2 ?2 T/ y6 X
) v! w* C- o& |7 T$ d( F0 r7 Pfunction stopFade(id)
# F; ?6 M# {) ?& t2 ^7 w6 B1 n" ]
$ ?7 W. x. a b{
+ I1 o! X& n1 ~4 P0 H5 v
( d5 {7 C/ w5 s continuous[id] = false;
# Q/ t6 x; j- U. x' p' g& r
& C1 u! p9 h5 F}
5 T3 C, l5 q0 J0 n, X( d$ G9 W i( m9 |6 h" i% |1 E# ^" ~; s
function StartTimers()
- ^, r" l" s' U4 o9 C2 M$ d3 Q5 ^# F- q
{ //set up an initial set of timers to start the shimmering effect
; y' i0 z( K7 u5 u$ Z* |& }/ b/ M" H( n/ J# Z" l' i
for(id=0; id<numLinks; id++)
& _$ C( ~ d* K% l3 N1 {9 S
8 n. w* V; H4 q2 ? {8 `( E" k+ X- e8 D5 e! p1 G
+ _: l3 Y4 Z+ ] Q* g# r& ] t=setTimeout('startFade(' + id + ')', id*100);/ T* p% c5 x2 K' P8 G5 Q4 q* N7 s
: y! A& o( d9 u9 N$ c: ^ ]
}& }5 W( T3 h5 `3 D0 W: m3 M1 z
1 x$ Z& e7 {# G8 O
}
2 y! q" }( K* Q0 _
$ L# L5 v3 i; N//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'). V6 B" M* U1 u; W
4 f7 @+ E9 V" h# t* l% WinitLinks('#FF0000', 6, '#FFCC77');
7 A2 w# Q$ f) j7 z/ {( C1 z8 I: H* C, ~$ m2 U. \" d
//-->
" E' R' }0 l+ M( m- s
1 b( ?# |- Q; S, e</script>
) d! k. z; i* l% B1 E4 j `5 W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元* O: ]) x1 \3 j8 y4 P
</a>
( l, M$ U' E1 P<br>
- L* L% W5 Q& ^<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>9 S# p0 i1 x" @# [% W: B* [
<br># F4 l6 y/ {! Z# D6 V4 M# ~5 |3 K
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* A) c* S6 i2 J; P7 O<br> + L" s* `7 J* q& N6 U# w7 z
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" C7 B7 f* t" B" A<br>
. Y, o. {3 N2 p4 ~" j' X<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>( `; @& z" {1 K$ ~9 m* n% D3 z; V0 [
<br> f% l, \6 [3 k8 {/ Z! F
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>' N5 l2 y5 S7 L3 d
<script language="javascript" type="text/javascript">
" R, n/ j) x* x$ t( q<!--
; C/ S# ]+ ^7 H* EsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 y" a( w$ z6 G7 z4 @0 e! e//--># x2 W& ?) R+ h' J [
</script> |
|
发表于 2008-1-21 20:48
|