|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
' e: ?' Q$ N! T2 o+ a$ ]2 c' q<!--
, _! Z7 E/ v2 u- a: n- T+ H; H4 E3 ^// convert a single digit (0 - 16) into hex
! ~$ ?% n0 o" m7 L! e4 Lfunction enHex(aDigit). } J) H# F. D: }; N: `
{
1 b: x1 T! J3 n9 z return("0123456789ABCDEF".substring(aDigit, aDigit+1))5 p1 @1 X- a+ B
}
( s0 u* K+ X0 n// convert a hex digit into decimal
/ U1 ]: @0 K4 F& {5 xfunction deHex(aDigit)( l+ e3 ^; \! L5 o$ n9 R
{
5 m5 w, J3 z' ~4 i! O+ [5 _- \ return("0123456789ABCDEF".indexOf(aDigit))5 ?: t* o# W0 h7 b
}
1 h# x2 X t) g6 N$ ]& N" Z' C, `; f# v) ?
// Convert a 24bit number to hex
! \- V @! I+ S2 \function toHex(n)
* k! b8 V6 Y6 P5 x# `{
! K" U* J2 G3 \7 J3 I return (enHex((0xf00000 & n) >> 20) +& T( H2 W5 T A4 ^/ |# J$ _
enHex((0x0f0000 & n) >> 16) ++ k9 S; X. h- ^2 f' M B
enHex((0x00f000 & n) >> 12) +
8 X5 `. ~$ V i enHex((0x000f00 & n) >> 8) +. ]. u6 y* B& o# x9 [5 o
enHex((0x0000f0 & n) >> 4) +: }( p" B# A5 T; @
enHex((0x00000f & n) >> 0))
; F: A/ ^, m2 k6 f0 _* P}
0 \7 U. f u1 E% p+ Y, }// Convert a six character hex to decimal
' {( b( R- a( i6 [& qfunction toDecimal(hexNum)
6 R9 W8 S7 {' E. v# g+ ~{: `+ W5 |1 U7 h- r/ x
var tmp = ""+hexNum.toUpperCase()
9 t2 N- g* a* B2 [, p" }6 Z while (tmp.length < 6) tmp = "0"+tmp, i( B3 m1 B0 ~1 F. |- I% l
return ((deHex(tmp.substring(0,1)) << 20) +
# o' { Y3 v" h8 i$ g! H: { (deHex(tmp.substring(1,2)) << 16) + 2 |- H* [9 Q, A, |( U
(deHex(tmp.substring(2,3)) << 12) +
' Q0 h! H$ C; u F7 T7 P (deHex(tmp.substring(3,4)) << 8) +
* Q4 T9 K- T* V8 @) D2 M, r! Z (deHex(tmp.substring(4,5)) << 4) +# s! F2 y6 [# q* N$ Y* B
(deHex(tmp.substring(5,6))))" \6 P& v/ Z! E, S9 } s+ A
}3 B+ y! q0 \" a: B% K" T' H
///////////////////Shimmering Links///////////////////// R7 ~: `1 u3 B5 n
//global variables
8 d7 ]8 N: v6 X; ]3 `var hoverColour8 x& i- {- J. j1 m
var numLinks;8 k$ b d5 D5 @ f, N7 [2 z
var rate;. W6 G9 p0 N: b3 G1 V1 p) g; ]
var numFadeLevels;
b7 S' C: I2 ~2 h" m7 {2 _* V. _var bgR;
+ w3 x' V2 k: C0 b/ {var bgG;
, ^0 v0 Y) }2 F% Z% }var bgB;
5 `, h; d( N- G) `! C; Nvar currR;
- B/ s$ f) n' a! E% d+ P1 V8 Y$ Mvar currG;7 T9 C0 [! h9 S1 x
var currB;
9 Y( ]: X' |1 x6 U) ~# j. ovar count;
0 K% M# ~; {6 X1 J& v a, q! ]var fadeOut;
/ {* U! P/ J i- y( a( _. Qvar continuous;
0 l( \( o! J lvar newColour;
0 D& A2 K! ?$ qvar tID;1 J/ C( j E9 \+ B, G( Q
var redInterval;
- C8 H0 v# a! b& {var greenInterval;
" ^) |9 x9 \7 y/ Y8 @! H N* `# Bvar blueInterval; K9 f. k$ ~* i4 _ R
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour); w7 i, J+ x" H. q
{% S: g& i% ^( o1 `' q$ c
hoverColour = mouseOverColour;
0 I) F+ w; ]* r; _3 L3 Z/ o# c numLinks = numberOfLinks;8 a) c, ~: P: j1 ~2 o
rate = 1;, b. {7 c* f: i! i; C
numFadeLevels = 30;0 Q5 I9 W: b4 \
function initArray(theArray, length, val)4 n5 E5 H2 H. B8 f, p. F
{
% N9 [1 O E/ q3 `. U for(i=0;i<length;i++)! c" |8 s2 G% i9 \5 c/ l @8 Z
{5 n9 B, p5 _$ R0 O4 E2 D: S ]
theArray = val;! l5 E/ Y! B& U4 f# h
}: Z6 y/ u4 z, L6 e
}
) p2 |6 b' t9 V* l6 H bgR = '0000' + fadeOutColour.substring(1,3)7 s+ E: H" r0 V: B$ L! N2 ^4 i
bgG = '0000' + fadeOutColour.substring(3,5)
/ ~, ?+ m- y" l! C4 ` bgB = '0000' + fadeOutColour.substring(5,7)
' h( ]& `1 Y( y5 u, N- ]. R( Y currR = new Array(numLinks);
( C4 g& Z5 K0 Q) I& g/ u( }4 p' D currG = new Array(numLinks);7 O0 Y- Q/ s6 z1 l' U0 P& ^; ?
currB = new Array(numLinks);
4 G+ C* C @2 { count = new Array(numLinks);
, h& z; G' a# x& h: j fadeOut = new Array(numLinks);
& d' `* ~2 A4 j. n' ~ continuous = new Array(numLinks);
5 O2 w& J. Q/ i( J1 n* h: ?' ] newColour = new Array(numLinks);. E M5 C) [. ?4 o
tID = new Array(numLinks);
& U0 _4 ^7 S' k: Q L redInterval = toDecimal(bgR) / numFadeLevels;1 d" P1 q& x% |3 v* T4 e
greenInterval = toDecimal(bgG) / numFadeLevels;
: i$ ^8 E- O* i* N$ S7 F% w blueInterval = toDecimal(bgB) / numFadeLevels;+ I9 ~8 A! r+ d
initArray(currR,numLinks,0);
8 L4 }! W3 y4 i/ k1 w+ X initArray(currG,numLinks,0);
) D v) T5 c& O6 v8 ` initArray(currB,numLinks,0);) @1 ]) H* H% w& G- Q% v `
initArray(count,numLinks,0);
: x6 [- x% j8 p initArray(fadeOut,numLinks,true);
) [8 S- p# ^7 a: a4 @$ p: Y initArray(continuous,numLinks,true);
. {, X# n2 Y6 s' E% y" P9 M}
, I2 v- ]- |, p# s# k- K$ ^) tfunction startFade(id)
/ l7 t" d T/ J' }. c0 F+ l; U{
6 J1 V! i# x1 E N' ~ if(fadeOut[id] == true)3 r- p. ?% v& r* V
{ /*move colour towards background colour (increment)*/, C7 s- m; c0 @# q$ b+ H
currR[id] += redInterval;7 _8 ~% L6 Y" q" d9 m
currG[id] += greenInterval;+ O' ?( s2 i( t
currB[id] += blueInterval;9 h' V0 \( k- K V2 C2 O
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6); X" k* C' R9 _: d% ]! b
if(++count[id] == numFadeLevels)/ j8 g- t# Y2 }: N
{
& S0 _( d% k# W fadeOut[id] = false;
5 M. y# \! \$ x! J; I }3 Z% M& @' d: s9 J1 {
}
; N- L6 [$ B {( D, j! H/ e: d: S else7 ^! \+ E2 A* ?* Y& I7 l
{
2 I, ?8 M$ b4 O currR[id] -= redInterval;$ p6 n. w# l) V- K- l7 U
( k6 l: i3 V! v# D3 y5 I' q
currG[id] -= greenInterval;
) O- ?# Y" z' {! x% q/ m5 ]+ T6 i4 c3 h3 v
currB[id] -= blueInterval;
3 p2 m2 T' ]# \# ]. p& I; M9 Y& J5 p( Q5 z9 M/ M4 N. b @( j
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: O) Z9 N1 \6 G7 H
9 v7 I" ?+ Z2 b% A5 X if(--count[id] == 0)
# I3 s# A3 ~3 v# B" i
6 M2 @/ M' q3 W {
' I( i. n* J, O9 ?, s6 b
5 X. s% |! p% e6 D* T1 g1 P fadeOut[id] = true;1 [# V3 T- }' p
$ W. r1 O4 {# @9 o
}
4 U& x% F. n+ @5 z( ^
6 f+ b8 m: J/ C3 y8 o: R }8 Z) m6 v$ x# ^$ J& w
! ?( {( n; h7 S
if(continuous[id] == true)
8 Q9 l2 K! z1 t. Y- `7 x9 ^# V/ S G' ]2 x5 I. i
{; R m1 E6 O' P' v# X
- G8 t. m% a$ J) r6 P" F M, ]
document.getElementById(id).style.color = newColour[id]; ?' J9 H/ L; q( N' P" g
7 c/ w( ~* P- B# I
}9 }- b2 U1 J' F0 \1 V/ J
b. W" O# z- y3 Q" K7 Q5 i
else
$ H1 g! n- j. N. F! O6 o7 [3 I; g6 k
{0 l. R" n5 D; x+ L$ B2 C
! U3 x9 f' r0 Y9 u, i/ ~' u0 m9 _ document.getElementById(id).style.color = hoverColour;; `; y V3 G+ i) O
/ I+ J/ d& L/ O. a$ P1 W
}
4 L6 G4 H* E/ i/ @" ~9 @& D) N$ R5 ~. p7 R& _
clearTimeout(tID[id]);
5 m9 O+ b T! b, v |- ]$ ?9 ~! b! w9 c( P
tID[id]=setTimeout('startFade(' + id + ')', rate);
- |2 I. J2 P$ u# J; l& U W8 |: [ _ L8 V: f4 U3 z$ y' `7 i9 e7 X
}
8 F9 G/ H J R3 }
# E G, p$ Y- o0 x4 X5 C7 Z" {function continueFade(id)
6 z! g7 ]$ t* q9 K* f3 J9 Z0 ^
' Z) e4 o: D0 \2 V& X{2 U! y" M1 U1 a7 g
6 x, m1 u3 r& Q7 e/ q: Y; q
continuous[id] = true;% Q+ K P3 p/ X( t# Z/ `- O
! e% x' [5 V6 z! K9 s
}
, {3 s" f/ a" ~. v+ u7 p& v: p+ I) V. t
function stopFade(id)# y, v3 G5 o+ C2 g0 ]
0 c/ Z6 @! R( U# Q W# c& r{
/ q$ E% |" F `6 \& o% o; D3 m. P# P' t6 b/ \' r; F
continuous[id] = false;& } K! Y$ P! b( m, p
8 @- m# @7 Y' R: f}
7 i/ ~& Q% W* q! ^5 n4 b
; m! ?6 F2 P+ i4 \function StartTimers()
+ i! \4 Z3 u+ i! ~; ^/ ~6 _* Q1 [6 H6 t6 _& W2 ~: r
{ //set up an initial set of timers to start the shimmering effect
! u: ^+ l+ L$ ]( `" ?% k* P9 p# m X+ V' d: o8 c& S. m# ?
for(id=0; id<numLinks; id++)
8 ^" k5 _9 @( c0 Y, @3 S0 s/ c8 E9 X" o2 [3 t" R+ {
{3 a. {- P" R, m! W! z0 T& U
4 o+ A+ ?3 Z8 N
t=setTimeout('startFade(' + id + ')', id*100);/ K3 U2 j3 V* A, S4 |1 B4 B: v' g
( d9 d3 w N( }6 |" A; N. V
}" R1 ?; H/ ?0 Z& D9 O
1 W9 [' w9 }- l1 ?. U4 ?}" q% b" V% v" }4 A4 S
* l$ m& A6 I0 k
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
8 k9 \" @ v: ~
( p. d3 @4 O) | S q+ _initLinks('#FF0000', 6, '#FFCC77'); L# g/ b) s6 |2 P1 Y7 E& e) S
5 k! K- c! J6 }7 q* W
//-->8 v# X! u( b! q6 o7 c, h5 w& p8 u, v
0 N8 s L- O9 `/ U
</script>
6 _) _; w1 K; X- [<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" [/ _+ _# c( C, A. I</a>
# T* r3 D+ |# B1 C+ D0 \<br>
, E e' o; I1 E1 Q& x8 ?<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>$ \, C2 u; q- Q
<br>
[' b4 c1 j7 f. _6 s: q( J/ u. g<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
% L+ V& B7 P! O<br>
& j; i0 y0 {% O, U0 o<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>3 Z5 z1 I& K9 X4 V! {
<br>7 A5 b& |4 M$ U) P# u) P8 e" F0 ^
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a># }. n$ Z+ K* B: ]
<br>7 l- f8 f0 K% {7 U2 e/ {/ \' B+ n
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 u$ ] l" d: c1 P<script language="javascript" type="text/javascript">% A- k* b" j9 v3 w+ |
<!--# T! T0 U5 P, k% x
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
- t* \3 T$ u+ b7 Z- U; y5 h" G2 P//-->/ j, ^7 O# n2 g
</script> |
|