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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">9 k$ e6 A# [6 w5 q
<!--: f( f* h! U) h5 w7 U: [
// convert a single digit (0 - 16) into hex
! Z$ O& W4 K O' {function enHex(aDigit)2 Y; o3 h, V9 ?- ?! W
{
4 ]+ s2 a; }, n, W: a; S% } return("0123456789ABCDEF".substring(aDigit, aDigit+1))6 j5 _4 ~$ g3 O3 A) y2 V$ T
}
G$ n4 V' y" i* U/ K// convert a hex digit into decimal
) J9 j( d0 E/ y7 f" nfunction deHex(aDigit)
# r2 ^( y% k8 m; P0 w7 I& d{6 L- q2 q* c8 [, A- ~* P; d
return("0123456789ABCDEF".indexOf(aDigit))
& ^# G0 s2 T3 G0 I% ^) Q' i; R}
1 Z+ H6 J7 ^ _- p+ f* w4 v
, Z7 G9 d+ T0 k) s; c6 f// Convert a 24bit number to hex0 a% v0 B& j, E8 ?3 h3 A" _7 _/ K
function toHex(n)
h! n: g! X, i7 k! m# I{: N* \4 u. O" A
return (enHex((0xf00000 & n) >> 20) +/ D3 I: k5 Z1 _( u
enHex((0x0f0000 & n) >> 16) +
) L$ a9 Y, J$ R: z8 M* U$ X# [7 d enHex((0x00f000 & n) >> 12) +/ }6 y( c& o* z# Q/ r. k
enHex((0x000f00 & n) >> 8) +5 J& I) A$ D8 O w
enHex((0x0000f0 & n) >> 4) +
0 e8 n1 \# x& t: @3 l& e/ _4 P enHex((0x00000f & n) >> 0)); \" n m1 N/ W) Y
}* {1 i. {' I7 P
// Convert a six character hex to decimal! J; u8 D" a `8 i3 @/ ?
function toDecimal(hexNum)% o" m* e/ U' P' v$ P/ z, h
{+ R4 g2 C# {2 ?- j" e
var tmp = ""+hexNum.toUpperCase()
) S; Q; f4 L/ j+ Q! W' E while (tmp.length < 6) tmp = "0"+tmp
' L! N* y O) C( N% r) K7 ]! ~ return ((deHex(tmp.substring(0,1)) << 20) +# A& K) n; K! b9 O: h1 h, e" O- @
(deHex(tmp.substring(1,2)) << 16) +
5 J5 d7 O8 z% J" P) O# {, g (deHex(tmp.substring(2,3)) << 12) +- `9 C: m4 K4 | w; Z7 ? f4 m) c
(deHex(tmp.substring(3,4)) << 8) +/ Y# B/ B: ?% f5 p; S D
(deHex(tmp.substring(4,5)) << 4) +
9 P1 q/ p2 I* X1 a! } (deHex(tmp.substring(5,6))))9 p$ L1 c+ K" @ p1 m+ j4 s; T
}+ V2 S$ s% r2 B9 p% T. k3 D
///////////////////Shimmering Links/////////////////////
" q% X" h8 @ w% m/ ^& {( V% Y//global variables7 i+ }* R! n4 s. {- k; _
var hoverColour
9 f7 u S. |4 O& ?/ Evar numLinks;- U) P& m+ `! Q( b1 `; k
var rate;
- t/ o9 R& V4 X, z, Qvar numFadeLevels;
5 L8 ]( k+ N% dvar bgR;
1 _8 D) s: V3 g) `var bgG;
3 v w5 N1 T3 Wvar bgB;
' ]& a! v. A0 T7 m/ I' Y! ~var currR;8 `9 F: S8 z' r: D& ]- h
var currG;
' x, {- C- Z+ l6 o" \; `var currB;% H8 Q4 i6 S& o
var count;
2 V2 P: m7 ~8 w; Qvar fadeOut;3 p/ k5 Z4 A; `# W) ]) }0 P; f* J
var continuous;
! _( D6 D, P: s: Cvar newColour;
+ X1 u! s; K- k- b/ g* a7 _var tID;) K/ B7 B' B+ l v+ v% G; w8 @- |9 z
var redInterval;* ~+ }) C( B8 l3 n5 d
var greenInterval;
0 T- T$ Q, z9 [% e& L; j1 Mvar blueInterval;
9 E. _& R6 r: L; O% h/ g! v- Mfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
- J3 V2 h; l, d$ ^5 n( f{2 l* c8 N! f3 ^4 v. c
hoverColour = mouseOverColour;
% d- z% a2 w8 P+ {5 b' M* w) H numLinks = numberOfLinks;
% q$ r; h2 A4 c rate = 1;
2 x3 z3 E! D0 Z" ~1 t9 z" H* h; n9 T6 G, m numFadeLevels = 30; Y y/ T q5 j- c# ~
function initArray(theArray, length, val)' M- b4 U; ~' L$ m# k/ q( K% R0 b Q
{
' S3 [& m" R d2 c for(i=0;i<length;i++)! a* V! S5 D- G2 J& v, ~3 V' N
{# Q) |: \+ ^' e
theArray = val;2 x* X( `% N" Q# ~* C
}- d& o5 W, d# |. h' `. L* s
}7 V/ h* i. @' `
bgR = '0000' + fadeOutColour.substring(1,3)
9 i4 J1 E% ]2 u9 ^" S bgG = '0000' + fadeOutColour.substring(3,5)
1 a7 V- N% J* _5 x2 H bgB = '0000' + fadeOutColour.substring(5,7)
$ e% s+ _5 H/ s ]$ \ X- J7 \ currR = new Array(numLinks);
3 _ W" D! ^9 w) c8 x# I. q2 J# ^. b6 u currG = new Array(numLinks);2 U# n* G8 v ~0 H) v) q
currB = new Array(numLinks);
# w1 w+ |" Y8 B j7 g4 l. q count = new Array(numLinks);- {5 w! J; H$ ~/ ^& M
fadeOut = new Array(numLinks);4 y! V) j6 p/ X! I/ q
continuous = new Array(numLinks);* X* N5 j2 i" c3 @! v
newColour = new Array(numLinks);
/ f4 J; T( F0 i3 s tID = new Array(numLinks);* B( P8 E3 F- n
redInterval = toDecimal(bgR) / numFadeLevels;8 y$ `. M. A( u: D
greenInterval = toDecimal(bgG) / numFadeLevels;
" s" e; ?; _; U7 z7 e blueInterval = toDecimal(bgB) / numFadeLevels;
% T; m! b! j k initArray(currR,numLinks,0);
) W4 A: `) N5 Q- m1 q& f( V3 A initArray(currG,numLinks,0);
+ K) e$ O& r9 J initArray(currB,numLinks,0);
" _# \3 ? ?& }( B6 w initArray(count,numLinks,0);
( K& j9 r$ z8 E8 J( a+ N initArray(fadeOut,numLinks,true);
+ i& P7 g5 R' J; I/ o initArray(continuous,numLinks,true);' e( c* h. F" q5 Y) C8 Q o
} 2 c/ R8 L& S) x
function startFade(id)6 |2 J$ L' {! |) o0 v& Y2 ^
{6 T. a- r0 ]' M- Q
if(fadeOut[id] == true)" F. ^ d9 L& o# P9 ~$ B- G
{ /*move colour towards background colour (increment)*/' ~+ ^+ l0 _- o. H( f" V6 D0 t0 t% M
currR[id] += redInterval;
" f& b, R" {$ N' r2 d Q currG[id] += greenInterval;
! G5 {7 R7 [9 N, V currB[id] += blueInterval;
( J I7 _ Q' Q7 S) W newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 h) `( J( d4 O' X if(++count[id] == numFadeLevels)7 H8 N4 j3 ~4 \7 s* _# |4 y, u
{, K' k, w0 D# h7 u, d
fadeOut[id] = false;1 Z$ X: u( _+ U7 \, J
}$ S6 I. W2 r+ I3 S. r( S) Z5 \3 F
}
6 i8 B# Y+ C8 ]5 R else1 o% c7 y: [. e+ `
{
p# d: D+ y& | currR[id] -= redInterval;6 j6 p" r6 S! A! c
1 s' b& E* S }: l3 B' ^9 h
currG[id] -= greenInterval;
& F% f Q4 q0 Z- i0 F. Z
/ @/ U7 ?; P; ` currB[id] -= blueInterval;
+ K$ _) w% T% m5 I8 a
% u2 L4 _/ W/ Y. t& u. _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 ~9 r5 p( o0 Y7 P3 L/ U- L2 a: x9 m! p1 P3 ?& {, E2 Z
if(--count[id] == 0)# ^* }5 J2 T; O2 \7 m
7 Y6 q* A0 E: ~) q0 W {4 S. j! P5 p* g _4 {8 i. p% f( l- a
?5 I& N: P; j. b2 Q
fadeOut[id] = true;
; b, y- d9 v+ X; d2 a2 F
% [: ^; t- c: L* m7 ^( d- m$ U }" b4 s7 v8 w+ B9 ]- r& s0 n# f) O
! ]& O: s. I8 Y6 a- \9 {
}) V2 E' R; v4 R7 [0 W4 r
, h6 V f/ P# X+ c
if(continuous[id] == true)
+ g c' G- f' `6 x) [5 g+ y I: y( \2 e* B
{6 g4 `' I% m5 @( ]. ?& v: m' @
1 d+ K. _! R/ l+ b' ]0 J ^ j1 {
document.getElementById(id).style.color = newColour[id]; 7 h- F, l% K/ ^( V4 |/ @/ p/ f* S. c$ R
% ?! G- F0 l& J( ]0 [' x }: g5 n" S$ @1 k& Y4 F
6 L4 e; T }' P( E" z) B
else' S2 T7 Q# G4 Q2 S+ Q
& ^8 j, Q7 [4 u9 o# a
{+ Y2 l3 U& R3 k& c7 l
% T1 D% W# \8 j' z5 ^
document.getElementById(id).style.color = hoverColour;
5 A! G: h# I0 U& K* Q7 A L, C7 P* M, p- `+ q7 [* j/ D( p
}
0 w" O0 t+ ~5 P n; ]5 @4 V0 i) i. |* d; J" [
clearTimeout(tID[id]);
' J, B5 w+ m* ^5 C" Q4 ?& a" @$ ?% Q6 G- B' \# v7 a& H. ]6 t% }
tID[id]=setTimeout('startFade(' + id + ')', rate);. k/ L4 ?& v. {
. ]4 U p+ d$ X' w}. v) S" J4 u- S) \ s
v! z L2 {; T, |8 b3 Yfunction continueFade(id)8 a' F8 ?3 [, l9 q
$ n! j! [7 x% I; |+ D9 I! r
{) M% r1 u4 a; ~, \+ r2 e
1 u0 u3 J/ z. Q; d; l continuous[id] = true;# w# q6 A- L1 X6 x; G
7 d! b: H- k* D3 h' N4 w9 V
}
( _0 H2 b) k& v6 T9 M; b# I3 a# T
% D4 p7 V+ ]! m9 {+ Ufunction stopFade(id)+ g3 p& x+ u1 Z4 I8 r5 `3 l! {! C! ]
3 y ], z- U, ?{
% a# Y C( I5 [1 a( U2 `! l7 q1 K: p2 F* r
continuous[id] = false;& T) h3 S. M. Z
6 L$ E/ A! D# x: b9 D. j0 |}/ [9 s4 q) _" v3 s' m
& a2 H: X' O( Vfunction StartTimers()
4 r( [4 g3 u. L" Z# L+ P0 c0 b( H
# N6 }) H- v z3 H5 }: u1 V{ //set up an initial set of timers to start the shimmering effect
9 Z: L: k7 Q% f* e: ?7 h; z i e/ c, `9 ~' J7 t* Q" K! G5 u& O
for(id=0; id<numLinks; id++)
+ C; S F& L. j# U: r- j# ~
9 Q+ e, D& P" N {
8 H$ o8 J. @, }7 s/ _8 v1 u. A) h# B3 } e" R9 }% M) X5 s( A' [
t=setTimeout('startFade(' + id + ')', id*100);
8 D8 c* a, [- v0 C: Z( o
% G# L0 \( |9 F" k, u }
. t# r1 o5 {3 S5 h: N
2 e- r: p; j" T! Y2 A. v. I}
' B4 N- a1 ?" f3 P2 @% F9 ?6 Q$ B
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
0 [) t3 v$ f& S4 f7 H
R, ~" J' M' I9 V) hinitLinks('#FF0000', 6, '#FFCC77');1 ?( q f, i8 U/ i
+ g( ?9 X7 I1 `* _- q3 f//-->
0 W$ p; {/ z6 E8 U
5 B. c- L, {8 _4 e</script>2 E) |2 p+ ~" Y
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
5 b" w2 _8 g" e+ Z' N# `% @</a>
( f! _2 w3 ~1 e<br>7 @. I- v3 G( o: E
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# e4 i$ a7 B) C8 h% [2 w& B c, y; q<br>
* v# c! U2 t! a# S( q<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>2 _+ w3 _: O1 I- f' N; ]5 ?
<br>
& B& _3 b* b7 t' ]# w4 T<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 m- F C+ g0 M( @
<br>
* i& J& P" T2 g- P8 j+ h( Y<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>) `: a3 s0 l: e. S* i0 _
<br>1 V# E7 g, N8 r& _) Q9 F
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
, V/ |. a. A3 p x3 |<script language="javascript" type="text/javascript">
% C' Z- V9 Q z9 @<!--
) g3 i5 B( n: `3 X C1 C& i2 v8 XsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
, d" g, C( q8 _//-->
. L9 s; z( w' X7 F2 l</script> |
|