|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- n/ z5 E7 p0 F& w# M2 x8 f<!--* t( y- J# W2 L! U: }) g9 O
// convert a single digit (0 - 16) into hex3 t& C/ j. @. q8 \% `3 S
function enHex(aDigit)2 A3 X7 S9 M+ ?4 ]. R8 k
{
& Y& O; }8 E( W8 E( W0 P0 K; ^; ? return("0123456789ABCDEF".substring(aDigit, aDigit+1))
* e4 \7 A& s5 m% j}0 Z" u p' l% M$ r8 ^/ |# A
// convert a hex digit into decimal0 P! t! o1 M$ x
function deHex(aDigit)
! d3 C1 w, W6 s G! y{
: F. A3 y+ J4 P return("0123456789ABCDEF".indexOf(aDigit))% m) a- L7 b+ y& z
}. p( D9 t2 ^ M4 `. m: |" s
' S. i! j& _$ G; }% @# `! T
// Convert a 24bit number to hex
; O8 ?3 @7 S( q, P* q8 \: \function toHex(n); |: i9 X0 x; c/ O
{0 t; P+ f4 \! I# ~
return (enHex((0xf00000 & n) >> 20) +
3 I5 x% t/ K8 S" m" `& ]+ w enHex((0x0f0000 & n) >> 16) +( [6 M4 q, E4 ?# a% H; ^
enHex((0x00f000 & n) >> 12) +2 w+ F8 [# q \: [$ q
enHex((0x000f00 & n) >> 8) +) o# v: r8 d$ k) E0 T" @
enHex((0x0000f0 & n) >> 4) + X0 k8 T1 O4 @: v) u5 |
enHex((0x00000f & n) >> 0))
9 ?1 u: _# X% R3 e: N# A}: w6 c& ]8 [: m$ @
// Convert a six character hex to decimal
# G; r% W, l2 x) a. I9 ?function toDecimal(hexNum)
% Q6 }4 r$ R- ], h0 `. Q{
# \8 o6 `6 v/ A6 v) h1 P* @7 G var tmp = ""+hexNum.toUpperCase()& i' T6 w& I" Q
while (tmp.length < 6) tmp = "0"+tmp
! `' r+ V4 |4 U: k$ A) R% a return ((deHex(tmp.substring(0,1)) << 20) +6 `& }0 G5 m: X/ q5 _5 Y: h
(deHex(tmp.substring(1,2)) << 16) + D. T7 Y# I2 j
(deHex(tmp.substring(2,3)) << 12) +
[3 b( i) i* O% y (deHex(tmp.substring(3,4)) << 8) +
7 G& g( {7 A4 k (deHex(tmp.substring(4,5)) << 4) +2 I G0 U& ^) _. i3 Q) S9 |! `
(deHex(tmp.substring(5,6))))
! b, Q/ \, o) C3 P' P+ u2 G}0 V% T# U' \& B$ }* a
///////////////////Shimmering Links/////////////////////
$ ^7 a6 w7 t* R3 o; Q" \0 j//global variables* U' s1 C3 u4 z G+ c" b5 X
var hoverColour
H) p: Z( g. L8 E$ [! X1 F9 rvar numLinks;
$ V) R8 s& L4 V! Y% q7 ^+ I) Cvar rate; c7 Q# Q6 D j. h. m
var numFadeLevels;0 O& Z% @$ w; y5 U x. ^
var bgR;9 Q! j7 v( e& s6 V7 a/ g( z4 L+ T
var bgG;1 M7 O# z1 L' w2 x6 k
var bgB;
1 I0 A8 R) h6 W b+ P0 s' @var currR;
5 H8 U0 h* D/ a$ S2 ~) }& J5 pvar currG;
% [( k3 b+ d. H4 f$ o+ @9 avar currB;- @' a4 z4 a5 B3 ?* M3 L* j0 r
var count;! U* y2 P" {1 m5 b' j
var fadeOut;
( i) a: W0 u: f7 ~! jvar continuous;: N. W2 H7 A5 i
var newColour;! f) h4 B9 D8 O8 |( \
var tID;
* m) a ^& f h5 G8 e! Cvar redInterval;
4 F/ ?3 d# b& A Z, }, Xvar greenInterval;- r; L: a+ }$ O/ H$ o* D
var blueInterval;
: A k* d9 L; |. Q! Hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! C9 _- [, y+ c9 K# Y* w# m0 u2 i
{- |- n1 \& Q9 \# S0 I5 N
hoverColour = mouseOverColour;
/ g9 ~& @8 c z3 g2 u9 G numLinks = numberOfLinks;. O8 S6 n, W. v# @- y
rate = 1;+ s% a* k" y- z) q* G1 I6 D4 Y! f
numFadeLevels = 30;2 L0 r, e0 T( b) \$ s
function initArray(theArray, length, val)
/ T8 A* p _/ e0 L' F {
5 ^7 L/ q' F, U& Q4 ~! ~0 { for(i=0;i<length;i++)
6 P& j# a$ d% ?8 v4 P3 S8 }( J, G( W {$ {$ F# R( |5 E: }% V
theArray = val;
6 m9 ~6 L4 ?5 Y- ^6 V6 { }) z6 `; K8 v4 M1 ]0 V# ~* [
}
4 ]2 Z1 }6 ^- R6 \! ]7 L! Z bgR = '0000' + fadeOutColour.substring(1,3)
( S! R+ o% M6 a% L bgG = '0000' + fadeOutColour.substring(3,5); }4 k9 I5 N" }$ p
bgB = '0000' + fadeOutColour.substring(5,7)1 a# q5 A8 W0 }7 C- T2 z' K* ]0 |. W
currR = new Array(numLinks);; {+ R% G: n/ r9 {7 k
currG = new Array(numLinks);
! v" H3 ]& d* ?" g ? currB = new Array(numLinks);
# L% k8 j0 t" d+ ?* @( B; m3 g$ a count = new Array(numLinks);
: B/ {, Y8 |2 s& f) W fadeOut = new Array(numLinks);% U5 ~: Y5 g. K# ?
continuous = new Array(numLinks);
" x) q2 J: O6 u% l0 `) [ newColour = new Array(numLinks);
' q# [" m0 I/ H4 y tID = new Array(numLinks);# r( W2 u$ H- Y2 b1 F) \0 n
redInterval = toDecimal(bgR) / numFadeLevels;
3 f3 Z' s5 E3 ?4 E0 i greenInterval = toDecimal(bgG) / numFadeLevels;4 h; ]* E' z9 y/ E1 h/ d
blueInterval = toDecimal(bgB) / numFadeLevels;5 Q/ h( ^& d0 t# {+ T+ c- b
initArray(currR,numLinks,0);1 n, m( t3 _' q; y/ ^
initArray(currG,numLinks,0);/ M# G4 G4 j5 D+ V/ q0 k. b
initArray(currB,numLinks,0);
; o) e3 B- u& B* N; Q2 k7 o initArray(count,numLinks,0);/ L% {& T" l7 J, y* m- R2 D
initArray(fadeOut,numLinks,true);
) W8 a3 [7 c; l initArray(continuous,numLinks,true);+ c% u* H- @& X# A
} - t) {. [8 I9 R; |- I, p
function startFade(id)4 e8 z" b# }; {, g' ~( K9 i
{& L1 C( T' f) h. W* y' o! s6 Y' t
if(fadeOut[id] == true)$ @& \6 w8 h- L& V- X
{ /*move colour towards background colour (increment)*/
8 X+ |8 b+ D7 i! @# E: ?+ H/ m currR[id] += redInterval;) P7 v! h% ~4 q9 o3 L
currG[id] += greenInterval;2 z3 `2 N3 m4 |) e
currB[id] += blueInterval;
# K! V Z# D, g/ [+ j; H, u+ s newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' [9 @# Y y% f& Q% j' k
if(++count[id] == numFadeLevels): A. H" R6 G+ j* b$ @# p
{
1 F+ `: U" C* P( @. J% @0 X fadeOut[id] = false;; U5 o1 G5 q& N/ O }. [2 `
}
5 ^, G% M( K/ G) ~4 \* O } R' t% o) R. l; u. r) ?$ u2 U0 Y
else0 Y1 Y; W. n; P! W) [: |
{; \4 G e& P3 B( _" Y
currR[id] -= redInterval;$ v/ F" g1 q( N) s V( T% j+ q
4 e: Q" J/ X' v4 C currG[id] -= greenInterval;
) i4 k; C* O1 g; C% ~/ A4 ]- G6 a; K- J$ _* i, W
currB[id] -= blueInterval;& w" D* |9 g) W( x+ S
5 P8 y# a+ D$ b; I* ` newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# ^2 r. W {) b
0 _0 _# r4 `5 E4 C8 A) ? if(--count[id] == 0)5 l5 R7 u* ]# u1 K; C) c2 H
& y- s; {7 E( ]" H, O( u {
2 g( d+ W: i( j9 w3 R2 R, q% S8 P4 B# ^% C2 ]2 |
fadeOut[id] = true;
8 Q4 R7 o" c3 K6 O/ u! B$ ^# L" [4 X3 T
}
; n R9 D8 G8 s+ A- m2 ]+ L! @( @/ c6 n: E
}4 u. B) f! q. g! P) R
; w; W0 V" I4 `" D3 ^
if(continuous[id] == true)5 C$ Q6 B* B, y$ U
" C9 f1 z0 A" n; l* p {
. n2 ~0 Q! v/ m5 I0 d4 \
& g: V/ l" O! c5 X( K5 O! J4 C document.getElementById(id).style.color = newColour[id];
3 {, h8 W& I* h
* s" p% Q0 {+ W; C- f8 H* ^0 R8 z+ x }5 Y" s0 n1 ?& h; U3 g1 y
; \& p$ O1 ?: C! ?* ]! W- c% {
else6 z* h& h3 l+ c0 t
6 C3 g4 k: `8 W( A+ t% x {
9 a8 r/ W/ o! I& f8 K8 v- l: {* p# O" H3 f
document.getElementById(id).style.color = hoverColour;4 e$ k" Y8 \! a, O( \
: ?: ^4 |8 a1 i2 O! G2 S
}5 G! n$ q. w; n7 Q
) A9 \: {, j$ ?5 \+ i/ ], s
clearTimeout(tID[id]);
% W& ~1 O. g0 H6 S1 f' r0 \" g
2 `! i! t8 V" u8 g- p0 c tID[id]=setTimeout('startFade(' + id + ')', rate);. g+ v9 g7 d7 O& n) `9 e. B1 Z: H
* r$ G; O i7 t, o5 y
}
4 h; R- \0 \- ?! O0 _& e. m. r$ d7 t- M6 a# H
function continueFade(id)3 N6 I: q& |% g w. _$ Q o: x
8 F& r) b w1 I
{
; F# y2 |4 D) I- O9 F
6 f- u' Q, g) G, T continuous[id] = true;
) m! w1 x1 m `3 v- l: N! c/ K: ~, X3 k5 f
}
/ M& z' l* @) p* A1 |* ^7 r. _" J T0 d, @) W- H' x
function stopFade(id)
2 e* D$ ^; E# C7 S
1 ^# [' b! m% K1 u{
# ?- i: u8 j7 l* O! S( ?: g, H1 h- c5 p' ?/ x0 `
continuous[id] = false;- L' Z6 P# }' }$ b, v% J4 V- B
$ V l2 V" H6 s( i0 d}
8 H4 {# B; [% _2 P- p& J, ]9 @/ F% Z- b3 _
function StartTimers()8 Q6 p8 m7 e+ U, O! [, v& c8 d
( T+ w! S2 U I" l; G, W' B1 i( K, Y
{ //set up an initial set of timers to start the shimmering effect
3 k' O y4 t2 x0 h- v
5 G4 V$ c; j! z$ a+ G) a for(id=0; id<numLinks; id++)
1 `4 h7 B, Y# E1 q
* |2 M1 g- |. N& h" t4 D% L1 f {% l$ P) e, \- F3 J
# m/ P& C6 I9 C2 K8 z- [' Z- [' t
t=setTimeout('startFade(' + id + ')', id*100);# }7 p( ?" }! q" }, ?* F' x' z) c, s
6 F9 o8 \' e2 ^; F" D% z% @ }& f4 [( O: ~( s
( d3 i/ x; Q j1 D/ y \
}, z; a. [0 s6 Y6 \; j
& ^! A- ]% p* r+ }2 V3 u4 Z9 N E//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), q) s. ^8 L, \& E6 R9 s& j
, ]9 K9 m7 r. |. U: C2 T! X7 j$ h/ Z5 W
initLinks('#FF0000', 6, '#FFCC77');+ H2 `, W X! L' {# D
8 \% n( ?6 x7 v. B" M//-->/ J! T$ Z/ G) g5 T9 h9 ]
5 x% \! v$ d9 b7 i</script>
u) Z- `+ V, G<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元$ I0 ]* e7 j6 ^6 n" ]$ ]# h
</a>- T" E. K- A1 r9 E% h
<br>+ Y( j8 \2 h1 l
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
# c) ^% i: e4 {) G! {7 s1 t3 S/ u5 ]<br> w% b$ a; X9 P# }; ?
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
1 a6 U0 O l! O6 x2 n, q<br> 3 X5 u8 x# a8 q- y1 Y2 \
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ A9 U5 Q8 s$ e- @% T# G. P' z
<br>
; j+ ^+ a/ J7 P1 Y2 e% y' |<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>: }2 U/ e( s8 o7 I! I4 [
<br>% I. X) K1 h( j- `+ @
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
% W& l1 v1 |# M6 L* x N+ `<script language="javascript" type="text/javascript">
, N& ]0 f$ q# w1 e/ m<!--
2 O- Z% G4 j5 H( c5 k$ qsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering: W e* }9 ?% L/ x0 O
//-->
, m! C6 r V( P( L! ~</script> |
|
发表于 2008-1-21 20:48
|