|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- W$ j' Z- I: l( J" Z<!--
/ T' q) K+ i& H1 L3 T* ^// convert a single digit (0 - 16) into hex
! ]6 l/ L2 q3 w7 t3 ofunction enHex(aDigit)
6 |, L" z4 n7 }: t0 S{
) H9 t& C. J3 z: ^9 o return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ h1 V& x5 ~# H: \4 t1 ? W+ U! q! f
}
8 |; H, x; S e, p2 O! f7 ~- S// convert a hex digit into decimal
* i/ m2 s0 A# B: {9 K* Rfunction deHex(aDigit)
& Y: b" }2 F# w# W/ e{/ D2 E. `: F: V6 l" X2 |7 _6 c
return("0123456789ABCDEF".indexOf(aDigit)); j$ J" ^ _% q6 {" [ B$ G
}
3 E7 @" F( M& u8 f6 w
. W/ R% t" v) @. \5 S// Convert a 24bit number to hex
7 r5 Y( E" n- O. I( Efunction toHex(n)* s4 Y( |, {" L) k9 k C; x
{
5 A) f- R) F" N$ |3 K0 V return (enHex((0xf00000 & n) >> 20) +
2 N' ?# [* Q8 `9 H; V enHex((0x0f0000 & n) >> 16) +
. a. m5 |- I7 {7 L8 a! _* R2 y enHex((0x00f000 & n) >> 12) +
6 B: e, J/ U! P4 ?" Q. w enHex((0x000f00 & n) >> 8) +3 z* ?: t6 \' x( |' [
enHex((0x0000f0 & n) >> 4) +
" |( d7 u- a: S0 z' J enHex((0x00000f & n) >> 0))5 h8 {5 X7 J3 I# T( j' w
}. p8 L0 P* s. ]4 H7 D% j9 X
// Convert a six character hex to decimal! M. P7 Z+ F! ?# {! H, O7 N; ?5 ~
function toDecimal(hexNum): a3 h0 {( n- j9 x6 j( V
{
, x( K; k2 T7 B: S8 { S% u var tmp = ""+hexNum.toUpperCase()
$ U% U0 Z; r* G$ {# v: u2 ]9 \4 A8 w while (tmp.length < 6) tmp = "0"+tmp2 K1 |+ d& ~6 j% F
return ((deHex(tmp.substring(0,1)) << 20) +
) ~1 V( N+ c. Y4 j2 {0 k# Q" ? (deHex(tmp.substring(1,2)) << 16) +
" d1 N/ q [2 U/ f) |( x (deHex(tmp.substring(2,3)) << 12) +1 | H. q: {. K
(deHex(tmp.substring(3,4)) << 8) +2 L1 B. \$ ^& B; ~! q. M
(deHex(tmp.substring(4,5)) << 4) +
1 V4 ^% m( \- t5 m' x; s9 q (deHex(tmp.substring(5,6))))
% M; H6 G) g! s2 n7 C( B: F9 j. ~}& r/ d$ W, N+ [2 m0 a' H: Q
///////////////////Shimmering Links/////////////////////* F/ x: e% \6 W6 L! {$ R/ ^
//global variables
3 Q8 S6 k; B/ M: `* w5 Uvar hoverColour
" P1 E! P9 \# E- w: t5 Gvar numLinks;
: v' W3 e7 }! t- k0 B& H" Zvar rate;
4 Y e. j2 R, c }2 Svar numFadeLevels;: R. y! g; u) i4 v' R2 Q
var bgR;1 ~& l# L1 b7 S+ o" G+ }$ Q1 [& B
var bgG;
4 Y3 M. S7 m) o4 avar bgB;! p2 ^2 r z' O P
var currR;* R% g+ Z! F- P1 `0 s& Z$ \; {
var currG;* b1 @0 _' K8 T, Z% u
var currB;
+ B3 h; E6 ]* ?' H3 N" Nvar count;
, \2 A5 E- Z% m; Z5 e; @& avar fadeOut;% N+ S2 ?% i9 M8 Z, _( [
var continuous;4 D! w) R v7 D+ }) C
var newColour;
1 J3 H* i/ C" b2 v% lvar tID;
" i% E' z/ u# H% n% Lvar redInterval;6 R+ k/ n. z& h$ e7 D
var greenInterval;
' U, u3 i2 Y: R: qvar blueInterval;* w/ _4 h* i3 x. w$ j2 U0 A
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
: ]2 {- \1 Q: _+ A" e- h{
9 W4 T% O4 _7 T: w( P3 A3 U hoverColour = mouseOverColour;
b3 l* Y7 _, Q1 j5 o numLinks = numberOfLinks;
0 a- {7 J: i% ? rate = 1;
9 f1 {; ~0 s5 Y% q4 N7 v' a numFadeLevels = 30; y6 P. h+ P! A6 z- P
function initArray(theArray, length, val)
], @% ]3 Z! J: u {0 ]$ c0 G4 @ n- L
for(i=0;i<length;i++)
- z1 @4 V3 @5 l" f. t {
2 O7 Y0 e9 ~; K; E* P( }* c theArray = val;! E1 X# r8 ?3 F+ ?* V: q0 Z0 T
}
3 R( v! a- b% t) F- h# a; M( G6 y }
7 L2 p; e; N4 q" E, U5 X+ J bgR = '0000' + fadeOutColour.substring(1,3)* u7 Y* b( B' P( |: k, k$ ?
bgG = '0000' + fadeOutColour.substring(3,5)& c( o- S$ g0 k! m# f7 a9 i
bgB = '0000' + fadeOutColour.substring(5,7)' i' i5 h: {, U2 W
currR = new Array(numLinks);: l# P# k. p0 i/ A, o$ u. n9 [
currG = new Array(numLinks);! n: n, O3 t# P* B* h5 o' i
currB = new Array(numLinks);
8 o" C9 }) j" U" ^/ H! o& H( P count = new Array(numLinks);
2 ?1 ^+ A: O7 _! g/ s fadeOut = new Array(numLinks);
: M) { s3 J: D2 i( r3 D5 k; U continuous = new Array(numLinks);
7 h& C: p2 _* c) e1 f newColour = new Array(numLinks);! f' c* F9 j# b% Y6 H8 I% h
tID = new Array(numLinks);/ C6 i! k( ^- }4 L5 M
redInterval = toDecimal(bgR) / numFadeLevels;
" G, }" H" G6 G) ^2 I9 B( S greenInterval = toDecimal(bgG) / numFadeLevels;
' l$ T' {# K5 ]; p blueInterval = toDecimal(bgB) / numFadeLevels;
C% a& h! j' h$ d n$ g) b initArray(currR,numLinks,0);% T0 x1 P: G6 @
initArray(currG,numLinks,0);: G) r( k0 E' D5 o3 W$ i
initArray(currB,numLinks,0);
' D0 \1 a( x3 ] o$ E+ ? initArray(count,numLinks,0);
" [6 z' N/ K; o& b initArray(fadeOut,numLinks,true);+ l0 |& o8 c# t
initArray(continuous,numLinks,true);
, I' C0 a- b d9 z3 q% A* F W}
6 ?' q1 G; Z6 x- g8 sfunction startFade(id)& c6 j0 u6 x. V5 P( T8 M. z' \) Y
{
& E% ?) q# e0 q# v' v }& x if(fadeOut[id] == true)
5 S5 b) H7 u) j0 I6 m2 u' W2 _3 ` { /*move colour towards background colour (increment)*/+ ~! @. G: l% b
currR[id] += redInterval;
9 ?; x( l- a9 z8 ^ currG[id] += greenInterval;
8 E/ f+ M; K. ` currB[id] += blueInterval;
' [& o+ a/ ]# {7 a4 m4 j newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);& ]% z* @8 Q* ~% \
if(++count[id] == numFadeLevels)8 z4 `% n S3 F2 u
{9 w# z4 j- t% W) {% ]0 Z2 O
fadeOut[id] = false;
0 e. W, D. N# `1 P! t/ i }
0 v% ?% n/ g- c, T }/ Z3 e5 L3 u0 `# r2 t1 d$ g
else1 U' x+ B8 v% \4 k' _
{
+ J, h1 Y% L- C7 ^7 z5 z currR[id] -= redInterval;
+ x, H6 l/ z9 m) `) T7 f3 W* W/ x* c+ V0 p2 Y4 j& O
currG[id] -= greenInterval;
' w) ]: z' A$ H+ O, N5 }- @2 j
h2 t/ Z+ f3 p: ^ I currB[id] -= blueInterval;
0 C) Q4 a4 f5 ]# D3 E; i$ G2 i* J( B2 a- y. \2 J" c% r* U1 w
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
" x& t/ p9 m" N2 X
/ L9 @( I' M5 y7 o7 ?- Z if(--count[id] == 0)
2 \" G- r T1 K" A/ J* a% L; N& M9 I) Q* ]
{& Q- X7 i9 R, |$ F
$ v! B8 `7 V3 d! ~0 D fadeOut[id] = true;* L2 z) p) u5 J0 W# G/ F4 Q+ @2 B# U
$ E: n6 k* ]0 x }
$ ` ~0 P2 i, A% i( C4 R5 D! b3 Q- ]. K/ H, U0 J) E0 I
}: S/ R4 z! |7 s1 w! y
( z) t* G2 u1 l; d# a1 u* ^ if(continuous[id] == true); f* C6 k& J9 j$ T" d
6 W, _) q9 F0 x1 ^$ O* N: A
{
# d; H, K! e& c1 Y
0 G5 X- C: Z6 P4 C document.getElementById(id).style.color = newColour[id]; % F; @& L4 N0 p) l; M/ X# @
9 A' `# S$ r, H, ^6 _9 q }
! Y* o9 b, Z# x! } R+ @, r% v/ F3 H; j ]+ N# q9 }
else; J2 c- a9 ?, y) c0 ^" }) o
( `: F+ d0 P& G, {8 K7 @ {) j5 q$ x) r+ k+ m% f) G
. {! f7 H$ X! l- h3 h
document.getElementById(id).style.color = hoverColour;
# q: O8 U* }- S O1 @* e
2 H5 x( A* x3 x! T, R1 ~ }$ S9 u7 _8 Y" m5 q5 E0 [
5 c) A6 A- I2 I+ M( T: C& d, T clearTimeout(tID[id]);
6 y7 l1 d5 \/ C! ?* t7 |$ w) V: Y0 u* R; O4 m
tID[id]=setTimeout('startFade(' + id + ')', rate);4 v$ t9 t/ g- b7 o0 ^
: ?8 r9 I" ?( M* e, j/ i, X: s}
/ M* D1 a5 ?% q* O. p* E0 h- {
5 s( s3 q/ Q0 ~4 Z9 x$ }function continueFade(id)
/ I8 _+ ^; |! J
' n0 x+ T! o& D{
s) `4 S4 ?6 S# |7 w% y9 ~3 G
# f) I7 p6 s. `' h L$ a continuous[id] = true;' t$ r8 [6 M0 s: B5 I6 R. m
- t% e$ J: Z; _4 l, t}* l6 x* t% x8 B; y; J. ~
5 _% i" S& Y$ l- k% M% ofunction stopFade(id)
, ?) V& b# I/ r& K9 z H6 D4 Q! P) }7 c8 |
{5 S5 R0 `8 i$ O! z1 e+ ^
|0 o! M. Z3 W. G3 {
continuous[id] = false;
' d" s* _ j$ J, z$ F$ @5 b) |, |$ }( R- ?6 R1 ?
}
/ ^3 h7 \. l' ]* ~9 h
# n( I8 R* V: L6 ofunction StartTimers()
# ]( z" T" O; n# y
9 l' ^" _7 O) U i, c{ //set up an initial set of timers to start the shimmering effect
8 D& v- w7 V1 [' B: n, |* q3 s2 U0 i& g9 b- z
for(id=0; id<numLinks; id++)2 ]5 @7 G& a3 r p: t U8 n
) q) H2 k% n4 F: c( M/ z
{% ^1 I# {$ ~& _$ q# M; ^1 s
3 W" L3 E: E" g6 u% E X t=setTimeout('startFade(' + id + ')', id*100);
1 _% T( S/ i2 y! M
/ `8 d, C# Y$ S }# h* u# w- D" x( n! G0 Y
" }. _" d1 ~3 O}( D& N& T4 V. d1 c4 R
7 G6 ~. K* ?9 o//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'); c; w- x& h& r4 X3 P8 a, d; p) _
. j! r' \( D) b8 p+ Q, h4 N; N
initLinks('#FF0000', 6, '#FFCC77');
7 G$ H' G6 g% X3 [" F/ u0 c
( H# e( ~! v8 O//-->* X h: s+ h# C$ b- k* r( K
. B0 @3 D* }% V/ i! y6 L</script>
2 U9 k! f; @. p! Q. r, ^, F<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元3 f# j! b# A$ g! C1 x5 p
</a>
) Z$ j0 p# ~. f' {4 {<br>! j3 o' j# B; y& ?, U
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
2 V6 ~( m1 J7 y* L/ v<br>
7 d0 O6 u c* M& D \& o<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>7 a& y ^" D% G+ Z2 J
<br>
2 ]: [! I+ Y+ K3 h<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>9 A. U& [) O1 `5 {
<br>
% V& G! ^- w/ k" ~<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>5 ~0 L9 A) L; C ^- j- M
<br>
( r6 e0 N1 V( H, G1 p* d1 ?<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
2 c" c/ i g M2 G) P* r& `2 _<script language="javascript" type="text/javascript">
1 }; r; N. t9 H& ]" Y; z<!--
, ]/ C2 Q# _4 m5 IsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 x6 R* S" o. ]) e, h& j' \
//-->
' `' u: j" [1 |& I% ^5 ^ R3 J</script> |
|
发表于 2008-1-21 20:48
|