|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"># _2 k' S+ X3 p* T* A k
<!--2 O6 `/ x7 S+ ?% D
// convert a single digit (0 - 16) into hex
5 [$ Q) J8 | E; kfunction enHex(aDigit)
) L8 O& h# A# R6 ]7 i' x$ v{
( p( G, |* E4 p! p7 s return("0123456789ABCDEF".substring(aDigit, aDigit+1))- S6 S% ?6 z5 I2 W
}2 |! g3 I; \) a2 |1 r* P N$ m
// convert a hex digit into decimal
; I1 y9 y( |* D% b' ofunction deHex(aDigit)
. X0 Y; H" |* k# I' u/ g{
) v8 i+ O& _: d' D$ ` ]! \$ r return("0123456789ABCDEF".indexOf(aDigit))
0 V2 x0 Z I3 M6 H" T$ F: S9 [# ]}
. E# \( D4 H7 j, c4 o n" O% W; S* M
// Convert a 24bit number to hex
5 F1 `' r# ?0 tfunction toHex(n)
. w. n. X# X4 W( U5 j{; I, S" I: J* U) ?
return (enHex((0xf00000 & n) >> 20) +. l( Q& @- Z# Y/ y; {, {) E
enHex((0x0f0000 & n) >> 16) +, C" d; m; j3 r- E: u
enHex((0x00f000 & n) >> 12) +* n) s9 v2 Z4 k! X
enHex((0x000f00 & n) >> 8) +
6 q" W1 B( j" s enHex((0x0000f0 & n) >> 4) +
2 M& H( Q: h j e5 [ enHex((0x00000f & n) >> 0))! }3 T6 z4 c7 ^0 T- s, n( q: y) T- ^
}
4 k) ^0 B0 r3 J! {; Z3 S, V// Convert a six character hex to decimal& L8 z! x& j" |3 x) R
function toDecimal(hexNum)3 i+ r" @ @; t. |, D1 t: {
{
5 L) |5 _3 Y! V7 X7 e) h+ A var tmp = ""+hexNum.toUpperCase()
1 @$ E; a" c3 N# H, s" M. Z while (tmp.length < 6) tmp = "0"+tmp
/ C1 v4 E7 e. E N8 k5 h& F return ((deHex(tmp.substring(0,1)) << 20) +
0 h3 E' i/ y" Q1 o (deHex(tmp.substring(1,2)) << 16) +
( I. |9 P0 P. M1 u: }0 } (deHex(tmp.substring(2,3)) << 12) +
) S) N% o0 C% q1 h- z3 X (deHex(tmp.substring(3,4)) << 8) +
! t( G2 S2 ]& e* \ o L" w5 m (deHex(tmp.substring(4,5)) << 4) +
5 A5 Z* N* L" ?: ] (deHex(tmp.substring(5,6))))! ?% I9 ]* r& Y1 U6 T4 A
}
' U3 \, i2 Z0 ^///////////////////Shimmering Links/////////////////////
, E* s# ^5 N1 V# R5 \//global variables
$ @9 E: J1 g+ c" u C+ Qvar hoverColour8 c9 c% n- l, r* s4 H! l; @3 P0 o( L
var numLinks;
' P. _' @4 N- o5 h( \% f6 hvar rate;, j- m0 D7 V; q0 R) R7 a7 s
var numFadeLevels;
" ]: v7 `% R2 v6 w" u( O; W% rvar bgR;: m8 C$ x9 m2 U0 {9 b
var bgG;5 v$ X4 {# ^! a% F9 M. B- B
var bgB;! y7 D, V+ L+ e8 b' L9 V
var currR;
% Z7 K; I4 y7 Zvar currG;
; A, B9 u$ s' m& Qvar currB;: {3 I2 r' m! j) Q# L
var count;
0 S' P5 q; |1 I* ] v" }var fadeOut;
% ^! L( a7 a2 D3 \# C( Gvar continuous;
; k% ?3 O; P$ l4 z4 S6 yvar newColour;
6 r$ u: J4 c; h0 }% xvar tID;1 _8 j8 W6 Z8 }
var redInterval;1 l$ ^0 h& v; c! E4 z
var greenInterval;
4 ^2 e2 I, Z; Z7 Fvar blueInterval;0 ^' r2 Y$ I" @/ S
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)( g, _! l9 B8 i, M
{& `" o" r( H1 B6 z! l" J
hoverColour = mouseOverColour;
( D4 V3 Q9 X8 K4 G) K numLinks = numberOfLinks;
; ~. ^( @: ^0 m: s rate = 1;
0 Q. A1 w& _/ \ `% E numFadeLevels = 30;$ {. g) O, [: N/ c" ~
function initArray(theArray, length, val)( e' j% b8 K8 M1 Z! j# d( ]
{+ p% P' h, j y( h9 Y: p
for(i=0;i<length;i++)
2 x/ z" g# P5 |& j S, O' W; t0 C# h3 B {
5 T! Y7 H, z5 U8 P7 R8 N theArray = val;/ R8 s/ s, h9 n% R2 b
}0 R9 V9 _6 c# h# K% C. ^
}
) y6 I' k+ O/ X2 @! v3 O7 o' O( x) Q bgR = '0000' + fadeOutColour.substring(1,3). E9 z2 N( K: B2 L8 e9 g9 g
bgG = '0000' + fadeOutColour.substring(3,5)( }. X4 U8 Z* Y' N
bgB = '0000' + fadeOutColour.substring(5,7)- P# O; k- B: n6 C: Z8 f8 T6 W
currR = new Array(numLinks);
3 Y# {- j1 M+ ?3 G# [" E$ _ currG = new Array(numLinks);
& z* ^2 h0 i7 f4 k& ?" ]* j currB = new Array(numLinks);3 G) G& c) q" u% @+ T& ~
count = new Array(numLinks);
( ?, T _, V" p/ l5 _# E fadeOut = new Array(numLinks);$ k$ E( s" h0 u- q4 c& V
continuous = new Array(numLinks);( h$ e. i6 t% x( r0 O+ m: D4 d. N
newColour = new Array(numLinks);' u; V* k5 W" W
tID = new Array(numLinks); o Q( S0 ^8 c% {1 I. l: {2 V. `
redInterval = toDecimal(bgR) / numFadeLevels;
$ d, `3 c) z9 r greenInterval = toDecimal(bgG) / numFadeLevels;2 z3 L) n% ?# e! `& D5 l% R
blueInterval = toDecimal(bgB) / numFadeLevels;+ g% P: R; b" }6 g
initArray(currR,numLinks,0);
. ?+ o( x- g( l# w( Y7 X9 ^! @8 X- W initArray(currG,numLinks,0);
* ^5 w! T' ?5 R: o# \# _$ M initArray(currB,numLinks,0);+ k/ x! \6 @! y1 B+ N: c) R6 B
initArray(count,numLinks,0);* U6 R) H& m9 r3 B( S
initArray(fadeOut,numLinks,true);7 n% ]9 o( @% s P# A5 m# e* L
initArray(continuous,numLinks,true);% O5 v2 a) \' J
}
; g$ b; e; [# ^3 Lfunction startFade(id)
7 b0 F# I; p |{- B3 X/ K3 U9 d2 m$ p
if(fadeOut[id] == true)6 ]& Z$ I) ?" m; Y) j' Y
{ /*move colour towards background colour (increment)*/9 e) O1 x& L% _) N: x8 h& Y2 w
currR[id] += redInterval;
+ v) m/ G/ ~+ Y" k8 |% H currG[id] += greenInterval;8 r0 u k' p, R: T5 o9 t7 K, P; j
currB[id] += blueInterval;2 v& f) Z& I- p5 f7 Y! X- e2 b9 e: k
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 X4 N* S3 V. g% Y- ~2 ~
if(++count[id] == numFadeLevels)
- |3 Y: G0 E6 c X: `1 M' e/ k% W. m {' q5 K# P2 R E/ j
fadeOut[id] = false;
% _; D3 p1 b* X. [' K7 _# L }9 v4 Q" F0 F6 O) \
}1 E |2 e$ y. K; F+ h) J
else
- ]3 g! v8 \2 v {, P# {, T0 w: {, Q4 N$ L& X
currR[id] -= redInterval;
$ |8 m" O {9 T- o* g' H" n# V6 _5 ]4 x# c1 m3 h% c& E
currG[id] -= greenInterval;
$ N( ?. |1 x5 T/ b; B4 f% l
2 z# q" v2 ^ w/ B9 A7 w. G currB[id] -= blueInterval;
& ?% T' O0 v" o# y8 m9 v* v: |
b# P, R, v( J% N X& U& v newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' B* o @+ }8 M2 h( s6 k
3 y2 l7 G" W6 k8 t6 u if(--count[id] == 0)
`0 A/ S9 X/ I( x; S+ `1 Y P6 e+ q) y
{
; {# F! p5 {% C, ~4 m2 L
7 _3 L5 F. J+ J3 V! ] fadeOut[id] = true;* h- B6 e2 O& B4 z' r; d
5 x2 w; e! t9 t4 S0 j: F4 Q
}
: G7 P ~4 X* k. x, n4 H% b$ e- ?: V( p! \4 F% n+ L9 M. _- W
}
5 U# U+ I' m/ t9 k+ T% n& q% y2 F( q$ c6 }- K3 s* Q/ E/ g2 h
if(continuous[id] == true)% i$ ~7 ^) Z+ {9 v/ b% y& G, ]
9 K5 Q7 G4 X: H( h$ P8 ~6 \
{
/ G8 L! D4 i' T: o3 W
; s$ M7 R- q7 M- \ document.getElementById(id).style.color = newColour[id]; 0 Y+ O2 N& h5 L( v' U" v1 w
# g! ?0 ?4 f( ?1 z/ Y }' y B0 f' D, q
+ [. ~; \6 m, X6 r, S- f
else
7 B- S7 P6 ~4 q* n# P* ^( \8 a ^7 o0 X0 q- _+ N, c) p# y
{
0 h; {8 y Q3 f1 M1 w+ [4 v3 A2 e
& A: Y* S0 L2 K- m' B+ [) Q document.getElementById(id).style.color = hoverColour; {: O' I( P; f- d# I
. }" f/ g' E% ~% F) b, i+ j- g2 V) v
}5 n5 A/ E {$ d' q: N
4 j# E7 ]$ E# c0 g8 ~
clearTimeout(tID[id]);5 S* B2 K4 p0 [8 K- \# ]& ?. |
. b$ `; g8 G0 \1 F3 l8 P tID[id]=setTimeout('startFade(' + id + ')', rate);
# o8 |& Z% A- r: i# p4 e; a2 ^8 { i( K4 d" L
}
0 F4 f j$ _6 h! N8 l& ?4 B' p/ f0 ^/ B
/ b' K& r6 ^' ^- c9 H- D' E0 cfunction continueFade(id)
6 z/ {4 n+ Q1 p2 X1 I
7 U. H- N" J' _9 ]& f{
& G3 E9 y. R0 N* o1 ]# d# I$ E" B8 E$ V/ E
continuous[id] = true;
) m& ]9 @5 p1 P: O: K- C1 ] c! m# S! V ]0 E2 Y2 z1 o8 V% o
}
! A$ G$ O+ [: m
3 P) R) H0 ~5 i" P" ~% e& B$ Wfunction stopFade(id)
4 t3 j& _; l" n; x) n( |$ u2 b1 C( W% i; C
{& m t6 Q* `3 A; ]6 g
3 l7 |, t- O" [$ B3 \+ N continuous[id] = false;, i e/ @. y( P( W" n
& C, O# Y$ |4 ?' C6 M7 Q
}
3 ]2 d- a" k# K* J) Y# H+ \/ W- B# M7 D7 ]. ^% R! z: Q
function StartTimers()! d. T6 H3 e6 o% Y
6 H( K- h e9 V, v$ G6 Z+ ~{ //set up an initial set of timers to start the shimmering effect
& T( d: V0 A, c" s- F! z7 d6 k) Q6 \+ t
for(id=0; id<numLinks; id++)$ e* d3 {. o$ V8 _; p& J
1 h6 b/ ?* G% ~. u& P3 O {
( }8 _9 t/ W% n/ p+ x5 C! q0 d" a: B& h) Y: U4 }7 v
t=setTimeout('startFade(' + id + ')', id*100);4 n$ x% T* m _" r& ?
2 N- b q. s, ^( x j9 E }
4 H+ M( A$ _+ S. i" D4 s5 C* o: X+ ?+ u# Y
}3 H; |1 @5 A6 h; m( r' y* q( p A
! e" @9 d6 w8 f+ l# f( E
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), i$ Z2 f% }: Q7 S
2 p% `+ f( k7 G, h4 ?* a
initLinks('#FF0000', 6, '#FFCC77');2 k! E; x% k7 a+ ]: L
/ h9 y( @: K. U% R" a& s1 K/ f//-->% j2 g% _5 [% _, r/ h& Z2 h- m8 C/ S
/ p2 z9 L: M' ~- D& H e</script>
# o5 \% R& V0 N F3 P<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元! l/ p: T5 J: i8 I8 G! d
</a>, ~2 T( A3 l: F# B9 H+ X$ J/ m. a
<br>0 Z& j* s T# a, F1 y; H
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>1 } t. D. X6 t6 B0 e
<br>8 d7 P7 N4 F4 _1 i0 }+ q
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>; j6 m# a7 H0 Q B! V6 E
<br>
6 H2 Q) {# ~7 G. e. Y<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" B. J) ~. I! ~
<br>
8 a( T+ n. q3 N. o5 Q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>2 Q, a" v; d! O S5 @! D
<br># x( c% O# k3 z4 T
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
+ ]% n3 R4 W% l. p) n- G2 G' X+ i+ d<script language="javascript" type="text/javascript">
2 J: j# b9 P; i1 q% U5 s6 T$ s9 v<!--
, I+ \6 w, f$ u+ e% p- DsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
& d0 W) _7 D4 X4 T3 M) k//-->' h% ~6 U0 W, Z
</script> |
|
发表于 2008-1-21 20:48
|