|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">' D, X/ E7 J3 a y+ G& {1 s
<!--
9 _1 b7 c/ _( a( _7 f& ], j/ E// convert a single digit (0 - 16) into hex
" A v/ G8 }- g8 {- [. @7 Tfunction enHex(aDigit)
1 Z. N5 e7 v K3 v: Z: |' c: U{
0 x' N7 ]+ k; }2 u" D return("0123456789ABCDEF".substring(aDigit, aDigit+1))" W' [) C. v) X
}
- p) I2 r. K! P3 F+ r- @// convert a hex digit into decimal
5 E! {* s2 `, F' Z1 ~ b% z0 v1 n% Q- bfunction deHex(aDigit)* W) e" `9 h+ K! @4 h8 P
{
: W& d$ L- t3 t, R7 q( O, f2 k return("0123456789ABCDEF".indexOf(aDigit))- P% t- e& V- c* ?. R
}
' h8 `6 Q$ u. S/ T& V$ F: r( N0 v: z+ b- M( n+ e6 p& O6 K
// Convert a 24bit number to hex0 {& P% G9 ~7 r
function toHex(n) d, M$ s0 P c
{' S, `* I$ F) w$ Z6 O- k4 x4 }
return (enHex((0xf00000 & n) >> 20) +
% s/ @, S! i; W( b( Y enHex((0x0f0000 & n) >> 16) +
2 c! w5 c! I. k: M% E7 n enHex((0x00f000 & n) >> 12) +, N, c2 U2 f% G6 M. ?1 y7 H6 M
enHex((0x000f00 & n) >> 8) +
5 N- N8 ^$ ] N8 U9 H enHex((0x0000f0 & n) >> 4) +# y9 L1 v7 n! n7 c
enHex((0x00000f & n) >> 0))
9 U8 e1 s+ s# j}
, x2 ^/ _. o# P8 H// Convert a six character hex to decimal4 D5 c; W5 z! W, `
function toDecimal(hexNum)
1 c' a+ x4 K, a( } z# z{9 I: L/ H! m& F6 x1 z. P$ @! p" I
var tmp = ""+hexNum.toUpperCase()9 @# r' k4 W! P8 i5 s
while (tmp.length < 6) tmp = "0"+tmp
4 h. F5 Q4 L/ P6 w1 D" y, l return ((deHex(tmp.substring(0,1)) << 20) +4 g( n# E' Y- _- p# }8 Z# w' J. |
(deHex(tmp.substring(1,2)) << 16) + $ q3 m* I4 C$ M
(deHex(tmp.substring(2,3)) << 12) +
9 t5 a. c) ~" v6 d6 B4 ]; a% M8 B (deHex(tmp.substring(3,4)) << 8) +
0 b# j0 [# l# m+ y (deHex(tmp.substring(4,5)) << 4) +* d# j' ~2 G }$ Z6 v# V* Q
(deHex(tmp.substring(5,6))))
6 _' W2 H o+ Q2 q- [1 B}4 J+ c0 v" s3 f( E7 ~! B3 l9 a" |
///////////////////Shimmering Links/////////////////////1 W4 y* r- W# U% T2 M( z
//global variables8 I" X7 \% a _# [) S* x, R
var hoverColour) n* F, B5 Y. [+ R7 a7 [! r
var numLinks;9 r2 Z1 ~& K' x# C# R$ W0 d4 Q) u
var rate;0 s2 w1 L( ?1 f8 i3 f) U$ e+ z
var numFadeLevels;
8 w; C: q/ X7 g6 bvar bgR;
2 A. O4 a$ N% Z" p! Svar bgG; W0 [; v6 H) r$ f6 o( Z. g
var bgB;4 S( X6 h5 m% K F
var currR;- \; C6 x9 c- v+ \- ]% }$ p; Z
var currG;
' m- S; f- Y. @var currB;
7 F6 `& \8 a% svar count;
: I2 K. O4 N: b; ] k3 h/ [, E. dvar fadeOut;2 w+ }- N0 J, [4 Y! q3 ?3 g" V( u
var continuous;
( I' z2 A, h9 F J+ x; [: {var newColour;. ?9 R4 l/ T5 k I9 o- r
var tID;* e2 F7 X* k& }9 g' C
var redInterval;/ `) h( R& z4 ~4 s5 a
var greenInterval;, d) L: {* i z" b+ ]
var blueInterval;
5 z6 m& J) Q& T1 b& ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
3 X5 S/ I/ w9 g( M: @# J{3 `" e; ?# e* F) e- a2 w
hoverColour = mouseOverColour;
( C# [( ?6 W* R numLinks = numberOfLinks;
* T* O, z' B6 \# E/ C' p* m y rate = 1;
, e& h9 o, o9 B; {) Q numFadeLevels = 30;
( }( h/ B7 y) V' J% s function initArray(theArray, length, val)3 @- ? |- \& A1 p. P/ Q, J
{; T9 z) U" ] U* h* v& I
for(i=0;i<length;i++)
; c, F! |. B1 `0 J# X ] {
7 s# q q. N% q. y; m6 Y3 B7 C1 C& O6 P theArray = val;
% H5 z2 C) a& T; @( L! @ }
% T/ X6 r8 \7 ?# T2 e; x }2 r, U7 g! P( u2 v) f4 I- r
bgR = '0000' + fadeOutColour.substring(1,3)& S& h$ L, r" H* H! X8 o- j
bgG = '0000' + fadeOutColour.substring(3,5)
' Y2 H/ U1 _- w9 E bgB = '0000' + fadeOutColour.substring(5,7)& j# j' l, v; d7 [7 E. Q+ W, ]1 E" C& d
currR = new Array(numLinks);" ^5 K9 ` q8 h
currG = new Array(numLinks);/ A7 ^2 Y6 ~3 i
currB = new Array(numLinks);: h4 S S- E/ w/ |; E
count = new Array(numLinks);9 \+ r# R4 N# _8 X7 M' p
fadeOut = new Array(numLinks);, T+ M6 E$ F' B+ N6 s' ~* x* Q
continuous = new Array(numLinks);
6 g |. @- ^: A4 v5 }& d newColour = new Array(numLinks);1 f6 U2 q, X4 g/ w
tID = new Array(numLinks);$ h" k- M2 _8 W4 q7 v5 A
redInterval = toDecimal(bgR) / numFadeLevels;6 Z+ s1 v/ T6 j* j# A6 I" S( j, a
greenInterval = toDecimal(bgG) / numFadeLevels;2 W. j Z# T+ u% q7 ?: \
blueInterval = toDecimal(bgB) / numFadeLevels;
/ ~) P ~5 w* K' a2 F initArray(currR,numLinks,0);
- V5 |! S/ s$ f1 M; v' I. G% U c C initArray(currG,numLinks,0);* o- X$ C5 _7 ]# h" P5 b! G
initArray(currB,numLinks,0);1 n! A- l6 y6 Q( n" f( n
initArray(count,numLinks,0);
6 g. {7 K# g# \8 h9 T$ z initArray(fadeOut,numLinks,true);/ b4 D7 z$ A. i* e* t
initArray(continuous,numLinks,true);" i7 F6 d: C- q5 d/ g5 ]6 a
} ( |; T! K; ?2 B4 ]: ]5 i
function startFade(id)
8 {- z1 f6 W+ Z$ z8 b2 z{% G; x, K. j0 [% C5 Q: n" @& I
if(fadeOut[id] == true)
; I" i. p# ^) s2 d+ D { /*move colour towards background colour (increment)*/
) g: r+ A5 U% r& p) i* S4 R currR[id] += redInterval;
2 C% T/ [. v$ j6 D0 i currG[id] += greenInterval;
4 \1 ~* z+ c% J+ K3 | currB[id] += blueInterval;! {5 `# V, F( p; M5 t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 V$ O/ N7 v+ T if(++count[id] == numFadeLevels)
1 O. p, Q8 n8 u; [, ]3 ]# o+ W { e0 P3 o* F2 y7 n7 I v! b5 h( }
fadeOut[id] = false;
/ w/ K3 o- [+ p, E" Q; { }
8 z; f! Q- P' S: [- S }& R/ ~: r: c/ n+ \! v% t
else
: j" M" Z0 W6 x3 V7 R {
: k1 _* ?: {9 G/ O) F currR[id] -= redInterval;' k0 }9 \" z, Y
% T+ {* \; \, \5 w1 |, [+ d currG[id] -= greenInterval;5 P, L0 L/ e# M% f
F$ @8 x/ i) n0 J% r
currB[id] -= blueInterval;
% R+ L( v% U/ `! z# ~! g# ?# C( ` Y2 w+ U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- u/ q0 f" H1 N. h2 m
7 e5 F; I: U' n( e% S. C( C2 q( H
if(--count[id] == 0)
! q; {" N+ A+ x& V, `3 d+ c: U0 R4 t8 ?: {# d! E3 `
{0 g! c( o" [) \, I8 t: T& A5 a
. d* \5 d+ G5 w9 [& O- x0 F
fadeOut[id] = true;
8 ]0 `( X3 R" E, m# ?; \% D" f1 T
3 H4 M& }9 i i4 e" E" _ }
) D6 j' I: V' b; |* ]2 Q" c5 N
! Y5 D+ [% Z! R, N }: H2 {) j( u' }9 U+ H9 I2 V) X
3 [* M: N2 W" O" E M+ |2 w if(continuous[id] == true)/ v0 C9 O& j4 w1 [3 [ I
: |: P2 H: ~( I' A* e/ @6 C; x {: _- ~7 ^7 g: s4 T, q: v5 B
, P; L3 V" v" k# T H k
document.getElementById(id).style.color = newColour[id];
6 [* w9 w2 i' t; X2 }- q
- b& r+ G/ V* c" V' X }
$ `" x+ A! G0 D9 w5 N9 _9 J: y" A9 O7 f4 `. l/ N9 v/ T
else
; p' v+ I# [- C$ U2 g$ u
; w* f5 |6 X$ J% V8 E1 q4 T4 h {
1 w; t7 k w! E0 Y
- l# O, g/ y# W k document.getElementById(id).style.color = hoverColour;' G7 Y4 i* y! g* F" m/ H0 t* W1 x
0 E+ u9 K% T( S/ J+ s: T* ^ }
- B3 |# a# E: \& p6 j
4 w9 c$ [7 R! M; B clearTimeout(tID[id]);2 e/ F& B$ M6 a
; c7 l1 Z' y/ K. h' h' W5 U7 P tID[id]=setTimeout('startFade(' + id + ')', rate);& e% P( E1 R( N5 z
* ^( n4 O% M4 Q u7 j}7 i2 F9 s7 T! Y( M
* I5 u8 I5 u9 H& X/ U/ n% vfunction continueFade(id)% L- h$ z' O/ L7 C2 T, R, l
# A2 U: A2 C y) c8 E( A{. \( h, P- _2 h, i2 @5 N* t( p1 q4 Y. t# }
: r0 E) G" M+ S: M* W; V1 q continuous[id] = true;6 i4 X; ^9 r% [& l! q
( t( Y7 m- I8 L$ K# B! P/ |$ O
}( Q$ s/ Y7 z8 U
- y2 x; s0 ^3 R3 kfunction stopFade(id)9 V) {9 y7 Q H/ Z: t1 K* B* R
: G+ m1 e% d+ G9 n{
. y" c( m3 x* A9 d4 f: A+ m: e' x: t" K0 m: |; Z, i7 I7 Y
continuous[id] = false;
5 E+ u. ^) {0 t) S$ G" P) @# O M# U3 T: ~2 O& W7 H/ ~1 J
}
# D2 V7 B" U- H& y- v
( {) W0 H# j! S( H8 \function StartTimers()
8 v( W# D- ~0 K- K% C
( {7 k% p5 g% r/ z5 M% d, ]{ //set up an initial set of timers to start the shimmering effect
0 B9 Y0 M7 P; g) `* k# m
8 _( t" o5 e# z' A$ P2 Z7 p2 R for(id=0; id<numLinks; id++)
4 f5 C( d, H$ a+ J8 y! `/ U0 A0 `6 B B% d6 f
{6 G6 h/ d6 @9 C' B) ]
8 H* B: V' |0 o! h8 E$ N% L t=setTimeout('startFade(' + id + ')', id*100);: E/ S: w9 i( r7 } [$ b+ }! w% k
9 E. x; X9 V6 q* a }
# h: O: n2 k6 P: X& G, F7 b/ E, z# j( ~# ~0 Q
}, z2 g; B/ m# z6 w) N0 A9 r
0 {) k* `& V0 K( q/ U
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')4 Q4 e; }. H! f7 ]2 x9 M+ E$ s
' S z, X3 @. k! _8 i. U# D& ?/ }
initLinks('#FF0000', 6, '#FFCC77');
7 u n% C y) b# k
0 l& B7 \# G+ D$ l1 `; G8 k//-->
2 c0 l- \8 T) o1 [3 P( x" l' S7 z @6 u( L
</script>
3 m% a8 c" o/ F+ S& K- B5 ~3 W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元6 M# ~. P0 [* n. Y
</a>
+ d! B+ k4 V( F! f<br>
: x/ P& m, L0 w( H/ ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
) J( g0 Z# w* Z) J2 Q. X& o& o<br>
5 t4 y: r: K7 S& y z<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>2 W o4 w$ M4 m# j! L1 k
<br> $ i/ N Z+ Z# Y. s' N4 m0 m5 O
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>; c4 @* o& K" Q2 q4 C O
<br># W7 t" h8 G& r" S+ {3 c
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
6 S) m5 c9 @5 ^- ^/ \<br>+ R* p" _( @: ]' ]+ u. [
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
# s8 n0 q: c! c) Y5 C# E5 n1 `2 S0 ^<script language="javascript" type="text/javascript">
0 u, K) g2 T: P% T \' O<!--3 B: l3 z4 [4 }2 M9 m# s) P' q$ c
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
7 q+ g: ~- O5 V( S4 \" V//-->
1 r& V3 H2 y3 c</script> |
|
发表于 2008-1-21 20:48
|