|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ P( u5 a; g' A T2 V e<!--& U U: _1 t/ V1 o$ i" u5 h
// convert a single digit (0 - 16) into hex/ V$ u2 s, T9 R
function enHex(aDigit)
9 w2 z) n( M; x{4 a; o* C/ c" C; W+ O
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
I8 W3 p! N6 `- J) ?( l5 a* i}
! Q2 z8 L- Y* O5 [/ m// convert a hex digit into decimal4 c( d- }8 L; {- p1 |/ I9 l5 X
function deHex(aDigit)5 D8 e3 j5 V* C6 G R) d0 q4 W. R
{7 `- h" `: ?/ c4 r1 @1 ^1 ?$ \
return("0123456789ABCDEF".indexOf(aDigit))% U& J7 Z0 a9 p G1 B
}
9 C7 q; X/ e9 {% K6 w
J, V0 o. e. \/ z// Convert a 24bit number to hex; \/ s3 q. Y4 I$ J: J
function toHex(n)
: p! Z- y3 |1 F9 Z1 R# o{
7 _$ t" S8 v1 H( ~1 @/ F6 J return (enHex((0xf00000 & n) >> 20) +9 D u4 Q: \7 b6 a; f: v! g& E
enHex((0x0f0000 & n) >> 16) + c; |9 S- d9 \* Z2 v" ?( L& |+ e0 [
enHex((0x00f000 & n) >> 12) +
3 z' j: Y) [' N( |( U enHex((0x000f00 & n) >> 8) +
) r; G7 k/ k9 ~1 x) n2 u enHex((0x0000f0 & n) >> 4) +$ l& K. \. t' Z3 Q7 ~
enHex((0x00000f & n) >> 0))4 n- P/ O k' } t6 @2 C: b
}
6 D' Z6 Y n" `! M2 B/ V// Convert a six character hex to decimal
$ n% [* j6 q/ U3 sfunction toDecimal(hexNum)
7 L- P- v7 U+ z& V: a{
! T% W5 ~1 u5 E. u) L0 M) M( s' q0 L var tmp = ""+hexNum.toUpperCase()
* d4 e# h! k8 S& b. Y* _ while (tmp.length < 6) tmp = "0"+tmp2 O. Z& w6 E0 E# K5 c6 y
return ((deHex(tmp.substring(0,1)) << 20) +, d* ^0 ^7 M6 F# O4 {0 c
(deHex(tmp.substring(1,2)) << 16) +
! R1 W. o1 b5 T (deHex(tmp.substring(2,3)) << 12) + @" c& |) U& X; U, C6 l
(deHex(tmp.substring(3,4)) << 8) +# k5 b2 {+ U- K. x9 j( H2 y- _
(deHex(tmp.substring(4,5)) << 4) +! c3 _! N+ d6 @; U" q
(deHex(tmp.substring(5,6))))( c& I* G5 j/ I& e/ E9 j' s
}
8 U2 F* K8 }0 N/ \7 Q1 |///////////////////Shimmering Links/////////////////////
: z& r5 q: i! M$ l5 i8 u//global variables. p; j( l7 l0 m- Z! A
var hoverColour
. U/ a! N8 o3 G6 j2 o# Gvar numLinks;/ v5 r- F- L+ P( p) ? P
var rate;
: Z, b, E6 H+ N" g- n# N- Ovar numFadeLevels;$ q, o1 j* [$ |# w, e3 R
var bgR;& s/ Z$ E) L, M# J4 Y/ U7 Z
var bgG;
2 f7 B2 {1 f) {var bgB;
) v" ]' Z& l: G, ~& F# q0 avar currR;6 T! d) E& ?- [
var currG;$ ]2 J& [2 J9 O$ m
var currB;
/ E, ~! R& o+ h B. a; Ovar count;
' t4 }9 R/ D( t; |var fadeOut;& P1 ]) `; Q8 a8 l+ |$ q/ o a
var continuous;
0 _3 l v+ h- Q5 K0 p8 zvar newColour;
3 `* x8 i1 C7 ^2 q8 [var tID;# N( o5 p! E# B& z' R% K+ `6 d
var redInterval;5 U, h! p$ n4 c s
var greenInterval;
$ A1 c$ `# I" b8 X# T& rvar blueInterval;
; l% N0 [" H4 p' Vfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
5 @8 ]0 c5 Y) I, E. w' c" B{
1 a. ^9 `$ K5 u. a7 L+ N( @% [/ r hoverColour = mouseOverColour;
$ U! q% h" g ]" d% s: E1 l numLinks = numberOfLinks;4 }5 W0 {- P' H* p8 G6 o h+ n4 p
rate = 1;3 G$ X9 w& l( K+ Z0 k# [
numFadeLevels = 30;
. O( A2 R2 R: l" l function initArray(theArray, length, val)6 d& x; K1 R2 Q+ `# d6 ^& e
{1 R0 ]% l$ V! C% c7 [
for(i=0;i<length;i++)+ Q% U! [0 ~ V: d6 N: q2 O
{& U. Q" W3 }8 J3 ?# R* u
theArray = val;
5 r9 W; p& M7 t }
7 W* ^# g. s7 g) b$ l) e$ ~/ a/ p }
F' S/ ?% y- X7 J: m' k. ~* Y bgR = '0000' + fadeOutColour.substring(1,3)
9 A0 N# ^8 m; g# X) ~ bgG = '0000' + fadeOutColour.substring(3,5)
, D5 j. T% {6 m6 u9 [% E# x* [ bgB = '0000' + fadeOutColour.substring(5,7)' i! ?! z' |- v6 S* @9 P7 O
currR = new Array(numLinks);
# [* z0 x+ Y6 I currG = new Array(numLinks);
- T+ y' _% S- m, ]( ^ currB = new Array(numLinks);- V: k5 _+ O4 c8 g8 B8 M+ U; d- K4 a
count = new Array(numLinks);
7 y0 O3 Q$ }2 o% h# r: n% }5 K fadeOut = new Array(numLinks);
6 Y/ \) m( e* J' Q- w. F continuous = new Array(numLinks);3 W4 F- `5 u( c1 @1 o0 X* g1 R$ K
newColour = new Array(numLinks); g% a P, M8 s3 A
tID = new Array(numLinks); S6 J/ Z9 L6 A
redInterval = toDecimal(bgR) / numFadeLevels;
) C- \( c/ I: J; ?; k greenInterval = toDecimal(bgG) / numFadeLevels;
$ G+ |+ z" }2 P blueInterval = toDecimal(bgB) / numFadeLevels;
) [4 Z/ ?" u9 i; |- c9 Z! U initArray(currR,numLinks,0);
3 r: ^* z- X2 l% O7 z initArray(currG,numLinks,0);
i/ N+ _) k c* K7 L( |- Z" a3 _ initArray(currB,numLinks,0);
0 w) ]7 n, U, Y' y' J" ` initArray(count,numLinks,0);
, P) O8 h7 g7 W& Q' c0 l initArray(fadeOut,numLinks,true);
* d5 z( M. p! f3 g9 O0 ` initArray(continuous,numLinks,true);
2 U, A. u/ j$ Z4 }}
2 R6 W- P& U6 k9 ^3 [" D0 L/ e# a7 Dfunction startFade(id)
+ P' E* _( b4 d$ K7 O7 Y( g: c7 G' A. ^0 K{
1 i9 o4 ?0 ]! P+ P* i0 { if(fadeOut[id] == true)8 q, [2 x9 N* I- Y; S2 E( S
{ /*move colour towards background colour (increment)*/
" m0 \; Y9 Q G* @9 _ currR[id] += redInterval;$ s9 d: r$ s k# h& P" C5 x% ~6 {
currG[id] += greenInterval;# i0 ~* |3 d/ `1 i7 f" w
currB[id] += blueInterval;
4 k I B b/ W2 Z0 k newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
N5 y' {. S8 o+ P! J+ ~8 e% `: Z" j& H if(++count[id] == numFadeLevels)
! r$ D! D6 z4 {: W5 x {2 A( W" X. ?4 ]4 S& o
fadeOut[id] = false;
; k, p. A" i* n }5 a: O0 }7 ]1 f4 M4 R1 L: O! R
}+ Q* ]9 a4 u: @* W
else
# L# M- W5 M; ^9 U9 B9 @ {
3 y" q9 _: Z# Q ? currR[id] -= redInterval;
/ l& ]# j/ J1 A, }
. H* `/ X2 w; s4 P. b" K" H currG[id] -= greenInterval;* x9 M. v) S1 B/ C
2 u, f1 v+ a8 O8 p9 m
currB[id] -= blueInterval;$ v, K! v5 D8 c$ t) {& e
: L8 M* `: s, v0 Z* h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 g. _3 N$ ]0 O
- M- G( `2 g+ G* U* z# W& U if(--count[id] == 0)/ k/ n5 v2 _7 u# v T
* s! ?- L+ _4 |/ Z8 W" }
{
: H- l9 M1 K( T+ S9 l# D7 F2 V
1 b$ n& c+ A% d/ G1 x fadeOut[id] = true;
% z: {& Z+ G2 h; N, f+ c% D# b0 Y. q, i/ y( A% Q
}
- ~' r3 C }+ m" N6 P$ i$ v* C
]/ L0 h: i4 _' X }* x- `+ |8 q3 p& {+ I
5 t5 s4 \. i" M4 y# n# a if(continuous[id] == true)
! q4 O7 Y$ K+ k+ k e- l7 j% z7 S5 M; x7 F: L3 u8 {$ w7 A
{
3 a# N5 O, S/ A Q7 G( c2 A$ {' r! c" @2 j, f. ?
document.getElementById(id).style.color = newColour[id]; . B# O9 o: T t
8 K' w; l2 g6 g3 E7 L }* j2 W. P% c8 H1 x
7 t) z+ r N5 X0 e. H8 r9 { else2 C4 H7 e6 x- Y" b4 l
. g$ w4 a% j5 s+ j v$ `
{
7 b- L ~; s2 H% G) J" ^8 M! `% x' M. j1 J) a) c" Z
document.getElementById(id).style.color = hoverColour;# f# T$ w }: k) r+ e! _
: ?5 f& r% Z' b) m$ M) { }
6 @1 |6 ~0 C, O' ~3 u$ G( c$ {# E9 u1 t3 A+ y
clearTimeout(tID[id]);
0 V/ i0 C. q' x, ]/ _2 N" P/ r7 V, s
tID[id]=setTimeout('startFade(' + id + ')', rate);
* ]5 J4 y% n2 p1 x$ @: @1 l
K) S3 t8 y2 v# X9 s7 j}# a3 c0 a6 t" Z
. V' u/ j5 r+ E1 Mfunction continueFade(id)" @5 ]& [5 N' O2 E7 Y
6 s. j i1 N. R5 D& \. L8 x{
( K) ?: }8 ~+ a6 H
- x& X3 K8 a$ U2 r! w% W: W continuous[id] = true;
G$ b/ B/ \+ m$ Q1 q7 p8 A% q, e7 x8 x0 E$ Q
}
7 g5 J. c) w1 ]" e
1 H/ _. K1 n# a a+ n3 rfunction stopFade(id)
1 H2 B; Z# D7 ?$ b
$ d: C4 M b, D; ?) @2 T! V; M8 N{2 \" G- \5 I) E* h: N/ N: ]; o
) I; P0 ^: B# T1 ?! Y# V7 F
continuous[id] = false;% }$ z6 \, w# ]* [ T
4 L! I2 z3 n7 Q. d0 ?* X
}
" F* j9 m! t2 C/ G5 T$ x* K. C
. o0 [" V. Q# @% e, X( Q. d8 A+ J3 Vfunction StartTimers()
2 F# T- o" d3 M' H1 c% Z- ?, |: F \
{ //set up an initial set of timers to start the shimmering effect; B. {) V1 s2 Z! D, U( {0 y. p
6 Y$ G2 V6 ` T0 f7 X: E- q
for(id=0; id<numLinks; id++). I/ C4 L: ~3 H! U, Z q6 o; \
; W# ~$ x' v D" w* O {
; L7 g& f) A& S+ |: b; c
" p1 N: h, |, P. I7 E t=setTimeout('startFade(' + id + ')', id*100);
' S. k% A0 e9 Z; D# a: `3 M
' x+ z0 {7 B4 V$ l4 F1 I5 t }
6 T7 Z! \! f# {* D" i+ E, |. H) ~
- W5 L5 j0 D2 v: F+ n, N}
S1 Z% z/ _1 ^1 k, a) i& C+ k# S' n2 ?6 W* J9 a( b
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 x: C& |$ k4 T
7 Y3 j( j# [& J! RinitLinks('#FF0000', 6, '#FFCC77');
4 T1 v* w2 z9 p7 P
c) B# w% W8 y* K! g. a2 I//-->
9 Z! X- v* y- {5 k4 n
* Q9 C$ O! q9 g- t( b F6 e5 Q</script>& h% g. {6 V7 S# r: ?! W' }4 v
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元' K" f" e. u8 N' v7 A0 P& v+ I h
</a>, ^6 Z9 k5 h+ Z$ u
<br>
( c; U3 W( F9 R2 f' u( J/ S0 q<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
3 k3 W) a. A% e+ t4 T4 ~/ T<br>
" w5 E8 R1 q: j# N5 d0 ~6 c<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
7 e1 k7 s8 r* E' i9 C2 n r+ T<br>
, _8 o1 \8 y+ F% \4 X<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ @; y2 g* R" y t! _0 V
<br>
$ x8 [* E: k6 M) h<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
j, ]2 L G' m* W* N# I- L<br>8 N! l1 v# M* x5 c
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
! A+ {# ^, t# _) Q2 ~- D<script language="javascript" type="text/javascript">0 e* _% y1 Z f* ~3 V4 k* z5 E7 z
<!--% K! t2 x! A- v" Q8 ~
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering/ n6 G/ N1 S$ `5 _8 R
//-->
! S0 ~$ I, l# a6 o9 j% [! ^- y</script> |
|
发表于 2008-1-21 20:48
|