|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- j# ]5 y* x, W5 s3 H<!--$ T1 r% u9 H2 b$ w) r
// convert a single digit (0 - 16) into hex% m1 Y: Y) p* T0 }$ ~
function enHex(aDigit)
2 f- X, t$ O. [5 x4 x2 E! R{
8 u1 d Z! J( s# w6 f) Q" Z, d return("0123456789ABCDEF".substring(aDigit, aDigit+1))
R7 m+ o" {1 p( Z$ J& d* K}7 x" ?9 ~& W ~$ j, T! S- U/ |. p+ R
// convert a hex digit into decimal
7 U0 [2 @' k# b9 h! M& a( efunction deHex(aDigit)
$ r0 @6 q g7 g2 W A& A- V{
* I8 Q' X5 D" k2 B( U c- Y return("0123456789ABCDEF".indexOf(aDigit)), h8 [" J- | w& C) g( X
}
$ p" E& m c2 h" Q5 g
6 x( X- F; G+ J" n// Convert a 24bit number to hex
) k; n0 I1 U- [- Z! i; r( Vfunction toHex(n)+ H% R8 `$ l5 q/ d/ o# w; H" _
{
- P, l! ^( d8 {) ` return (enHex((0xf00000 & n) >> 20) +7 P+ J- J( Q' X) l3 `
enHex((0x0f0000 & n) >> 16) +
1 ^& E2 t2 y- S: Y# O enHex((0x00f000 & n) >> 12) +
) x1 E5 }' v3 D! w6 O enHex((0x000f00 & n) >> 8) +( m! q: S9 @- S8 [, G
enHex((0x0000f0 & n) >> 4) +
0 ?/ U$ a: d& P/ x7 O enHex((0x00000f & n) >> 0))
5 U1 \5 W) b! r$ N! k}: {, t1 n1 E' l) j- V
// Convert a six character hex to decimal+ ?, Y$ d! q# v7 o0 K% V
function toDecimal(hexNum)! _" Q- j, {( Q( P6 A! H
{
( R& N/ t/ q8 ~# X$ G# {: L var tmp = ""+hexNum.toUpperCase()
/ C. P: ^7 ]: }" H7 q& [0 q, k1 C while (tmp.length < 6) tmp = "0"+tmp
8 P* M+ o) O2 E+ ~ return ((deHex(tmp.substring(0,1)) << 20) +
@9 y2 f7 G- r/ V& a4 C (deHex(tmp.substring(1,2)) << 16) + " J! `- s* a8 B; [6 t& i( i
(deHex(tmp.substring(2,3)) << 12) +
# a+ A! ~; j. i- \ (deHex(tmp.substring(3,4)) << 8) +. K% g4 y9 j H6 w6 y6 ?
(deHex(tmp.substring(4,5)) << 4) +
5 ?/ N/ V' m! I% a) w (deHex(tmp.substring(5,6))))) H' x7 o( O9 {/ P$ c6 D9 Y7 U
}% D5 Z! e; X2 T% X* o
///////////////////Shimmering Links/////////////////////5 g# J4 E. I! ?" X/ K; D4 S/ B
//global variables
- W2 q0 H0 j1 [: v: V" O5 k0 Ivar hoverColour
5 @1 r* J) ~/ W$ d& L4 Q% ~/ n( ^8 @var numLinks;* l# z2 d) B5 X4 E7 U& J
var rate;
$ Q3 q9 C0 E7 g0 a7 y7 l# Yvar numFadeLevels;
R2 ]% h: R! Yvar bgR;
8 p" K4 @0 B( Y" T8 [8 q* C% Ivar bgG;
" A' z% a n1 X4 s4 R0 U1 y$ E; }2 _var bgB;0 f2 K" D& G: |5 I
var currR;
( y6 U6 U5 [3 N2 i0 B2 \var currG;
7 s* | N- e Z. Hvar currB;+ N( o# m4 s n9 c
var count;7 c9 H, p: F4 F0 V
var fadeOut;% |: C" d, o5 S& |# R
var continuous;
; \. X: o( O: i4 H; R$ N" ]* Wvar newColour;
# v$ g4 B. q D8 K: ~3 J3 u: S- qvar tID;% I9 u+ o O/ p$ m
var redInterval;
- V6 e$ ~! {4 H, U+ h6 ~var greenInterval;5 U, z% i, i4 |) W. E, r4 g
var blueInterval;
0 W9 G+ i) X8 ~1 R' S) `0 Ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)# B, m/ }5 p5 }
{
7 a5 Q( E, b! m- |& f6 W hoverColour = mouseOverColour;
0 F9 k1 p$ `3 D+ z" o numLinks = numberOfLinks;
8 A& W* x4 }% K! K rate = 1;
6 T# a' K5 z% ?4 f% ? numFadeLevels = 30;
0 N; T/ M9 @+ u* w function initArray(theArray, length, val)
9 y0 V$ @* {# {8 d! n3 C {
0 [$ o6 i+ x8 i V. I! I for(i=0;i<length;i++)% R& w. ^" Y$ }
{/ a7 W L* p2 f+ J, a
theArray = val;% O6 [1 ^" {! f9 K$ I( q
}, ~) Z. [ Z7 x, y- |# t1 r
}
6 F$ C4 e7 S( Z bgR = '0000' + fadeOutColour.substring(1,3)4 n$ Q! K3 m5 Z2 r* _
bgG = '0000' + fadeOutColour.substring(3,5). p/ V. ]0 I5 ~& h8 v, a9 s' k
bgB = '0000' + fadeOutColour.substring(5,7)
6 q' h* f0 Q1 G$ V currR = new Array(numLinks);: K2 O6 K, X5 M8 Z( C# b- Y) q
currG = new Array(numLinks);
4 n$ E1 |8 v* Q0 O currB = new Array(numLinks);
) f# v8 t1 \2 |. g( z( l count = new Array(numLinks);
0 ^: }4 h; ^/ L1 z fadeOut = new Array(numLinks);% g& r) V* X2 f0 y% ^
continuous = new Array(numLinks);
# v7 Y8 P( X. T) Y! E& H5 {# R newColour = new Array(numLinks);
' L7 S/ i `( F3 H* O" k tID = new Array(numLinks);/ c' Q+ J6 \6 \% [* p# [$ ]0 a- ?
redInterval = toDecimal(bgR) / numFadeLevels;, F) D; F, h0 Y# ?* w7 A
greenInterval = toDecimal(bgG) / numFadeLevels;
, x+ E1 l4 n+ a# @. | blueInterval = toDecimal(bgB) / numFadeLevels; g- [; Y5 v s5 l6 _
initArray(currR,numLinks,0);
3 F9 n' y# H. L$ ~4 s$ `* c" r initArray(currG,numLinks,0);
5 _' s3 Q3 A# `/ O. z. Q0 b initArray(currB,numLinks,0);( n; ]% D) P, f' Y$ G% k- U
initArray(count,numLinks,0);+ m- n- W& y4 m+ m9 [* C
initArray(fadeOut,numLinks,true);0 @! f+ ^6 h$ P9 R
initArray(continuous,numLinks,true);! S X& p1 Y$ o) _9 j# E
}
^# r9 v( n# ]6 H3 `/ n4 ]function startFade(id)
3 S0 `# i& ?' e4 a0 n{" s. W+ E, h% q0 e- v: ~
if(fadeOut[id] == true)! Z o, {* a6 ]! U3 G/ i" N
{ /*move colour towards background colour (increment)*/! m& F4 m& k9 S O* U) X3 G
currR[id] += redInterval;
* q$ h" i8 V- A; ~( [* ~4 U @# K currG[id] += greenInterval;. A! @3 v# H1 u6 h& C; y! V
currB[id] += blueInterval;
8 K. @+ I& b3 c8 j( Q1 Y0 D$ d+ m' } newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
" H( W/ i- V7 l3 k. {7 G if(++count[id] == numFadeLevels)# l2 m, z# y) C. f# ?
{1 k2 Q& e/ Q q' e* F1 b) h4 {
fadeOut[id] = false;( A& a6 o1 G! W: k! [0 H9 O
}
( a. R( H+ g' O1 t& L% z/ i& X }
- Y, s4 O8 J* x$ n5 T, u% M) w else
2 [( {6 P% @5 B! O2 R% P" F {
0 K! [" U' Q9 @# |8 X9 [ currR[id] -= redInterval;6 n- _; {3 J! O1 B2 h) Y
, U6 X J" t6 y/ ~ currG[id] -= greenInterval;1 u2 m, i2 i" k7 r- b
' T$ _+ c" k/ o3 k' U0 B currB[id] -= blueInterval;% e7 \1 P4 H" ~, Q$ h
3 r- B2 e- Y9 m8 F, \
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ B! {. ~* n% P: W. D( c% j) V4 D$ `
if(--count[id] == 0)
4 ]9 B) M; ^* q; n' t& @6 k
/ b. |/ J* ]8 K0 _8 @ {/ p# I: T) V" D' ?- T% E
) ^" H I; \& P1 Z: \. x4 b fadeOut[id] = true;2 a I8 n. Q4 Z/ O7 u
/ O$ P7 T- T: e
}: j- Y g2 w+ i8 S6 o8 a. s* a
! P0 V: b0 T, M" L# t
}6 h" g4 ]# V( W( L) H/ Q- `+ V4 v8 k
% @5 Y: l+ I+ n# G# j. u
if(continuous[id] == true)
# H2 W/ V+ [/ s6 o. [0 P) _7 T4 B% k- \8 `2 o% B* ~. j1 Y( w0 r9 p
{* i1 k! A0 U! S6 U+ }5 M
+ j" W" A- d, E- \# W( \9 t
document.getElementById(id).style.color = newColour[id];
3 r6 O3 g( ]4 I8 ^
! C8 S! ?9 h! _" L7 m% s }6 S5 ]% }3 |! ^$ n* D# r; Q
6 q" I2 O; z; B& [5 ?0 R$ a
else9 o2 u' F3 V8 l. z8 i, J9 h% {
, z, c% }0 N# D6 w4 m9 h
{# A2 {# t% v5 P l/ y& T% y
. s& H" d3 U0 H Q6 `" X ?0 }
document.getElementById(id).style.color = hoverColour;
9 r+ K4 y% ~) v: d8 m% e) A5 L6 `! }! ]+ h
}
& A/ g' n3 Z& z. x
# F, r, F0 l4 H( s$ u, w5 T8 o clearTimeout(tID[id]);9 w$ `# q6 u/ `0 `) [1 e$ p4 r ^
0 N1 v( o" J- I8 {3 L; T# k* p tID[id]=setTimeout('startFade(' + id + ')', rate);5 j+ y! @* x! H. J. L1 N
4 U/ S7 ]; `( J- O9 w}
$ e0 ^0 y8 |. ]! b! F- w# r# i0 J2 P
( }( o3 q7 t1 ]3 {1 Ffunction continueFade(id)
2 v# g4 b. ~/ C1 u* i
- E8 M% z/ e# I; h: J0 |{" f. Y6 c; R) ]1 c7 t+ v- F( S9 X0 p
/ V5 S$ p6 \. C continuous[id] = true;
4 {/ O- ~* a. A+ z# G# h8 y, V/ _2 {$ e' k9 U1 b% s# _4 Q
}
2 t$ O I! v3 Y, k
2 Z, ^; `/ t; I# W* ~9 |" l. ~function stopFade(id)
% E8 b7 Q @9 P( j* }6 j; [0 ^" @0 e6 b# r. t
{" E) N. h9 D% ]8 \4 u# s. y
; |/ d! G$ l$ ?- [6 a continuous[id] = false;5 I2 h# T6 Q% B. ]6 B$ F4 L& b0 |
1 D9 f0 _) u3 D/ u4 r}
6 Z( e3 B5 {: Z8 ~( x1 A/ y% T( m6 i; j) W9 {/ o; C
function StartTimers()
, I! K7 C3 v+ D& i- S- s! e6 ], X4 A0 }7 O4 ?% ?
{ //set up an initial set of timers to start the shimmering effect8 B! V$ n) Q4 u) c W7 u5 d5 M
1 F/ s& x1 f, U* n# V3 U
for(id=0; id<numLinks; id++)
5 E0 B% f+ g: r% w) x6 W7 P: z
' o% w7 {3 X0 j {
) W; n' q8 `# z% O' M- a" i3 b; _1 |4 Q
t=setTimeout('startFade(' + id + ')', id*100);
, l+ I, s. K) m0 ?0 V
g* _' o' H* Y. ~' v% M+ R }! R+ j7 e* S& M, n5 X7 B
n$ B, `; C- ?3 i$ u}3 U# |. A$ b0 o
/ I- D) c$ t t, i: Z M# A//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')* f; U* y1 _7 W- u: v
7 Q1 A; ]# L9 U. V0 U
initLinks('#FF0000', 6, '#FFCC77');
! r4 k+ G( a/ h; i6 x% T" ~3 } M4 ^* W
7 ~3 r- @/ m$ N; @4 c7 A5 |//-->
$ ]$ E5 i ?+ e, v. a# Z Z' A; A" D+ G9 h. a- d! E3 W
</script>
; m% v8 W h. E7 J1 l7 k; k<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元; V; X6 O8 D" G i$ W3 o
</a>, m8 h( y. H* j2 j
<br>
2 x' V" y2 E" J<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>- m. ^: w- U N- a1 f: [& O
<br>
3 d( M! o: V% u4 v5 x2 Y( \3 p<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>" U5 Z2 T5 r% F# B. t. e
<br> 6 V) S! U ?& D' f
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>3 L9 C9 O, M2 F/ u. ?/ `7 n( @
<br>7 Y: @) `- w3 w& p2 i1 c
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
5 ?3 A" M ^" ?, Z+ ]<br>- a' p" M: l( _+ M0 o
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ b" a0 N6 {# f, i" M' ]( u& P
<script language="javascript" type="text/javascript">
. E& N7 E$ w- y: C; }9 u- L<!--" r8 ?. y |+ U2 f) {
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
# _/ f7 E. u( Q" C- N//-->
6 w, [8 A9 C$ I& p) ^* _- K</script> |
|
发表于 2008-1-21 20:48
|