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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
* }: p; F' E1 [! h<!--
& |8 l* X! j) b5 s// convert a single digit (0 - 16) into hex. \: k* e. @/ k$ v* B3 k, m
function enHex(aDigit)5 _- ~" X: i2 ]4 |4 I
{9 }% K/ t9 y$ \ Q% |4 q& [
return("0123456789ABCDEF".substring(aDigit, aDigit+1)). R0 z% k/ w* w4 l. t: d, B
}
: Y, k/ B3 Z6 T6 A' z. A: j: |- a// convert a hex digit into decimal' I" j, s0 X( \8 Z7 ~- A
function deHex(aDigit)
1 Y2 J$ M, q5 l" I* Q{
3 S& Q- K% @/ Y- }3 u) S) V; s! O return("0123456789ABCDEF".indexOf(aDigit)): T0 L8 x) v+ E' r6 u5 w
}
0 u8 c, l7 C5 U* t/ V9 \! F, i2 d. d) H
// Convert a 24bit number to hex2 B; V% o$ l# O7 q
function toHex(n), k; M$ m7 g/ @
{
2 `3 J4 Z7 p4 k+ r+ O3 u& B% X5 |9 P return (enHex((0xf00000 & n) >> 20) +
6 L% O; q+ B5 X: Y$ Z) b- M enHex((0x0f0000 & n) >> 16) +8 B* T3 Y# e2 }3 l O" s3 w. S
enHex((0x00f000 & n) >> 12) +
! T% V( b) x+ b7 C3 R enHex((0x000f00 & n) >> 8) +; o2 D; i6 s; I: Q2 E( Q) V: N! a0 R
enHex((0x0000f0 & n) >> 4) + h. B4 D5 m6 E8 J1 V6 G
enHex((0x00000f & n) >> 0))
: h, F. ^- d, H- |, m4 A}0 O7 G2 }5 D1 b+ u0 l' \( r- k
// Convert a six character hex to decimal" J( Z @" E+ z# w
function toDecimal(hexNum)+ P3 G4 I5 Z) ~
{' x2 j( G7 C5 n- w9 N/ E
var tmp = ""+hexNum.toUpperCase()
4 z! X. @1 n; y1 I0 T- e while (tmp.length < 6) tmp = "0"+tmp1 w1 k! s' Y' I; S$ h
return ((deHex(tmp.substring(0,1)) << 20) +( y+ e8 `) i8 L0 j# K
(deHex(tmp.substring(1,2)) << 16) + 9 {: z; i4 b4 X: z( s
(deHex(tmp.substring(2,3)) << 12) +
8 _, t0 X2 ^3 e# p8 m (deHex(tmp.substring(3,4)) << 8) +, r3 E3 w0 k) i* }* u6 q" Z
(deHex(tmp.substring(4,5)) << 4) +
& p/ m; n+ F- W+ i+ r (deHex(tmp.substring(5,6))))- z+ y1 P+ R/ K/ q, h9 c
}; Q9 \7 K( n1 r3 f
///////////////////Shimmering Links/////////////////////
+ B6 \$ \2 i6 Y& A//global variables" { b: Y. P0 ?/ a0 H3 }' x$ S
var hoverColour
" m& G; F R$ p* y* L) u) F$ Y5 c" ~7 Ivar numLinks;
1 Z- D+ o4 Q; Q: I! J% v* m/ jvar rate;
; a& t% P2 D) I, t( Q% V9 lvar numFadeLevels;( `6 {9 c1 n9 r+ p- R
var bgR;& U. a: Q* |( n$ `3 e! c4 C* v3 o
var bgG;
( r" Q$ n l8 L, q- f6 hvar bgB;2 H' B* M* e4 X% R
var currR;( s# b- k% s# I. |
var currG;, c' s, x; }( P* L- U/ @+ S
var currB;, ]4 o! _+ o: G; m+ R
var count;& m$ P- E& z! A2 f
var fadeOut;$ s j* |- s7 d, l
var continuous;
4 c5 D D% L2 t: _var newColour;
; H# `' X, r! ^* G1 M( Pvar tID;
$ w) ]# p) V; t3 z7 Ovar redInterval;
1 F. A9 i. |6 a5 m+ n) Qvar greenInterval;! d' \, Q5 V4 I) Y( L v
var blueInterval;! L1 e' Z' s1 O9 Q5 }/ y, @( G: D
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
( W7 o, Z/ |$ `5 c( K{
8 A* y% `& V( n- n# w+ d2 W hoverColour = mouseOverColour;) o2 M) V, T) ^1 V
numLinks = numberOfLinks;
, b& I3 B5 f" f rate = 1;
8 G# @0 Y) R8 G& |9 ?& G, J& H3 ` numFadeLevels = 30;
; ~$ u) K& x. o9 c6 } function initArray(theArray, length, val)
$ L0 {/ B- d w7 \ {, n; A" i! P! n
for(i=0;i<length;i++)3 \. t4 K6 K3 R7 m8 b3 g ~
{
- [$ q$ _' w; v0 y- m- [' I theArray = val;: b% e- `# t! }2 O5 f) h& q& j9 G7 l
}9 |7 h0 O# ~2 t8 N* P& k
}
; k+ Q+ t, u: I# M8 @ p& H5 y. I2 v8 a7 S bgR = '0000' + fadeOutColour.substring(1,3)
/ Q' a1 S1 Z0 U& g( F bgG = '0000' + fadeOutColour.substring(3,5)
) Q+ q: C* m2 Y( A bgB = '0000' + fadeOutColour.substring(5,7)
% m5 w Z1 }' J7 q; Y0 I; b- S currR = new Array(numLinks);; k0 u) A7 y1 f& D, g
currG = new Array(numLinks);
9 S1 |2 n( F& j7 Y currB = new Array(numLinks);
' F# k% y0 g" C8 D- n v1 } count = new Array(numLinks);
' R# }1 q1 b; s fadeOut = new Array(numLinks);
2 R$ e, B$ C# T1 T5 b continuous = new Array(numLinks);1 |# h, i7 t% z4 U9 ~3 Y) L9 z
newColour = new Array(numLinks);+ w8 D; d9 {2 t- H6 @) \) y% P
tID = new Array(numLinks); G. B% @( ~+ F, w% j# W
redInterval = toDecimal(bgR) / numFadeLevels;
$ R) E! s1 X7 _3 D1 i5 A4 L6 L greenInterval = toDecimal(bgG) / numFadeLevels;0 z3 B2 {8 B5 ]6 D% ]) R
blueInterval = toDecimal(bgB) / numFadeLevels;
8 l6 ]6 e: o) h& D initArray(currR,numLinks,0);
' d& }6 H2 L- ?6 l7 Z initArray(currG,numLinks,0);. m/ T3 s0 w! B! z E8 ]
initArray(currB,numLinks,0);$ ?: T8 P# W. p5 p- y% v. Q
initArray(count,numLinks,0);
2 t* X( U1 n t/ u% F% Z& | initArray(fadeOut,numLinks,true);
* n1 J/ {: L. x4 s6 B initArray(continuous,numLinks,true);
6 h) m: d; d& z M2 i$ K% N}
( U0 A3 R( @+ }" W, Hfunction startFade(id); t4 n% h8 J3 F) G3 T( W, X
{
. @" O, k) y) r1 T* M- X( S, | if(fadeOut[id] == true)& M- [. _( I3 N: s
{ /*move colour towards background colour (increment)*/
. o* V' B% A) Y% M+ F7 d$ Q' ^ currR[id] += redInterval;
$ s, M5 R) j0 f; Y1 X1 a* M' P currG[id] += greenInterval;0 m6 ~2 ~3 b6 v2 V4 L9 G
currB[id] += blueInterval;. G% N: J: g- |: |
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! L0 {- P( v) ]/ k- j6 L, C; E) G if(++count[id] == numFadeLevels)
& a& N. }8 x5 r P {) M6 n5 k/ I5 s% X* ^- w7 a5 [8 ^
fadeOut[id] = false;
# g/ ^" g D3 f! s8 H3 i6 ~, {$ h }
* {/ Z% k! U# `4 T/ B" Y; C. P0 }$ v% y }
0 W$ r% ~8 f1 |$ N/ d. Q else
4 _# a; v/ f7 D) D {
# }9 q6 l: d8 q, U( u% r; }) z/ ~ currR[id] -= redInterval;) Q; b6 r0 `$ \% V- D2 |
* g" v$ X9 |( B8 D currG[id] -= greenInterval;
) ^- q1 w# I, |8 y7 U0 V& p# _$ G# d
currB[id] -= blueInterval;! o( ]7 J; u1 A- Y5 f4 _/ V
- Y. |, E* b4 O newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- x& }* f* \5 Y( O. k9 S
: P" t, `% c. }' W& E' S4 o+ S if(--count[id] == 0)* J3 @- [3 a p: ]
/ Y- \: F+ }4 l% w. {
{7 c4 {! |0 x* B: i" I8 I" M
! W, L) c$ s4 C" U0 }# g fadeOut[id] = true;$ h6 Y$ E( W3 N& D* ?
/ |1 [! }7 ]. |% }2 S4 j0 e) c0 w$ D0 Z }: q, C7 a# S, T* L
+ F& \9 Y$ k/ A$ I, I- d+ d/ R
}; u2 e) C- N5 f% e3 {. K% `+ u; d7 S
- {% t, u8 m B% g5 d3 I if(continuous[id] == true)5 u4 O! y; w$ S# |: o4 ~, m# g
7 i0 ?" c$ O }/ f4 i. G8 Q
{; O, P& Z6 |. }
* g; E5 V$ b! a/ J; @ document.getElementById(id).style.color = newColour[id];
1 {& m" ]- j: _ b- y7 C. z. V
1 S% r( k! I7 F& r3 W( Z% A }
0 q5 i2 {; s! U6 O# c a9 o8 x6 I" k; C u5 f
else$ n' f) |" v8 F. ]8 m
5 w; c* V& f% U6 u6 d$ H: H2 B {
. e$ n' V: R! v0 ?/ D5 t5 D3 v1 W" t; @- ?1 X4 @0 L( p) u6 U
document.getElementById(id).style.color = hoverColour;
% u8 Q1 ^* x! t& \
7 F4 \' x' W/ `/ R5 E }
. ~0 Z" s4 K+ t7 {. r7 `$ z' V* o" z X8 z4 }% J3 I! b
clearTimeout(tID[id]);9 ?8 U/ E' ^1 S }. N9 a
# E% _% l3 g# V+ { tID[id]=setTimeout('startFade(' + id + ')', rate);
$ C" m( w$ j5 t0 o
# S6 x2 G8 l9 |. @( |) `9 @( @}0 Y5 L' F+ c7 k3 j9 G! w
j9 a9 }6 K9 D
function continueFade(id), F0 _/ h$ ^# l5 H# Q2 _$ J
, N6 v) [7 A+ Q/ l6 ?{
7 k( g% }* k' U& w$ U5 m) f* D7 ]8 Y) B: K9 z5 x" N) D4 k
continuous[id] = true;$ F' d9 l' m: h7 v S8 h9 z
; n6 O/ \3 E) }+ x7 Q8 T}! Z; d. z+ y$ W d
: f. {) n& ~+ B3 gfunction stopFade(id)
$ m' J9 C L3 p' J5 }) r
. n7 D9 Z! }$ d7 \3 R9 Z1 R6 h& W: B{" p, R% W/ r& ?- ~
a2 w$ I) N8 q% q. J9 | continuous[id] = false;
4 g" D$ p2 @- e7 x. L% p1 z0 f8 K2 ?8 a& j, K \5 _( w1 V
}
6 X' c6 R. O4 ^) X9 \# x5 w/ { B4 Y$ n |
function StartTimers()8 O9 w& N7 F/ v* B# h
& n5 T: K" y. n' J{ //set up an initial set of timers to start the shimmering effect
/ d) ?' \. m' W# f0 |2 m
2 S( B9 b3 ?! A1 O% f8 ] for(id=0; id<numLinks; id++)/ G' t" Q1 _. j n
* g' E) |) V" K. @/ M6 r" Z0 i
{, u6 e# M0 h- Q% ^
9 A/ e1 Y; X6 R- m& d, T" ^3 `
t=setTimeout('startFade(' + id + ')', id*100);
: B3 R1 S" G: Q* V! ` ?8 k6 s. G9 R. _; Z
}! M; \3 l; T- B+ h: @5 ?3 w
u8 f; e: x- F! n+ ?}
; B) d4 z6 |$ G, {
- P( w- h' z" O [. F0 ~8 d8 e//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
! k0 w' {% r' k, C6 B' \' U$ d7 n( {0 ~! h& _$ X
initLinks('#FF0000', 6, '#FFCC77');
* x. C& c6 Y7 G- M" O+ e9 K2 t9 V3 C( r% \# q
//-->* R; x- `1 f5 s# o0 E' I$ a5 c/ v
# I/ m1 n+ w u* p
</script>& c$ o% T0 B1 X; M. n, Q3 o8 O
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元3 f7 ]# J) s4 R n, R
</a>
6 _% [( J& ^( d/ ]" Y5 E<br>- t" ?& w2 d& C. b) w
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>8 ~8 K: ?' @3 Z$ ~* @2 d- |$ U
<br>
, q% E ~: A, y5 r. @<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
5 B6 H- m& n4 S5 t. q8 Y' _6 ` `<br> ) a3 v, S+ I# p2 Y
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
8 {! Q+ a. p2 r# i- S$ l! r& a. f<br>4 m ^1 r9 r R1 ~% N2 X* q
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>" Q4 Q7 i* Q2 }4 O( q4 Y
<br>
# _. w5 ~; v9 W2 D" k6 m<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ t8 B% ~& T9 d! N$ k1 m7 v0 q+ [" r
<script language="javascript" type="text/javascript">
, J* t5 y& \4 I# ~% _- P! }5 q<!--/ {5 ^4 y6 J# P; x+ s$ S
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
; Q7 o6 P1 _" t' B( X' a4 j//-->
1 i4 s+ t& E N8 R1 e ?</script> |
|