|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">: h. J" r$ U5 r. \- a
<!--
* x5 }$ ~& y* L+ S6 [// convert a single digit (0 - 16) into hex
! \2 H* v5 k+ O1 N' Cfunction enHex(aDigit)
7 O0 b1 b" _. X J{+ z2 P1 c$ N0 o9 T
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
# X$ b( j6 U& S% e}
+ n& ]7 R* a- Z5 @7 C// convert a hex digit into decimal( E% N7 {8 ^6 {& j8 ]( z
function deHex(aDigit)
+ u! O9 R' ]( m) ]8 [8 Y{
+ X k" h. _$ `. R0 C. P return("0123456789ABCDEF".indexOf(aDigit))
( ]4 S3 `/ ~3 f; M}+ D5 s5 Y# e! x1 H: U, R
+ U1 i; h0 u8 C/ q. H// Convert a 24bit number to hex( O: K& U1 i3 i; B. ^' e. o
function toHex(n)
. I, w" G! s6 z) g; W- ~2 t+ W{
- e; V$ }# l5 |3 c return (enHex((0xf00000 & n) >> 20) +* a2 i( L/ k9 V7 ^( Z8 j
enHex((0x0f0000 & n) >> 16) +( v' {" i( I" ^$ @, a
enHex((0x00f000 & n) >> 12) +. Z9 Z5 `+ R% j5 ~, d9 |
enHex((0x000f00 & n) >> 8) +- W" H# a8 x# ?0 C/ r. \! H
enHex((0x0000f0 & n) >> 4) +: l. @ m5 |" H* u" S
enHex((0x00000f & n) >> 0))- u! `! f* {4 a
}$ V& B2 d& E; ~0 ?
// Convert a six character hex to decimal
) {" J' j+ ~5 R( ]9 y9 ^function toDecimal(hexNum)
2 c( t% X$ P$ P, D1 y: ]{# |! w+ H `. }( A
var tmp = ""+hexNum.toUpperCase()7 H9 X1 J( L) g. i0 h
while (tmp.length < 6) tmp = "0"+tmp: D5 U. A- Q1 T/ r* I
return ((deHex(tmp.substring(0,1)) << 20) +3 t, y, a8 Z& L( E; H
(deHex(tmp.substring(1,2)) << 16) +
* A7 r0 g5 _5 t8 A (deHex(tmp.substring(2,3)) << 12) +! W( b5 j# c, t$ [/ ^( T, n
(deHex(tmp.substring(3,4)) << 8) +# x/ v1 u& l: Q, i# z9 l1 i
(deHex(tmp.substring(4,5)) << 4) +3 q8 S" _5 Y- w3 f
(deHex(tmp.substring(5,6))))3 ^2 B1 p9 \9 @% D+ E' w) e+ b
}
$ J9 F, z/ o. z) K" E# v///////////////////Shimmering Links/////////////////////
8 [( S( y$ J1 [5 F3 d: ?6 I//global variables8 n9 z# w7 m; w$ k/ ~4 r
var hoverColour3 e; w" V. D# E: ~6 s7 b
var numLinks;7 j, D2 o2 S/ C& f, `3 i' {( T
var rate;
1 }- a' T U V7 L: `$ Z: [var numFadeLevels;
% {. z3 Y7 e: N0 ?" Y' @var bgR;
! A6 @$ b/ |/ d$ r% x4 qvar bgG;( H/ V g) u9 ~/ g, k
var bgB;' k0 K( \& W( D6 q: H
var currR;" v0 X4 G# r1 D5 d0 v! r: H
var currG;
) b' l1 Q2 e6 a# e' a% L2 [var currB;
, k6 @+ Z T( d) avar count;5 }8 M1 X1 |7 o& P
var fadeOut;: y/ E# A% o+ N% ]: S: M
var continuous;7 F3 P# R9 q9 D# M3 G9 @' t P
var newColour;% V2 V0 J9 ^! \8 M
var tID;# D6 M* M" p V% Q4 @
var redInterval;$ p% C! ?' G- F* J- Z( I
var greenInterval;( u( k1 D' L3 n0 g9 g9 G1 f* H# s; f
var blueInterval;
* A4 h8 i! f( Ffunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 d+ y5 t, n# J; \# K' W{1 |( Q, {5 C, t5 @+ c* @( D. b$ k
hoverColour = mouseOverColour;
* }) w& J; |4 I numLinks = numberOfLinks;+ n; y j0 M. f" v
rate = 1;
$ z# K5 v) {0 W9 T7 e numFadeLevels = 30;
! |3 V8 M0 s* F1 `4 w& w0 x function initArray(theArray, length, val), q: e8 @; G2 g
{
7 {" c( ^7 R; i3 H0 z for(i=0;i<length;i++)
/ j0 u% f. g% A& ~$ a8 S {! ^* e: ?$ b( y4 Q# p. Q
theArray = val;. r* x- K( B3 v) `3 p
}+ y/ y3 N& f+ D1 x/ n
}
1 L. u* M' L4 j5 t+ r bgR = '0000' + fadeOutColour.substring(1,3)+ d' e+ H, P, z; g3 `' W: ^, t
bgG = '0000' + fadeOutColour.substring(3,5)
) |" s4 v9 n7 p- f# p0 B. J: I) K bgB = '0000' + fadeOutColour.substring(5,7)
" k1 f. l! U( I9 \0 m, S1 x5 r, ^ currR = new Array(numLinks);4 }& [: u3 j/ M
currG = new Array(numLinks);- O' j2 W8 z" B; k. ]& p
currB = new Array(numLinks);
4 a R _) }2 \* `2 ] count = new Array(numLinks);$ M& g+ K& S( I5 S
fadeOut = new Array(numLinks);/ U" u1 F P3 G; Y6 q
continuous = new Array(numLinks);
. x4 P5 Y: `5 [2 Q0 x7 |. I E$ `% Z newColour = new Array(numLinks);
2 a$ T8 R J) _) c$ I tID = new Array(numLinks);
6 L# l- A1 j, ^ i, b redInterval = toDecimal(bgR) / numFadeLevels;* F" @4 @$ `- k( Q; v- Z: u$ m
greenInterval = toDecimal(bgG) / numFadeLevels;" }' K# B: B3 b8 ~
blueInterval = toDecimal(bgB) / numFadeLevels;0 e* A r9 v! {9 j$ R1 Q' b
initArray(currR,numLinks,0); z; F, J% Z: [, W
initArray(currG,numLinks,0);
9 T7 M# j' i7 q; K0 \, L* ` e0 j initArray(currB,numLinks,0);
0 I# {# l) R# o7 B% n+ K9 i; D, Z( D initArray(count,numLinks,0);! u) k- L& B. y( c+ |2 |
initArray(fadeOut,numLinks,true);
. }4 O3 P$ a' p! y initArray(continuous,numLinks,true);! o0 x! m0 d) f' {
} 3 z' P# E2 @. W5 W# n6 b R& M6 k! n d
function startFade(id)/ v6 J* e2 X& z# g$ ~6 Z1 c/ v( p
{
" m/ D( G" r0 @ if(fadeOut[id] == true)1 x) j/ k* E3 e
{ /*move colour towards background colour (increment)*/
; u. r! q: h; {/ O$ B8 R- y currR[id] += redInterval;
" {" q% |+ A, ?4 [( Z currG[id] += greenInterval;
+ ?- p0 P0 d6 B) X3 x& I currB[id] += blueInterval;
; I6 l3 I4 l5 ?1 H. _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# w" v9 k5 \: D% v if(++count[id] == numFadeLevels)
6 z* q- T) h0 E/ R5 j {
* s2 \$ [; a5 T- y, ]9 _ fadeOut[id] = false;: I* y9 I; H7 m- k3 a
}2 X" }$ f0 n, Y/ I; ^
}
3 Q4 I2 R2 l2 R% r4 e else
/ o& Z0 I0 i! D/ j+ i( b1 i1 L. h {3 B0 Q+ j( z+ P8 q' L0 n
currR[id] -= redInterval;
: G/ V0 _8 a5 _7 q. B
- \) l4 k( P6 U, @ currG[id] -= greenInterval;
8 |7 H) ?0 ^" H3 P T% U5 {& m9 N4 b. M c# ], f
currB[id] -= blueInterval;
! L0 @" A. S. z! O5 [: b( o2 x: M/ G3 Y2 G7 @& f( P
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" D# ?! V1 b% H+ p% u3 Q. _9 @
) W! @) s4 N r4 p' M5 z7 ~# G5 I if(--count[id] == 0)
+ Z" J4 j, N3 Z1 i3 S* |
4 F, l0 H6 u4 m {+ \3 M/ ~3 z, H
# `2 ?$ X- e* X$ D2 O/ @, r fadeOut[id] = true;
4 t) Z/ W4 e- [& \% |# _% c9 P0 u- U! q: I3 l
}
1 L; m6 U# l- R
+ u& R- B/ I" F( b }; Y0 l7 c. V* g! X( G+ q
6 u3 a2 `1 Z( _/ J6 T1 A3 V if(continuous[id] == true)
* K% i% h3 _% k! Q1 d# z4 G: L+ Y; ?3 n1 }# D3 s
{
0 Y+ D# q+ v3 N# |) s) V$ ^) w# F1 @2 Z& n- ]7 d+ t: x
document.getElementById(id).style.color = newColour[id]; ( P; z) }- u" A: _3 w) D \' r+ | k$ q
( p: ]/ c; G4 a2 X! O }
9 N4 O- x1 L, E7 m9 U; v, X, f2 S) v) F' P' [/ ^2 M( G! y7 e( w
else0 k1 v8 \" N5 Z$ X8 J4 j
' J* Y. @' Z( p
{0 ~, k/ |6 @, t, Z- P2 w( b, ^
7 W. s: K5 C* l' J
document.getElementById(id).style.color = hoverColour;
/ D1 v- @3 F% O4 Y7 i; {3 f
: c! U& p+ o5 s! E }
" R1 v$ ^. ?5 `& C0 N: b# Q$ z2 v6 u5 k) ?) Z& O& _* I2 P! |
clearTimeout(tID[id]);6 ?1 a, d Q0 j$ I( X1 ^3 a1 [+ u
- [! i7 x5 [; A
tID[id]=setTimeout('startFade(' + id + ')', rate);
/ K/ ?0 Q# ]+ w8 K# V. R; R8 a
, p3 J7 E- U! A) G1 C: h}
6 a! D! @4 x% C% S' c; U, r9 W3 O$ v) q* D, [* @/ a& i: \
function continueFade(id)
8 |8 y9 ]: w3 X9 o; z! s% r Y! A% h" c* w
{0 B5 g4 x# r5 |7 h
2 y9 C9 n- v& @
continuous[id] = true;
* w+ G7 D8 I( T* K: h
$ y4 E7 }5 T" _8 Z a}
( b1 u& k- [! j: t. Y3 x* P$ a3 S- M8 W8 F! G: C' |
function stopFade(id)
1 ~2 }4 Q1 i- V5 }% C" c* ^4 A
& A! j( n. v e" {# @{2 }. o! \) ~! B2 W& d% C8 n/ ^& z6 V
! z7 }" ^" y& i% V& `, U continuous[id] = false;
3 t- i1 `3 x5 [/ m9 R) E1 j* ^8 [
}; H% d( ~- Q6 y1 Q: U- k* B
1 u: C6 ^; J" b+ |% R+ b# J
function StartTimers()+ u2 u! f- ]. A
* x2 b9 ^9 n5 S* O# i4 p{ //set up an initial set of timers to start the shimmering effect8 o: ~0 o1 s6 y" I3 V/ H. ]' E
1 d; b' b$ z! f9 X5 m5 m3 K
for(id=0; id<numLinks; id++)
! y1 j' ]: g; b$ K1 v0 c8 c# Q
* ` n: j1 b; `7 K' w. F {. d2 E! V8 K: Y P' ^; Z
4 k1 J2 S) c4 S% ^# Z t=setTimeout('startFade(' + id + ')', id*100);
- T' T# C! R+ B1 E' `+ P; G7 `
1 G, u3 H3 y- X }; m! }7 G; v% P3 I; s
: H' @: V0 C8 X8 @# u- G
}+ V' @6 E1 }# ?" u. ?% S
K" ]1 v) r1 t. M. O3 O+ y0 s" } L/ X
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'); f- F* C" B8 Y# M" C. g) H
6 z: B& l/ r. L) r8 v
initLinks('#FF0000', 6, '#FFCC77');& V4 r" o4 a8 l/ G( j& {6 u7 b- v
& }) t8 `3 ]: |" x6 K
//-->6 G$ |% [8 A C' K" k$ M1 r7 V% {8 I
9 t7 A! c r$ X$ S: h! Y: d
</script>
$ R" G" n7 e9 J( Q8 j<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元# o2 H/ K5 ?1 I
</a>, B: D* Y5 r+ e2 y
<br>- [ S* K M) u
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
: r9 k7 l X* v0 _<br>- k& w( S, |; `" a* x$ F
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 {1 r P U# F5 k* d0 v<br>
% u3 m5 I i. {) t/ [& T) {<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>! O0 O4 u/ I% V& B$ p$ r: a) J* {
<br>! R5 `9 l/ g; m D9 |6 D$ b) K
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>7 K. a8 U6 P$ _# Q# `/ g
<br>( j4 \! Y. [+ @' |" }5 _% }6 K
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* [! y8 ?- M# D
<script language="javascript" type="text/javascript">
7 W- q/ M: m4 `, r9 l$ @5 y( O<!--- l7 C. N2 T3 G
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
; U) H$ t e: g$ m2 j//-->1 s# P/ k+ t1 ]! d( Q3 a
</script> |
|