|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 C2 X( b* `( m3 k<!--7 q( j3 N1 R; n/ q' f
// convert a single digit (0 - 16) into hex
9 q' M" { f$ D/ v* c* e7 o% K* Ofunction enHex(aDigit)
8 P# a. n0 a! G( D" t( \ l9 D{1 }; n2 I2 c, V# B
return("0123456789ABCDEF".substring(aDigit, aDigit+1))" ~* F+ x; Z+ S5 m% S, g
}
X; u3 G+ y7 Y1 k% b" m// convert a hex digit into decimal1 @9 S/ k0 n G" z: j: Q
function deHex(aDigit)
7 v) U- p% a+ z( U, z* P, q5 h{
% G+ S& S2 i+ _. N4 A return("0123456789ABCDEF".indexOf(aDigit))
5 D. s, |! `: k- [}
- ]( @2 f2 [8 |1 l* [) S+ W2 _, H- N
# c U3 Q& c# s% F// Convert a 24bit number to hex' r) l& z, b3 c* j0 i; t( A
function toHex(n)2 @5 q) P9 n5 ^! u9 B
{6 ?2 b x0 ~+ u A1 l8 i. m0 R5 n
return (enHex((0xf00000 & n) >> 20) +5 I* `; X0 U3 r, g
enHex((0x0f0000 & n) >> 16) +0 t& g- H8 @3 F3 T3 f
enHex((0x00f000 & n) >> 12) +
9 q2 p3 n- x; w3 T, ?, c! \" ~ enHex((0x000f00 & n) >> 8) +. L+ j% j, Y3 W7 @: P3 @9 V
enHex((0x0000f0 & n) >> 4) +
$ L% ]# A0 j& M N; B) Z7 g enHex((0x00000f & n) >> 0))7 R+ Z1 i% T! _1 d
}
+ \9 k ?$ s, ?+ V. V4 j* B// Convert a six character hex to decimal. J, t+ L! E: C2 Q. ^
function toDecimal(hexNum): W( b Q/ F) I- ?" ?9 Y
{7 Q) B! S, x; f2 e% n: d
var tmp = ""+hexNum.toUpperCase()2 f8 Q. Z: D) N9 h' J
while (tmp.length < 6) tmp = "0"+tmp
4 `* ~. B. V* n- q return ((deHex(tmp.substring(0,1)) << 20) +
' d; I6 q/ {# \3 p: |$ { (deHex(tmp.substring(1,2)) << 16) + ( ^$ O; T6 m3 a% H f
(deHex(tmp.substring(2,3)) << 12) +
, C. g( ^2 s: n: R9 o$ _9 G (deHex(tmp.substring(3,4)) << 8) +
' s, c4 W. i' x, k8 z5 u (deHex(tmp.substring(4,5)) << 4) +7 c+ \7 T% M5 i# d! ~
(deHex(tmp.substring(5,6))))3 q( t! ~: C; I' ]" K
}) \4 K A- w# j6 d" L% q9 z6 ~9 ]& l
///////////////////Shimmering Links/////////////////////1 V3 f! o) S, j/ G" N
//global variables
Z/ |3 E% Y! q ?8 ~% ~% ?4 y9 U- q- Tvar hoverColour
3 D; h1 ?7 B3 J* {: V6 Hvar numLinks;9 t7 [- [; H1 |1 J, N3 k) d
var rate;% X" m p* D( r" M- P
var numFadeLevels;5 r" b9 |7 a: K3 \& J% Z
var bgR;. I4 ?4 ~0 M: K
var bgG;
/ r5 N% h) k- o( o$ M5 jvar bgB;! c* q6 v( Z2 ?1 f& W
var currR;. c& U% T: G. m+ P; A! Z Z
var currG;5 ~2 M3 m8 @& s7 t
var currB;( K, I" S5 q8 P: O
var count;) h$ [' j$ a( J6 _. {. G# \2 l6 q
var fadeOut;
' M, \: I6 |2 @4 P- v5 o1 Uvar continuous;
! G4 S% Y8 f* P+ a8 J0 N/ t* Mvar newColour;
' @* g" U, _* y% v( Ivar tID;
Q) V. ]& Q8 o, X9 o, d; Ovar redInterval;7 r: q, f) Q3 u7 s. R- Y
var greenInterval;% W; W, f; c5 {& S3 k/ q
var blueInterval;2 m! q/ F$ V: E/ B- m) ?
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 z; k" d9 i* V% p3 o3 Y{/ f% a& @4 m0 e; }( ^
hoverColour = mouseOverColour;$ V2 E* Y: B% ?# `2 L4 i
numLinks = numberOfLinks;
% Z: p$ i+ [' R. t* t/ T. w rate = 1;
2 K- Y2 L. B" C numFadeLevels = 30;
; g! _, L$ R% x/ a( N7 S2 F function initArray(theArray, length, val) r" F8 L! U3 O2 k
{
2 {) H t- ?8 o! f$ P6 _1 Z for(i=0;i<length;i++)- h1 a1 H; k! y
{
* o& V) \% M8 W theArray = val;, u( n( @6 }7 O& z
}
- f3 {2 Y% ~8 P2 d& u" M P) q }
+ B: T* l5 h! e8 d; K bgR = '0000' + fadeOutColour.substring(1,3)+ e e" i# X& n Y) [- c2 z" o. O
bgG = '0000' + fadeOutColour.substring(3,5)
1 s/ |4 y& ~% P0 _# U2 Y& u bgB = '0000' + fadeOutColour.substring(5,7)
/ e1 P9 y( F/ p- G3 j currR = new Array(numLinks);+ v- t3 S+ x7 ^' y
currG = new Array(numLinks);
. j# g* C, ?, @6 f g$ p currB = new Array(numLinks);
# h% j! v7 t) ]7 D/ z) r count = new Array(numLinks);- m8 T; l. i$ Y) x3 m# N
fadeOut = new Array(numLinks);
8 X" Q+ o- e* H* Z continuous = new Array(numLinks);/ f5 u/ P$ Q# _& \2 Y% G6 N
newColour = new Array(numLinks);, S: w4 h+ l' m
tID = new Array(numLinks);
. R6 Y& v2 r* e) K6 B redInterval = toDecimal(bgR) / numFadeLevels;
- X1 M% x9 X2 J. v+ Y greenInterval = toDecimal(bgG) / numFadeLevels;
0 X, l6 o" t/ I9 v8 d$ m blueInterval = toDecimal(bgB) / numFadeLevels;5 R2 Y9 g- A7 m' j9 o+ U
initArray(currR,numLinks,0);
$ v+ V4 C4 h( n$ O( H: l' Z- C0 }0 T3 i initArray(currG,numLinks,0);
9 `. y2 A* ^ F4 z2 | initArray(currB,numLinks,0);" P' }4 X$ e# G, X- _" x
initArray(count,numLinks,0);
) L4 i% x, I4 [7 n3 J8 Z initArray(fadeOut,numLinks,true);
; @- B1 y, Z( b& j initArray(continuous,numLinks,true);- \; s3 a' m$ O- h5 J P: s
}
3 i r# A# Q; \0 s* ?function startFade(id)$ x0 o( S& D3 c/ s0 e/ i
{; c; A, L( |, ^# ^" p
if(fadeOut[id] == true)6 p4 x7 e, Y8 t1 J( g. H! _
{ /*move colour towards background colour (increment)*/* g s% |& h. h+ M4 ~
currR[id] += redInterval;* ~9 l& ^; F. q' c1 U
currG[id] += greenInterval;
2 N o! y. r; E currB[id] += blueInterval;( g; C& [: s) I; x
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- I/ ^! o& q& v4 _- ]3 I if(++count[id] == numFadeLevels)
8 X) k# z5 j# |# N {
6 r# g1 c2 v+ u fadeOut[id] = false;4 S- z0 o U( O' Q
}+ Y9 {$ L# J# g
} o, P W, s2 q* H. u
else2 y( ]* N" U7 M# v" Z
{) X! k5 ?! V9 `+ T
currR[id] -= redInterval;
- b' ?: v* C3 V' G# V- b* i: A# b
& i" H" O% G, J currG[id] -= greenInterval;
7 k4 R0 \% I; G y. T4 h) ^0 q3 u' r% e" W) |) G" s' D2 }
currB[id] -= blueInterval;
" f @% ? e9 h! v9 U+ T4 J) t4 k3 q" v, |) z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 m3 ]. r4 I1 a0 L9 G z6 V# B7 P1 m& I
if(--count[id] == 0)
* {- t/ d' u' A m. h* F$ f0 ?5 m- Q5 O1 { W( F% e: P
{ U+ O* t4 I/ ~+ S' \
" R" \% ]9 g" ^9 v" v7 o
fadeOut[id] = true;
! ^- `! z2 A* \* S; ~' t6 E% |- c* o
' P6 F3 O! X; @; ^ }3 p3 I( f8 g) d! c, o% [
- H0 j' e, U6 X# P }
9 I H0 s5 e* @5 G+ C8 x4 B$ d5 e) U) U0 }3 F
if(continuous[id] == true)
5 O/ V. Z" T% u$ M& \" L& P# H0 L/ B
{
( N4 s9 n( w: L5 m, l* g9 x/ j7 r
; G! _! |1 U( }0 U% J document.getElementById(id).style.color = newColour[id]; # d, e+ G! I9 {0 l" d( G @
; ^# @! q# V( K
}
1 R, \' T1 G- A5 V7 O o: V+ a* q$ ~; M1 f9 r% `
else
7 F: t5 d5 T# F. f/ \5 c0 N8 P. r; r3 r) G3 i# U
{
; B) ~9 j* g' t$ d2 l. F
5 E8 Z5 e0 O$ z8 r& I e ~ document.getElementById(id).style.color = hoverColour;( p( K) t( c, h2 j: R
. B# y1 T9 b8 O7 h
}
+ X y4 V n7 A) w G/ a% @7 \
" I. \/ v0 m. W! F clearTimeout(tID[id]);
# u6 P# d" y" T& ^( D
3 b) b# U. u! r# ~, I5 m tID[id]=setTimeout('startFade(' + id + ')', rate);
. [' I" A2 w% m' M$ i0 O
; l! ^ i0 j6 @# O}2 q; i# Z: k: ~' K+ d( T1 d4 R
% t9 Q& H) ~$ S" Z7 f; c2 P5 N7 g* ?
function continueFade(id)$ B" ^. d/ h3 r
% B/ W4 u2 K1 C7 {- u
{
: i3 c, |+ j& @) X1 [; E
$ ]8 {& u. ], C9 V+ j6 j7 G continuous[id] = true;% L" A# v: |3 }8 }2 A; U* s
& ^) w- T+ \2 `$ m$ O9 m5 R) @
}
0 G+ s! p! T' Y1 X2 _( A9 @0 z
0 @% N" _9 m f9 q5 ]; \0 qfunction stopFade(id)1 j f5 L5 m5 \
" R6 O* R% G: U* j' ]& ?7 g{. a* b0 d; l- e
: x, G6 v: c. U0 Q+ O4 ~$ ~ continuous[id] = false;
! \7 X! b5 A5 n: n4 d' U, I$ H9 O C" t; n$ `$ j1 H* U
}" k' W' c$ L# X) O. Z
- R8 o8 h, k. m2 X2 Y8 F
function StartTimers()
- v& F H. T: }% t+ G1 p3 K2 w1 W4 Q/ _1 F4 [, Q
{ //set up an initial set of timers to start the shimmering effect
2 x* y C+ g1 f. ]
' C, \( g7 O0 n* A for(id=0; id<numLinks; id++)
9 m: T9 l- \& k+ S7 W/ f2 B* U2 B9 d
{
6 N2 S( g2 t4 u% o. I; c2 g% J
& ^) e& e; A7 E! h9 n- @ t=setTimeout('startFade(' + id + ')', id*100);1 \' R( p! @9 X
/ c4 ]; y! y5 w( s! G, n- M }
/ V L& U( g- L5 i, B- K
( V* v" _! s( f% m4 Z* Z3 E}
+ n& @# Z4 c0 b7 c' Q1 m8 |
2 k5 K! ~3 R- m# c: }//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')% y4 g8 P1 j( d# a! U1 N' V2 z" f
Q: [& R, F) m. z* q, V" IinitLinks('#FF0000', 6, '#FFCC77');
J4 g! }" w2 b. j. ^/ p7 N; l; m( Z: m( O% c$ K) o
//-->
) x/ K8 F+ |, O- _5 H4 m# p! C/ Y9 f7 H) ?; H: c0 Q' o4 I
</script>
7 R; w9 a5 G) l! B/ k# k9 d<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
* I( Z/ }, Q+ i( j</a>
6 `# Q4 U5 `6 F$ k<br>
% z9 v- i4 @ u: |7 P- H" [<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>' w! T8 i( A% j4 _
<br>) W; x6 M0 @* J% W7 |/ {" t
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ `" E R3 q% u6 M<br> 9 p c& D0 M; F4 l
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
6 N) F8 R7 P/ D' e) p# o<br>
+ s- I- F+ C! P! y3 v<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
4 g( m5 p9 ]# ~: w* h$ w3 d<br>
- ?1 b! h4 {. F/ R1 B0 d8 {<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* U7 L) A p% c* k2 c. f$ H
<script language="javascript" type="text/javascript">3 a6 v6 H, s6 @+ l7 R
<!--
m6 C4 A4 K. Q( J5 S ssetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 }- d' d& b% L' V- \- P& q//-->6 [2 ?7 l, d4 w: s
</script> |
|
发表于 2008-1-21 20:48
|