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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
( c5 _4 L( o5 g! O) z4 w5 o<!--
- i! E" l+ w5 `1 _- v4 J// convert a single digit (0 - 16) into hex
F, Z9 r& m$ _function enHex(aDigit)
8 A: t# ?, v3 f$ d{. J/ r! c8 t" g# m( n f% o
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 b! n2 ]; f: Z; ? ~}
; S! r5 t) Z* e: X// convert a hex digit into decimal* D) Y W7 c4 ?% c$ _
function deHex(aDigit)
. g7 p# k% p# t+ P1 g{; M; {7 H$ ~4 `8 u7 L+ S
return("0123456789ABCDEF".indexOf(aDigit))
1 A2 F' g. D) V}3 G6 Y) G( P; T$ ?6 j p* p
8 F, E, P' z) K( J# ~! G9 w// Convert a 24bit number to hex
+ h% `" v) _ V2 p6 wfunction toHex(n)' m5 |6 f1 U: q( E! s- N
{
# B7 ^' r- h# t& W: u return (enHex((0xf00000 & n) >> 20) +
, T+ y: Y4 A N/ m) J enHex((0x0f0000 & n) >> 16) +
1 ?' @1 c9 o, u t$ r+ m. \8 f enHex((0x00f000 & n) >> 12) +1 L6 \8 K+ `0 {$ f! Q
enHex((0x000f00 & n) >> 8) +# P) i6 B' c! y
enHex((0x0000f0 & n) >> 4) +
; P* M1 u3 J# |* ^- s4 | enHex((0x00000f & n) >> 0))
) W+ \/ t$ _1 J: j}
( |2 V- c2 g' Y! q+ [// Convert a six character hex to decimal
5 O0 q; M5 h/ s- i0 Rfunction toDecimal(hexNum)
/ L$ M& b L6 J& R( E$ ?{
; U0 l4 Y, M) H, V E3 s5 ~) D8 y var tmp = ""+hexNum.toUpperCase()$ d1 s" n" P- B$ \0 L
while (tmp.length < 6) tmp = "0"+tmp
& P% W. M i4 `, V& k return ((deHex(tmp.substring(0,1)) << 20) +7 v, [( t9 W) r# s4 \4 I2 Z
(deHex(tmp.substring(1,2)) << 16) +
2 A% ?! p, C( D. f9 s! q, v (deHex(tmp.substring(2,3)) << 12) +
: i% f. X* u& o4 f9 W9 v2 c2 f# }% _- o7 g (deHex(tmp.substring(3,4)) << 8) +' U3 W. L: i# [9 d+ a* s+ N
(deHex(tmp.substring(4,5)) << 4) +9 X+ ^ A5 P; F- z- Q7 M
(deHex(tmp.substring(5,6))))
! R: t( K5 |2 j, B* ] [}" i* H" n; Y3 B; m
///////////////////Shimmering Links/////////////////////
6 u! j2 Z& |9 L' P; u( P6 g- g1 E//global variables
0 D i/ k" y. J/ u k/ mvar hoverColour h6 M, \( h- g3 f
var numLinks;+ a+ N! G' T( q; Y, b
var rate;
$ n! p0 L M5 g. w- J' ovar numFadeLevels;8 l& O$ G2 r) @
var bgR;
, e; c& Z' {# C: ]! Zvar bgG;' i% [' P6 Q- i$ D& y
var bgB;* j3 u2 s' i+ ^5 c
var currR;1 C1 |% k; u/ M, [0 G0 F% n/ s
var currG;% j) y0 N: o2 A
var currB;) ^: E$ y4 n8 m* b
var count;
' k5 O9 N# |3 x! [- R) A; P+ ?( |var fadeOut;/ E: b9 L1 r9 \: t( ~. ~
var continuous; t3 O/ U- l$ T; `% s" V, g
var newColour;
$ w8 }2 B6 R1 m$ Kvar tID;
- a2 X6 l- h% x1 ~9 H% P" Hvar redInterval;
; W% W$ |* C% E% @, c6 fvar greenInterval;( M2 J# Q9 V) B3 k+ g# ?
var blueInterval;! @: c7 b! l7 `. u
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)4 Z; j" S1 t" q: m/ x8 Y
{
z/ x A$ r- }( Y- M hoverColour = mouseOverColour;
; _/ l" p9 l+ f( ?# y numLinks = numberOfLinks; \) y' Q8 Y; ^3 H
rate = 1;8 S: p' ~$ [) Z" w9 E# L6 f4 v
numFadeLevels = 30;
3 S: N5 p! \# R5 ?; w function initArray(theArray, length, val)
7 E* P& d! O8 e! y {* e- `5 S# U1 \; r: G
for(i=0;i<length;i++)
5 p% j. K1 S1 A* _3 J' Q- P {3 e2 \7 |$ M0 Q8 f6 N# v+ `) w* _
theArray = val;# s7 [9 M6 S+ z
}7 d9 [6 c4 @% G: B3 a
}6 h; D2 C/ D: S. @9 t: b3 F7 y9 ~
bgR = '0000' + fadeOutColour.substring(1,3)
5 x$ |: x/ U% Q/ L bgG = '0000' + fadeOutColour.substring(3,5)! ^' s' i% z8 F- R/ m% ]. N
bgB = '0000' + fadeOutColour.substring(5,7)
7 P0 I, L- d# d& m currR = new Array(numLinks);( X/ y. V5 i9 }) m$ t6 m+ j% H
currG = new Array(numLinks);
( u1 I+ G% G! _ currB = new Array(numLinks);
$ Q# p/ e0 w) X' s0 c count = new Array(numLinks);2 i9 O1 ^% n ~2 k5 y7 B8 I0 D. ~3 k
fadeOut = new Array(numLinks);
, v; t, N/ I2 R/ @ continuous = new Array(numLinks);
5 \! s& M7 W4 V0 }2 x1 m' \" J newColour = new Array(numLinks);
& y7 R: J9 l, b2 r3 }" X tID = new Array(numLinks);
4 z6 c8 w& h* @ K redInterval = toDecimal(bgR) / numFadeLevels;
0 r5 t. r: P5 p" f" B$ F* o greenInterval = toDecimal(bgG) / numFadeLevels;
4 V# B$ h2 a$ l7 h+ f+ v blueInterval = toDecimal(bgB) / numFadeLevels;
0 q" d( ?0 }" R9 |" w/ P initArray(currR,numLinks,0);- [$ Q$ o( G$ \7 T: P' o# T
initArray(currG,numLinks,0);3 x8 o" ^" k- f/ N* {3 |
initArray(currB,numLinks,0);9 v! s0 k4 O0 V' Y2 M0 J" S
initArray(count,numLinks,0);/ d! @2 I; q+ g+ n' b) f& E. x
initArray(fadeOut,numLinks,true);
9 O& n/ Y% D( \0 \* J/ o; | initArray(continuous,numLinks,true);5 U6 ^- f& h" f, y" m" E- U: u
}
1 c- Z9 o) m5 p- Cfunction startFade(id)& Q& B; k9 |: j" \& F
{( p! E- r* f6 {' Y
if(fadeOut[id] == true). Z8 J; X, [9 E* b
{ /*move colour towards background colour (increment)*/4 v( R# z) D/ f3 ^) i% @
currR[id] += redInterval;- C, I' C; C$ {
currG[id] += greenInterval;
[$ z6 X5 n( X currB[id] += blueInterval;& }, b; k& [7 ]
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) Y2 o w$ {/ r: h if(++count[id] == numFadeLevels)
7 S1 j9 g+ v. E4 R2 A- _# O {$ D8 @1 j7 I' C: o
fadeOut[id] = false;
/ ~: j: [% w# X8 }6 R) Z' Q C! o }
# C$ \! M( ~8 T) m0 y4 V _+ p }) Q/ ~8 @& f( D
else5 k7 x+ p" @8 ?- y: `( j
{
/ `. D2 d6 F& o9 `2 v, K- s currR[id] -= redInterval;
- F( ^" c, j& Y$ J' r. k/ ]! a" P1 u# X( i
currG[id] -= greenInterval;' Q# q2 `) N1 s
. A4 m; U( v! P; U z& U: ~- [. O L
currB[id] -= blueInterval;' i7 P- F: f( ]
: D; i. m* d) r. s newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% P* d6 P$ j! l) T* T8 d0 O9 G4 G- r) G# j! r, s
if(--count[id] == 0)
8 f+ G. K& j' M! M- R+ y5 e
# s, P& V5 q. a2 g+ {9 G. { {1 \8 O9 m6 m8 I4 [+ G" ^$ j
( W& Y, K* W4 X- o
fadeOut[id] = true;# |( Z% Z7 T) m
, `+ w, ]; j7 p% z( `) r9 ~0 A* q
}
# [ D6 N3 f4 {4 G* U( J6 m- g: o ]5 I7 f
}
! g5 v) M2 }5 |/ L& O
: p) Q+ ~# R4 o8 t8 c7 L if(continuous[id] == true)
- k. H6 C# ^' ]2 q6 `9 n
7 B2 v, Z9 }' R/ @* R {
; B- t; H2 I, a& E, h; b9 ]% ]0 L+ y) ^. J* D/ Y" M
document.getElementById(id).style.color = newColour[id];
4 l; E; K" ^3 \; X" h8 J" u% F$ N( K) P( H5 P7 i2 T2 W9 f f% S
}
, e( L1 i- @& Q! L" s. n
6 N k* Q# P* R: l& z else# F. _! o/ k3 y& b7 l
4 R( @& L: U _. X, G, C9 i { Q- @9 o4 C2 V3 S' Y" c
; r1 f; w+ W# D& m$ l/ l0 ^) L
document.getElementById(id).style.color = hoverColour;
, E& C0 F! ?" |8 ^( ~9 I3 X1 z; D, P" O" t. n
}
% c& N0 d3 i# K. o3 W7 [ w- |+ m8 {' U
clearTimeout(tID[id]);% c; ?( i7 N# z, f6 K
! h6 C% J7 c b9 |
tID[id]=setTimeout('startFade(' + id + ')', rate);4 H/ c, s$ U6 O
8 R* i; R9 P2 I9 ?
}+ H- K7 g8 ]0 L3 f' {: T
$ V% W6 L: R* r( X; y3 yfunction continueFade(id)) x( z7 j. r" x8 z1 ]2 F/ |
8 s% o9 U6 p Q. h2 Q6 t5 Q! [{4 Z3 T. g' `' _# [1 H5 p
- M4 d1 A4 z9 Z& t. \( ^( x
continuous[id] = true;0 C1 }9 c6 U, P
7 ^' P* |0 p2 @# b. v3 |$ w
}
% a/ l ?" O( _. ^) Z; q9 i- g' o4 o0 ]
function stopFade(id)( r6 l1 Z) P0 w
- @! j! z* x* Z* m4 Q{
`; w( {! Z+ S! a! _; S- ?( y4 b1 \ |: ~ N" N
continuous[id] = false;
6 o# o, _3 `( G( p" k2 i* F& W( m. f5 Z+ s6 V1 {: e
}3 P7 z1 N6 B' u0 V, K7 p
( _2 ~+ U4 T: H: f
function StartTimers()
. M8 E8 N) T! S L7 f. h' O) Y' R4 c8 b+ D. P# Y9 H
{ //set up an initial set of timers to start the shimmering effect
8 t. F/ M, p; ^: \, ~% U# I
: @ i2 K% A+ r7 y/ B for(id=0; id<numLinks; id++)5 g* {( ~; I" @
5 N9 [& y Q. D- E3 r N& Q0 c
{
, i. M5 h9 F @9 H2 N' a, ?4 y, n2 X
; K- Z% f" K- P! U7 G4 h t=setTimeout('startFade(' + id + ')', id*100);
0 ]6 s6 P5 s \. [+ X
/ p2 D# O) _+ S2 N! k/ _2 D4 Z( h }9 F. k4 M& h% q( Y1 o
6 Z* T: P$ E3 I& @1 H9 K( G7 P}1 }, Y" T( T: \4 t, o
. y4 u8 Q b) d' p. G* T6 j
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')) E- Q2 P* g$ r) k- ]
" {& i6 v6 O) Q8 \" I/ cinitLinks('#FF0000', 6, '#FFCC77');; n8 s/ h& R9 r8 I, C2 M
0 j& P& C$ w- o1 h2 {//-->& ^- x/ J0 G6 H C# q
! h" G4 C) C* o% ]9 `
</script>
1 Z$ \% ^/ ]) Q% a- z' J+ ?<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" q" L( i# S/ n( O1 X- D3 f$ V. B</a>
5 w, Q, c- m2 u Q( j1 U: j, U<br>
5 L# W: Q, a1 U6 t<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>& ], Y5 F s/ p9 x; R
<br>7 M2 p* ^: C! O5 A1 a
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 i+ C7 T" G9 C) l* T) ?7 M
<br>
; R2 T' E& I. [* _<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>- Y+ d9 T/ C& F7 V5 l
<br>
, C" C s1 J" p8 v* d$ z& b<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>2 ~' P, B: }! ]* S5 |
<br>8 G m: p: O3 I3 Q
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ }; L! J4 Q l+ ~9 i
<script language="javascript" type="text/javascript">
& P5 U/ p8 K! R6 j<!--
5 L% t1 s9 h# i0 W8 Q$ gsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering5 t& |9 Q. I! G% p& y3 {+ R: @
//-->$ x J) ^9 [8 U$ ^: @
</script> |
|