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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">! ^- q% `$ W2 A) w3 Q. w5 T! D+ s
<!--
. b; }% A" R3 F, T// convert a single digit (0 - 16) into hex
0 B+ q- V1 `) L7 }# Ufunction enHex(aDigit)7 R2 A4 D' a5 |' P$ D' |" @
{
" z. n5 r' l% C I return("0123456789ABCDEF".substring(aDigit, aDigit+1))
; g) w8 p" t) V( G& ?( u+ x0 D}
( [- o4 T8 X, e5 K// convert a hex digit into decimal% A6 C3 T9 {$ p6 P! Y
function deHex(aDigit)* K# K* g- H8 v; J5 l& B% `
{* U( J6 T4 o- y- `4 I- D) ^
return("0123456789ABCDEF".indexOf(aDigit))
y0 d3 P _+ R9 ?}* q9 f! u& N/ B Z' t
) }/ z) j" I6 w0 A% d- i
// Convert a 24bit number to hex
' S8 V' a4 q' i* |, ?4 hfunction toHex(n)
+ Y) S0 T7 H3 V3 {{) v, _. Q/ W# y' S
return (enHex((0xf00000 & n) >> 20) +
3 l5 [' C" g' e4 A, B. ` enHex((0x0f0000 & n) >> 16) +1 o" Z6 v, r: \: D6 }
enHex((0x00f000 & n) >> 12) +
# x5 B8 @3 u b1 ]& T: Z; X enHex((0x000f00 & n) >> 8) +
6 n& O A6 h1 r& q enHex((0x0000f0 & n) >> 4) +
) X) |9 D/ J3 B5 m* w4 f* o" @: ] enHex((0x00000f & n) >> 0))
$ V' {" y. J% v" ]1 l}5 g9 _; `6 U, ^+ n
// Convert a six character hex to decimal# Q1 {( y8 L; x3 S+ l
function toDecimal(hexNum)
- Z- n* s% v6 I9 m' `7 f$ t4 t8 P{; W: k9 b: M8 Q: a" |; E
var tmp = ""+hexNum.toUpperCase()
, _: m a) l& W/ z" K while (tmp.length < 6) tmp = "0"+tmp
8 @6 P/ F1 T8 }, ^ return ((deHex(tmp.substring(0,1)) << 20) +1 O6 O8 ~; ?& D9 |. m& x5 n3 o
(deHex(tmp.substring(1,2)) << 16) + : \/ X! ]. e$ S1 S3 x i2 J
(deHex(tmp.substring(2,3)) << 12) +4 S+ x' Z: l5 W7 e
(deHex(tmp.substring(3,4)) << 8) +
8 T/ e1 z( g) f; g( S! P I& Q (deHex(tmp.substring(4,5)) << 4) +
8 o/ \ ?7 y* ~$ ^( `3 h3 w6 J (deHex(tmp.substring(5,6))))8 S1 x( X' f1 U; O3 z! A7 I
}
: b4 [6 a9 J/ @0 x/ ^4 w j" v///////////////////Shimmering Links/////////////////////* y1 v$ M$ x# v5 I$ `
//global variables
0 ~1 |. o) v1 x% h( N9 Dvar hoverColour# ~) }. M4 L; \9 X- K" t
var numLinks;% _1 l) ~0 M$ y3 K0 Q
var rate;
' G& F! b; _3 W/ A% T! Nvar numFadeLevels;4 L6 {3 L4 O! U
var bgR;& ?; P d h6 D* ?" R) f' H
var bgG;
0 |1 }0 ?! Z/ g3 A" Z3 h+ s" rvar bgB;
# N3 p5 j: k2 C9 A3 qvar currR;
. U H! L- G) b1 bvar currG;
# d% Q# Q/ f+ C/ v" ^& Rvar currB;
& l& F8 u+ n. k; c) \( rvar count;0 B' w3 z H" g6 C+ Y6 C
var fadeOut;
3 d- j) n3 D7 ^; S' ~7 Mvar continuous;
* V' ? r3 G% g. _$ k Rvar newColour;
1 R- E1 b: i" o- J) K9 a gvar tID;
7 r4 E$ c2 f! Z$ Rvar redInterval;) E8 h$ ] s* a9 K$ C# z5 I
var greenInterval;
/ [) O9 y8 a0 L6 A j8 r# gvar blueInterval;
; @: J# a& M5 k; V Vfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 q5 l6 |* T* z% b" b{* y) |+ w# s- Z, B- T5 _; x
hoverColour = mouseOverColour;" e! O/ S7 o6 u1 V. u: C* p
numLinks = numberOfLinks; ^& a0 i; t+ W
rate = 1;) J. f- l) y8 [: z7 z- _) n) _
numFadeLevels = 30;
5 c# d3 w2 N4 ]& n function initArray(theArray, length, val)) P$ [, K' I$ u3 _" e1 `
{( V4 c+ T# r' H6 L2 ~
for(i=0;i<length;i++). ]# l: g( j, m/ M) n
{
& \& U1 P# u, h; `% P/ G theArray = val;* @/ A: D3 T k" b
}0 D7 ?& B- U- {# L s
}. Q6 f1 z, P4 m9 z
bgR = '0000' + fadeOutColour.substring(1,3)
$ b, n5 V' c3 J# B7 x. o8 U bgG = '0000' + fadeOutColour.substring(3,5)
6 y% u% y. |9 {1 L- Z0 O, S _; V bgB = '0000' + fadeOutColour.substring(5,7)
1 n# i) v0 w$ M# d/ K* O currR = new Array(numLinks);& J( n! A, k3 j8 i0 b
currG = new Array(numLinks);
4 @ s" E2 ?. ?& b* w. g currB = new Array(numLinks);7 A8 Y7 n, I+ A, _* `8 l$ {0 a& U
count = new Array(numLinks);
2 c/ k6 R0 X. n) _' U+ j3 W6 v6 F) t2 R fadeOut = new Array(numLinks);
6 k' x( {8 l) M1 G# o$ W; E continuous = new Array(numLinks);$ I( G$ |! f" k. `/ b2 ~5 W) N
newColour = new Array(numLinks);( U! B' N; v: V+ \' c/ B$ h: c
tID = new Array(numLinks);
7 h6 d+ A- y5 U/ i3 o. Q' E redInterval = toDecimal(bgR) / numFadeLevels;
2 I3 V( |% G0 ~$ T" C greenInterval = toDecimal(bgG) / numFadeLevels;" D2 V" T) P, z3 `" o
blueInterval = toDecimal(bgB) / numFadeLevels;
! v4 O: W# H. Q initArray(currR,numLinks,0);1 W% J1 }( u% g; B7 W+ ^
initArray(currG,numLinks,0);. l- Q0 T& ]; u' c
initArray(currB,numLinks,0);
- a7 g ?$ o0 g( `( ?9 L6 u* C( D initArray(count,numLinks,0);
9 A* U, t* n: L/ ~8 C2 N$ _ initArray(fadeOut,numLinks,true);
, X8 j" G/ `& {4 H initArray(continuous,numLinks,true);8 U8 t/ u6 X* z: }, z% W" e3 t; W: ^
} . s) ^$ F& O" v% B- Y/ Z6 t
function startFade(id)
, V( m G8 R# {: q{) l8 Q9 H- q1 J4 i# {/ |6 ^- z& t0 u
if(fadeOut[id] == true)6 X4 p# E0 a' I! F/ y1 r) Y
{ /*move colour towards background colour (increment)*/, z9 z! ?- g+ Y& c& O! x' b
currR[id] += redInterval;6 v* x& ^; C. L# Y. z
currG[id] += greenInterval;
4 u& e4 U5 {4 U" O# @ currB[id] += blueInterval;* K1 P3 k- }; N, Q% U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# ]* l, U0 @- \6 ^" } if(++count[id] == numFadeLevels)
$ ~2 ^: r1 ^* ^, R7 _- e* e# M7 l5 Z5 d {
# z3 B% \$ O! C fadeOut[id] = false;
p' F3 ^- T* A* g; ? }* Q+ s. I" l6 o" Z5 I/ @; r
}
2 j: u5 y/ G- B else
4 _7 P$ @6 x% C7 X" M {8 f2 ^# R) i3 j" W% Z% S# L
currR[id] -= redInterval;( _' h% v8 m$ j. |/ T3 m' Y/ j& N
) n$ _9 k: D3 v2 f6 d4 T currG[id] -= greenInterval;
2 v0 @2 ~/ |. L/ F: _ i$ X7 D0 i: r/ s% i* g
currB[id] -= blueInterval;
: B! S* f* c, u5 r
3 y7 X. m; p/ D& H) x* k1 |* H newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- ?5 V6 _$ A" ^, l R" \( c# J! H# l1 h
if(--count[id] == 0)( Y: U4 Z: B' l) {, G( D3 Z
6 Y# H7 z% H1 R) a
{
2 B8 q+ p ^; K+ _( \. Q/ n" N7 P2 Y! Q0 V
fadeOut[id] = true;3 f v" n" M* _4 @9 [$ b1 R
" F* K4 y1 i7 h
}
: B4 g: ~' V$ J) J/ N+ s- S7 U9 w; }( y. C9 y! d! T( B
}# h, o* N, F% ?# f. A
6 R9 P$ n$ B$ Z# n; Y if(continuous[id] == true)
0 g2 _! g% X6 ?, E- J
0 N; o- Q& n* A$ o {; A3 L* f0 d, q& s0 s. @
! E' f! Y; _% W7 s3 h8 q2 M document.getElementById(id).style.color = newColour[id];
3 j- m7 p' v% w y
) Z9 s% S' _% A0 ~5 ]& T- y }- Z0 k" n" S% S, u6 `
, l0 u n3 d1 K1 J4 V, } else& p5 n5 S; G, B- k) f3 u8 D4 C
7 f8 J* \, r$ [! C
{
9 J0 @. f5 Y9 `! I) ], {
4 p E! l5 P6 _2 n& c: [/ \ document.getElementById(id).style.color = hoverColour;. A _; E7 f& e
4 h/ Z3 C8 J# x* r9 N }. i5 q7 {9 h) z- e2 R; S
6 b0 }& r- e, J; O s
clearTimeout(tID[id]);
# U9 t% f0 c- i+ s* a" w% e
; O# F: { \5 x: `$ V! o" p1 V tID[id]=setTimeout('startFade(' + id + ')', rate);
+ W& R1 H: j: J0 K M8 h# Q+ p3 {& c( h& N7 L4 M" K4 t% S3 }
}
; [9 E* [1 T( ~1 ^' H
. |8 Q$ l7 v& w$ [function continueFade(id)' g( U$ w @% y
4 F% Q; i7 p% N" x
{
" y. ]3 ^( E7 S S2 i" D3 A
* N, ^ i, `( D0 \" l7 W+ {& L continuous[id] = true;
( Z+ r. q5 y. M0 \- }/ G* f5 Q9 p; E* H0 K6 a
}
. H5 |0 c( b* W* h: _; m
0 @3 d4 G0 V ^8 s6 H; rfunction stopFade(id)& }: M; c. ?( E5 ?$ ^) K
2 E4 z; B, t! D1 b{7 P$ D q, K) t. i; `
+ F+ T2 W' s4 y5 E8 Q. D+ R% f* L
continuous[id] = false;
' q. o# m1 i+ D- S) K
6 D2 o& w, S2 Q" x}
( D$ W7 y- F! ^! p) C- L$ ~
: I0 ~- A7 J7 r- L e& [function StartTimers()
; h# ?4 l* i3 q1 \) D2 l5 ~% B, g+ }8 \- K/ p( G
{ //set up an initial set of timers to start the shimmering effect; Y2 o# H3 ?, E, {8 q
8 i7 M: A7 f: [( n) E& x8 i
for(id=0; id<numLinks; id++)4 C, O$ k0 O% ^: \
) @1 u0 o: i3 ?3 P% ]' x) v2 F' X { d0 t1 S, T" y# J
/ c7 J" l: e/ ~: Y! ]! v
t=setTimeout('startFade(' + id + ')', id*100);6 L3 l! w+ J7 U) S: q5 z) I5 u1 G
' b- E) C8 j2 R+ M. o }
9 Z/ z) @3 A- @
: y! T! f6 d1 f8 F6 O6 G}8 v5 g+ X$ u+ }0 S* G" O
& \0 t3 R8 C3 E7 P L- M
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 L2 R! b1 e& p; Y3 M! s2 ?. Q8 i0 r
initLinks('#FF0000', 6, '#FFCC77');6 ?' x( N" w# i4 R
7 x5 ^; o" G7 A5 J* f3 K N//-->1 k e+ ?' ]4 c; F( P
3 Z- [' R, F- U9 R1 {2 P7 }: c4 k</script>
" m/ H' E- R2 p# F<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- o1 H3 W" b. {
</a>
" C/ N! W, C0 I0 d<br>6 Q" E' T, w4 C: T8 R
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>- B+ e' p3 b' I8 L* m
<br>( D. d% i2 C0 ?: Q) C7 f
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ `5 S0 O/ A5 a
<br> . w. e; F$ ~- j9 b6 g5 i& [
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
8 d7 j0 P( P" @6 _/ f<br>7 _! W& z% J ^- v. \0 ]
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ T9 W" Y# o) S' V( U<br>0 b& s- K6 h" z
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
" E P0 ]; H# i( ^) T, A<script language="javascript" type="text/javascript">/ u! E* s" e, X9 P6 l
<!--
8 C6 S' b S2 w, @+ SsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 A3 h% d2 \' A8 V3 k- v//-->0 q+ Q7 Y7 X% ~; E
</script> |
|