|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
) T+ L! L U4 E! E<!--; C. j6 s+ B3 A8 H) Q
// convert a single digit (0 - 16) into hex
1 q" W3 c8 J5 S, R1 }4 f/ r% `7 wfunction enHex(aDigit)
`: v N% F! \$ w" h! r! ^{8 d4 f8 Q% m* u- \* v8 P% Q
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
; v1 P1 o+ [6 [* Y! W2 h}
# o& O+ T& s7 f" q. U" U// convert a hex digit into decimal
3 P4 R( W- L, j8 w' b6 [function deHex(aDigit)
8 d) l3 R/ n6 P! g6 a{8 t8 ]4 `+ G% G7 [& ~
return("0123456789ABCDEF".indexOf(aDigit))
9 I6 H9 u) m8 R1 R+ G}: f. }9 h4 N4 m$ M2 Q. v
" g- j& _+ P, @ h" o/ Y& x: i
// Convert a 24bit number to hex! z+ h, G$ H/ B# W* U/ x# g
function toHex(n)( ?/ F; Z9 l9 y0 p, p
{
8 g0 }4 T$ Y/ ^, A- S return (enHex((0xf00000 & n) >> 20) +
[1 O3 m4 p8 t6 \ enHex((0x0f0000 & n) >> 16) +8 _( m( f- W( j) b" _0 d. A
enHex((0x00f000 & n) >> 12) +
8 |& V [- p0 x+ p4 `' K5 Q enHex((0x000f00 & n) >> 8) +
# j0 L: |( a& ^2 @' n) A enHex((0x0000f0 & n) >> 4) +# S& q7 |" O2 ?, D1 [1 f& Z* v
enHex((0x00000f & n) >> 0))
/ c2 a+ I4 {6 e) ]( a/ B- e}: w' p# f, R h+ ^% d: h% Q9 o
// Convert a six character hex to decimal9 `2 M9 {# ?; X
function toDecimal(hexNum)+ D5 P6 o: b/ L
{5 H+ S" @4 k/ o$ J
var tmp = ""+hexNum.toUpperCase()
# F) e. @0 `* i5 O- r8 V while (tmp.length < 6) tmp = "0"+tmp
2 k6 X# v; h/ M% ~0 m& C f return ((deHex(tmp.substring(0,1)) << 20) +
. Z4 ?% @$ n) _9 {3 L! L& p (deHex(tmp.substring(1,2)) << 16) + ; ^1 H/ j0 r6 m" L5 i$ y0 h
(deHex(tmp.substring(2,3)) << 12) +$ L2 x4 b1 [3 C% r9 ?% L
(deHex(tmp.substring(3,4)) << 8) +
. g$ N; N* d; G& y (deHex(tmp.substring(4,5)) << 4) +
6 h! O) x8 T8 N m0 }! | (deHex(tmp.substring(5,6))))( Y. N3 K& V7 U% L* {2 y# E- R
}4 i0 S) J% _% l+ X
///////////////////Shimmering Links/////////////////////' t" G& ^2 I$ w* A% e" u$ x8 K
//global variables h4 d" g( V& X$ i$ k
var hoverColour0 f+ k0 e$ E/ @( v9 X- X
var numLinks;7 s. c% L* A9 T6 R
var rate;$ [. v/ G" j& B; o" F, L
var numFadeLevels;
+ K/ U, a$ A1 M* Qvar bgR;3 m2 K' t" ]# J. m7 _
var bgG;
6 N2 ]. k J( I) \# P0 Pvar bgB;
' ^2 c+ u+ m8 e6 h+ ?8 u4 evar currR;. M, B/ Z1 |8 |& j
var currG;! J% q0 Z2 i8 w0 e( a
var currB;( x- C9 z- F0 x) f' W" i) u
var count; u$ e2 E* l' D. _, D; }3 {
var fadeOut;' o8 f. q0 B' n3 E- W: y; k
var continuous;, B; K( T, f7 F' c1 K+ E
var newColour; ]5 ~* T- d! ]/ V
var tID;
5 \/ ~4 k' }$ B5 n1 m/ A" P8 xvar redInterval;
4 }6 B6 e l. r- L" r) Mvar greenInterval;
( ^5 P6 h! {: n- t* r1 uvar blueInterval;
8 m. r$ [, h# mfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)/ Q! I; h6 r3 a& S
{. {; d: _ w6 z; @5 m# P
hoverColour = mouseOverColour;! s! V! @9 ?( } @( ~& n
numLinks = numberOfLinks;
/ T: K: c: x# ?- }& z1 J2 p rate = 1; I/ ?8 W# c& q# l0 p
numFadeLevels = 30;& h6 U1 l2 W# C1 Q% [; b
function initArray(theArray, length, val)8 ^* p# r5 q$ m( e# T/ N
{: Z0 U6 u# R3 _* d2 m K
for(i=0;i<length;i++)
# U+ T9 b4 w1 @" n, b0 A* V {
; ?+ c$ k1 U9 \6 a/ c theArray = val;4 v" b- _: b. M# d! Y- S
}3 g) O% t1 I7 P+ A
}
$ Y) M5 J5 b9 k7 q+ [& s bgR = '0000' + fadeOutColour.substring(1,3)
4 P+ h+ l2 u- e& g" s bgG = '0000' + fadeOutColour.substring(3,5)+ ` \+ B" C6 ^5 G) y
bgB = '0000' + fadeOutColour.substring(5,7)3 z, ?0 m' e& G/ W
currR = new Array(numLinks);1 n- ^) F8 j0 z3 J
currG = new Array(numLinks); D8 M( y# d0 R. k% ?) l
currB = new Array(numLinks);7 P) ]- _# U+ i8 ]6 m
count = new Array(numLinks);
4 `' M% D6 ^# @, K0 b2 h# Z | fadeOut = new Array(numLinks);
/ M F7 P, x- E$ k ^9 p continuous = new Array(numLinks);
2 M/ ~$ m1 i2 G; N1 N newColour = new Array(numLinks);1 D" _( i: }- e( j1 z+ ]
tID = new Array(numLinks);
. b+ w, n! R3 H redInterval = toDecimal(bgR) / numFadeLevels;$ \6 R3 F# _" q% ?$ A+ o. l d5 h
greenInterval = toDecimal(bgG) / numFadeLevels;
- [( Q5 f8 c$ R$ I w- m blueInterval = toDecimal(bgB) / numFadeLevels;* j4 Q+ Q+ C3 H( i" G
initArray(currR,numLinks,0);# t2 x" h/ F M. i
initArray(currG,numLinks,0);
* s/ z4 U; z$ K- T/ D5 H' d1 ^ initArray(currB,numLinks,0);$ b( n/ X2 U. p% H# v4 e" ^
initArray(count,numLinks,0);
: E& O+ z' J( K2 c( x) ?2 X) N0 _ initArray(fadeOut,numLinks,true);
/ C3 ~! _) \* Y, `: e- S1 C initArray(continuous,numLinks,true);
9 w/ b5 t* N% J/ a# h. r+ l2 t}
9 Q( ?* e# s/ Y C5 ffunction startFade(id) t% j# X. n6 p6 T
{
& X* G( p" |7 f if(fadeOut[id] == true)" a# \8 ~8 r5 d
{ /*move colour towards background colour (increment)*/1 f: X- E# [/ y7 |
currR[id] += redInterval;
6 A0 q( {: I4 W, L) J) K/ A currG[id] += greenInterval;; s, z% a. `6 e! _, f
currB[id] += blueInterval;' }0 n/ Z9 i4 @6 H* Y* p
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 X4 o) O* v) u! H' @/ }$ T
if(++count[id] == numFadeLevels)
4 K; v2 ^+ v7 C: }" [5 y {$ |0 h" W w$ p+ x! c* g1 |
fadeOut[id] = false;
& n8 Z0 p' G1 s. b7 g* T$ {; | }+ Y! g1 g: i8 p1 ~* e+ I- V7 R
}
; s$ e8 e3 n7 ~' f8 t else+ j, ^* O& E6 O/ ?
{
3 @. e) D( U+ d currR[id] -= redInterval;: E, {8 W$ s3 F {% |
; \) |# b# x# Q currG[id] -= greenInterval;6 }: c3 p7 J X' y1 [% P m
) x y6 B" N) n$ M# u* q currB[id] -= blueInterval;5 B& a! `* P' ]7 J
) e; `& l; F; q7 q8 Q6 J: M newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);; u" \! c* p4 r8 o: ]
# |0 S& s$ D) R. t$ g# L) V0 w- {
if(--count[id] == 0)- m* L# ` R$ ~% e3 a X7 N I
" W- c: [, i8 I& q6 Y4 S* S {
" w. J" l t! s
& X. U, r: b! R& T3 m b fadeOut[id] = true;' j O; o C2 y3 p7 {2 M
2 n" I9 M: b2 M2 x2 I' | } v i. m( ^. P3 N- }
( \8 R7 d. m, w' s( W0 V7 o
}
, }$ L* b l& A0 U5 k }" R' W
/ N! w @4 i6 k% y if(continuous[id] == true)+ i3 Z" F7 ~7 d% _. L
2 t8 O8 w; r4 n4 d! P& r
{
G$ Z- I3 N) N2 P1 W
' P7 d5 h: }/ n1 o% e9 K+ _ document.getElementById(id).style.color = newColour[id]; ( }9 t- x: K l1 F5 Y+ s
2 j3 c/ a' K# H }. r, O, ~ }
; Q8 x7 A$ X; ]9 f, I$ K0 y" x* f9 q& a. W
else
; {1 g, K1 T' |% i* ]+ X3 s$ D
0 c- ~- d. k* j: i9 Y {
! X6 o' G; n( \' s6 k2 C9 Q' }9 Q* K! N, A, \
document.getElementById(id).style.color = hoverColour;+ n% o' N1 b$ o0 D% J3 k
5 `3 s% }0 p. u& ~
}
/ R. a& `4 c3 w$ q! A/ H1 n4 r3 Z( p: ?+ n+ f
clearTimeout(tID[id]);
' j, ^) Z9 I4 n* ]- D7 B- o3 ~1 u! o0 ]! I( ]! x
tID[id]=setTimeout('startFade(' + id + ')', rate);& T6 x% g+ I) O: ?
; }; k# Q/ \$ I9 \+ n
}
* b7 W; h0 h) H' }( w4 _- V; i- O& H, x$ K. n, m# k
function continueFade(id)' R2 p; z! q: Y. Z7 n- M( u' h
& Y* D X' F* d L: P O{
1 V. R) l3 I# Y! c
' M$ Y# u0 F6 ^4 R3 |, H continuous[id] = true;
+ [' I) a, s2 y3 X! K
% k, O3 q, | v4 e7 r5 ^' U& v}& k# g5 f: w" a
M+ p& S t4 j. Z
function stopFade(id)
' I9 Y) `; e. h$ D# Z. O& h5 v7 q% n4 O6 `# Z$ m
{
2 c: G# s* y) }0 k; K' F2 O- C
2 z$ t8 d) h2 e% f continuous[id] = false;
$ V9 y1 ~6 \! Y" w/ y- j) B+ G) m1 [% @+ Y/ Y
}
! m3 X5 b& l2 M
~+ `9 B! b) D0 |4 tfunction StartTimers()7 d/ u- _+ ?4 N3 \
( g7 @$ n' N3 V{ //set up an initial set of timers to start the shimmering effect3 v7 m- _! j. z! R4 P! c8 i+ }
8 J: J& z6 S* J/ u+ b! Z
for(id=0; id<numLinks; id++)4 R" Q7 Y4 G/ o: ?
( z6 x- z- O i9 {
{, C9 Q6 r' e$ N
2 V+ O( f& `7 t5 ?- y! ^
t=setTimeout('startFade(' + id + ')', id*100);) A1 G2 [9 A* l3 d+ k
) Q! N3 m7 }- y0 B7 b* a/ A
}. `) }' Z5 C4 f3 W
/ i& }8 Q4 t2 x6 @+ T}4 P7 ] d" A. a
6 Z( u# E6 M# Z1 Y$ j
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
2 K+ ]: w6 N; n0 u3 C
& p3 h/ U9 B8 C- b0 N; q/ yinitLinks('#FF0000', 6, '#FFCC77');
' ]6 {" Z+ Z8 k5 w2 G& L
6 D0 P/ k. F& P. d//-->0 T4 j A2 q4 U8 t( k8 k
# F, z( f# F K) I
</script>6 }7 e& c- |! a' W: K: z6 [( I: k
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元0 a5 e7 U/ x" Z! h$ |5 B5 y
</a>
0 ]2 N+ b$ R4 Q$ ~3 q2 ]<br>
8 `- ?/ r7 a- ~0 ?<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>* x1 N. M% K8 A& A3 W6 ^3 E
<br> c& I- [/ x: h) G: r7 f
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
1 l% P0 J! h( v1 n0 N' ^6 J<br>
[) \: |% |. s$ |& b2 m, }! e$ }# D8 l<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>9 z! i& F6 T6 @
<br>
3 m3 B! Z+ x( W6 ^<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' [. d( [! X3 i9 u4 E<br>2 d/ F6 k' h' W, B% X$ R
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>1 z/ m9 I5 W9 \7 M3 i. V
<script language="javascript" type="text/javascript">) N! h3 h$ j2 M$ T
<!--
: a ~% u4 ~9 ?" u$ Z, @setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
) R3 p- U" s9 n! z1 i- `6 v& a8 e//-->0 ]2 |9 C' S, }4 c
</script> |
|
发表于 2008-1-21 20:48
|