|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
7 S9 ^: ?! g& I8 D* y4 r7 `" h<!--8 q6 ~9 C6 R; M% O- K9 \) A
// convert a single digit (0 - 16) into hex
# S+ j* a- ^1 a! i& z) z; e* Wfunction enHex(aDigit)
: U: R& b$ c' k{
5 o0 [0 v& _" B* |0 y) W$ e$ n return("0123456789ABCDEF".substring(aDigit, aDigit+1))! i1 K' S2 Q0 b/ {. D1 X7 z8 L
}
" t* U7 D; A; e3 c8 O9 W9 b// convert a hex digit into decimal2 k, N5 @4 m, g: c2 G' |( u }% ]- R( s
function deHex(aDigit)
) K) u x9 B+ c7 @9 H d8 I! ?{
3 G) N# \$ m8 n) ? }& p return("0123456789ABCDEF".indexOf(aDigit))
& h/ p9 q h$ ?& @' N* `}
7 R% I% G; P: n9 d: W1 j! B
i4 Q. g6 a- i* j7 M3 m; M8 w& n// Convert a 24bit number to hex/ W. p% c$ a( j( r+ W0 P
function toHex(n)3 u' R. O/ E. x$ E5 k+ I: G- Z
{! e* a0 }9 A, r$ m. b
return (enHex((0xf00000 & n) >> 20) +0 p+ K. b! r: ~3 s1 ^. L( S( m
enHex((0x0f0000 & n) >> 16) +
1 Z' n, K) C/ p5 a* \6 m enHex((0x00f000 & n) >> 12) +/ k" k! {7 }4 Z9 Q4 S+ I
enHex((0x000f00 & n) >> 8) +! D* b8 C% ]4 L* E7 K- ]1 b( E3 i
enHex((0x0000f0 & n) >> 4) +% c& l; V# c. M A. V7 i) j
enHex((0x00000f & n) >> 0))
7 D4 S9 J |/ v2 d( x% H}
S3 e; J0 q9 n6 I' N+ Z// Convert a six character hex to decimal
) k6 E: u# L: I# v/ Jfunction toDecimal(hexNum)
' k |0 B: ~6 _3 a2 H' d{: Q- l7 M: ?: W( ^0 _% v; j3 f
var tmp = ""+hexNum.toUpperCase(); R* @4 p" c4 Y( o9 Z# I" W) h0 A& _
while (tmp.length < 6) tmp = "0"+tmp; G$ J+ `+ X, g: g3 H& G: H
return ((deHex(tmp.substring(0,1)) << 20) +
! i& ^) ?& h6 L- A9 u" h, t (deHex(tmp.substring(1,2)) << 16) + , y+ s+ e" g, p4 r, B: D% z
(deHex(tmp.substring(2,3)) << 12) +
" a. h2 g! ?7 I {& A2 ?! ? (deHex(tmp.substring(3,4)) << 8) +
j1 O; E& z) I8 k: z) ^3 L (deHex(tmp.substring(4,5)) << 4) +; ~$ p' ]8 }- J0 ?: w
(deHex(tmp.substring(5,6))))( o' j2 D* N$ Z1 [7 g/ G# `1 f
}
: ]) r' N9 ^7 E: G/ [* M5 `! d///////////////////Shimmering Links/////////////////////
( O6 l0 e9 A) [: [//global variables1 r i% | Q3 R/ u
var hoverColour
& `/ z" u) s9 t I0 ivar numLinks;& `! V H" w& y& n
var rate;
3 m6 u* L1 r! r$ k7 R; `var numFadeLevels;$ |& J6 G, b& z: I
var bgR;
# v: ^8 g3 B* v7 b$ i1 [( U. pvar bgG;! E* }/ N& Z7 U; n$ _' w' K+ ]; s% H
var bgB;4 N' k: n: b! l
var currR;
- h. K5 o2 F# t) E; I. |& Bvar currG;4 w' L; Q: v0 x$ i& t& D7 i& C" Z
var currB;3 m# S/ J% N6 h: v5 t |, i
var count;
2 j6 P p/ Z9 gvar fadeOut;( ]) y# O' q1 y# ?9 b! W
var continuous;5 u2 L9 b1 R7 m8 |
var newColour;' {: T* C7 t6 E( j5 o
var tID;
9 W, j- i/ X% u( kvar redInterval;
$ ]' R% X2 Z: a0 W$ Q, lvar greenInterval;0 Z+ ?* C& ]2 O) q
var blueInterval;4 F+ ^6 u) y; G. x9 ^! G
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" P; c- P: \# ^: j9 O{
( v! t+ n/ q. s2 b4 h. A/ S hoverColour = mouseOverColour;- h# Y+ M. R! j! H4 q
numLinks = numberOfLinks;8 l0 t2 m3 o% e; W4 Y/ r9 @
rate = 1;
* D6 J8 U1 F! o! F4 S) i7 J numFadeLevels = 30;. u7 h* l- O% z4 t1 Y- N. K8 ]7 w
function initArray(theArray, length, val)
+ J- [1 ^& W# I. `6 o {9 k9 ?. @$ V y0 W3 K
for(i=0;i<length;i++)2 z2 Q6 {% N0 ]7 h
{
. w9 F3 h7 i3 u4 o6 @ r theArray = val;
- t% s' O) h6 H$ q& x! z( t' ^ }
4 ]' u( \6 U7 r0 G% W8 W }
0 v+ i& w" l# t- q2 K, x! a( I bgR = '0000' + fadeOutColour.substring(1,3), Q: P& s3 `6 M( T/ d M; V5 F
bgG = '0000' + fadeOutColour.substring(3,5)
) J; f7 j8 y$ w+ K' `7 Q bgB = '0000' + fadeOutColour.substring(5,7)& u1 N& ?# x0 E E
currR = new Array(numLinks);7 q$ E% Z1 K1 b2 s
currG = new Array(numLinks);2 X) i* n( U& m, Z, z% r- q7 t
currB = new Array(numLinks);5 F# M' x- {- b1 r
count = new Array(numLinks);
8 w( q& V O W& g fadeOut = new Array(numLinks);
# V0 j1 i1 Z( ^9 w continuous = new Array(numLinks);
) ~! U$ L6 y2 Q) ~" n newColour = new Array(numLinks);
0 N2 v; p* Y/ B- T$ z" w1 d tID = new Array(numLinks);
7 o4 a6 }; i3 I$ c2 [ redInterval = toDecimal(bgR) / numFadeLevels;
2 z) ~4 {% R# m/ ]% c9 [# x greenInterval = toDecimal(bgG) / numFadeLevels;
; I( @4 n- h9 _" a/ \6 ?0 U3 d blueInterval = toDecimal(bgB) / numFadeLevels;# i6 F. _* j% [2 e$ I0 @ s4 S
initArray(currR,numLinks,0);
! r5 @6 m* [% f initArray(currG,numLinks,0);4 ]9 i8 H* q; W5 j
initArray(currB,numLinks,0);
# P6 M4 n' m; b+ J) T% t. S) F5 v9 ~ initArray(count,numLinks,0); w' k, l% m J8 g9 m8 @
initArray(fadeOut,numLinks,true);
; Q5 l' q2 c( n- ]) } initArray(continuous,numLinks,true);" w5 u7 p1 p: H$ f
} " i2 o: X/ F! P) v( X
function startFade(id)
' v+ `+ [, [% R. B: }3 U{/ A2 R# o" N# r; ]0 o* J8 R
if(fadeOut[id] == true)6 b+ a. d* H; \: U
{ /*move colour towards background colour (increment)*/
3 `# z4 X- d7 ]4 k currR[id] += redInterval;
/ S8 r" n8 B2 E5 n currG[id] += greenInterval;
" p9 m1 p, v$ J8 I# q6 z1 a6 a currB[id] += blueInterval;
4 U. w/ k# G) F1 D! i' _4 D newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% i9 D1 ^& P4 V! I2 o
if(++count[id] == numFadeLevels)
6 h* q2 t- A7 y" G7 L {* }: O& ~* {% g% W3 b$ y( c
fadeOut[id] = false;! N1 {2 a b, g/ v( M
}* a% o4 N/ @' L5 Y$ Q
}# ^: C# ]1 \' u
else
" M6 X# X# {3 J5 _1 H {! y* c4 S2 N- F" e* z. c7 {* k
currR[id] -= redInterval;
j# G5 Y( _1 e7 H, z" C! L2 r( [+ c) U0 X- Z. H
currG[id] -= greenInterval;
" \, a" O x) M8 `
6 ^6 \' \+ ] q9 W currB[id] -= blueInterval;- W( T0 Q; O3 h) \+ E4 X4 t" k
) O. X* v1 J% n" [5 K, y newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- ?6 F6 N/ @" H: E( [8 ] M( k
" H% m- W: d8 e' b* T) p if(--count[id] == 0)% D+ H5 T+ L4 B5 \- E7 z- x7 Z
9 D+ J) w B7 c; }
{* a& H! D# S; h
, }' S! P& G; i5 x; K4 A/ h$ ]- m
fadeOut[id] = true; I9 i* C! i# R4 H! V% C7 E
! l& a6 K% D3 S4 J }4 U; |* _$ e$ o1 X7 ?
7 v6 Y1 E, g- |- e* D }
# n# G6 o) A/ ]4 { B1 c
7 A: d) m @7 N. m- E, |7 C if(continuous[id] == true)
# I7 h+ S0 c- C2 |4 V! c' B4 ^* f* w. i+ E" }, J
{
- D' I" a7 R! x2 F/ Q
1 N3 k+ x, M4 J1 A7 _* s/ E document.getElementById(id).style.color = newColour[id]; 9 M" ?- g8 ]! o) Y: n/ t
. S( T5 r" O7 L' I' Q: x }; d. g: c J! d
9 J$ q4 C' M% V) Y
else
* \2 P+ }% g1 j4 t9 h( |- t. ~
R% b, z% f8 d3 k- H' b {
9 L' K' q- Y6 N- Y/ H4 N- m/ m8 }' h
document.getElementById(id).style.color = hoverColour;' n6 |* o# v+ D& r; C5 a
1 J& f( j6 F% s% k. {* G& Q- k }
6 T; F6 A& z, s
1 y7 |+ i p: u2 a! \1 [. u& E clearTimeout(tID[id]);8 Y8 m0 i$ ~4 ~% }& o$ O
- c7 l7 i6 u4 v/ z8 v8 @ tID[id]=setTimeout('startFade(' + id + ')', rate);
; E4 p; b- G2 f' `$ r% z3 R
8 H0 r( u' ]% ~" H}
. s7 O; r. R: E" W. B; v8 S, O1 L( k0 O% ?2 {
function continueFade(id)
. n H7 A" r; ^, x. k6 h! ?; x0 I
{3 x3 f. Y- j( M$ ^% K ?- B
: s: k+ D% Q9 M* V9 s) s2 g# K9 }
continuous[id] = true;
1 g) o2 I4 I1 G5 [
& P) S! ?/ R* {3 R) F}
9 V$ s8 C& L. D9 a) X: H* G% {/ t7 O/ O+ p7 s v" I: y# c
function stopFade(id)
. D$ k& E) M: ^% M% {4 G3 O, x" x
`" G$ R3 a9 ^6 J, r* @{
. I) Z1 d4 F, W9 B
) G$ @* t$ E) m" z% O$ U2 h continuous[id] = false;
4 H( K. h! \- @# i; b- J2 f/ [3 A! @4 S4 I6 U! ^% ^$ l2 s& b) o
}0 s7 U6 U% j2 w4 f1 U% ~2 t2 F4 O
( @8 A9 |3 ?# v( A1 j# ~$ Cfunction StartTimers()& B7 S& G: V$ R- g
8 ?' t/ c- Y2 p" T4 ?
{ //set up an initial set of timers to start the shimmering effect
2 T" g0 E' p; P. l$ n/ q0 A3 ^# O) ^! |
for(id=0; id<numLinks; id++)( U9 J% \% _$ E4 e+ j; X
5 y# X: w6 r G5 C$ [) `
{& [$ L0 n% m/ ?
, s/ t0 M/ u. c( q, P
t=setTimeout('startFade(' + id + ')', id*100);
/ }2 M2 @9 \, P: [
9 ^3 V6 I+ y2 T2 l }( o, d7 c7 C* a
$ |. _5 ?2 Z# D3 B8 i; B5 ]}4 E3 _3 a1 X b7 n
; V4 i( }& L5 I# ` s2 {//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
8 J4 O3 I* v6 C5 g' l5 T( M( r; w G
initLinks('#FF0000', 6, '#FFCC77');! U+ p- j; ^1 X
7 A. a# b& P" o/ _; t7 ^
//-->
- p& b. A* l3 D2 Q$ B, ~) L2 y% N8 b$ q9 Q w% B( O$ \4 ~3 [
</script>: p, C1 @( L- E4 s% B4 s
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元 e$ \; v+ W4 ?% t2 x2 K' m
</a>7 y7 [; c9 \7 _
<br>( W/ E2 y7 N- C, `/ W
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a> E7 C" {) T) x
<br>2 [$ ^ N& @& } d+ p6 ]9 A
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>8 W8 U8 F4 d4 |0 y" p
<br> + N, |( E; S: z( w' K
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
7 _# g# l7 k+ R<br>' i& Q# R- {' k, f
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>9 V( t( z: y% C+ W( D8 y: M: w
<br>
; I/ s. f/ n. C* \7 b: t% Q<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
% g/ ]- _' J& g4 D6 Y<script language="javascript" type="text/javascript">
3 V$ C. f" u, R! v' ?, f" f<!--
: [6 k h# i0 k) Q* } YsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
! X" t, o2 M9 O* P//-->
3 m& I( Z) e7 R4 C5 Z</script> |
|
发表于 2008-1-21 20:48
|