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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">6 \9 p6 O* K1 z$ E5 Q
<!--! m- Q' x% F3 `0 H5 D; N$ [
// convert a single digit (0 - 16) into hex
* I4 W/ e' @ Z/ ?# ]function enHex(aDigit)9 T( C" G: w+ ]$ }! x
{
+ u( h; E# d: e8 K) `; L return("0123456789ABCDEF".substring(aDigit, aDigit+1))
: F/ Q/ C$ [" V6 P}
0 ~6 Y# d' o+ C5 O2 a+ [// convert a hex digit into decimal7 ]8 U, [* ^( ~' h
function deHex(aDigit)
! h" n6 H+ q5 J q; R7 }{
' ]- q0 C* q. V9 `" M% m return("0123456789ABCDEF".indexOf(aDigit))5 F' L( q' Z N% P3 S. e
}
+ s" z, g/ z o( N# e7 u! ], v3 k6 }
// Convert a 24bit number to hex
: L2 ?1 W3 Y. s# Y& t+ d3 @5 Sfunction toHex(n)
) o0 b7 o1 L3 K* G; s{. r/ r2 [! i H0 B0 K d) w7 ~
return (enHex((0xf00000 & n) >> 20) +
& n& t! u- M# v. r enHex((0x0f0000 & n) >> 16) +
8 j8 I/ ]7 Q5 e# t6 x" } enHex((0x00f000 & n) >> 12) +2 D( T! o. X% m; X0 j8 H
enHex((0x000f00 & n) >> 8) +8 H) M% X# w) U9 L( @/ c
enHex((0x0000f0 & n) >> 4) +
5 t3 ~1 H( \& N enHex((0x00000f & n) >> 0))
5 I! L! p! z! Q* s( C! X) @% G}4 N( k8 t; G/ u7 ]2 o
// Convert a six character hex to decimal; `0 v& |* u, u1 g
function toDecimal(hexNum)! l3 @8 R3 Q0 v! x
{
( e: w5 F* b- t) |2 b4 ]* O var tmp = ""+hexNum.toUpperCase()
+ {2 W' g ]4 N1 {' G8 C4 q while (tmp.length < 6) tmp = "0"+tmp
& U+ n9 G3 u" t% C4 @! R/ r9 o8 ^ return ((deHex(tmp.substring(0,1)) << 20) +9 G7 F- @! n% O" z8 t! ?- C9 U' Z* S
(deHex(tmp.substring(1,2)) << 16) +
9 F4 P6 w4 E5 [# M! }" K" m (deHex(tmp.substring(2,3)) << 12) +
) G8 y+ K+ i4 c; G+ g$ O (deHex(tmp.substring(3,4)) << 8) +3 C5 r8 G+ I) r% B0 O
(deHex(tmp.substring(4,5)) << 4) +
/ X+ R3 a& R1 R' V (deHex(tmp.substring(5,6))))
: l* F/ A& K# G}
+ N5 Y5 O5 D6 E s# t K# y///////////////////Shimmering Links/////////////////////
: D" P1 W( C8 `* {//global variables
( G7 F7 n: \) X, i4 ~' r% ~var hoverColour
+ Y7 y; W+ R b: y, u, Dvar numLinks;% V8 _% }& }/ g% ^7 _
var rate;
) u$ J# s! y0 \. T; @+ \. C+ J6 l. F0 Qvar numFadeLevels;
. r: h- c, L" V+ r+ Ovar bgR;* E" X; D8 W) T/ w' }# e9 I
var bgG;
+ c w% t! s' r5 \% u# \$ H0 ~var bgB;
0 a0 v0 T9 q& ]8 T; pvar currR;7 ~! j e @, l6 W6 M5 W U1 ^
var currG;1 R3 A3 u" y7 Z; B
var currB;
9 Q- V9 |) o3 M3 q1 M* H0 @var count;
3 @3 A6 S. j v' h' V# v5 Q Lvar fadeOut;
Q# r* O& a9 h5 j4 d6 l; dvar continuous;
- t; U9 ]/ e5 x" Y( Gvar newColour;
, e' y0 f6 J$ L/ }' dvar tID;7 i0 n+ T9 X5 h& S2 s
var redInterval;
9 C1 S7 I4 V7 f! @var greenInterval;
" T4 O/ \( C* B7 Z" w; ^$ r Zvar blueInterval;8 L8 [2 H ]; n4 f
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# w, y0 w9 W' \% L1 n0 |{
0 D A4 j+ f3 W! \% G hoverColour = mouseOverColour;2 A2 X/ b9 j/ Z: i4 ~
numLinks = numberOfLinks;
2 C- t- M$ d2 Q# e* t% x rate = 1;( Y# a9 y, c# v
numFadeLevels = 30;2 X$ B K$ n1 O1 k6 W
function initArray(theArray, length, val)
; p# r7 x4 R) P* { {
# R2 X6 r# K3 A+ i W1 v' z* r for(i=0;i<length;i++)
3 t1 P9 Q2 S- B w {! \; K# D5 l" ?0 s
theArray = val;
1 z( \2 q1 C m. q }
5 E% ~7 Y, } o3 R& u7 D }5 ^( B9 j7 f2 j7 ?$ Z3 F
bgR = '0000' + fadeOutColour.substring(1,3)6 k5 g6 ^" H2 q" V6 J4 G7 T& ~
bgG = '0000' + fadeOutColour.substring(3,5)
4 [; K _8 V4 `; ^; p% F bgB = '0000' + fadeOutColour.substring(5,7)
& L; C5 R: V* v* ? currR = new Array(numLinks);
5 }6 G6 r. J( N, x1 v F/ F( I e currG = new Array(numLinks);
( X/ O0 p2 u \6 p. [7 t6 d currB = new Array(numLinks);7 x' S5 H3 S [8 h3 {. }
count = new Array(numLinks);
4 N- g5 y# I- a M8 D fadeOut = new Array(numLinks);2 s- r9 q5 @0 r9 F6 `
continuous = new Array(numLinks);4 _; O8 A+ x( N7 R
newColour = new Array(numLinks);
9 J: P3 A* N/ T1 ] tID = new Array(numLinks);2 e( @9 u) [7 K0 }; A1 s
redInterval = toDecimal(bgR) / numFadeLevels;
$ O* \: V1 P) D6 v greenInterval = toDecimal(bgG) / numFadeLevels;/ i# J6 X$ w/ r3 \7 k
blueInterval = toDecimal(bgB) / numFadeLevels;. y- T' Y. p! L& ~
initArray(currR,numLinks,0);
4 p2 e# _: k7 s# w; h3 v2 L initArray(currG,numLinks,0);
) y, u$ g, `5 T* t5 Z: C) g initArray(currB,numLinks,0);
$ A9 z$ z- |6 L! J: X4 ?' n$ f; E initArray(count,numLinks,0);* Z9 E; L p. p. R
initArray(fadeOut,numLinks,true);6 C" ^3 A( M/ i- B
initArray(continuous,numLinks,true);$ j2 g( l) J2 s" W, g! |: X
} # a/ M; P* ~, @- y( N5 Z3 |* n% j
function startFade(id)
! B! n/ u, H+ R" ?2 P1 x( A; X{
q; F1 i* h. O+ m if(fadeOut[id] == true); Z9 U7 x6 q* G
{ /*move colour towards background colour (increment)*/
. S# a7 \; E- ~. D$ H6 J5 r currR[id] += redInterval;; q. Z: n0 C* K
currG[id] += greenInterval;
7 b1 s+ b; X% {# h) r: p* D currB[id] += blueInterval;: Z7 z1 Z( L6 {1 @% n
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 ~$ |, K! k6 u) ]' ?" `: I4 ~2 m if(++count[id] == numFadeLevels)
+ r& r: l* k, ?; d/ M {! A, q9 s$ Q9 l5 s; [9 {2 ?4 z
fadeOut[id] = false;
/ \6 D; s& Q7 Q6 ?- a0 P }
7 [5 f" i) H& b2 w2 _9 r/ t) r }
2 x, l( S3 H7 _' ^" c else
1 c! H ^; p+ v. x& X, V2 d) ` {; Z9 K1 n9 C1 x; u2 d) r. U7 A
currR[id] -= redInterval;
' m: ]8 `- `) t* W, G
" c, r+ g( y1 l currG[id] -= greenInterval;8 ], u! t+ Z' n) J
* n% S- T+ S: C5 e. c. b1 Z, ]
currB[id] -= blueInterval;
1 ]8 z( U! c3 n4 R5 V& w- s0 a, e, u; v# c" Y' _; b& q/ y$ z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ v* J- ?2 G" l2 F8 D
3 v- ?4 ?( h1 K& K if(--count[id] == 0)7 l% ?$ F& d9 i! V0 }! }: D0 ?
& Q8 w( V9 k" o- ^
{- g4 B9 E3 d, ?" ^# j1 @7 Y
) Q9 w% J, R+ L% P% H) e5 a' V0 F fadeOut[id] = true;
1 Q) J; o* a/ M: f% }4 a+ M" B- {- e4 @- C9 @# m6 ]
}: i/ J% p( N3 M; O: ~' U n9 ^+ \
# J/ P& m5 C" n5 n k
}
8 M; Y2 q3 W; @* ]8 Q; Q0 A. u* g- L5 m
if(continuous[id] == true)% }5 G4 P# j( m1 a
3 z4 m+ r9 G6 ?, l) Z5 u
{
1 t, m* k9 n4 A+ ~" T) U& U+ B5 l _0 Q1 s
* X. u3 q$ Q, \4 F document.getElementById(id).style.color = newColour[id];
8 r1 {* z3 H. R5 F( _) b- V2 X2 W3 `+ M9 {2 W
}8 Z% B8 L& R" `0 {: ~$ \0 P4 Z) O
: H$ N. E0 G! r9 x7 _
else# l( a, Q' x/ s d1 g# m
- n$ G. c# U! y* ^* G+ y0 b {
' l+ i$ m" d. b- x' A- Z
6 T: j* n7 b2 {" ~ document.getElementById(id).style.color = hoverColour;
8 f" f1 y5 K6 D! z# q& g+ L. _5 n& k: D0 w
}
% {) H0 z! `* ]. D' c
5 N. ^8 n$ C% U+ |6 W clearTimeout(tID[id]);
2 v$ e ~/ E: k n7 {, P- P' N
6 @: J/ I% [& s) {2 N7 J tID[id]=setTimeout('startFade(' + id + ')', rate);; g5 L6 O. w- R& R. {; g- S( ^
& d4 D$ M, o5 [}$ D1 B( u2 W4 K. e/ _7 A
% }( y T3 U( e
function continueFade(id)
4 o6 s. u. S) Y# J
& M* @3 t' B) i{+ f3 L2 G# }& B5 b
& k4 [5 S! ^2 A& H6 y, t3 X. v continuous[id] = true;
# r$ M* ?# g, h: X! \, {7 v) C1 n$ b j4 o0 F
}- t8 v. Z0 f0 N* U+ c. J
3 U0 C% ]; O$ V( G7 b( ]
function stopFade(id)
- ~' z5 B/ b, P( g: s' V( r" x7 R) I+ g
{. Q- E5 S. x' G9 }. X Z
t3 {; y. v! G continuous[id] = false;
/ P i- Y4 i2 x2 f1 X: \
3 z$ s( T* I5 k3 V8 b}! N, {+ `0 o" q4 w& p+ e, m
o/ X0 m7 o0 k: \1 D6 ? y
function StartTimers()
V$ x/ B- b' k+ Y$ R0 @" y, B( [
@: t5 K5 O6 e{ //set up an initial set of timers to start the shimmering effect1 x# f1 J2 G9 c. p4 _, y
% E U9 E6 [3 q/ m$ [4 l! t: } for(id=0; id<numLinks; id++)
1 m9 s/ ~# [( ^4 i3 c& q8 \! s( W5 v6 D5 g
{# k2 B h S- E2 l, S9 x# k: ?
6 u/ P# B Y3 J" { ]2 x. N t=setTimeout('startFade(' + id + ')', id*100);
! Q$ h% b4 ~ i1 `( K- Q
! E2 N1 O: W( R0 W. H9 X* D }
: V7 j. L/ Z, C" q0 {
. M0 i3 J* E, q5 w}
$ r) Y3 H+ e2 O& m* J
) u1 i( M7 l1 `4 A5 n& Z2 }//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- q% \8 U- S& R2 x; q* q
4 _! e9 ]4 ^. O2 f: t3 V' T
initLinks('#FF0000', 6, '#FFCC77');
0 l' _! y3 S B
5 G7 r1 e9 n, X2 W# U//-->
0 J4 h# E+ @, {" J7 c; j9 Z, ~2 D# s8 a2 |
</script>0 U2 z' q) Z- ?. l" ~ z3 v- y
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
: a! Z# ?$ V8 {' v V6 x: {* _$ H</a>' i4 B* {1 @. y s) v( e* u
<br>) B- B* D" N3 p% e
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>3 t4 O% `! U) ]& { [* g( d! g9 B7 \
<br> [9 ~, t, F2 t& z
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
1 O' r0 g9 z. ?, {' x2 x3 k<br>
; ^! F8 J. r( n<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>8 c2 y0 k$ w7 B
<br>; Y* ~6 J5 r7 u8 ~" e
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
* }# K T& ]' k<br>
# B8 y0 m, F4 D* o) `4 y# |<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
6 I: M+ G" ~6 p8 n- C<script language="javascript" type="text/javascript">
0 j+ Z Y2 E" S x' M ^: `+ }* ]<!--( ?5 _% c- o, M4 Y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 l. c: ]& {& c; ]0 L) W+ X5 ]% L
//-->( w" \+ }+ `- T' V$ o( X
</script> |
|