|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( J# t* I; A' `# M, a# q. d+ O
<!--
W6 R( ]1 J4 B. A( h% L// convert a single digit (0 - 16) into hex
' |$ ^! \- T8 Wfunction enHex(aDigit)+ I! ~+ `& V l* A* N
{" M0 y& _: t- R
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
2 p+ j; u+ a! t7 y}, w6 g. x5 D: i) {: |
// convert a hex digit into decimal% S1 p- Z! R5 w% r+ V
function deHex(aDigit)
8 @3 W3 j! B: U+ [3 _& d9 x" M{; f x# [& L+ H, v& T
return("0123456789ABCDEF".indexOf(aDigit))
# I0 Z2 r# A" I! F9 |7 ]$ I}1 s% \; \6 D, j
& G( h; e& q" s/ M// Convert a 24bit number to hex6 G4 E4 [3 L! d5 F/ e% `
function toHex(n)( |5 X Z* Y7 D$ H, l% Z
{4 d4 }& y. o. _9 i2 j" ]% Q6 M
return (enHex((0xf00000 & n) >> 20) +0 M$ ]" m# `% f- d; f
enHex((0x0f0000 & n) >> 16) +( e- w* W, O3 L- S t& Z6 R
enHex((0x00f000 & n) >> 12) +
* T; U7 ?' d) r" F" M$ p enHex((0x000f00 & n) >> 8) +7 K* W. B2 J* \0 T# V: N5 F
enHex((0x0000f0 & n) >> 4) +
! M+ n7 f7 G4 U. n: @ enHex((0x00000f & n) >> 0))
& ?1 W, [. F8 `3 y$ V}) y" C2 L3 B+ f {
// Convert a six character hex to decimal, \) F) B ]5 g" O. h ]& s
function toDecimal(hexNum)# W" s4 q. B4 X, j6 f) i) w
{
3 p& Z/ D% Z* p! ]; @6 c2 g/ G var tmp = ""+hexNum.toUpperCase()
3 r5 q' _% v6 ^8 [( n" n while (tmp.length < 6) tmp = "0"+tmp" L3 Y- w5 t0 z! X4 h
return ((deHex(tmp.substring(0,1)) << 20) +
G" Z0 ?( j# g3 N (deHex(tmp.substring(1,2)) << 16) +
8 F/ R( M- {; D _8 L (deHex(tmp.substring(2,3)) << 12) +
5 U% [- p$ h" @' o) ] (deHex(tmp.substring(3,4)) << 8) +
. E9 H1 R. R, [" G) w- @ (deHex(tmp.substring(4,5)) << 4) +: T: v9 V; a1 U. I, B2 M! y# q
(deHex(tmp.substring(5,6)))): Y6 h5 M U$ R) b' O
}
# q5 u! S4 k% w# G. U$ r6 B///////////////////Shimmering Links/////////////////////
- B2 H3 @/ i! n* X" ?- m6 E. C) w//global variables) R! A& {' C( U( K3 m6 y! o
var hoverColour
J2 A. F2 G, c# Z z. E, W! Q u% Ivar numLinks;
+ ^. h, k# O# ]5 j. c; l- ?0 yvar rate;
+ b- |( X0 }* E. g5 \ jvar numFadeLevels;" |# j* I" d' @5 B* k) R* u
var bgR;& {1 I4 g2 {& r r/ L& Z8 T
var bgG;
5 l1 W7 Z, J" W- N) x" \2 tvar bgB;
, o# K2 J- t7 a- nvar currR;9 {4 m7 y R7 q6 ^; k2 `
var currG;
, O2 c( E) l' Q# U' Kvar currB;. L0 y* ?4 {1 n
var count;
0 r* J: Q7 S6 C9 a2 H: cvar fadeOut;4 `, U# {) y8 b9 u
var continuous;
' v& T9 @$ ~9 g; Y6 u' Kvar newColour;
$ A+ Y. P: R0 a# C$ I Z8 v& evar tID;8 ? C, `" s1 k
var redInterval;- V3 H0 M! E, W% B0 w
var greenInterval;4 _2 v( x* _, c3 N6 o1 d' v5 @
var blueInterval;
$ C6 I! y& n V3 T' B9 j: Z9 ?8 X0 kfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour): x4 ^% L' c3 U2 N/ h
{8 v; N% N N/ p& z4 D1 r
hoverColour = mouseOverColour;
( A- `; I0 j8 Z) X% S numLinks = numberOfLinks;) v; Z: N2 a) A4 ~
rate = 1;
: i* V( P2 u$ F+ ? numFadeLevels = 30;2 v o! u; w& `* P7 \
function initArray(theArray, length, val)
9 c3 }' c, U2 d5 ^ {* ?& T! w3 i& z
for(i=0;i<length;i++)+ d! q8 O. h4 o5 E* I/ ]! Z$ E" E9 e
{' t& P; i( S5 l7 ~
theArray = val;
6 p* o' e' D) B4 H$ ] }' e2 @% K7 |5 ]% f
}
) E0 _9 i$ L2 [7 [/ o7 |+ Q5 p bgR = '0000' + fadeOutColour.substring(1,3): x2 Z1 W7 @/ U( [7 o4 {5 p. M" C
bgG = '0000' + fadeOutColour.substring(3,5)" d6 ~5 r2 `* z9 N8 s% g" g; c
bgB = '0000' + fadeOutColour.substring(5,7)
2 k. l; L0 u$ R' \ currR = new Array(numLinks);
# v% b- M* a. Z9 B currG = new Array(numLinks);
# x2 }- Q) ]5 g9 O currB = new Array(numLinks); c4 z: v! t) q* H, e. E2 Y- @
count = new Array(numLinks);6 F6 _, U( M" B. x
fadeOut = new Array(numLinks);$ C/ ^+ P; {# Z! a
continuous = new Array(numLinks);" e c" I. b" C- P4 f
newColour = new Array(numLinks);
0 J0 {1 J. z& g- p: L# e/ V tID = new Array(numLinks);
" g* \4 j+ E/ {& L redInterval = toDecimal(bgR) / numFadeLevels;
; l/ O: d4 G+ s greenInterval = toDecimal(bgG) / numFadeLevels;: K+ `% `4 M7 W7 C
blueInterval = toDecimal(bgB) / numFadeLevels;3 ^+ g1 \ J. q
initArray(currR,numLinks,0);4 l# c) ~" M) O6 a& t/ k9 M
initArray(currG,numLinks,0);
7 H; u( G E* G& Q( X initArray(currB,numLinks,0);9 `+ {# Q! i: n+ @; X0 _0 y7 l7 F
initArray(count,numLinks,0);
# L, b1 M& U' r B; i- p; j/ @ initArray(fadeOut,numLinks,true);
3 e3 L: c! F# V3 f7 E& P; P) n initArray(continuous,numLinks,true);, k8 \$ t* L1 V! A/ l# A% ?; o
} * ]0 Q% V+ o2 p6 o
function startFade(id)
& _$ T& v2 w; h- z% z( g{
* {8 p; R% U( q9 _ if(fadeOut[id] == true)+ X9 _( t6 N3 t P$ \
{ /*move colour towards background colour (increment)*/
3 ^# e5 f+ f2 v5 J+ s" s currR[id] += redInterval;
2 o- g: a! L' l currG[id] += greenInterval;
: Y0 ~" v8 H- S4 F4 n" @ currB[id] += blueInterval;
. t3 o. L9 s2 s+ H0 k8 m) y# R# Z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);& ?* a9 Z0 E1 D2 R
if(++count[id] == numFadeLevels)* G* Z; N' S. Y3 k6 u, }1 a
{
7 Z& p8 y1 M& c# t" v- \: i) _) H5 b fadeOut[id] = false;
4 e7 N; z9 u$ `2 S1 p3 Z) k }/ q/ H+ ]. h3 g) U- h! ] J
}( e; j3 Y$ A5 P+ Z4 S' v
else
( h- [$ i9 p: W& z2 m {
" ?; R/ _! P& R currR[id] -= redInterval;
5 S0 b$ p) N- H3 E. G4 p, Y/ R1 f# m, r; a0 D9 ^ s2 O/ c% w
currG[id] -= greenInterval;0 `+ y7 N( s; _) R" Q2 G3 y
6 l# n+ B% h# b currB[id] -= blueInterval;* F5 V/ ]$ L) x; I' g
4 S$ W m. V/ k, m newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);0 U- J; B, ?4 y2 I: f! m: a
9 Q' u0 O, n# L L0 t9 c: \ if(--count[id] == 0)
}4 j3 X; E+ Q& d
! ?8 S9 I. F9 Z, m. P& w {
: n6 c& K# t' j' Y* g1 r" N7 ^: Z
fadeOut[id] = true;
3 P3 M$ [# D) I9 L+ p* I8 h* z( O6 {4 ]2 l* O0 y
}
5 k2 J. |0 ] M1 ]
; _/ ]5 `( k1 A# y6 R; ?" \6 M }2 {' `8 Q- k! I0 o) l# y
W) |$ X! h' M; d if(continuous[id] == true)
& t. O* b. t) s( u+ K
4 l: J6 Z$ \# {6 f j2 \ {
3 ]. b5 T- m/ ~1 b1 u( s; j0 {5 V, u, y& H0 j. q- {
document.getElementById(id).style.color = newColour[id];
) ?( ^. u6 J! L* O+ P! u4 x- W& ~/ W% R# T: s V! M( z
}! o5 V, a# d: P/ x: n
& _- R- X4 A+ f: ]; |
else
! Y3 ` t) Q6 n5 h* }9 `6 N+ y0 B; d$ x. j8 b( Z; z# h( F! s# h
{
% d, B+ ]& ^* d7 {0 y9 j0 _
$ ?$ ^% W1 X9 H document.getElementById(id).style.color = hoverColour;. v9 Z+ N! l) C7 k' G1 A
& p' J) R# r7 z; O }2 |! T, ^" l4 o
4 Z% k5 q6 _5 ^. a
clearTimeout(tID[id]);
& m) }" x$ T, t8 W; R0 A2 M- i1 Z1 n- j
tID[id]=setTimeout('startFade(' + id + ')', rate);' y3 e: C) C4 L8 x) K
+ @* S5 G) |% R}
; g+ a/ a4 N: f# }9 U
; C9 g: D0 \6 Y( Ufunction continueFade(id); B1 P7 {8 A( Q9 F
) H( S* W3 E* B+ b( l# g, P! M3 d{; h8 k8 F. W. K/ H& Z
1 W. [% W0 U$ c' u& h2 ?
continuous[id] = true;$ L% r$ Q2 N0 x
$ U; F- K7 m$ \% T+ C2 |) `/ O; h
}; o! [' R0 P7 ?& C3 e" O! W3 ]
, H7 J, a7 U1 q9 Z; M
function stopFade(id)+ O6 @3 o. K; Z
% i# Q1 k5 h! d5 v9 ]
{
U/ c% U8 I+ ^% j/ g+ a8 z9 s" C: l8 C
continuous[id] = false;
) G7 V9 c& r* e: p+ e3 u
: m) b/ d9 z/ @( x( Z$ F! v/ J}5 N& F [" L3 T$ R5 z: i* F
0 h; M9 S, |" r
function StartTimers()4 [$ `9 t' s7 n+ A: P; `# \
- s/ e' x% e" i* Y
{ //set up an initial set of timers to start the shimmering effect9 E( G0 }6 ?; c7 ?! L
' p4 A# e5 R' Z. Y2 v- D
for(id=0; id<numLinks; id++)
3 A, }& v) @4 [% v" E% M! F( G7 O
/ `4 c( P p" { {
! s# X( Q! F9 X. b. }
1 v1 c) e6 O. j& c t=setTimeout('startFade(' + id + ')', id*100);
" Z7 F+ N$ w9 O, Y4 _3 \ n* H, k
}. [- W6 }" I' K0 Z0 {
* \7 f- Y/ \, ?6 y}
, h6 q7 a4 i8 `
( }+ r* s1 |3 i+ ~//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 Q8 b& D" R4 D0 h1 i. L
4 N1 a$ A% X$ G9 t* L- s, N
initLinks('#FF0000', 6, '#FFCC77');" J! o9 K& q7 S* b7 s" R( ]: p) K- b
+ M( m1 Q- `# ]+ ^2 Z3 d
//-->
" \1 T4 d1 j* E% n5 |7 K# X5 w9 ?' q/ M
</script>
" L. P! @: Z9 _- p0 v<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元1 w4 B! ?9 J- N
</a>
3 _4 F% ]) z* R8 z: b<br>
5 d/ ]: ?+ W, P1 W<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
' O' j3 u4 |3 } s<br>: y5 J6 B1 \3 x4 B3 c3 y
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>* V2 q- I1 R$ T! Y3 v5 L$ V
<br> + w! m& ` {! m% _& [* x
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
4 s7 E0 Z3 s( h$ i3 t* P1 L<br>4 ^, ^5 Z S% V1 B) f+ y' j
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
/ P) Q. A6 z- i" R<br>* i3 U# J2 q8 `4 Q
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 @5 `0 E7 { {# v4 S" H: `
<script language="javascript" type="text/javascript">
4 t0 Q% @ }% [( k. h+ J<!--
/ J* H1 f k( f2 D, v4 m. csetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering, q, x- ?. P( j' i
//-->
1 v3 Y& l- S$ w# t5 T6 x" U</script> |
|
发表于 2008-1-21 20:48
|