|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
' n3 k* y5 O8 l4 g, k$ i# j/ Q" D2 ?<!--0 T* ?9 |2 S+ P6 g: Q3 ?
// convert a single digit (0 - 16) into hex
h1 c* m) l/ m- z+ v3 k; kfunction enHex(aDigit)
9 K9 `! X8 H$ k4 U& [& b9 l# n{( b6 \7 Q. n, l2 U9 x4 M
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 O, ~+ s( K5 q& B; u [/ h}
9 e5 L$ r8 A* _9 O// convert a hex digit into decimal
3 a$ _5 U$ @. Y& x+ r) h% cfunction deHex(aDigit)& m; E1 E! g4 }
{' |0 j; U0 X- }1 P7 H7 X4 H g
return("0123456789ABCDEF".indexOf(aDigit)), j) n ^4 b/ ^/ c. {8 C9 V p
}% W; N9 ?7 O$ K) p
8 n% u: m$ M0 G# S
// Convert a 24bit number to hex1 f6 q ^5 [' @1 u1 y! {) z% {1 V
function toHex(n)3 \& @. J* t( p! O$ N
{; _ S& }* L. Z9 D% f( x- V
return (enHex((0xf00000 & n) >> 20) +
5 {, K" q' p3 `6 t# I enHex((0x0f0000 & n) >> 16) +
% n& Q, s9 u+ W enHex((0x00f000 & n) >> 12) +2 g! |+ z Q" H
enHex((0x000f00 & n) >> 8) +
$ ?( q: E0 U/ A6 V5 d3 d% q, ^ enHex((0x0000f0 & n) >> 4) +
; V; }: |' R @3 a% d9 J enHex((0x00000f & n) >> 0))" Y: I$ U# m6 Q' u
}
! ]* l4 l" Z( _9 x' M! B// Convert a six character hex to decimal5 q: E: S& D9 j6 i% T( K
function toDecimal(hexNum)
* A' o- E8 N3 e1 f{
3 } O' g4 c8 \$ O- U. P var tmp = ""+hexNum.toUpperCase()
6 }2 h9 } h0 ~6 U while (tmp.length < 6) tmp = "0"+tmp; J9 P( L1 w' C: ~' w9 o$ ^
return ((deHex(tmp.substring(0,1)) << 20) +
) Y; V2 F$ ^8 D/ B$ p: ? (deHex(tmp.substring(1,2)) << 16) +
% K1 e1 l- p, S- v. C (deHex(tmp.substring(2,3)) << 12) +
5 b( F" F# @7 S2 U6 c (deHex(tmp.substring(3,4)) << 8) +
/ a+ h |8 Y+ s% I6 O7 E; }& m (deHex(tmp.substring(4,5)) << 4) +
( B+ u6 ^3 N. s3 l (deHex(tmp.substring(5,6))))
5 c4 R) d8 _- {3 h8 e}* m' @" U* m' m
///////////////////Shimmering Links/////////////////////! l4 ]7 }5 h) b" N- H, A9 D- _
//global variables
! U0 P. A1 v" J; ?! W _var hoverColour+ I$ @ b2 F9 O
var numLinks;
( s) j b1 S. ]% Fvar rate;
2 M! e$ K! v0 U0 Rvar numFadeLevels;
0 o# c& b% h& i( svar bgR;
! f8 P& s4 \0 {& X! dvar bgG;
# I" Y. ~3 M: s' t1 J/ e# d' Wvar bgB;
" T" `& n, r" ?var currR;
7 _6 S, r: U+ v8 d; fvar currG;; _+ y u7 u' |0 v
var currB;6 c1 S" S J2 o( _6 |. u* ^
var count;
- W" I N1 r* G- _. z1 x2 d. i5 U$ |var fadeOut;
" p2 h0 v! n4 [var continuous;
( W, h& J1 s, y5 f8 H6 Jvar newColour;
/ r4 O# o' _" x7 Q2 |6 u0 vvar tID;
' T3 Q6 u3 {* ]; ovar redInterval;
o: M5 n$ ]3 q6 K: n2 ]var greenInterval;" ]6 `5 m; U' U
var blueInterval;
6 n% |5 _0 Z& x/ g: kfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)% V. N3 I5 Q+ o
{
' L( z2 | p8 ?3 y: @6 X hoverColour = mouseOverColour;
; i; k5 B) A- l! E numLinks = numberOfLinks;
$ t1 u; x/ r0 G rate = 1;+ u7 @/ a2 X- J, r6 V s6 L. {% }/ o8 m
numFadeLevels = 30;
# o4 l4 w- ~" U( x0 ^: z; Y function initArray(theArray, length, val)9 \1 \; r* w {8 |* ~( ?0 M' ]( A) E
{
* v* O6 T8 U5 ?: i) v6 @4 q7 p for(i=0;i<length;i++)
, p+ i; W/ c( l, j7 } C {
) S6 q0 ? l+ p# w1 p theArray = val;3 Q3 s$ Z7 y. |! A
}: e- _6 X# g# @( z* A- @
}
3 ~9 ^) o* c8 }: ~* H' V J bgR = '0000' + fadeOutColour.substring(1,3)$ |1 U& v) j2 j( V c& _$ K
bgG = '0000' + fadeOutColour.substring(3,5)
* J( {; v5 h2 T3 o" s5 f: C7 X bgB = '0000' + fadeOutColour.substring(5,7); i' F! I4 X" z6 n" O
currR = new Array(numLinks);1 B" v3 f0 v! a& y; e$ ?
currG = new Array(numLinks);
6 B8 k5 h O* S* K$ O- ? s currB = new Array(numLinks);
; _, U( m: t2 i6 G- k8 E- c count = new Array(numLinks);$ ^- \$ U$ x+ Q* ~3 @5 ~% U
fadeOut = new Array(numLinks);) ~! u; o7 _/ d& Q
continuous = new Array(numLinks);* l( p) g2 r# D
newColour = new Array(numLinks);
. X, P: u4 b* O9 m tID = new Array(numLinks);
2 E) Y X& s8 Z, {/ M redInterval = toDecimal(bgR) / numFadeLevels;
/ x8 V( V- P7 E8 t! S greenInterval = toDecimal(bgG) / numFadeLevels;/ u t" ?: | i/ n+ x
blueInterval = toDecimal(bgB) / numFadeLevels;
, A3 O* f5 U2 a+ h0 D/ C initArray(currR,numLinks,0);/ d% V: ]5 v6 U& v* O
initArray(currG,numLinks,0);
* e8 k2 k1 W6 b* X0 n4 b: z; a$ j1 y initArray(currB,numLinks,0);
! a& f! M2 J( y3 |" Z initArray(count,numLinks,0);) ]& P5 ]$ A; {
initArray(fadeOut,numLinks,true);! C) b$ x4 W- T/ S: n8 X/ j
initArray(continuous,numLinks,true);7 {1 X7 l2 h7 Y0 L; y& c- c
}
`, v# e# |0 Y5 z: @% F7 Z( ofunction startFade(id)9 M1 j3 Q' Q0 J4 L2 i* ?/ M8 C
{
6 X: b j/ C2 G3 ?6 d8 \( N if(fadeOut[id] == true)
, F% D+ h! _% y3 G1 _ { /*move colour towards background colour (increment)*/+ f9 u: d, ?2 N" G8 [: y' l
currR[id] += redInterval;+ w4 g2 q) }: D8 P
currG[id] += greenInterval;3 p8 d) r( f# U7 v& ]! h2 r1 z
currB[id] += blueInterval;" X) W$ Q/ b0 L0 N9 b4 e% b7 h
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6); K$ y# z5 H. j6 `' \' n
if(++count[id] == numFadeLevels)( e& x3 T2 k# m3 ~, }
{6 j( B5 l" d2 _, `- A3 D8 m0 A% C
fadeOut[id] = false;
$ }8 T8 Z; n9 v: x$ u2 m% l# V2 O s }" y. Y+ N. T4 r
}- e3 x( m; _2 N. s9 ~* |/ _
else" \: Q( ~$ Z7 l
{
) f& f5 F- q' B! m) B currR[id] -= redInterval;
5 O- n1 a7 M. \3 F0 x" T* S D1 l. Q) h! h3 y# C* G7 ] {
currG[id] -= greenInterval;: V7 l! s f# \3 ~
* v4 `* d4 }) ^1 S$ v0 i. L" x8 ~: O
currB[id] -= blueInterval;4 U# L/ X( o! N5 E+ M2 D
& R$ h! T8 f- H( x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ t1 K' K/ e, F( w* V
1 o) m7 k; Y! L( w) `: i/ ~ if(--count[id] == 0)
3 [" G6 ^' n$ Q1 R. E
) u6 b9 q$ _" |+ P- r$ o/ \ {
% l( F0 l, Z( b& B4 c% d# X1 S2 t$ ]4 X6 q8 H9 t$ P0 y4 k/ d9 B
fadeOut[id] = true;
b3 ^- h* _4 s5 j, Q1 h. _# L! B5 Y7 S4 P
}
0 Z6 X3 K6 D) b- P+ r
. Z' u4 a" ]8 m! Z }
9 Y& H( ?- ]$ `' j5 M0 E: j: B a7 A9 F
if(continuous[id] == true)2 [7 c9 \' _' j/ v5 ^' O3 s
' J: K8 R& A5 B* N3 l) Y
{1 ~8 }: Y7 n& d9 c) _
0 C5 n2 D6 n5 k2 `# }5 ^
document.getElementById(id).style.color = newColour[id];
% y/ q. c6 F* o6 X5 w# d. q4 r! {* A. ^; C* H% ]7 R
}# x3 T0 A3 L3 L0 o. P: `% }9 M
$ S6 U( j, w3 V- t; H
else5 t" F) J [) Z- z1 F/ O; `
* \6 T; Z1 G; [# B1 k) K {
5 u+ `- e( o2 |$ s6 ^. j
X) J8 o& d, L$ \* s8 a) `# m8 x document.getElementById(id).style.color = hoverColour;2 ~9 o/ V/ {8 i _* t2 x; I! j
2 j# N% L; a6 Q9 Y% g( P! ]
}3 ?$ F6 c4 c, d; S. {; c2 L
7 b3 k* F0 Z% `
clearTimeout(tID[id]);
P3 O- F, ~/ y' Z9 X/ @7 I+ h! Z; K$ \( G5 @2 Y* W: `/ l
tID[id]=setTimeout('startFade(' + id + ')', rate);
" N; v& `! f/ B; c; _) r+ N/ p4 `: l4 k S% Y& V
}
& R6 [8 j% ~. Q/ _
: Q+ s8 _& S9 ^0 ]# tfunction continueFade(id): l1 j" k( M! C7 S0 L: U
2 D6 P+ Y. p* l5 H0 o
{ e1 N: e' H( \0 U
% W" W5 p! T: o1 h" V
continuous[id] = true;
& R4 _% w9 t5 {1 w0 U* h7 Y8 H6 ]% V- o( R
}
8 O/ q1 H, _" l4 B
! Q7 N9 p# F5 ]function stopFade(id)
* q" k3 N2 s3 z5 _4 Q# p8 }5 |4 B4 a; t
{
& w7 P, m) N+ W/ T4 C* {
9 d/ }0 y: ]5 y; {: O% { continuous[id] = false;
. x3 ?. g1 D3 }7 s+ S( Y4 w
" S6 I( z* L; n9 I, B/ Q) A' A2 q' v}
4 n0 h4 C' A& M0 F
' K: Y% o1 `7 `( c$ \. E( Xfunction StartTimers()& J0 Y6 |; u$ v6 A6 j- H/ l7 @, `
( R. [) |7 w" A* f9 E- P6 b{ //set up an initial set of timers to start the shimmering effect
1 T, N# G$ {) }. z" V0 h) q3 m9 ?8 f2 W. j$ f
for(id=0; id<numLinks; id++)
; L1 j' F3 r) _( ]
7 ~$ \' s4 C. }! S7 o5 Z$ r1 U {
' h5 _3 A$ Q1 @2 D, F; x7 M9 M
& Q0 f- F7 R1 l# ]5 c6 { t=setTimeout('startFade(' + id + ')', id*100);
: k' D% p( q" i
# \1 {, w; {, c: s$ m }
, w4 J' `1 Q' ^8 }* f6 [1 K% N
" L7 ~, ^3 ?( L8 w}
8 x& J7 s* P* S- ]8 n: s3 i! V& a5 C# r a, N5 a$ G; V6 Z
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
$ w0 A$ v2 r( C# W, x5 B6 s% R$ N& `( U% X! v7 M1 U1 n
initLinks('#FF0000', 6, '#FFCC77');
# j% {( c6 X# N7 Y, K" Q
7 }- H8 H' U- m( K, Z+ _; U, h1 p( V; P# t) p//-->
j' E6 W) Q( {( x- r
$ K: E4 W- F: ]: z1 S" Q) ?</script>1 [% E" I- Y8 X2 J
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元* y7 p, A n; {, @
</a>
4 P( W k) z m0 u6 m' [<br>) E: a7 b! h' P1 \$ `% s5 d' [/ N7 l
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>- P7 O1 H7 S& ?9 Y& Q. v1 g$ L. Y
<br>! {& P& \* n5 r( Y0 O G. F
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
3 z* l T! j+ @& `<br>
4 x+ s& {5 y; g& b+ U4 @/ r<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
7 X" A# d3 Z/ c1 A) m<br>
# \* q0 \- o* M- J<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' M' X/ W4 j4 @7 {& ]1 b<br>( F# B o& x2 m. e3 i6 B
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
/ F5 j( D4 ^5 P4 \/ y- k<script language="javascript" type="text/javascript">
3 }) y8 n a9 z4 U<!--
; ^+ @% H* Q2 x+ _' X2 b# [5 bsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering" L. C. `, g" c
//-->
! H+ B# q; @. ~' k- h# Q</script> |
|
发表于 2008-1-21 20:48
|