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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">" \5 v3 V, m9 h5 f+ G% D2 p
<!--
) v0 v+ [( d& m; k// convert a single digit (0 - 16) into hex
# m$ `" Z9 I1 {1 a1 O7 lfunction enHex(aDigit)# a& g4 e3 }4 l2 |- h8 b3 b
{
. @2 h6 S$ P2 M+ G return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 k* D, P6 ]! a' e/ x. T. B* m, t}5 h3 c/ q( B' D' X
// convert a hex digit into decimal
4 e+ {2 \+ C/ I- S5 D, f, lfunction deHex(aDigit)1 p& V" Y5 ?& d* T; @
{
! Y- B! _3 h; p( \$ f return("0123456789ABCDEF".indexOf(aDigit))
) J8 z" x" d: K' e}
* M- c+ ^* i, Y, h$ b0 B6 `5 {& z7 r, h& i
// Convert a 24bit number to hex
* T; y- Q9 |: P7 k; \function toHex(n)5 N' L. M8 k: v( L& y0 f% N
{
0 @8 C( \* [# k0 V3 r return (enHex((0xf00000 & n) >> 20) +
1 B/ t$ z! w( C! r% V# o& e enHex((0x0f0000 & n) >> 16) +' }1 E# b) ]4 A8 N; ~* u
enHex((0x00f000 & n) >> 12) +
- Z/ h) L5 [7 F* \& _5 a enHex((0x000f00 & n) >> 8) +4 g. K! H2 `! q* ^. B4 d
enHex((0x0000f0 & n) >> 4) +3 Q) w1 ^1 o, @# @0 T
enHex((0x00000f & n) >> 0))! A3 F3 k$ T+ B! e' Y5 R% r
}
0 c5 R: X" }0 j7 w7 o// Convert a six character hex to decimal
% s G" g ~ ~" X3 E* p6 i+ tfunction toDecimal(hexNum)6 N# X3 c D& e# T% z; @
{& J* Y. B( E5 H" Z: T: z
var tmp = ""+hexNum.toUpperCase()& _9 k0 ?: T2 \2 G
while (tmp.length < 6) tmp = "0"+tmp+ J% H6 |3 d, F. U. F- A
return ((deHex(tmp.substring(0,1)) << 20) +
) T0 B: Y. @7 K0 [; f& u (deHex(tmp.substring(1,2)) << 16) + 4 j+ p, N4 [$ @8 P6 u+ K6 T! J+ K- Y4 G
(deHex(tmp.substring(2,3)) << 12) +
9 x$ z% T& N% J1 [8 n2 Y (deHex(tmp.substring(3,4)) << 8) ++ M# S4 b( y, }# ^
(deHex(tmp.substring(4,5)) << 4) +' |" ~9 b4 k( v
(deHex(tmp.substring(5,6))))# H( b2 L0 c- h* @4 j/ k: B
}& m% d0 ?9 c' G8 Y. v' q' h. ?
///////////////////Shimmering Links/////////////////////
, ^* w8 f! c/ f6 ]+ A' s/ J! D//global variables, ~& Q1 I/ M2 a" y7 x
var hoverColour+ p0 y( H3 t$ \, H3 P6 M" S% S
var numLinks;
! P; B) G6 n; ~& N5 @: fvar rate;
5 K' ?. L8 T2 f. G# J4 Q% Tvar numFadeLevels;- u4 {! U! q- ~
var bgR;1 u4 G5 S/ c( Y. }* B6 g
var bgG;
2 }$ \' b3 ^$ \: v% z& G0 tvar bgB;) r9 }- ?5 z# S g( p( n
var currR;1 u, ^* [7 H: c9 ]9 D8 t2 ?1 k2 H2 [
var currG;0 k$ V! d+ R) j4 C. J) d
var currB;
# q3 O2 r7 U& n4 n+ h/ |var count;% R f+ D; c& s: g
var fadeOut;
: s4 r! Y7 d6 {, z K' ?var continuous;- S- V1 O7 w* {4 {* t. c# m/ C
var newColour;
* V8 Y2 W: i7 C+ z: ?var tID;/ h' _; }( X+ p5 r! P9 T6 ?: ?8 P3 W
var redInterval;- W8 U6 E/ C$ c; ^; e( J
var greenInterval;+ F7 _0 d. y; i- ?
var blueInterval;- a. C7 \1 F( T5 D y0 U z( c
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& g9 A1 z8 X7 x0 b{
) ]" w, ^& w2 M" H4 t hoverColour = mouseOverColour;
* c U' `8 x* b. @$ U9 L, ` numLinks = numberOfLinks;1 w' T8 K( U- |* o# ], T( `4 [0 x
rate = 1;- ~1 [6 ~0 o! t, _! F
numFadeLevels = 30;7 d) i D& X8 ?6 \7 S/ D W3 R$ D- i
function initArray(theArray, length, val)* A$ W8 M( p& b1 v3 q1 C/ K: n* L7 g
{/ s9 ]% s2 W8 H/ ~, H! E
for(i=0;i<length;i++)
* u/ n) ?* z+ ?8 }# r* { {
, X. J" J( k; L' Y& x* B/ Y theArray = val;2 Y: T. Z" H v2 h/ R& Y) \$ x
}
/ Q6 v f# Y, H7 L5 r9 Q }) o% m( J1 d# r- y) V
bgR = '0000' + fadeOutColour.substring(1,3)
! ]7 E/ a4 @. `" k, b( Q bgG = '0000' + fadeOutColour.substring(3,5)
: a# ~& k3 ]' p# q- L bgB = '0000' + fadeOutColour.substring(5,7)
# B* ]3 t: Q' `. I currR = new Array(numLinks);
" P8 R; f; j% T9 ^9 z j5 X currG = new Array(numLinks);
6 R4 R; t) x* j currB = new Array(numLinks);7 W, v1 U! q4 t
count = new Array(numLinks);
5 x i3 K; S/ b' d+ q4 i fadeOut = new Array(numLinks);
, m3 }8 s) `; C continuous = new Array(numLinks);2 K" q0 `6 {% M. P$ F
newColour = new Array(numLinks);
$ T. u' v% S- u, x tID = new Array(numLinks);1 [* ~" a6 o4 A" P0 r, A
redInterval = toDecimal(bgR) / numFadeLevels;
s# o" C+ u7 `) x" F& k8 i greenInterval = toDecimal(bgG) / numFadeLevels;
`; I& w1 c6 o4 ?# V9 u6 P blueInterval = toDecimal(bgB) / numFadeLevels;
s& _7 k4 [% ?- ~ initArray(currR,numLinks,0);* d# ?3 B+ M+ `- C7 V
initArray(currG,numLinks,0);
1 E& f/ Y- D' |- i, N initArray(currB,numLinks,0);% d" m- O+ F% e$ Z9 y6 t" E
initArray(count,numLinks,0);8 H: v- r9 ?4 V6 j# H' w# S+ Q
initArray(fadeOut,numLinks,true);
# `" Y% o% U9 [0 } initArray(continuous,numLinks,true); w) S) `1 t! a5 g! t& \
}
1 u1 j3 T" C4 a: x0 K$ zfunction startFade(id)
& [% R& U# Z, e: }. I{
! \+ A6 g! \; J) D5 t# H if(fadeOut[id] == true)
4 t" O; T/ n, [6 s, y8 Y { /*move colour towards background colour (increment)*/
0 m/ }# o) b+ Z6 \* F% Y) |2 | currR[id] += redInterval;0 L# K' }% h* t: t( h
currG[id] += greenInterval;1 h8 ]( S% F3 ~, j
currB[id] += blueInterval;& o# G! ]; `+ I# j0 E& {
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
K \0 o8 f7 Y+ S if(++count[id] == numFadeLevels)
. L' s: O* P# E" q. R& K+ V {
2 e+ @4 p t* ] `0 e. j% c2 V fadeOut[id] = false;0 \- n( y( ~+ P! p. C5 y
}
6 q9 e* h5 y, w* } }
4 _) z! G7 V) p( z% p( {" U: s) @ else8 ~2 A! z1 F. a, {
{
( k @7 K1 ~. D currR[id] -= redInterval;
) l" f" f, y4 \' c# G3 ~* X! t- r' X$ {. }& Q; ?; E
currG[id] -= greenInterval;# R* H- N G' `; z* |0 X
4 b: c3 l# p4 E3 o
currB[id] -= blueInterval;, g' B) @7 `3 }9 O' O8 G9 J' \* G' J
5 p, p! B. @: `* a newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- ?* n w6 U3 A- B
7 _3 f% z; i+ W* ?' t if(--count[id] == 0)
) c0 c( V: I( A' o+ ~, w) y- A( n. \3 y) o* s! k, `2 U
{
5 T! b0 _$ K9 I) N: [9 E/ T8 Y1 O, W" m( v
fadeOut[id] = true;
2 p$ B" }. B1 X3 K
5 `$ {* {6 }/ g) p4 O; N' B& E }) f# ]: V; r* }: A$ n( `+ m
8 E! M5 l9 t, l* t5 X% \0 c1 s7 P }
$ \4 C+ r! [) L' S' W E0 e& R$ D! k( f
if(continuous[id] == true)
. H3 e' w8 o. z, p* i- n0 P6 ^* ~7 g" C5 T, w7 d
{7 b% h4 l. t' I" b& V+ W4 q1 `1 L$ F
: {3 g o! ?% M) [/ I0 l document.getElementById(id).style.color = newColour[id];
2 ]6 e4 h x; D* E7 _+ R. P0 g9 ]9 J2 l0 p
}
4 w/ u+ B3 M- U5 @6 j# x) f5 S2 P0 c( {2 g# ]. b
else1 x, S( T9 c3 j
. W3 _# w* M9 V( _. n9 D7 }' T2 V
{' n2 N9 W! Y) [; ?' ]: |
a8 h, S' y9 z& n
document.getElementById(id).style.color = hoverColour;
) A2 J, b. S/ `: u5 j+ T; x0 C0 l- Y9 Q4 i E" F, L
}, [' ?! S4 _, D+ L
! y& e0 m6 r% b clearTimeout(tID[id]);
- k# D5 U( y3 D9 l2 l7 k: Q; l1 z0 N9 v+ s. z
tID[id]=setTimeout('startFade(' + id + ')', rate);$ W: i8 V/ V9 k1 ]: v+ D
& z% |) w0 A3 M. J, u0 _/ b0 p" [$ C( L d
}
G& O3 r( U, [# B, i0 m. {4 V
# P1 c4 R: @6 ^) Ofunction continueFade(id)
! `( ~: W* C: B, h3 z' N" B8 G- W) h# S9 O" A
{/ p0 n' L' U) F4 y
8 O8 q" R y O continuous[id] = true;
" W3 w: t/ s/ k5 e. ?9 G' u4 K @+ M9 n
}
; h7 s" @' W% I3 I
8 y9 v3 l" C2 g" {5 U- {function stopFade(id)
; p7 a- o* E6 i4 y
7 L: Z4 F; A/ w* p- l4 S1 T{
% e+ z( x; `/ {" F) c n$ P
6 I6 W. c) n; o% Q' q, D continuous[id] = false;3 m) k$ B' |+ O) J# a
; J+ D3 w( y7 e( M. H}8 ?' Z1 P- c/ K/ `' o" q6 y& F
0 _5 Z) q) k' R! k- v. W
function StartTimers()
) {, m. G: C6 c1 ]* Z# L& K+ o2 ]5 u4 m- h
{ //set up an initial set of timers to start the shimmering effect
6 `6 r' u! n Z3 p- H) j) Q9 D
, u3 y. x) F3 F6 @) S+ F for(id=0; id<numLinks; id++)
8 t! Q9 f7 E# \; Q" E' h$ ^' K3 _4 ^% i# M! b
{
) i1 C* \( N! q* x8 e& A( ?: L" m* b N1 P* W% Y: r
t=setTimeout('startFade(' + id + ')', id*100);
5 x8 o2 k6 ]3 _( g, d# P2 D" ^; X: q; K! H9 Y4 D4 i4 R0 m# N
}' ~0 e G- Q9 \' q
- F, V; W" A9 n. h4 e$ ^}
+ h$ _- ^6 J z/ ^# P: \! ^5 [3 ^9 N
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 Y4 q* s7 m' b# ]% \* F
! ? T) G8 ?! xinitLinks('#FF0000', 6, '#FFCC77');
& N- P( Y8 c$ m \$ M: o. p7 A
; g3 d& u3 ]: a8 y//-->! z" `8 x) I+ c. \. V! l
& x( _; Q2 l- I% s6 l</script>1 J2 u7 m% Y5 E0 S8 y
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
+ R/ H0 B+ f% C% B3 H</a>
" r9 y0 q1 \& Y3 h: X<br>
6 y9 W, j. n3 B) X# _/ |0 w$ I# D, H+ ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
: Q3 H, g g. d<br>, n" ^$ F8 U$ ]! X
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' C& V3 G' Z0 G& U<br>
3 c* D3 m) ?0 {$ X& y* x) B: @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>, _1 G* o% Q7 J' d- P2 W
<br>, [8 M) X; f6 V# S
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
2 z$ R8 _. G0 M5 p<br>3 K! ]$ j/ O# w5 n' |
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
1 |$ h) y: {) \: M' T<script language="javascript" type="text/javascript">
! i' W% A3 V: a9 t<!--
3 G3 c1 g" H5 i$ w% \& @setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering+ ^# C. a. r8 N3 z0 q& ]/ \0 i' I
//-->
; Q& X1 l; Q @8 x4 z5 C* l</script> |
|