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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
" ?& F- W: w6 D3 G/ _/ C7 v) E<!--
" V5 M6 h9 R$ W// convert a single digit (0 - 16) into hex
, E: E4 x' V: j% s1 S: d7 Bfunction enHex(aDigit)3 z8 b& }) d. j( T
{
9 X) n! P4 b# f% F return("0123456789ABCDEF".substring(aDigit, aDigit+1))
H1 c% w/ ?" C* v$ o}/ i" ]& N: ?, Y, }( S
// convert a hex digit into decimal
) H; N; a$ ^- a6 r, a& Bfunction deHex(aDigit)
' j9 U5 `/ C. P& Q8 o# b{
' D' b2 X# ^+ H+ F return("0123456789ABCDEF".indexOf(aDigit))4 b$ n8 s, q5 c. G( ]5 @
}
2 V5 t+ ~% c% [8 D8 _' c! P3 H9 L+ H! L r2 [% c, j0 P
// Convert a 24bit number to hex
$ T a! ^) w8 k3 {1 cfunction toHex(n)
6 A( U6 z0 H0 d, K{
R: |6 ] L1 F5 z; } return (enHex((0xf00000 & n) >> 20) +
1 w5 @8 b) Z1 [ p7 g1 N enHex((0x0f0000 & n) >> 16) +1 h! Q% X9 I% S% E z |
enHex((0x00f000 & n) >> 12) +
% P, u8 X! _$ T/ p+ U) z- U enHex((0x000f00 & n) >> 8) +0 a( `8 ~! x' K& T
enHex((0x0000f0 & n) >> 4) +
4 o6 X% B5 x$ N1 V% G3 q enHex((0x00000f & n) >> 0))# o. x4 z, q$ m
}. s, d; s/ A: [4 V
// Convert a six character hex to decimal) T% @. E1 ^3 q/ O! r+ d( e, z
function toDecimal(hexNum)
X+ O7 D8 M/ H{+ P5 A; H& b. q; {' w+ n
var tmp = ""+hexNum.toUpperCase()
* [5 O) u$ @7 g& F8 s# ]; \1 F: v while (tmp.length < 6) tmp = "0"+tmp
8 B/ ^+ R: Y8 I return ((deHex(tmp.substring(0,1)) << 20) +" |! U1 C* m3 S5 e' z
(deHex(tmp.substring(1,2)) << 16) + $ Z* K. \7 P, @0 G8 M1 Y# g
(deHex(tmp.substring(2,3)) << 12) +1 b% Q6 T q! c/ b5 W
(deHex(tmp.substring(3,4)) << 8) +/ U- _4 z5 J: }1 Y' y
(deHex(tmp.substring(4,5)) << 4) +$ Z2 i* {& J; b( \; p
(deHex(tmp.substring(5,6)))), |+ A B: f/ _& h( W
}
- d% H; G7 B: B# ~% p///////////////////Shimmering Links/////////////////////
0 F: z L9 G1 z- L) Z- j1 T9 X/ H5 I//global variables
+ ~1 L. p7 c) R1 Z8 e, Kvar hoverColour- g/ {' l6 W: v4 t7 B! F$ l( w4 j
var numLinks;# ^: l5 j/ D- }
var rate;- k* `3 `5 j& x( d% ]5 C" P
var numFadeLevels;" c1 y. @: q5 t% ]* O3 B" b0 Z1 O
var bgR;
9 W+ Q+ i: r( L5 J* X9 ~var bgG;
. g, Y: K9 F2 j& s8 fvar bgB;* J! X% R; J2 M
var currR;
# a3 i. R; r0 x, }& E; nvar currG;3 F% T, f; _/ E
var currB;, H$ @. k1 l5 N
var count;
8 |, [( q) p' f! G7 ?$ Tvar fadeOut;
8 r/ K! z7 [0 i7 U9 i% \var continuous;& i4 O) t/ Y6 y0 B# ]! y2 t
var newColour;
, i; \9 T4 f+ E2 Gvar tID;. I7 t8 ]' W. A: D3 E
var redInterval;
. }* S! K/ o! j& @2 @2 Y6 I0 d) c% Uvar greenInterval;
9 d* D. M1 o5 u2 F6 u/ w. y Xvar blueInterval;
2 n* V" k) u( r8 \' e1 K0 w- Ffunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
5 B0 o, G) M# a# z8 b& r) b{6 F* F- g# C) O( p3 B2 ?7 |
hoverColour = mouseOverColour;% h# L' F( r1 n+ o" X/ x
numLinks = numberOfLinks; H! M, f7 R( R. p
rate = 1;9 `( t+ P6 L8 f: u; K Y
numFadeLevels = 30;
* Q$ E3 s# n6 e' { function initArray(theArray, length, val)
! O: H' A& C4 ~" H0 M {$ A: A$ J# |# K, h$ @( i9 }. x/ p, Q
for(i=0;i<length;i++)4 w1 M6 H0 V" \) E
{; {& q5 ?& ?6 Y7 q$ _, ~$ C& a
theArray = val;
; j' f- Y- v5 l }# s( P! ?- J [: v+ R; W7 V
}: r" w- ]" s8 _
bgR = '0000' + fadeOutColour.substring(1,3)
9 F9 o8 O0 V% \/ ?4 ^# F5 j T% @ bgG = '0000' + fadeOutColour.substring(3,5)
0 L2 k# }9 u% ~( r bgB = '0000' + fadeOutColour.substring(5,7)/ e' o1 I+ }' ~/ V8 P
currR = new Array(numLinks);, U# e% @9 N# P6 e6 x7 `
currG = new Array(numLinks);* h' X8 Y |' F4 B% [. f
currB = new Array(numLinks);
3 V6 l7 V2 r- f$ }% x0 p/ A2 m count = new Array(numLinks);# o. G. `4 A( H3 i9 c3 l* y
fadeOut = new Array(numLinks);
" w! c1 A5 b# L; \" p* R continuous = new Array(numLinks);
! v! Y. z2 ~1 t. n- i' f$ f newColour = new Array(numLinks);9 i% R- w+ k3 A9 j4 E2 F( b2 k/ `
tID = new Array(numLinks);
- I+ W( T* Z0 O redInterval = toDecimal(bgR) / numFadeLevels;
$ r& c `- p1 c! _; u. L: R greenInterval = toDecimal(bgG) / numFadeLevels;
7 f7 Z3 R1 r. B blueInterval = toDecimal(bgB) / numFadeLevels;) p/ H( Q6 r P2 F& [# w
initArray(currR,numLinks,0);" r& [$ F! ^0 A9 L4 | F
initArray(currG,numLinks,0);
9 \% \2 V8 F7 C* T* a0 X3 Y initArray(currB,numLinks,0);
8 R, c H5 `" L" k5 P initArray(count,numLinks,0);
' ^7 U9 M; Q- _/ M initArray(fadeOut,numLinks,true);
+ q! }9 G3 k5 z h initArray(continuous,numLinks,true);
* B- e0 M8 m) M2 K}
) r% S5 f% @, x Ffunction startFade(id)" X" h( a( B5 L+ c* s7 P) x
{
$ z( Y; W; u; I, } if(fadeOut[id] == true)
9 l3 i! v5 Z% u/ ]' `% o { /*move colour towards background colour (increment)*/4 W8 P1 H: t' p- P
currR[id] += redInterval;
. |* i9 U6 F: j; ^ currG[id] += greenInterval;- S2 S% h; B/ W0 j
currB[id] += blueInterval;+ Z7 W( v$ e r K6 n
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 n/ @! f/ @4 P+ z if(++count[id] == numFadeLevels)
% F3 t* j/ a) D, s6 ?/ j/ X, { {
# c9 ?# B9 w# H# K! k! K% N- l& g fadeOut[id] = false;
3 c4 J \" R, ]2 Z" S5 w c }
1 w5 x% r: x( B$ ~2 D6 N$ a2 c }
7 c6 p2 E' ]) l7 T! T6 ^ else
9 U6 G3 a1 s6 t7 _" Z; n {
: `4 e J* u+ ] currR[id] -= redInterval;
9 o, K7 M' o9 X/ \" n
" n" z2 {, t5 b currG[id] -= greenInterval;1 f$ _) J/ j& ~: ]/ ?8 L. F
1 U4 {$ V, R) D" N
currB[id] -= blueInterval;
% J( K$ ?' _0 R4 ^ _
! Q# x/ \" {2 G: R) } [) E newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 H: }0 ^. v& t; P. y" S
, D) `. A3 y {/ I* o) a
if(--count[id] == 0)
4 E/ a8 u. D I2 x
3 M) M" E& |- N& |3 y/ { {$ o9 ~+ n+ P6 G- s2 F
2 T. r! C+ [' F! J5 {7 N fadeOut[id] = true;
. I3 f4 t) i2 K- Z
; C3 Z! t) ~" D: R1 Q- z. { }
U5 e1 _& U/ [) D* |' B; r
5 a, U* C0 M3 O& q- o& l4 V- N }
8 v( j! b3 X+ M/ g4 a4 z; D
2 D. L" Z3 V6 G if(continuous[id] == true)
( X/ @$ o6 a- V# i; ?. P" P( J9 L5 ^6 g+ R4 g" C
{( n9 p0 ^, n0 j% w, G3 c
* c3 n6 X0 }3 r2 |, a8 h
document.getElementById(id).style.color = newColour[id];
' v* p' o8 s. Z5 y" T8 r
' Y, H. ~0 }$ w) Z: R9 E# m( K P }# k4 y* ], M% g* I
. y% u5 B2 P6 ]& h# B7 Z* V- E else
8 L, }) M! F( \' i2 B: i5 @0 m7 C; g
{
# m: j, ~9 [$ J& N& [
5 c, x! D& C/ w document.getElementById(id).style.color = hoverColour;
4 C' \1 W: E! b* h0 P' B, f. D( G. }3 x# C. N* B
}4 I, ~' r! p# R( t
/ G* D" ~' _7 O5 ~% D" Q/ k clearTimeout(tID[id]);. n8 }) @' b: `4 X; `8 j
8 x Z# o7 P' r P, i
tID[id]=setTimeout('startFade(' + id + ')', rate);* ^9 C/ }! \5 J
3 t b3 Q" t% A}
% y2 Z8 D) D: ?# R) z3 F+ B
9 e3 E( x; ~2 W+ W1 q* J. pfunction continueFade(id)2 ]% G0 q$ }- I) j. C
& ?5 b C+ l! J w1 `2 j# V& I
{
" j- U5 K# J+ Y( W: p$ n8 }) Y8 a6 H8 D: @) T' C; i
continuous[id] = true;
) K1 w6 |- ?& t) }; r1 z- B) k$ r0 ~$ Q) V* v
}2 u( w* o/ k+ v
& y1 J1 p2 q9 jfunction stopFade(id)
1 c% r. G# s( l2 D7 @/ t' n
# q4 f) z/ S: y! [; G( f; H& C! b{% h5 W3 l* Z! m- |. R
" g3 G% F; ^7 i4 m continuous[id] = false;
( Y3 b [" z7 C5 h
- Q3 f% F3 C q- t) v; a}
% G) k1 a- L) z, R$ H0 U. h" A
% h0 U, p$ p/ g) ofunction StartTimers()3 J, F1 Q! n/ U/ @3 H f$ j
+ o* |, C! X3 o: r" l/ c{ //set up an initial set of timers to start the shimmering effect1 V3 u' G7 [8 d$ D, {, X& x
C( Y0 L% E" e$ G& i* { for(id=0; id<numLinks; id++)
! x3 Q6 a. ^, J& n. f: _1 P3 M* f! O, L6 t& u t$ B
{4 N T( B* h8 h+ S& e0 O: m# F
& _9 F7 ?0 ]% x
t=setTimeout('startFade(' + id + ')', id*100);
F t8 [* W" k! R) l8 @
R: E1 _+ z. ^: ^9 y( T9 R/ a: P }- ^( o: ~. g! Y N( W5 x
; O0 p% P# f* _2 m- _& ^}7 {$ S8 [& y! j7 o+ ~3 J
! g# S: p# A. t6 ]$ s( T& E
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'); X+ \# T' v8 d y' Q: x) W! q! w
3 A( D# n- d3 {5 P" Z0 binitLinks('#FF0000', 6, '#FFCC77');
3 J x- `+ _- T$ { R C! r9 L( x3 W o! @
//-->
) l; u5 D9 b1 ~7 F3 e: r/ j5 w1 T) R& s1 t; W
</script>
0 I& h9 g& a/ B7 d$ O! {<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元' l- j. ]2 W" F7 r
</a>" d# ]8 R4 d6 i/ F F2 n
<br>/ c; T/ g# m: |8 D% T; u9 \% N
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>% c" x0 Y% c( o. r2 W
<br>
) w# H2 M, v6 ?; y, U<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>8 d+ f: t, ^. _
<br> ' l0 ?+ G, I1 D) M; t% _( A; |# C
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
* J% D* s: _- c& P4 u8 g. o<br>7 M2 C0 G/ N9 a8 e+ U7 d0 v% I
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
) [0 |- P- J# L- I: N, r<br>
/ d9 k$ a2 D/ j4 u3 ?<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a># [; B7 ?) J" q; l/ i& K+ f) T
<script language="javascript" type="text/javascript">
% I. }* _+ T- ]/ c* m) R% }; K<!--
3 b* q# Q0 k0 Q3 O2 `' \setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 |! k# A6 J ^6 a! Y//-->
% } Y; L, O G5 c</script> |
|