|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
& Y. f, a$ q, q- V' r2 C0 t. t<!--
9 V7 s7 \( h& w4 ]9 Q- W8 B// convert a single digit (0 - 16) into hex
. E& q2 d, d8 i) V- Vfunction enHex(aDigit)
/ w1 z, I5 n5 v9 O7 J/ w{0 H& n! n7 S% |+ p; P8 [9 a' N
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 w3 }0 l' g- b}# ]. S* A9 a: F+ N! S2 O' \( r
// convert a hex digit into decimal
' U X4 m N: {" ]& cfunction deHex(aDigit)
1 C* ^& x: s' k1 D7 c7 F{
' {- h+ c; c* \3 F, T+ w/ N return("0123456789ABCDEF".indexOf(aDigit))
2 F/ W+ ]6 i) j' h) A: ?: e}
8 [/ M3 @6 S" x2 Y0 ^. l) L- r: s8 \/ {8 \' e. \- F! o
// Convert a 24bit number to hex8 M0 q& R, q& z
function toHex(n)
% }7 k9 C# y$ _% U. d- E{
; p5 S8 C5 V. F$ u3 v, u return (enHex((0xf00000 & n) >> 20) +, R6 d5 k' S1 q. ? g
enHex((0x0f0000 & n) >> 16) +
" m. m: i' z0 _9 { enHex((0x00f000 & n) >> 12) +8 T8 k+ ?7 c% a) h
enHex((0x000f00 & n) >> 8) +& n4 V: [4 y" A: d
enHex((0x0000f0 & n) >> 4) +
6 W9 |2 |% o3 s7 E: t enHex((0x00000f & n) >> 0))
6 \: B! x8 u7 I}+ d0 K! F [% P3 M9 {8 g. j" y
// Convert a six character hex to decimal6 y& y8 w. \1 y' ]+ H& N2 s
function toDecimal(hexNum)
0 Z; W) s# t# A{
4 J/ y! i8 [8 O9 \* ^$ w3 E' e* ]9 D var tmp = ""+hexNum.toUpperCase()3 F- u2 e- D4 I x: N9 L, `0 X
while (tmp.length < 6) tmp = "0"+tmp
0 y& ^. ]8 c, I0 |& c return ((deHex(tmp.substring(0,1)) << 20) +0 I" ^. {% O; C; Q
(deHex(tmp.substring(1,2)) << 16) +
& F; `' M9 n/ Y5 N. Q5 X2 L( j (deHex(tmp.substring(2,3)) << 12) +
) x$ c$ W' T: o6 m9 W (deHex(tmp.substring(3,4)) << 8) +$ G4 A7 b0 A- M/ s" y5 E
(deHex(tmp.substring(4,5)) << 4) +3 y; t" o" U' x( Q9 d7 X
(deHex(tmp.substring(5,6))))
$ I, }3 E# d3 [2 p; s9 _* W* G7 N}5 l, h, W8 j! q. E, z3 Y; @6 ]
///////////////////Shimmering Links/////////////////////
/ D( }% J1 E# }8 t b6 ^//global variables' ~" Y3 ?( `" v" \8 p9 L
var hoverColour
& [! @+ v. Y* W5 K( {$ a% Gvar numLinks;( j4 s: L3 @# A6 D6 n$ M
var rate;1 ?) Z+ x# ~& w: L$ _( z! M3 s7 q
var numFadeLevels;7 ?" O+ u \- L: l! L s8 E
var bgR;
" y+ E6 j) v4 Y* ?, Cvar bgG;
G. ^8 t3 l9 n: h9 ~: w& Jvar bgB;
; h7 Q3 p3 ]* ]8 V* Fvar currR;8 R5 l, j( F+ z4 I% t7 c. m
var currG;4 F5 F r* d( X [, M) x) ~2 m
var currB;' E. ?) A9 w- ]6 ?9 [$ P
var count;8 B0 H# v; c) A5 }/ h8 `% @% g
var fadeOut;! x6 H1 P" G5 k+ F) o9 b7 `! |
var continuous;! ~6 S# r, c+ x- ^
var newColour;* g) H/ J0 b: v2 F
var tID;
# H+ |% ]) m! ^7 jvar redInterval;
9 m" ^! _% J8 L9 zvar greenInterval;% v, E8 m$ h) ?0 P
var blueInterval;; O/ i/ F+ k. I2 p" a6 v
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& c3 T$ u: s; S7 f, Q6 N8 F{
$ p$ @' k, o+ | hoverColour = mouseOverColour;
7 y) C/ Y: E% `5 r8 @7 B7 f# U numLinks = numberOfLinks;
# S1 _( H+ d+ d6 I5 W rate = 1;7 t+ p) _! a u" q* S
numFadeLevels = 30;* O& }7 M+ Q, M6 ~( l
function initArray(theArray, length, val)& a1 C1 M( V6 O' K
{
. q* D+ @5 l, v for(i=0;i<length;i++)
: n! W7 z3 }3 s8 y3 S& ]" p# {; r- P {
8 t$ s, L5 h- D2 @ theArray = val;( M9 @# |& [, e( o
}! t: ~! k1 E$ c: D
}6 q& N, ^2 T* ]9 C C, J9 _5 P
bgR = '0000' + fadeOutColour.substring(1,3)6 w G8 m! L5 B% n( |# ~! M# p
bgG = '0000' + fadeOutColour.substring(3,5)' o+ y9 l6 D- ^) w0 f/ x$ Z
bgB = '0000' + fadeOutColour.substring(5,7) Z* s5 M/ L, b) u
currR = new Array(numLinks);
! H( z7 W* W( x currG = new Array(numLinks);1 c4 I" t6 j$ S2 c* F5 h' f* c6 e3 w, C
currB = new Array(numLinks);
: @# ~3 _# W9 C$ A7 L9 T count = new Array(numLinks);4 X' c, B3 i) Z) h8 B, m9 P: g1 x6 J
fadeOut = new Array(numLinks);$ k6 B; _3 S4 f0 i8 C9 V
continuous = new Array(numLinks);
7 K, c" j: y. j+ j1 h newColour = new Array(numLinks);2 J5 v- O& n. [: s, A
tID = new Array(numLinks);" K' `. B% g2 A& R5 y$ p7 Q
redInterval = toDecimal(bgR) / numFadeLevels;
5 k7 y$ ?: |: f3 E+ l9 _ greenInterval = toDecimal(bgG) / numFadeLevels;1 v7 F9 o3 Y/ [% ^
blueInterval = toDecimal(bgB) / numFadeLevels;
: A& V% w; o7 q2 n initArray(currR,numLinks,0);7 k* i& g0 K* ~6 D
initArray(currG,numLinks,0);8 Q: \) }& w& k% |/ [/ c4 m
initArray(currB,numLinks,0);0 x* ~! v8 O2 H( h- H+ s
initArray(count,numLinks,0);
2 u$ [ ]% |/ h9 P/ b+ F3 X7 P initArray(fadeOut,numLinks,true);/ G5 |& K2 [: t2 Y4 [! v) ? b: f
initArray(continuous,numLinks,true);
$ Q _: e# c% ~5 q( A; v( B} 7 X* W( J9 ^+ a2 ^$ d4 T$ X9 e
function startFade(id)
8 u5 w; c6 Q4 I{$ @0 _9 A' a+ b: F1 [# f
if(fadeOut[id] == true)8 S) u& W* c( [
{ /*move colour towards background colour (increment)*/
/ ?0 ~) J& e$ H5 p0 n" v currR[id] += redInterval;
5 z* m$ s4 y7 h5 i$ @ currG[id] += greenInterval;
# b- P9 R! `/ i: g+ ?& E, n currB[id] += blueInterval;6 o2 S6 n3 |# q# K; `
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# Y$ U8 _$ r5 P- d4 r! j
if(++count[id] == numFadeLevels)4 z+ @$ ~% A* a% n/ q) O: T
{
4 N7 s9 q' Q; W fadeOut[id] = false;
$ c6 ^' H; ?/ E0 C4 C% d }( c# `' t7 Q8 ~3 ^- v, n
}0 m6 w' \* I2 S( i- O8 e
else4 A# ^ y* Z5 b. \
{
* g$ r! e$ z5 i. Y: D5 D" ~ currR[id] -= redInterval;
8 M0 h8 N8 k2 y, v1 M! A* g y8 V/ ?3 { ^
currG[id] -= greenInterval;
3 a! C9 o6 V) t ~( j# n' w3 E* k* [, s0 c) ^( ^
currB[id] -= blueInterval;$ B+ r/ \9 ?# s
/ g- x- w! T' s& c0 k
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
* Q& P) Y, L' S% Y/ P) n, p4 Z3 D: _, g; O- H+ M: w
if(--count[id] == 0)
2 R/ ]% K3 T: ^+ [+ h, Y# A; u. y6 v- B1 y b* [, q$ a6 q
{! S7 |" E! m0 k& M* D8 }% v
# s: m7 {8 g$ G. `0 N) }
fadeOut[id] = true;
9 w/ H, o2 l" [- S% m) G
B8 ~0 Y9 |+ a$ M: I( Z' [ }8 C) V7 g W4 D
+ _% Q1 M! s: A C# E4 i) Y }( Y9 S* n2 R4 K$ z
8 T" G; ]* c' \: W5 l2 h# o
if(continuous[id] == true)
9 X: g" Z- }, q: V# k' Q+ m
A3 M( b5 I" p8 T1 N {
: k7 e: m* x3 ]# w& z$ o4 \- Z+ c' q) N
document.getElementById(id).style.color = newColour[id];
8 E/ u E+ U. W7 F" i z+ R) j; U2 W$ H+ `2 E) e" x$ Z
}
0 j9 `, V/ P6 p2 Z7 ]% |, y. U
! c6 z/ A$ B) M8 W9 w else
, [6 s* j+ B3 F- `6 U: t/ P0 _$ V
9 z6 r1 _0 Y* V5 P8 N' h {+ Y: T1 ?! R) ^/ r( f! E E
2 r" D3 U5 _* v4 ^3 r
document.getElementById(id).style.color = hoverColour;
5 T: w" S7 D8 s2 p- n0 p: E* @6 c E6 Z# E; J" V) C
}
' @' q+ i C( n! m. ~+ v
& e0 \: m5 v; o, e9 N clearTimeout(tID[id]);
" s5 Y- c2 `9 e7 `3 W* e+ l2 g/ R8 N. f s7 d p
tID[id]=setTimeout('startFade(' + id + ')', rate);' S) X- |# M6 O
: D7 o/ d* z2 f. O3 _5 h1 ?4 f" F
}% w) O# R g' p* @! b2 h
8 o2 } H% K2 M/ t) X8 o0 d
function continueFade(id)' q, B: K1 m! B- ?5 W0 z
( I3 Z* j$ n: P% w' Y$ V1 B0 p" Y* c{
6 Y# _: z: a3 D6 K# r6 |0 t* D; w: Z3 W( }, Z2 ~7 z0 b. I
continuous[id] = true; d2 Z1 ?6 _5 C8 t# {, z
& Z- h l% l# `. r& g
}! o' ^, T* H: x+ t& t
- Q* z, ], ], Q5 O
function stopFade(id)3 V( I6 p% I/ X) F+ ?
% w# Y5 b/ k. u; n5 J{$ ]! F9 ?0 V8 Z
: m: q' w7 J" C0 {. f& C' u continuous[id] = false;
& R- d& h% u4 s1 d. @8 U/ J a* L0 e. o8 P' P7 f8 R4 S4 }
}
2 r) O& R9 b5 B3 c( d
2 ~8 R. `( v4 e, O& i( Lfunction StartTimers()7 W( d! \( r/ V- z7 n! k
" @2 A' s5 g- o2 }' e, t% N
{ //set up an initial set of timers to start the shimmering effect
4 w9 i. s0 F+ j6 F5 \% m. U' W& p( B, A" P* f
for(id=0; id<numLinks; id++)
- a! J. V# ^/ r! b. z. S' V: o- N! a% ^1 K
{1 j& X0 |4 R% M0 |
! u6 g9 A7 i( r
t=setTimeout('startFade(' + id + ')', id*100);
) u! M: }, H3 N9 N1 z! m7 Z [/ t% s2 ^
}5 |1 C8 `# B4 R; k4 p" d1 U" V
- A$ f& q) s; g3 b* s. Q- P9 i}
7 P" W0 s7 n! Q; z
( [+ E1 @8 ~; }//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
* w$ g- Y! f0 e5 k4 L% n2 ]! N
0 t% d; O. ?# z. J. P; q5 XinitLinks('#FF0000', 6, '#FFCC77');: n! ~$ J: q) _! c* q R3 b
4 X0 d; n; y6 d( } U& h
//-->
9 g' G- I ~! K+ n$ q$ X& o$ I
% H/ Z& C& B, j9 {0 \</script>7 y( v3 d' D, j% X
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
- y# S+ T0 o) O2 E$ q& \/ Q" A</a>
M8 [- Q- T$ ?* M/ \# ?9 M# g<br>
; }# F. c9 b T$ u+ G<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>* Y% l4 W5 G! u2 S4 W* @- Q
<br> h/ o+ I8 j" \1 f5 M
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ V4 n* l3 C2 e" S) r: J
<br> ) J, B# _" X9 x. i& y v. `% O
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>1 x( S) L4 V" r0 Z8 z7 K2 `
<br>
. B- ^+ ~5 ]/ d* C. j<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>" r+ H& P, `& x2 q# l+ B! y2 x* c
<br>
( i$ ~! m8 f7 X' f/ |' Z/ n. x<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
7 ]: r1 C7 M2 K' y<script language="javascript" type="text/javascript">/ b2 S7 ?! |' C7 T
<!--
) m0 }: e3 m; y) O' ]8 MsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* s0 E4 E- `7 N9 r1 J' \
//-->; Z+ G/ O2 l4 |8 D+ H) w
</script> |
|
发表于 2008-1-21 20:48
|