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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 w/ B, {( l2 y# w9 E! s<!--- W+ X9 ~, t; ?! I1 Y
// convert a single digit (0 - 16) into hex& D; l, i5 t+ W, r* m) N, r- _ }7 [
function enHex(aDigit): }/ a8 j* M: w9 Z
{! G6 m+ F" @0 k2 h0 ^' n( \# J
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
" F& ?" p+ g& c' R}
# D, c& f, ^ u2 `7 d// convert a hex digit into decimal3 w( `8 k9 B+ P7 w
function deHex(aDigit)$ K! m1 E8 c `2 w
{) ~1 I V" m2 }
return("0123456789ABCDEF".indexOf(aDigit))- Q8 {4 C. U$ N- x
}
* Y1 Z; W% _. ] [7 n0 V+ b1 \7 J+ a! t6 L
// Convert a 24bit number to hex+ G" q1 Y6 z0 `3 b0 h: ~$ R4 d
function toHex(n)# R0 y, K+ r1 V. g9 S( h: {
{
9 j G$ _1 P! @# l return (enHex((0xf00000 & n) >> 20) +
6 r9 W" z7 m+ r. a3 g% c enHex((0x0f0000 & n) >> 16) +2 J, B2 p& g6 d' o; e1 M5 k
enHex((0x00f000 & n) >> 12) +: G+ _% T+ S G: G$ w
enHex((0x000f00 & n) >> 8) +
, \. }( M2 z) k9 g enHex((0x0000f0 & n) >> 4) +
v5 b" q" O- U6 d; C' P enHex((0x00000f & n) >> 0))6 V, B1 O, W4 ~- ~! P" H0 \1 g( Q/ H
}+ W+ X" D: _' i
// Convert a six character hex to decimal
4 r; Z( n' l, n" J) J L; _1 Jfunction toDecimal(hexNum)
: E2 c6 p" h5 T. a( k& I{6 j3 z. K7 x: a. K0 r
var tmp = ""+hexNum.toUpperCase()+ X- c: V* S; @8 `! @
while (tmp.length < 6) tmp = "0"+tmp
& ~% e1 |0 y( R& F6 J return ((deHex(tmp.substring(0,1)) << 20) +
$ V4 N7 ^) K5 a: O! E( [7 o' F (deHex(tmp.substring(1,2)) << 16) + ! w/ f7 {6 C1 ^% Q+ c; E
(deHex(tmp.substring(2,3)) << 12) +
; j" Y1 O( y/ X5 E- a9 q (deHex(tmp.substring(3,4)) << 8) +7 F/ g d" M* P! J5 J* |! y
(deHex(tmp.substring(4,5)) << 4) +9 n! L3 F8 U# p, U7 l( d
(deHex(tmp.substring(5,6))))
6 G) S+ W* x) o& [. @}# L( ?1 o0 d% `& g$ F4 _, F8 r
///////////////////Shimmering Links/////////////////////
2 d% O1 H# u1 h5 {2 W//global variables- A; b" N. c6 K/ S
var hoverColour
# u h, N7 }* g; |% S! ?+ H+ fvar numLinks;
0 U, p1 M" l+ j9 h# v% p5 o+ _var rate;0 }9 e G9 ` u; a* x+ {6 Y; \
var numFadeLevels;4 F0 ^. s+ e. j. r4 v- }/ }
var bgR;
. \4 M* a: f' fvar bgG;
. p. Q" y/ x2 v5 t' W' D2 Q! T" Xvar bgB;
: y: X& o$ }6 z7 X. t- o a" [0 O! Uvar currR;
8 W, r0 S# S" Z) Ivar currG;
; Z M) s9 O b2 Z9 \ `# u1 ^# Gvar currB;, E4 U& z. T- _3 {7 U. c" D8 X: p
var count;
' S3 }& S( W% u" {& j5 Ovar fadeOut; H b! |$ s9 K+ V
var continuous;* t3 W. ~. M4 ^9 U) B5 ^
var newColour;
6 B2 t/ i' _/ Hvar tID;
) ?8 |' I7 k% t6 cvar redInterval;( l Z" |; i+ V% G# f P3 v. E" e+ O
var greenInterval;8 \2 [# i9 p+ K
var blueInterval;
H/ }9 {' F8 ]5 Dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)8 h6 v6 P" R2 D1 u8 V/ P' ]3 n R1 O" E
{
3 u8 F; H3 @) y2 P Q# q. A hoverColour = mouseOverColour;. N& m% a- k& [! |+ h3 z
numLinks = numberOfLinks;, ~) h* B- J/ }! Y) F
rate = 1;
( q6 G, z/ G; m( r7 ^: j numFadeLevels = 30;
1 ?, O4 o1 L! V) q. a( Z. N function initArray(theArray, length, val)1 i3 G+ U) z4 y( R2 ?
{
& w- x" z+ @8 V6 ?) v& n for(i=0;i<length;i++)
# i3 U# {% y5 q. k5 v! |0 t {4 n2 O9 a4 H, z; ?# Z3 S
theArray = val;, |% V, P- N$ r, e( ~4 a
}2 P6 |0 e! e! F. H' W% U. |
}
' @) W. ~0 l3 u Q: @ bgR = '0000' + fadeOutColour.substring(1,3)
3 m) P: J/ Q" E+ x% B4 U4 H bgG = '0000' + fadeOutColour.substring(3,5)" a+ `% x2 G7 a
bgB = '0000' + fadeOutColour.substring(5,7)
6 f: ], L; J0 a currR = new Array(numLinks);, `5 b% C% |% D
currG = new Array(numLinks);
! r+ Z5 z: O& j+ u/ w currB = new Array(numLinks);
6 J8 I: F. {' f; W& S h9 a5 B4 o. i count = new Array(numLinks);
! o* i% i! F: C2 N4 y0 t @ fadeOut = new Array(numLinks);
2 T, Z. p; S$ a! [+ ~8 u continuous = new Array(numLinks);
" s! ], C& Q* [2 r' {4 b9 N' n3 c newColour = new Array(numLinks);
4 k3 [7 R( q7 u; Y tID = new Array(numLinks); {4 l, G1 f! \) ]/ U! |
redInterval = toDecimal(bgR) / numFadeLevels;
6 e- _( S1 l: [0 L% [" h greenInterval = toDecimal(bgG) / numFadeLevels;/ g( a; t- W: B* w) z
blueInterval = toDecimal(bgB) / numFadeLevels;) r, n6 Z( N C9 z
initArray(currR,numLinks,0);! I& T) o5 y/ ~+ d8 J
initArray(currG,numLinks,0);$ s8 ]$ E: n d9 X4 Z$ n
initArray(currB,numLinks,0);
9 o4 I$ X8 T a- h% P initArray(count,numLinks,0);1 h1 Z- i9 l" P* V& @" a
initArray(fadeOut,numLinks,true);
0 s w6 I- B; h8 Q6 D X) Y( ] initArray(continuous,numLinks,true);
/ H, C G) o' X5 M) O}
; j4 w# R/ n; h/ S/ Vfunction startFade(id)6 S4 o. q" H9 D, W) J, W/ V
{
$ C# i, R# W$ J4 h6 g" ]8 p5 o if(fadeOut[id] == true)
% j$ r+ @$ ]6 ~3 u: s: K* ~. p { /*move colour towards background colour (increment)*/
2 U/ M2 l0 T" j currR[id] += redInterval;
5 ~- |7 ]2 F. f6 }4 ]0 C0 n+ H5 U currG[id] += greenInterval;
$ M/ G8 `* x0 g- }" f currB[id] += blueInterval;
9 E+ `8 n/ ^. i! T* X/ K newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' _6 s c! @3 I if(++count[id] == numFadeLevels)
/ M# Q, x' K" A8 Y* g {$ M l; y: g$ B) `6 W( T+ M
fadeOut[id] = false;4 ?! v) u8 E: P3 I; }
}% U3 r- w2 X/ \ e3 n0 B0 I
}
* d- C, C4 N0 \. s9 |# | else+ d, w& n, r# k% r9 s
{
& I5 ?; K0 U- V* n: z. E currR[id] -= redInterval;0 I5 b3 H" m6 N5 Q" ~
! J; |0 ~! _ z2 ^3 x+ G currG[id] -= greenInterval;
% X% r5 R, o& e0 A9 l$ t) \7 f, r% w* `
currB[id] -= blueInterval;
0 c* E! |. f& J9 f) A* f8 y* N. ~3 c, e, p1 \- M
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 ?' R9 }# `* z: k
! B/ l! B- s/ e$ T0 E if(--count[id] == 0)7 U0 C! i# R* Z
- K6 p' v, H7 @+ L) ~! {* k
{* G m/ K1 w4 `& b4 z
c: D5 U) c1 d- n2 p4 u; V fadeOut[id] = true;# Z( @' j( i M- I
$ p7 G9 [; {7 r# K }7 R" r* g0 ^3 e$ L
' }0 }* ~- \) Q$ F* z }
t5 ~/ B [1 J3 B
& P" U8 T+ P2 ? if(continuous[id] == true): P/ q& S7 u5 \
! v( A: G( O. b, p {' B$ b- f# a, `5 v* G
, Z% P H# _9 k1 Z! S document.getElementById(id).style.color = newColour[id];
/ x! D2 j# D- Q) P- [% C- J+ k% {( g
& f) M3 ~% ^6 J }& s; p" Z4 }( g7 B X7 s$ [
7 r% S4 w. i0 Y- h8 e: H( d
else1 d# g$ O9 ]6 r$ B
( |' [ b' S K" ` {
$ l& o* i5 j( r# z
) g* K' \$ s8 G) Q3 k document.getElementById(id).style.color = hoverColour;
) N3 {: D* ^! I% G: T3 }( ?& c4 V' t; w7 G! D
}0 k# @, Y8 ? m; G5 M# h- G: m/ E
. A S9 _4 I q- u
clearTimeout(tID[id]);
9 R' s, A. S( N/ V8 v1 i( i& K$ A$ F: ~- x' x8 }
tID[id]=setTimeout('startFade(' + id + ')', rate);
7 o; z& H& ?; {( T' {
) K: _& v. p. l1 i8 {}, ~% @% N% n) I: ?+ }/ Q. F$ t7 E* W
, N u8 J" V9 _) o/ J6 ~* H0 pfunction continueFade(id)9 h/ ]9 I9 R2 E- {
4 h* [3 U0 J1 c: _5 c$ F
{
6 d% W3 R% Z6 _- E1 {0 m) W0 v7 F& t9 Y- k2 V
continuous[id] = true;1 b4 l7 ^3 E& t9 w! j, g1 g
- \6 f7 a9 N* c+ a- v$ ?6 n}
8 i1 V, R" t9 O! F7 x' R Z$ E/ B7 b* j
function stopFade(id)9 m7 G& N; ~( i! y8 X
- D `( w5 l, B x" `1 n9 V6 P! _7 l& ~{
$ v# o# Z% s6 _& w. X
" O6 d8 v# f: f$ o0 E5 O continuous[id] = false;
* b* Z/ D# N0 d7 D
8 Z0 ?# `# {3 x w}7 u: x0 s, v3 y |8 K% x: P8 H
/ u2 x; ?$ b6 M) C3 w8 y
function StartTimers()
* k. E6 y N+ |& B. h3 R* a. t$ i* x4 ^
{ //set up an initial set of timers to start the shimmering effect; K( _/ B/ o7 s. Y/ S9 o
& Z0 }* }4 z: ^- e
for(id=0; id<numLinks; id++)
0 Y9 U0 l* g9 d. Y! p, x, |8 d4 a% t, }+ F" m- h7 Z s
{
9 ~2 Q3 ~; s$ N1 h' `) a) \. }+ e) D: l, s0 `
t=setTimeout('startFade(' + id + ')', id*100);
3 D9 G- c$ T: E" g
3 d8 M) e0 ^$ k3 a8 ?" y* T }
9 b- Z5 ?- d: x3 w
$ P/ ]" w, r/ b; }# j}( ?& t3 e0 O- V8 ]- s* l6 G
2 S8 p' ]5 J- C v \3 |//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
0 T0 D4 Y6 M1 U+ f6 `
8 L9 n% V" P$ Z3 m" g9 linitLinks('#FF0000', 6, '#FFCC77');
6 \: b2 M8 `9 b9 p$ X# n! J2 x& k+ H7 M: j) X
//-->
4 Y2 {& j* {0 a+ n: I
# R1 r2 ^) z+ _: b. a</script>6 I9 T* ?$ `. d+ F% K2 k
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元 Y9 i8 A: w9 O' `4 [
</a>
8 C4 n0 a/ ?: G9 o6 N" a<br>
3 e% F/ i6 W) O8 ?0 p6 d<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# P/ M3 L* B9 _. n: a( x<br>: t: x# a( S0 s* c+ n
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a> `! ~* s) {+ [9 L$ T7 j
<br>
' q9 J2 p: Y$ N/ R/ P<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>% N& ?+ j. A: r+ ?) W
<br>
; j. o# P1 p4 V0 M) m; J<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>* r3 x x9 l$ m; C# g+ {) d2 d7 p
<br>8 R7 b% m, a7 d% ^
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. n6 c& {: d8 U, ?
<script language="javascript" type="text/javascript">6 o/ s( `' B% \9 {7 m; _1 _
<!--" G4 _8 w0 H1 [5 d0 i. d' F
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
% d! c% p. [ `' F. |//-->
% K% o* \. C' I" ~</script> |
|