|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( K5 N* ^! L, G) l8 N+ L
<!--
# H3 [5 g6 \: n. I5 r& i4 d// convert a single digit (0 - 16) into hex% f6 h, O, _7 f9 d5 ?- Y# A7 o( S
function enHex(aDigit)0 `; h2 d5 }' i& B6 D( Q8 X% ]
{
7 w# @/ {9 {6 h) f return("0123456789ABCDEF".substring(aDigit, aDigit+1))' X9 L7 w+ z5 C
}3 \ b; B) r+ o7 Y% p- g. g4 t
// convert a hex digit into decimal
. C3 i r( E4 e: h* k; F1 ]function deHex(aDigit)
0 q/ @* \4 q) N( p1 R% R3 v{* l' {7 E, m% E
return("0123456789ABCDEF".indexOf(aDigit))
9 E2 X0 }( I; u) r}0 g0 {, l6 U/ S) c
1 c2 Y% ~( ^: k# B$ \( f; u/ j5 M// Convert a 24bit number to hex
( u( b* ?" w* U* i' U9 d8 m# A- e: F0 hfunction toHex(n)
3 \3 p- |- Y7 Y1 k, y) u{5 k. f1 B7 n1 h! {& ~6 a
return (enHex((0xf00000 & n) >> 20) +. N3 Z0 M, a& q7 [4 q$ D
enHex((0x0f0000 & n) >> 16) +' {+ Z2 j J3 e- P( @
enHex((0x00f000 & n) >> 12) +
2 Q& E! b& h( |# j7 }2 r enHex((0x000f00 & n) >> 8) +/ p1 _; r1 S0 F' j+ B- B
enHex((0x0000f0 & n) >> 4) +6 F/ g# B8 l7 W9 t# w3 y
enHex((0x00000f & n) >> 0))* Q2 L. s H! A9 z
}
' ?5 ^# |+ r( ^4 A: F% u$ b// Convert a six character hex to decimal
% F0 c8 @& o$ O% sfunction toDecimal(hexNum)
' B6 ^# g$ G$ r) A0 ~" h d{! T7 B% L8 b3 u
var tmp = ""+hexNum.toUpperCase()+ w9 ^; O* ~" n
while (tmp.length < 6) tmp = "0"+tmp
& Q( ~, j, d0 z7 [( e return ((deHex(tmp.substring(0,1)) << 20) +
5 C T! [$ W6 ~& W" X# n; K (deHex(tmp.substring(1,2)) << 16) + 8 Y$ j9 I9 I" d, k/ Y- f/ i
(deHex(tmp.substring(2,3)) << 12) +' w, \/ U- x9 w, Q6 D4 J! d) y* U; P
(deHex(tmp.substring(3,4)) << 8) +8 S/ k7 D9 ]* B) I
(deHex(tmp.substring(4,5)) << 4) +9 {$ i. u* r2 ^7 M" V2 ]% `
(deHex(tmp.substring(5,6))))
x2 `$ F. b' \+ b0 Y/ e}
, @7 e% w8 L+ Q2 [# A$ q" \///////////////////Shimmering Links/////////////////////
5 ~* d( t3 a; O# P6 o' a, u//global variables
/ r- g* x4 j8 T; K( Lvar hoverColour
1 x! ?! |* ~: e8 _8 X' K5 _* i1 Uvar numLinks;
5 x" u& d. a1 O, kvar rate;1 r5 b7 A, f2 G; ^9 B/ t
var numFadeLevels;: N$ Z' P- g# @- W- O
var bgR;
3 G" a+ F5 `/ I. ^5 }var bgG;5 Z2 i: q; C; {
var bgB;0 {- `9 @/ ^& W* B1 A8 Y
var currR;2 t1 _0 ?$ }4 y
var currG;
8 y8 I Y3 z: r; ivar currB;2 Z; S& O+ b2 v' o/ F
var count;
% L& D8 K7 }2 z2 _0 x& zvar fadeOut;+ c! w- m7 S$ M7 a( _: I# G
var continuous;
6 W4 I r5 o' ?1 t8 m5 z* r$ ~var newColour;6 J' i5 c, q8 ?0 d+ q- f# q
var tID;
3 t. r8 u, H: H0 {( yvar redInterval;: q! P, d9 ] ]% h0 T) G
var greenInterval;8 p* v& n: l3 R0 }- D* {
var blueInterval;
- j r: E# G! B4 P+ e8 [( Kfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" p+ I5 r0 O" W% x{
$ L8 P2 Z! Q6 ~; _ hoverColour = mouseOverColour;, [; i* e: B4 P2 r9 u0 p' k! k
numLinks = numberOfLinks;6 e: j$ O! L4 y0 W
rate = 1;" ^% _$ ?1 Z4 m5 h( O- E* H: s8 o1 X
numFadeLevels = 30;2 J, [. l4 i, L
function initArray(theArray, length, val)( h N3 ?2 ]$ e8 v: Z* y' [( A R+ s
{+ r p* p% I3 A' a" k* x$ E
for(i=0;i<length;i++)) A, |0 A8 m: t$ D& y" R
{
9 y' j5 Q. s% L: `, I8 i3 l, Q theArray = val;5 ~5 J$ L, w5 J2 `6 v0 N7 l
}
, _/ ]- g% V2 _* ^ } }& y4 q& x+ m( W' P5 [
bgR = '0000' + fadeOutColour.substring(1,3)5 A7 j# c: Y I# t$ J
bgG = '0000' + fadeOutColour.substring(3,5)
8 C* `1 J# m- P# } bgB = '0000' + fadeOutColour.substring(5,7)
( q; A D8 ?# o' M: z2 J currR = new Array(numLinks);2 `2 w/ C1 n) l6 u
currG = new Array(numLinks);3 z6 e# R+ A% i$ l
currB = new Array(numLinks);
% Z$ u( ]; |% Z7 G8 F7 Z" B count = new Array(numLinks);/ Q% c+ s6 B0 [+ v
fadeOut = new Array(numLinks);
1 ?$ Z8 d/ {7 X. g4 W continuous = new Array(numLinks);
9 S$ u2 E' Z* o* ]+ } newColour = new Array(numLinks);% \/ V3 d5 H- H* n# F
tID = new Array(numLinks);
! H1 g O( ?# F" y* X redInterval = toDecimal(bgR) / numFadeLevels;
) P/ |: {9 H9 l. _- M) f: V8 T- b! y greenInterval = toDecimal(bgG) / numFadeLevels;5 l+ `6 @+ K" f$ Q$ v- s2 ]* [/ `
blueInterval = toDecimal(bgB) / numFadeLevels;6 h6 J4 O4 l% O& }2 U' _6 v( K
initArray(currR,numLinks,0);1 Z- L' u0 k+ t4 B
initArray(currG,numLinks,0);: q) \! b) ^" M! U
initArray(currB,numLinks,0);( p( Z o- V8 F1 w5 m
initArray(count,numLinks,0);
( L1 u; _ X; v; F; V initArray(fadeOut,numLinks,true);6 x; h1 D5 Q* R" w- o8 {
initArray(continuous,numLinks,true);
; y; S" E9 v x3 n! \- J6 Z}
( X7 s( n. K; D0 b9 pfunction startFade(id)
" w3 N9 r5 ]* k7 M. S. h{
* K, l7 _& U0 t: E$ o if(fadeOut[id] == true)- m$ l" h. u7 I$ l2 e
{ /*move colour towards background colour (increment)*/) @6 u) F7 |& X' a, \% j
currR[id] += redInterval;
8 a* \. G$ z' Q2 @1 v& G/ z% B currG[id] += greenInterval;2 c$ A0 `$ L( |$ [3 B3 E$ b; y
currB[id] += blueInterval;( q* r) D3 K+ L* @; `( A! s
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 S5 {- @2 O! y& D/ Q1 S if(++count[id] == numFadeLevels)
9 j' r1 R7 n' C5 a+ m {
$ T6 z0 d( g/ c }. m1 P fadeOut[id] = false;
6 q: j( n0 @' g, A, W+ z9 q$ j }
1 d) C" C1 ?" k0 w( k3 T }) q& @. r: E9 n% f- I2 S+ X
else
# @/ |" G: |5 B$ E( y/ ~7 R {
) D7 u0 c) X% @8 h& j currR[id] -= redInterval;
2 u1 l+ Q2 K; v
: T/ X0 ^: T# D+ j4 x currG[id] -= greenInterval;; N; ?: E6 C& \+ U4 T, J4 F% I
3 q/ E* q; s3 g
currB[id] -= blueInterval;
) o& I( L& v$ O! d7 m5 @, p1 f7 O" d' L- b$ D
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: v" g! s1 [3 Z& w) _" U. E/ j& {7 h* r ~' i4 @/ L
if(--count[id] == 0)
2 J) G! U- r8 D8 `# ~1 ]- U {" a* M1 q7 [- a$ d5 d8 o1 Q
{1 K" L" A5 H% V9 u$ T
% E/ k5 F* p$ h; m2 ~( Z8 P9 }2 A fadeOut[id] = true;
2 P6 i% o S6 y+ }4 D8 Z" P5 s+ S0 \! k: q, e# k) T6 Q- C
}
& e( f/ B# `, ]' P% \7 k6 q
! t2 u2 ^5 |) n6 F, A }) {. f# A+ s7 v- D) G7 f
% P5 K' A) [$ [ if(continuous[id] == true)4 x7 z/ Z9 y) z2 q+ w3 L S
% p: O) t8 c+ M) N w {5 N1 Z5 c8 R9 ~: g' U
3 y* _2 }4 N# n q) C; A* x: z
document.getElementById(id).style.color = newColour[id]; 2 |9 ?1 |; c" E) e* ]3 S
# ?2 T$ y0 `; Z _. k5 Q
}! ]. ]) H6 p5 s3 e- Y+ x; Z5 Y* [
- b- C9 G+ x6 a. M2 H5 B
else
% h# {$ r* i( c g: o
+ T! t, e- `+ O9 g) }, E {4 d8 d2 N# p8 y5 X
9 J. `, l$ u$ S" X* c( ]6 ] document.getElementById(id).style.color = hoverColour;
6 }- J' R( H( ^. w3 ]% I" L V
! T; ?5 e$ \, X; O4 |( G! \ }
0 V c+ U: X$ c. l! v, p+ c" i) y( V8 j# C7 w& ^; {! |
clearTimeout(tID[id]);8 n) d1 P# D. ]- b6 R$ @) @, v. p
, k/ V1 `1 E$ ^" R" u* H7 c
tID[id]=setTimeout('startFade(' + id + ')', rate);
( X9 X; [& H% c+ ^; z
( B3 T) I7 ?) d7 l9 c6 c}
C/ ^) j- t# |- S; Y1 ^
* @2 F- }# ]! C! F9 Ffunction continueFade(id)
4 I$ m9 D* i% I: J) m! U" {
! g, H/ g O* C+ o* I9 ~{
/ E' S( X: \& @/ P3 R4 |
1 I- x2 R/ _5 B/ X! ?1 I continuous[id] = true;
% G0 n+ e) B$ R) i( j' ~$ M9 ]3 c a+ G6 p! F
}
7 ?. p5 {' F$ F- B0 B
" V, ^. i* R) m5 h. Sfunction stopFade(id)% s" m8 H0 C" G% e$ N) [& t
2 k4 u# [; C- g0 m3 m{
& D: u' u, a: U% ^
9 Z$ c# y0 o7 z: R6 p continuous[id] = false;! I" v, d/ ~1 L8 U. N- a- N
( Q; v" k; ^# Y3 r, d# I}
4 W; |5 ^5 ~, k, O3 ]( l: r$ X& l0 W$ n; @: w1 i
function StartTimers()
- x& c2 {/ k# T ~
% M8 z* v/ q- @- s" W{ //set up an initial set of timers to start the shimmering effect6 H( f$ A4 f4 O* [ x0 W
0 B. ^& x( B" f! r, s/ D/ V8 t( ^! N. [7 W
for(id=0; id<numLinks; id++)
0 T$ O, n9 ?. c. f" t. ]2 R2 T+ d; }. J+ z0 [
{
; N/ {/ _. B, h! h
5 X3 X; q% z% D t=setTimeout('startFade(' + id + ')', id*100);. o) e# i: K" ^ a/ L6 K
2 C2 s; R$ w e! L9 \* n2 x }
' B+ i' c2 a% u8 Q- a+ p, ]# g& m2 c* q) @, P$ C
}
# o2 l$ w+ P3 d9 i+ ]- v W$ H: j1 ?( \- z0 k3 D# ?
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
8 }( b) T7 E2 k" Y2 t3 e. v m2 z, g
( L( R3 H! [4 PinitLinks('#FF0000', 6, '#FFCC77');
0 [, t. l* M& E* y9 f$ A3 O" m4 K/ F) R
//--> q8 K( w) x/ ^9 \3 k
" X, g5 s9 Y1 d3 C
</script>
! |% e( P5 J$ h! M2 e2 i<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
+ u6 A6 h. A" B2 j1 c</a>3 z+ }$ Z4 ]4 `- N" u! I1 T) j9 e
<br>7 S6 z( P% L7 }
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>0 l( w* w. Y/ ^
<br>+ f. P9 L2 m ], \
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ B% b5 d- i" O
<br>
) I9 U# E% F5 u# O& {<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># z/ [: a% q3 y i
<br>, n+ F0 y/ \, [6 B: c+ w0 t
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
, W, p0 S" N6 [& z- k<br>* f( X& `" _6 t
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& {( y9 x( e# H8 ~2 w. S! }3 k
<script language="javascript" type="text/javascript">
' R' y y5 S: K& x2 q) D<!--
4 p1 G7 y5 G$ I% _& asetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. P( `3 B/ F, e- }0 L5 |+ t//-->; `$ _: }" A2 J; P7 q9 D
</script> |
|
发表于 2008-1-21 20:48
|