|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">; ] A8 z7 B$ T7 |. R
<!--1 J9 m. s9 y0 W/ M, M
// convert a single digit (0 - 16) into hex+ a, b& \6 F6 T7 x# W1 ^- e
function enHex(aDigit); D8 Y! {5 B/ w8 ~3 S
{
6 \: p$ v& s; T return("0123456789ABCDEF".substring(aDigit, aDigit+1)); k1 n2 W6 ]( K4 v# z+ P6 I( i
}
$ \" c8 [1 \$ ]// convert a hex digit into decimal: S) Q# z$ p4 Q# I/ o, P( K
function deHex(aDigit)
& w% A3 f8 A: L5 W: B' u7 S{+ x7 t9 Q8 h g
return("0123456789ABCDEF".indexOf(aDigit))) ]# O6 x0 Y* \" F5 p* Z
}
$ f! {" m6 W" Z, N B `; c; U ? f
// Convert a 24bit number to hex M4 r# F1 C) E# X3 ]$ N
function toHex(n)( N. T+ D5 T# l* d% A/ p3 {4 A0 I
{. Z5 d& C1 p; I! I% b4 j+ e
return (enHex((0xf00000 & n) >> 20) +
. u' r+ g2 M& m/ [+ q; }) J' I6 l enHex((0x0f0000 & n) >> 16) +
2 i% \. u) Y, I7 m7 P3 R enHex((0x00f000 & n) >> 12) +& n) G/ F, \4 g5 c3 @( s( W
enHex((0x000f00 & n) >> 8) +
3 a" A/ C, D3 `8 o! J enHex((0x0000f0 & n) >> 4) +
+ j- o6 }( i2 E ` enHex((0x00000f & n) >> 0))0 h! n) P2 k2 b# E2 F
}
& @+ y z: B+ x) l$ T* H: X" ]// Convert a six character hex to decimal
; `$ P) `5 \; e9 B2 E5 r/ xfunction toDecimal(hexNum)
8 b9 |: n: j9 M; M- C, G{
1 C) I, a# `4 c/ {" `9 E var tmp = ""+hexNum.toUpperCase()1 i3 g; M K, E6 x: N9 d1 ?% {
while (tmp.length < 6) tmp = "0"+tmp
: m4 h( ~+ G; M F, W8 k f0 a return ((deHex(tmp.substring(0,1)) << 20) +
. w; T0 s3 L b" f/ a% j8 D7 X (deHex(tmp.substring(1,2)) << 16) +
$ f; i8 q) ~$ M (deHex(tmp.substring(2,3)) << 12) +
* V d/ e* W0 e7 E (deHex(tmp.substring(3,4)) << 8) +
3 r/ s+ T0 X- m. f5 g j( M (deHex(tmp.substring(4,5)) << 4) +
1 s, u) r9 m" _3 y T (deHex(tmp.substring(5,6))))2 t* ~6 v% |4 t% |5 K7 z+ ~1 Y7 D
}
/ z, w" T. h5 d2 n9 a///////////////////Shimmering Links/////////////////////
' d. q5 e" s) K [( L$ q) w//global variables
6 C. b6 b, o1 d7 ~0 B; Nvar hoverColour
( s# ]( @$ p0 u7 S* N( @* U& e4 G! Tvar numLinks;2 P. E, H! W* l$ w
var rate;
! B" u4 e0 ~1 K7 T/ b; Dvar numFadeLevels;
4 x0 G- u0 \/ E, X8 ^4 n+ Nvar bgR;' w2 D' j; T% d4 J+ U
var bgG;
& S. j5 l- z9 v9 n" d( y- Kvar bgB;/ H: \7 z2 x" }1 l9 }2 ]
var currR;3 Q5 g- v% l1 { f% h% f( z8 `
var currG;
% w, @9 |' R @* ]var currB;) K+ [$ l8 l- g( v A7 ]0 I
var count;( I* |. a$ r/ w: E2 _
var fadeOut;
2 H. Q. A+ E$ } A' K9 y: Yvar continuous;6 U- l5 k: k, f7 u! T
var newColour;
/ V% \, q' Z) Tvar tID;) Q8 o# Q2 s5 f2 g5 ^6 H* u
var redInterval;- B$ J+ q2 x0 j/ u3 y; U
var greenInterval;9 m* [' M) ~! X# E d
var blueInterval;/ M4 ?% X6 _& x7 J/ [; O
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)+ q* d) K$ m; t! [) K6 K
{
l# ]7 W* D6 R' g hoverColour = mouseOverColour;
# r; f G6 R. u4 I2 o numLinks = numberOfLinks;+ n- r% W y: q3 a: q
rate = 1;
% s p% Y K% z4 B$ @1 A6 M# ] numFadeLevels = 30;; w1 _ O" k0 `6 ~, }3 [. J2 a* {2 U
function initArray(theArray, length, val)
) {; b0 Z+ t2 j2 F- S {& V* @2 b- s1 `6 N* F
for(i=0;i<length;i++)% d" O* Y+ u0 C+ K! ?8 S: F
{
1 m% _& t' k$ t c$ n( }1 w theArray = val;( h# O8 O6 o2 H7 j, R( a
}
: U! j; e6 ? I% u x+ w }
& P& i1 u. N$ ^$ ^6 p bgR = '0000' + fadeOutColour.substring(1,3)
& ?+ I. C* [( a bgG = '0000' + fadeOutColour.substring(3,5)7 E0 `" u6 n' Y! b8 [
bgB = '0000' + fadeOutColour.substring(5,7)
A; B! V9 h: w% C4 [7 p currR = new Array(numLinks);
# n: ^4 L- E7 s, W9 ] currG = new Array(numLinks);# a* R& m+ m& i9 R0 O) A5 Q
currB = new Array(numLinks);
) I, q- s" F$ I; d: l. k: Q count = new Array(numLinks);/ V5 f: T0 z6 ^) V9 u& v! i6 ~
fadeOut = new Array(numLinks);% U- A! u% I* W2 r# x2 E; g/ C
continuous = new Array(numLinks);1 _7 h- m; c6 l! n- {
newColour = new Array(numLinks);
* {! z! @: E4 H/ k% Y \/ T, q( @ tID = new Array(numLinks);3 G2 g* B' d" c- Z5 u# z o
redInterval = toDecimal(bgR) / numFadeLevels;
) g. c6 @3 L P greenInterval = toDecimal(bgG) / numFadeLevels;2 G2 W' a3 w6 I q
blueInterval = toDecimal(bgB) / numFadeLevels;9 C; _& z. m% _. h3 T3 J$ N8 m# ~
initArray(currR,numLinks,0); @9 M( j$ q9 e1 C4 z2 k: U2 i# u
initArray(currG,numLinks,0);, }+ L# \6 p; a) R1 h7 R# X
initArray(currB,numLinks,0);
. u! i; R. \ ?/ ^ initArray(count,numLinks,0);- T3 K+ m g6 J6 X; G
initArray(fadeOut,numLinks,true);4 F' _; b; k# w, ]# K2 V
initArray(continuous,numLinks,true);
' ]4 f) e5 N' D} 9 S* |! K# n4 O" A* w
function startFade(id)' _( U! {2 }! k* s) X
{2 O% A' y5 Q* `8 \8 o+ _9 I5 U
if(fadeOut[id] == true)
, B* P* A& h; i; p& l1 h6 |, j* F { /*move colour towards background colour (increment)*/; k. Q8 R* I& w0 t. i$ O
currR[id] += redInterval;) q/ r. |1 N [9 J2 j
currG[id] += greenInterval;2 q9 K' S, {# g3 z1 K( P# C- \! |
currB[id] += blueInterval;
" {2 S2 R! ], J3 P' f newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" {. c1 Y& C) v+ `3 P2 O
if(++count[id] == numFadeLevels)
- d4 y/ g6 W. r$ p {+ x: S8 `$ h$ Q0 Q* ^% f
fadeOut[id] = false;9 o, @ `/ d6 W6 z
}
1 F2 R, m1 u$ a9 ` }
( ^+ |; c) k% R" t, M else
w) i: a( x e7 J" R% e {" G3 m% Y* W( c5 o- [: @$ j
currR[id] -= redInterval;
5 O/ g% Y2 D' H2 B8 x- p8 H+ P2 S8 p9 L$ y$ K$ t
currG[id] -= greenInterval; r7 L& S, v7 x: I; F2 \7 B
" ^% F2 _1 q# X5 D" C) C currB[id] -= blueInterval;
0 l! p# F( K& J7 s" H
. v2 M9 C# d3 z4 x; `" m* u! l newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 t% R' f( m! ^; |8 ^) B2 V% Z
7 a$ w0 Q" u4 z( s7 @$ Z% t6 ? if(--count[id] == 0) y7 n" `- M0 K( j% S# g
[ k4 h, [' F% }( U
{
( }3 ~7 \3 E0 Q. U5 b' G# a7 b0 ]& s- O) @* ]
fadeOut[id] = true;
# g' J X0 o* O% n5 Z; i! K# j( A! ~* F2 p1 y9 R! a: R2 T+ C! _
}
2 P/ w4 T" l1 ^) Y# A7 u" Q* n L) `' V$ Q
}/ |% F4 ~) H1 T: e4 b5 ]3 ~: A: E) P+ b
: F# A- r- S0 g e4 ~7 h) { if(continuous[id] == true)
( s' v' {! g& a. J+ P( O k6 r7 q7 M2 j- i( ?$ F3 m4 s
{
" n& D8 V8 U. K6 `$ L$ e1 E; I g( F0 k3 P9 G. u/ @3 b1 j
document.getElementById(id).style.color = newColour[id];
( W( r" c' P4 t2 x s+ f/ y4 j8 v- q: E. X# U* ^
}3 ]$ K8 S3 H' ?) ?' P7 y2 R
2 Y0 }! k, r6 i: K6 H, W: w: k
else
, Q, B* l8 q5 B! ]1 ^* D1 f3 v4 x' f" X7 E% U. S
{
* t5 c+ b5 A2 M1 L3 V5 Z& P. U! O# f5 e/ V* A, s. G% F
document.getElementById(id).style.color = hoverColour;$ [3 O4 e( K M6 _. S& u
" Z9 h+ F6 B- i7 ]0 T( m; ^
}
" ~& y# Y3 k' T
N" {& y: c' W$ E clearTimeout(tID[id]);
; e$ X/ X2 _' ^9 z+ f. }
! O( o9 H5 K6 S: g2 Z( q tID[id]=setTimeout('startFade(' + id + ')', rate);! `; s9 a" i8 N& Q# T4 N, c9 g" F
2 p/ y k7 O" {4 j}( ^0 d1 j, Z; y
/ A: H4 r+ F+ I: t4 z
function continueFade(id)
( e# Y8 z+ P" O j7 R' b" I8 G& I1 \1 F! B* K$ V2 c
{, {) G- \+ r" N7 v, m
% `' ^3 V4 C$ g3 w
continuous[id] = true;5 d; P m$ V; P* w. u+ u
& B$ ]3 G. z i0 a \/ t- g" _! S}
0 a8 d+ p# p4 g* [3 Y
: P6 X& A& u8 s5 hfunction stopFade(id)
: a+ x/ w$ |* g4 T' i- H; c' K* @$ c! J$ v
{9 H% ~; W) ]3 V5 w1 {, W# Z
( [) ?" f6 g0 s$ S& S" l4 l
continuous[id] = false;
6 }& W# M7 J3 t3 m! B
' {4 K( ^ t/ l}
( e: Z+ O- v4 m& A+ o; e8 F+ r# C m+ }" o! L; B: ^! Y7 x6 \9 t
function StartTimers()" _8 d/ O7 ^! h/ s: m7 {
/ K$ [2 G( ?& A5 L' X3 K( L* Y+ R
{ //set up an initial set of timers to start the shimmering effect+ x1 {8 {9 U7 R5 ^! _- V
" Y# R0 G1 t% t4 V6 \, E
for(id=0; id<numLinks; id++)
- G7 Q B& ~- D) A6 e9 U: p, ?7 V9 c8 x) D0 ?6 ?
{+ |8 n0 R* t& \8 N7 J
. c9 B7 ]3 G* v/ |4 J
t=setTimeout('startFade(' + id + ')', id*100);7 h% W* f- S( v4 U3 P
& N1 I2 k; d# c4 l. H) C; o% n) L
}
/ }' ]* a4 H- r$ i! P8 i* x: E5 y; L2 l- B U% G; n
}" b+ C4 s, ?2 d$ O
2 E0 K [, e5 I: u//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')* u- P# M& f- u1 p$ ~ I
4 D5 F7 [9 G3 o% _ W% @
initLinks('#FF0000', 6, '#FFCC77');) N8 Q9 c7 h8 x0 t
* E$ o! z8 z* `( D. }: |//-->) \5 G+ r( G# n b$ E
k z" x6 ? ? I: x0 R ?</script>9 C: H; ]+ `' ?. e' q* ^3 [: O: R
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元* H8 [0 j0 r$ A& O/ V
</a>/ K. K3 d) p( k: ~% ?5 Y
<br>$ L3 G; H4 a' n
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
2 k c b, H# U/ ~! F<br>
6 y+ y6 o" K! L1 ~! u+ b<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
4 W& L' ~5 V- G1 k: A* H<br> " M$ }' [) h$ t- N: G& _; L
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 |- x5 g9 V6 w<br>
% ?% z, |5 m5 X& u<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
) Q0 p4 E% v( c# w! l<br>
r; d B5 V$ ~8 v4 n<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. A! [0 d& \; r$ O% \
<script language="javascript" type="text/javascript">' b5 `) v+ S& s
<!--
K" e; L# f$ V9 W: |) qsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
/ b, h; u3 w+ X7 F! B( }//-->
1 D$ T+ Z2 Q7 j% q, E, G# E</script> |
|
发表于 2008-1-21 20:48
|