|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( R5 s. O0 e. E: y, w
<!--$ W, Z9 z6 V; `7 z7 [% N+ a S
// convert a single digit (0 - 16) into hex! \! x& i, b5 f, M; S
function enHex(aDigit)
- N& X3 o5 n% v0 d, L4 _$ Q{
, d8 w; B2 F0 ^1 w( a return("0123456789ABCDEF".substring(aDigit, aDigit+1))# n+ J4 p: L' @, o
}9 g+ W/ a* Z$ z8 T5 z
// convert a hex digit into decimal. B' O% ^, K. L! O) M- U6 W
function deHex(aDigit)
* s e3 D9 H9 l# k8 D7 a{' e) z! W2 g) k* X- \5 G( r
return("0123456789ABCDEF".indexOf(aDigit))
( I# X2 O& z$ W1 n# [, U}
2 w4 | ?, i+ z! h
" K" _2 x# E9 A- e! i( U3 z2 ?' ~' I// Convert a 24bit number to hex
; @, f6 r- S6 I! A: z+ Ifunction toHex(n)6 G8 [( A1 k: Q$ [$ s2 X9 {
{
( T! Q: N; x! B" e6 W4 l return (enHex((0xf00000 & n) >> 20) +. i# i+ X v6 u ^) r. [6 v9 x
enHex((0x0f0000 & n) >> 16) +
3 D& v7 @, {( q2 |) `0 E" E enHex((0x00f000 & n) >> 12) +2 S9 @3 F4 Q0 g3 Z% M8 B2 c0 j; H1 M
enHex((0x000f00 & n) >> 8) +
+ ]' \% y0 n3 D5 o; h& y6 s D enHex((0x0000f0 & n) >> 4) +- r W- S* e6 [
enHex((0x00000f & n) >> 0))
' g, |# M6 ^5 `- U( o}
( ?: b8 \1 |, q/ f" K }// Convert a six character hex to decimal
) ]7 I0 s; |+ Y$ B3 ?4 Nfunction toDecimal(hexNum)% W6 V1 M- `& z( K: G. W) O* U7 h; A0 J
{" o) E$ i8 B, r% h" M* L
var tmp = ""+hexNum.toUpperCase()
7 ^* @5 \# R Y while (tmp.length < 6) tmp = "0"+tmp
- ]! j. }% H0 y% V* `# h# E return ((deHex(tmp.substring(0,1)) << 20) +
, i4 v! ~* J" }% T6 y3 G (deHex(tmp.substring(1,2)) << 16) +
* J; b! L5 p5 h7 W/ E. D (deHex(tmp.substring(2,3)) << 12) +* X8 x( B* u* v4 {1 e
(deHex(tmp.substring(3,4)) << 8) +' h. q, K6 j; m: l8 ~
(deHex(tmp.substring(4,5)) << 4) +
: u6 ^& g6 E; O2 W: N5 q2 r (deHex(tmp.substring(5,6))))2 M% _! v/ k" s* s3 N2 C
}
. V% j0 J- _. }0 O2 ~! B///////////////////Shimmering Links/////////////////////! U0 p" t( K2 E5 h) j) C
//global variables
9 h$ D a9 S3 R/ \* B. |2 w$ ivar hoverColour2 q Q" h: R9 E0 ]/ R i
var numLinks;; K+ T! h P; Q! L. \0 b- A
var rate;
) u( r+ Y$ {3 z- d( }$ O( @var numFadeLevels;
- F2 }2 K/ D2 n0 X2 ^6 C) Pvar bgR;; U1 K" P: r! p
var bgG;" x7 ~5 S/ \' I! |# O
var bgB;
4 t( E/ X$ ]) h3 q; y, Evar currR;
6 K4 w% e2 _2 [9 @- Zvar currG;
, q8 w0 N" b+ I/ ~" b+ Ovar currB;
5 T: P' M, A0 [9 D' }var count;" a8 _7 [1 L0 R$ v8 G
var fadeOut;
0 s* ?( Q% b# I1 P" rvar continuous;
9 D5 P, e9 B6 A5 Z' {8 Vvar newColour;: F, I2 \3 m. }( T4 X$ K$ z
var tID;
& F# J) k. O( U& c9 H9 s/ N4 \1 xvar redInterval;
( n" d' b6 r/ ]8 t) ]1 _) U" q' }5 evar greenInterval;
2 P% @, E7 p' Xvar blueInterval;
4 l/ p- ?$ }: q) |. K" r$ f( Yfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
; ]% M& A# v( {6 k{
: a" R: q" t+ I) M5 ~- q, \" { hoverColour = mouseOverColour;
4 ]5 I" J: y, n* m numLinks = numberOfLinks;' B7 ]0 N( V+ h! A; v& {( F
rate = 1;% O/ f. d! j+ Q3 P7 w
numFadeLevels = 30;
6 p) C3 r$ L5 w2 `2 T& E; t* @* K function initArray(theArray, length, val)
$ [3 J+ M$ ^" A {* J& O$ H% i4 j7 j. m* j$ }
for(i=0;i<length;i++)
! v6 \) g0 B. a" m4 U) A {
) N1 ]% Y0 b b0 W1 s5 q7 m theArray = val;
$ w5 b0 l$ Z3 C" Z6 Y1 x8 p }
$ \% i! t) ` \7 l( ^1 d# @/ u5 S }' I$ s3 Q2 q1 N
bgR = '0000' + fadeOutColour.substring(1,3)
/ |& j, i) m$ A2 c9 b% h bgG = '0000' + fadeOutColour.substring(3,5)
3 U4 X% g4 A4 s$ m b' m bgB = '0000' + fadeOutColour.substring(5,7)
S/ z1 h3 M% A: r2 B0 Z currR = new Array(numLinks);
# u- O- ~+ M' W8 Z1 w currG = new Array(numLinks);
, u5 l" I# h8 ^1 t8 D" R5 W currB = new Array(numLinks);7 |8 `& s0 A2 B& q$ |& G# [) s0 B
count = new Array(numLinks);) I: s: E4 g$ d/ r- b6 j' c
fadeOut = new Array(numLinks);
) i( f$ l g1 [# x3 [* a! X3 ~" H continuous = new Array(numLinks);$ ~" m8 G0 I, g! F( N
newColour = new Array(numLinks);
, {6 b" _; A7 v2 y, P2 V/ D9 u# p. [ tID = new Array(numLinks);
4 D" o9 k% n4 U' T redInterval = toDecimal(bgR) / numFadeLevels;
3 z6 B4 I! o: X% ~ greenInterval = toDecimal(bgG) / numFadeLevels;
0 c1 @* |1 z7 `6 _. m; T blueInterval = toDecimal(bgB) / numFadeLevels;
- ?! S! Q- `) d4 e0 ^ initArray(currR,numLinks,0);/ X% U. `+ F( g/ z' F- Z8 Z
initArray(currG,numLinks,0);: d5 R7 ^ y" y5 v$ w4 ?
initArray(currB,numLinks,0);
4 Q$ M. W% K* ]2 L; g9 t' p initArray(count,numLinks,0);
0 n( m4 i+ ?+ e4 B8 n! |4 G initArray(fadeOut,numLinks,true);
$ _) Q, V. K4 E initArray(continuous,numLinks,true);
. z/ H/ l+ P6 a$ {: g4 J2 w2 x2 ~} ! I& h: \9 P2 `* |8 O
function startFade(id)+ k2 N& L* C2 B; Z. b" y7 y( [* E
{
: d+ F7 j7 q1 v+ R if(fadeOut[id] == true)
9 T6 z1 _- l3 }3 X { /*move colour towards background colour (increment)*/% O$ n9 `# T8 d4 X8 J' Q! ^
currR[id] += redInterval;( w( F1 l: v! K$ @; w/ T) o
currG[id] += greenInterval;
; U1 x/ l! ?- C+ ]5 U7 Y# n currB[id] += blueInterval;
8 N# ?! @8 |) G7 Q( n. W newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);& c& R7 _+ l. {$ t* }' b7 t: R( g
if(++count[id] == numFadeLevels)5 l& N- X: ^. s* }
{
; k: F* R6 E( ^: g* f fadeOut[id] = false;
0 L& w) v5 D8 L6 Q }
/ A: u& Z* I Z1 J: {+ q$ N }* g- g$ a$ a; D6 x
else
, r& \, s1 |& s; E( n' h {6 w% k6 |! H# h7 a& N
currR[id] -= redInterval;
0 C4 s4 v7 b0 p& p5 _0 r( j, {0 P2 |8 h
currG[id] -= greenInterval;
2 R; m. B) u- V5 X( M' W8 R' i
# c; o5 p; \4 _, {& r. M& P) O# E currB[id] -= blueInterval;
$ }" n& }4 d/ _# M
4 [0 B4 X! d( l7 r P0 d; U) a newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( ?" u; c6 q/ {- r) Z9 L- z% z! [0 X8 u, |2 ^/ g# Z
if(--count[id] == 0)
, K/ ~/ g$ _3 H- B R3 b2 }$ ?; T; [& g. o4 I! N3 K; X
{8 c6 c8 Y$ s+ |4 w* O ^1 t
6 `% |) C- x5 ^8 k1 u: S. ?& a
fadeOut[id] = true;/ E$ j* t( r7 b6 X& A
9 d7 A9 ]9 _8 d6 A6 v* O( m+ a
}
" g: S3 C, b4 F; B
, p+ d: F: u1 x' i4 K }7 l+ o8 h' F& _# g
" M0 J6 ?! u4 F. E4 u! T+ F if(continuous[id] == true)2 `& T; h/ P' ?% C. U$ I& ]
) Q- F! n' d* m- A {7 y/ f# ~5 }7 o" g7 A+ b4 `) X, _
9 I" Y0 T% f8 X4 n! e0 d
document.getElementById(id).style.color = newColour[id]; / R2 |: n: X6 m% }' L0 T
( ]2 V# [( N. S% {% h }! W' i$ p. p3 X
3 q) W9 I" {7 D `$ ^/ h+ y else( ]; w6 V' }; @
$ A6 l* h1 d* R) c7 g {. M4 K" N6 p& A: T) O
7 r' @; m* F* t: w0 [) x document.getElementById(id).style.color = hoverColour;- o" `/ y. h3 Y+ t: m9 ]
* x5 `+ O- T: g/ |( b. F, n
}3 k7 A/ V2 T4 I& F7 o
g# I( Z( v6 N# R# e clearTimeout(tID[id]);
/ U/ ^+ s \- Q+ G7 G2 v; ~
" S& Y$ d" G1 d% C' ]" o tID[id]=setTimeout('startFade(' + id + ')', rate);
! N6 q6 G* [( x: z% y
) [2 h" z/ ]& z4 K3 \}; H/ D9 U. T7 N% x5 a0 x8 _
`* v3 I u! }8 K# L! |function continueFade(id)
# i) S5 X; d; M; S" x* v" r
( H0 u4 a0 T1 [" a- H F6 K{1 y" i$ Q9 C9 ]8 q- q
1 z v7 ]& u+ b4 G3 v3 Y5 M: N# I continuous[id] = true;
6 y: o* U4 j, {4 ~& u: C( h/ t3 M$ N+ [+ |1 c4 x g) q) ?- E
}2 h4 `: D- B# w( w% e- ]
8 }& x/ l/ R+ {
function stopFade(id)- D4 }' T' n2 C' e2 A: G: s
1 L8 _, g* r" ]) {' i{
6 P% a' M5 H3 x* j/ v! p( r3 Z' a9 Z6 `5 x$ l* Q9 o" X
continuous[id] = false;6 x2 _8 G) r) \* R6 k: d$ J7 Z$ |+ R
6 y" u6 a$ V8 X: X; Z
}' O9 R1 ?+ M9 I# R- {
& r$ v/ O- z7 ~5 K
function StartTimers()
7 O; e" r1 t! ]8 c# h* B" C ]. I6 K
{ //set up an initial set of timers to start the shimmering effect
6 e, y# c8 I1 J6 W% c
9 W+ w7 R! V j for(id=0; id<numLinks; id++)
# B/ h' ~: `' `: y9 ^" Z* w R
, j0 j/ \! ^- ^ {
# @" x; m5 Z$ o e, e' y4 E, E+ A, K' W% E$ k0 ]
t=setTimeout('startFade(' + id + ')', id*100);
/ P. \- E# J. C3 ^9 O
9 z2 H9 g/ ^# \3 r% I. y% V }
) d* j) J% d2 }7 a6 o0 @
8 P% q1 t3 L" J+ W$ k}+ x) h6 C, D; n: b
( C. k. f/ G I t$ h. ^
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
( J7 a* t* x7 a8 N J+ u( g9 u7 o" F9 c$ n: [
initLinks('#FF0000', 6, '#FFCC77');* h) g: T* D9 ?" a0 ^0 p9 ?
0 ?7 o% t& b1 {) w//-->
; y9 s2 e; x; T4 w( P) D- z H7 Z( V+ C4 `# q D$ V
</script>
# H' }8 k5 q, o" l; w, J<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元- Z" \1 y1 I7 @0 @- S) B3 C9 C$ A
</a>
5 t4 K u/ ?; k' N$ \ b% B2 b<br>9 Y% U" w4 {+ w/ K4 ~
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>' T4 {4 A0 ? A4 N2 @7 Z
<br>
P1 x {( T' D. [% U0 V1 V<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>3 L3 ~$ l$ a! t& I' Y6 P
<br>
9 v* ^; e h* D<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>9 N( w2 B, @# _4 p6 |6 D3 c
<br>
. _9 e f% l" Q8 O8 [% z+ H<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ S" p- b+ W$ V, Z7 v9 F& G) f5 x+ H
<br>
" u9 ^. B7 h# s% _<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
; V6 b9 g7 f ]& i2 }1 y+ ^8 V1 N, b<script language="javascript" type="text/javascript">5 ]- b0 M2 ?; K: g0 m; {1 p
<!--
7 F X" S5 U; T0 O+ r* y8 j* TsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering' F8 E8 {$ x# T5 `+ @
//-->
5 N: B) D! O6 Y# R</script> |
|
发表于 2008-1-21 20:48
|