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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
+ _; j' _/ x& d<!--
' l# f! g1 n( e! `// convert a single digit (0 - 16) into hex
+ n$ G+ J7 Q+ E: n% H8 }function enHex(aDigit)
1 i0 m$ T2 }: _. y5 x) D{
$ S7 W/ l- m) n return("0123456789ABCDEF".substring(aDigit, aDigit+1))( P5 q T( k2 b0 Y+ V$ N" m
}
" A. h: H+ E3 U( Z N8 X// convert a hex digit into decimal4 d* n3 }/ ~2 m# W8 |3 E) g7 f' V
function deHex(aDigit)
" ~. |) K/ B/ N/ k{
5 @7 a+ o0 w" g return("0123456789ABCDEF".indexOf(aDigit))
1 w4 ^( C4 S9 }+ @- R}
6 Y) X) o7 ?% K) r% x- R; N$ M1 s2 V/ }
// Convert a 24bit number to hex
Z% l0 _: L1 |- ofunction toHex(n)0 g$ {# j7 N5 p* g: Z
{
$ h( N! _0 t j- j return (enHex((0xf00000 & n) >> 20) +3 {9 `. R3 v7 l0 K
enHex((0x0f0000 & n) >> 16) +
+ K- @: Y) I8 D2 O) D enHex((0x00f000 & n) >> 12) +
) a/ L# D# }. @( H8 x9 h) z' R enHex((0x000f00 & n) >> 8) +
& c: U. @% M! h+ _ enHex((0x0000f0 & n) >> 4) +
M, u8 B) [5 O! L enHex((0x00000f & n) >> 0)) `! ?, c4 Q$ p0 a% ^
}
- f' c/ D* Q9 s/ d6 A7 Z5 I, V# H; X// Convert a six character hex to decimal1 _$ r- \8 M! q3 B9 j
function toDecimal(hexNum) u8 M8 w5 w) J$ c5 b' g8 F
{
2 M4 x) I% P" i! C6 i6 e var tmp = ""+hexNum.toUpperCase()
( |3 j* A6 m* Y$ a* Y while (tmp.length < 6) tmp = "0"+tmp4 g& S7 f9 v. k- M% p5 f
return ((deHex(tmp.substring(0,1)) << 20) +
D7 [/ Q& t) `( Q! V% z5 R (deHex(tmp.substring(1,2)) << 16) + / O' Q* T& W1 X* d
(deHex(tmp.substring(2,3)) << 12) +
. l1 M( G( k0 o) Y" ] (deHex(tmp.substring(3,4)) << 8) +7 w5 f, x0 X3 F$ L m: i* I
(deHex(tmp.substring(4,5)) << 4) +& F1 }, Y' j, X1 }
(deHex(tmp.substring(5,6))))% K [/ K- _: e' v3 P, E
}
6 x* L1 x# l( |; ~, W/ a( t) a; t///////////////////Shimmering Links/////////////////////3 ?4 R0 ^1 u9 r2 w" A
//global variables
# d* k1 Y; Q) W) _. Qvar hoverColour
$ C" F( ?' [0 b! I }% H Y7 Ovar numLinks;5 q" S# h! i+ f) Q, Q0 @+ ~+ m. v
var rate;0 d# Z, D- d" |: l5 j- b0 z
var numFadeLevels;
$ h& a0 E5 l4 j Z3 Svar bgR;
+ h1 K$ z9 _! s& r2 Lvar bgG;* H, [" _7 C2 _0 w% X5 b
var bgB;
, [5 K7 ^' I5 m3 ]: ^" cvar currR;
! ^( Q; _) p- R* ivar currG;# L9 z6 g" f! X! a B" @
var currB;9 v: x6 e# J( T. Z+ C# N- u8 Z+ Z
var count;+ p1 j S7 E. k7 J% z& [8 s5 ~; q
var fadeOut;/ f" q7 H) |2 p5 z" w- R7 y
var continuous;
5 V! ~" u Q, Q9 n9 E, ], [var newColour;; Y& U# V, x3 E: X
var tID;
; T6 g3 \, M/ A% g0 t9 m1 K! X( Wvar redInterval;6 [# O$ a& o+ s
var greenInterval;# L. x2 o- A6 B3 G" H
var blueInterval;
& p# q* ]1 u8 O2 g3 U; ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 i9 S' Y& T5 d1 c{: x; h0 o, H% J0 Y
hoverColour = mouseOverColour;, ]8 l# G4 o5 y. Z( R* x
numLinks = numberOfLinks;4 J" A+ k( o' ^* b% s; C
rate = 1;
2 T# h" @/ s) E7 |8 l9 Z+ p+ i" V numFadeLevels = 30;
9 s3 v5 C3 b" W' ~3 G function initArray(theArray, length, val)- F' ~! S( `$ q, K2 \4 U9 S7 v
{
/ O" c5 C/ i( n- A1 d+ P& O for(i=0;i<length;i++)
9 a }2 n2 d3 W! E5 g" j {+ f: A' q [; R+ _( c: Q7 m
theArray = val;1 Y" `$ X, s" j5 o& T. X/ Q
}0 n s6 p' n' l! E
}
, |1 M' x3 h2 v- M$ [# c# L- w bgR = '0000' + fadeOutColour.substring(1,3)0 g- p; a$ k C" f0 ]
bgG = '0000' + fadeOutColour.substring(3,5)
/ O1 `: n0 y) P9 t; e bgB = '0000' + fadeOutColour.substring(5,7)
. a% h0 i' R% p: c- m! u1 i( G currR = new Array(numLinks); m5 p; d+ A; w5 }! W5 c
currG = new Array(numLinks);
! a6 Y( q# }5 ]# t; P currB = new Array(numLinks);) E2 X5 S! o9 A3 [, {" e" A
count = new Array(numLinks);6 M" l0 F/ h$ F; _' D7 f+ p* F; y
fadeOut = new Array(numLinks);
+ H8 o6 D! ~! V# R continuous = new Array(numLinks);
) Z r$ ~9 G3 c' j2 { newColour = new Array(numLinks);$ g9 K W7 E8 \+ n" R; U
tID = new Array(numLinks);
5 Q& |, y2 r: X7 r% c2 i; p2 n) R, Y redInterval = toDecimal(bgR) / numFadeLevels;
5 l8 ? p) |$ h, O$ g/ | greenInterval = toDecimal(bgG) / numFadeLevels;
# b2 A6 r9 i$ ?( R! | blueInterval = toDecimal(bgB) / numFadeLevels;
- I( ~7 ~ t6 E" }& s8 B initArray(currR,numLinks,0);
! c3 @5 w( ~! c' W( ] initArray(currG,numLinks,0);& s- X% g# l+ D* C2 q2 d( a) R# U
initArray(currB,numLinks,0);
5 [2 U9 b& G; `% L: ^ initArray(count,numLinks,0);
- h8 e6 j9 ^8 g! D! y% Z2 f' @ initArray(fadeOut,numLinks,true);# @8 g) N4 }; w2 b, ~7 F
initArray(continuous,numLinks,true);$ [# g1 M6 \+ a5 M1 \9 }( l! x
}
; O' C% [6 {- Z+ |function startFade(id)
: J+ m( [6 ?) f' V{
2 e+ V1 [/ F$ r8 d( f# `, M# l& K: m2 m if(fadeOut[id] == true)0 U q7 v9 A0 l* v! L; `4 g8 j
{ /*move colour towards background colour (increment)*/
m( T) m' D+ H- G" R currR[id] += redInterval;
" M8 b! C9 p+ d2 X# _. ^ currG[id] += greenInterval;4 t2 t9 ]' m6 ?0 d
currB[id] += blueInterval;) }" ]% t, L. d; j( F
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, j3 `9 z: m% S" ^7 H
if(++count[id] == numFadeLevels)
, P4 R( a0 |/ G% H {2 O) C0 @. V+ U: P
fadeOut[id] = false;
V; T& P/ O1 M }5 `$ u# d/ E5 f- w; X+ S4 Z) Y
}
% u; @$ b! }8 H3 p else; |, Y% h) E# _4 ^+ W
{
$ ]; |2 z' a8 k+ i% J( g currR[id] -= redInterval;
' z+ L0 b# Q2 u |1 M2 \# H4 g& L" W4 r+ d. A1 k5 v% m0 U
currG[id] -= greenInterval;$ S5 @+ J' i! I% L3 j- v
; B; f7 b) y2 l/ k9 u; G8 f
currB[id] -= blueInterval;( V: _- O3 D) u- R( e. C" J4 E0 }
" Z0 L, P0 ^4 T9 X& c5 f6 A3 Y+ `7 u newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: u2 V1 V& j3 c3 u& K% d- C: {4 W! I6 ` F- ^. w
if(--count[id] == 0)' P2 S! f0 g( e- J
# V- _9 L9 q$ p# S3 b {
( ?4 J m: C! ^) e7 O" f( t6 _
- T' p: C5 m! {8 e* m fadeOut[id] = true;6 g. ~8 _; ^4 e& M2 b
/ {, F) n$ i( T9 c7 u
}* s- ]' H. K/ l" w" b5 f
/ t" A1 B! t4 a4 m; c8 y }6 A: ?7 V) E1 U3 y
- ]2 F) l. l& |' o3 [
if(continuous[id] == true)+ y7 N2 ?9 D! M! Y2 v" `
' q% v( G% ?- U' i% }5 W# W! G/ m
{
/ O$ t8 d1 U9 {. r' I$ v# u8 J9 Q1 U4 `3 \
document.getElementById(id).style.color = newColour[id];
8 w' h4 B; |% U5 l1 E% Z' I5 }" I: p' g7 q7 ]
}
! |6 r/ ]( ~0 T9 X7 a: G0 U8 c* j0 b+ o0 ~5 z/ ?# u& E
else
4 ]$ F3 f9 p" v1 s* |8 f. |2 J, i
" q8 h9 f* q2 X, ]- A, K {: u2 W, U) O- D3 n5 d
! y# k! @9 C% y q" t
document.getElementById(id).style.color = hoverColour;' A6 Y6 C7 Q) H* C1 z
* f! e& W5 _- l' _) z: i! e }
/ c( m9 d0 W, H0 l, ^- K
& F/ |& r# a8 k; J* H1 J! D+ Q clearTimeout(tID[id]);1 w$ _+ D# ^2 o. @- q9 K( e
& ~7 n& X7 T) A% s) O
tID[id]=setTimeout('startFade(' + id + ')', rate);* Y4 A. K$ f$ l1 h- U6 f% c
' Q+ L4 y9 t2 H4 F7 ]}
6 X$ j- }2 z, N- f# Z+ h
9 _) g" [4 R3 s. E" mfunction continueFade(id). S( U& i0 _6 P- X1 _8 m. X0 y5 ~5 L
- W0 M# J, q! K+ Z8 V+ H4 [9 N! F{
* D4 r' |% z" l2 I9 H' }- T% r
: L$ E2 ]7 T g7 |$ M continuous[id] = true;
6 N$ k, g& B) F& S2 `0 p' X; D& A3 W: f; D6 m r
}9 E. a# ~% h& m8 _( o
/ {5 ^* i0 h. r1 R) ]
function stopFade(id)2 M+ d0 y' R6 Z1 K! L# Q: r( s
) @# {0 F. d0 b t% j5 i4 z{. b/ N& ^0 I! D
: a( T+ y. W1 _
continuous[id] = false;
_2 } p3 |5 c0 g1 r: I: ^+ d/ l0 g3 p
}1 m; I( i' O; X$ S' {
) d1 ~7 D {; u) ?( m5 F- ~. ffunction StartTimers()
% b1 l% O C1 `% S( s& y5 |6 @; E% h3 V3 S/ \2 b
{ //set up an initial set of timers to start the shimmering effect2 E+ q3 x5 @+ ]) _
* N: J E" G" y& O' W for(id=0; id<numLinks; id++)& _0 I! a6 l& }6 _/ T! b! F
6 ~4 b1 o' J9 `# U
{+ r9 ] F6 m2 t8 i& x0 j
. a, I7 c' }2 G# F8 _" ~ t=setTimeout('startFade(' + id + ')', id*100);
! H8 C0 J( Q3 n) P! N" `, Z% C, N' \) M, p+ |7 a
}( Y, @6 m& w- k1 m! Z5 c
+ s4 X$ m* o; ?. n5 P4 r, q}0 i* F h% @6 q$ @/ E' }
) L* g) A! t: }
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; Z: i# K0 d8 x& A' p" U) J5 K2 H# \; t% L; ^
initLinks('#FF0000', 6, '#FFCC77');% F$ Q8 E1 w" |$ _7 I1 u L9 X
. ^' _9 g& ^9 [5 v: \+ |7 K//-->$ a8 E, v! b! S. W2 A0 f
' f0 ^" C1 d _# j; t# y, I" G( J
</script>
5 {( u% l9 `3 f& L+ z4 T/ V<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元& }# R' x; P3 K, h9 y
</a>% s! |0 B5 @( \% f
<br>' v* z: L0 q1 V4 Z
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
6 \! T1 A7 h' E( U<br>
- [! r! w3 @) g. z* h7 T5 |$ v<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ y6 b7 s3 a/ d8 l' M- K<br> 0 S1 K, }5 g) E+ C7 m' J% B
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" d9 W# b& g N# ~
<br>
8 g2 G9 r6 @, z4 x<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' [" N9 O/ [- R- |( E% b, W<br>
7 K. Q, T s; z! A( u" p$ o1 S<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& s& M3 e/ U1 Y: ?$ N
<script language="javascript" type="text/javascript">
7 g, Z" c2 T8 B7 b x P<!--& V4 ~- I8 P3 [* W0 { u8 E- H5 i1 f3 m
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
: x2 r! e+ t g! o//-->+ g, ~$ X; E- A" e5 f
</script> |
|