|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( t3 V7 m/ F# h/ M0 t9 N P
<!--
/ a/ ]% N( c; A( F( t( I/ f0 [// convert a single digit (0 - 16) into hex
1 B3 Z: @& L: F' G/ @function enHex(aDigit)
8 g: H, m% H+ \: |, B+ o{( ~, L( k3 }6 t3 `! S& V& Q0 d
return("0123456789ABCDEF".substring(aDigit, aDigit+1))' {: y d5 \5 \4 z
}
* T* ]& E& H& z: G// convert a hex digit into decimal
/ X6 ]! P( }" D- p afunction deHex(aDigit)
2 i. K' @. E! e. K# _. e3 S{
7 t0 J3 Z8 U0 D X" h. k7 @. P# {8 p return("0123456789ABCDEF".indexOf(aDigit))
. e9 C% X& |+ G6 \/ N# s}* \0 L% H* ^7 q: o \
. t0 {: K& T" ~+ ?) ^# L// Convert a 24bit number to hex. Z c, q- Y3 E9 o
function toHex(n)* Z) Q! t4 N- ?' Z$ ^, O/ M
{2 b( E+ a1 J# F+ W& H; u
return (enHex((0xf00000 & n) >> 20) +. s4 X6 t/ Q' p1 ~6 U1 w5 r( L
enHex((0x0f0000 & n) >> 16) +
( r; r) R# d; @9 A; V enHex((0x00f000 & n) >> 12) +/ \4 S& v. w# Q0 e# N O f
enHex((0x000f00 & n) >> 8) +6 X: m" a1 m) H$ a- d3 g
enHex((0x0000f0 & n) >> 4) +5 K+ C6 {, [& l6 M: V( p
enHex((0x00000f & n) >> 0))
9 h5 ]3 n7 r* O+ N C$ e1 L}! S8 E' s8 L4 a& Q4 o
// Convert a six character hex to decimal
3 l& K! |1 K, I: x! ^* D. [% nfunction toDecimal(hexNum)8 }) i! }4 X2 t
{4 i) w) w- R7 K$ t
var tmp = ""+hexNum.toUpperCase()
k4 s. o, v3 P& ^, \; X8 ? while (tmp.length < 6) tmp = "0"+tmp; y; [: f. Q" q1 R
return ((deHex(tmp.substring(0,1)) << 20) +
+ S: Z/ l! J( c* ^( i2 s (deHex(tmp.substring(1,2)) << 16) +
2 r3 V- {% S+ E* z" z# y (deHex(tmp.substring(2,3)) << 12) +
3 d" E b2 i* Z8 O (deHex(tmp.substring(3,4)) << 8) +
# {( s* s0 s, ?1 H (deHex(tmp.substring(4,5)) << 4) + b) M) S; e/ Q* F* X8 k$ Q
(deHex(tmp.substring(5,6))))
6 D, A6 S# {9 [1 }( q3 L}, K( Z& x; t8 z m# X$ ^& M
///////////////////Shimmering Links/////////////////////' V1 u% S4 r1 f# C# Q9 x
//global variables! u* H0 P O* R& P8 {3 \
var hoverColour
6 x q( }2 L6 Vvar numLinks;
0 Y; X3 ^7 E( v5 fvar rate;
4 ?; O' @0 ?1 d( ~var numFadeLevels;! @' t, V% K1 f0 o4 s% e! f' b9 l
var bgR;
C, r. j& U, v" t8 C7 f$ Bvar bgG;6 h" {% f( G+ R
var bgB;# v: |3 S0 P/ M
var currR;
8 g+ P8 S. R |9 A5 Qvar currG;- ?, I2 _( z* T. b5 g
var currB;) M; T8 F; l0 f
var count;. M9 c1 @+ n! _9 r: C% M
var fadeOut;
1 O" M- k0 _0 }var continuous;
. m) ]1 @2 ?# Q8 Wvar newColour;1 y8 j+ P1 T$ r# D" Q6 [
var tID;3 z3 i9 U7 R" @9 D6 {- C
var redInterval;
) R* z8 }7 {# B. J. t; c- C2 Rvar greenInterval;
% [; k) q: f3 D# mvar blueInterval;
/ H1 k8 @" m' B- R( x% `function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& W! S* s0 M5 p3 Q8 O% i8 |) W{
) d- g2 F8 T- a* w- p A: v hoverColour = mouseOverColour;
6 V4 s+ `: Z( i( H4 n7 z+ v numLinks = numberOfLinks;
. y/ s; P. ]( n' J' a5 B O9 d rate = 1;, Z) b* A: V( c( p+ Z
numFadeLevels = 30;
, q9 L( ]' Z. W0 L" v) D2 S& x4 M function initArray(theArray, length, val)1 e' y/ i3 G r5 c) q
{
0 J! M' g" p' v) E0 w7 ]% y for(i=0;i<length;i++): ?1 c/ [5 Y$ I3 j/ M
{3 J# g% e+ |( b2 X; V$ K
theArray = val;
. J# H9 p# g2 E) j& o$ C" _# y) N$ o }
# Y$ D* k7 }) D, V! k3 g }
) G$ W5 Z, T& _; q3 K, c5 P bgR = '0000' + fadeOutColour.substring(1,3)
' P0 V) K: F5 V, @$ E7 G bgG = '0000' + fadeOutColour.substring(3,5)
" R$ j( @% R3 @7 ]+ [ i1 p6 M' O bgB = '0000' + fadeOutColour.substring(5,7)
: m, S% ]' v; \1 g& O currR = new Array(numLinks);& ^: N# N: b* ]$ j+ O1 T( I, y$ S
currG = new Array(numLinks);6 |. U5 F& d, J; O8 D. Y
currB = new Array(numLinks);
4 }* \/ K2 A, R S# Q' o count = new Array(numLinks);$ K6 i$ O# Z5 r. k5 ?+ |# P$ A: Q
fadeOut = new Array(numLinks);
+ ?# \, E$ i- S& p3 D* J$ o3 _ continuous = new Array(numLinks);
- B' C$ Z, f2 X R, @ newColour = new Array(numLinks);& z! ^/ B" Z' ]$ v# K
tID = new Array(numLinks);
7 R4 m- v: D% R. E- l4 D) @1 z+ } redInterval = toDecimal(bgR) / numFadeLevels;6 V; K5 P, k5 u% J) c9 M n0 Y+ v+ L
greenInterval = toDecimal(bgG) / numFadeLevels;3 F- @( ~; R \9 G9 B3 U
blueInterval = toDecimal(bgB) / numFadeLevels;
9 Z0 E; B |: C$ g z- b initArray(currR,numLinks,0);
0 Q4 U& D/ ^7 F/ I initArray(currG,numLinks,0);' |! w9 B0 j( Y7 T
initArray(currB,numLinks,0);- \3 K( Y# R h2 }: u; v; x# r
initArray(count,numLinks,0);+ v4 c6 l* q' _1 r( r% r
initArray(fadeOut,numLinks,true);, R! ], n. d5 ]" U$ W. ~0 c8 ?
initArray(continuous,numLinks,true);8 Z# G, ~: W0 s- L0 ]$ Q) h( n3 q
}
) Q/ o9 j. _+ j, B+ O [function startFade(id)
" B! N* \' R) o' \) r5 T5 s; z{, K m; m2 ~7 W8 ^, R2 w# W
if(fadeOut[id] == true)6 @% E* y; x% x: j! w2 [7 D; U) k
{ /*move colour towards background colour (increment)*/7 a) Z! w- h% p l/ ?
currR[id] += redInterval;
. ~( V4 m3 r0 \" f) s2 h( O! w currG[id] += greenInterval;
u; f0 F( g2 u) V8 T5 ] currB[id] += blueInterval;
# _' Q! [" K2 Q( s$ B8 ^. U newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ u4 d$ L- P! M; o if(++count[id] == numFadeLevels)
5 d: F8 \. a, F) _ {9 }3 L v# o& k5 I
fadeOut[id] = false;2 I- r5 e9 r1 d3 z9 S
}/ N9 k( _2 W* e- ~' x% V$ u$ Y0 r: M
}
( o+ x* Y; }; [/ O$ y9 s6 D' d# k5 n else" \+ P( L, `9 z+ }. R
{2 g" |% j2 E1 j4 V# `' M: x, v
currR[id] -= redInterval;
8 o6 J% z/ z( M; }8 P6 K2 t& L. o, @0 i" m; G0 ~( x. h0 B
currG[id] -= greenInterval;
) }( c2 ^* q& O. s @5 I ~8 L: q. ?; t- ~$ X. c
currB[id] -= blueInterval;
8 q- \; N5 H$ r5 ~/ m/ G: `, j, K
3 V( O8 n2 L3 r1 ~ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: s3 G) r9 h* _8 x! A
3 f; E/ w6 h5 D- B+ ^6 }( L' H/ ` if(--count[id] == 0)- }2 ?5 o) f2 f: D9 V6 t
* K5 A+ ^5 D9 r$ O4 a% k {
! L9 u! B u( C3 Z( @1 J- n% D8 ]- |& `! N# g; L; U
fadeOut[id] = true;
0 B; Q8 I7 W" w4 @( X" K) D0 V, c$ ]/ d' ^. c7 O& T7 Z& R" Q+ {; f
}
9 {+ Y( d, C9 E" K) u) E: h' a2 B
' Y5 I/ C2 ]1 @. o ? } }. z$ @$ ? x% R1 K: s$ G
) w2 F$ J5 \0 g( a. J, D1 Q
if(continuous[id] == true)1 J% h! S$ E+ m' k/ p6 k! S
( P, R2 n* k1 e0 R: O$ {3 v" k7 Q9 q
{+ r1 Z; j( ?7 p4 I5 y* |
" z U- d P/ L. X$ L0 ^! y7 _ document.getElementById(id).style.color = newColour[id]; . |1 g6 S O+ H3 w/ D( m
e }! C2 r1 d0 x: p }
6 A) e/ p" Y: r6 P# k4 h9 O/ x; @6 Z* ~6 L' n
else
, N2 \* ?* {$ P n4 x2 |* {
; @& g* R, m" i, H V7 r { z( f8 J6 ?1 I- f9 \
* J' x# T0 n9 N9 c, \' O document.getElementById(id).style.color = hoverColour;
, z! s7 ?; Y1 U) @, N7 n8 t# p- w& Q" A! H, a
}- C' [$ I$ d/ Y& P
# m4 P" y& r% d: V6 q) x
clearTimeout(tID[id]);
0 y# L3 |: n' v) U8 D* A# X4 e" H( l; S: T, l% J% q# j# ]* X( R4 Y
tID[id]=setTimeout('startFade(' + id + ')', rate);
: | C. V. E* O" `3 j6 e
2 X, G, A1 t. v0 J( p/ A- m' D}" q7 P% y" {% l- o/ ]8 s: X# A+ L
% c3 z" e% |7 k- R7 j7 n- {5 K1 K
function continueFade(id)6 D' c5 ]- i# X# F' t8 G
& P7 |1 G* E8 }$ k+ y# ?2 K' R$ K' ?
{
* e! D, H. _0 b/ @' \# R$ T7 o& W! [ s1 _4 q/ P* W
continuous[id] = true;& o' A( S, ~( I- |, S7 x V
% M: V$ w% |$ E}5 t/ E; M9 ?* n: U6 ?% A% j
' z" z# O5 ^( H0 }$ U) Y! vfunction stopFade(id)2 P( L4 r n9 I/ R! s' e
3 |' y* r4 }9 Z F{
* r) x- O6 ?" Q) |; g
) i' t( C3 f* r( |) v* r continuous[id] = false;" O7 N8 P, {1 w: R, Z
; T2 o) C% Y: l A2 [- k/ ?- A}
F3 X) U+ T) t/ Y+ l4 G3 i5 H. d* c
, v) [. w( K' I3 A: s- mfunction StartTimers()
5 m [ l. ~+ G4 Q7 I8 E3 D6 S8 p5 K- z) ]
{ //set up an initial set of timers to start the shimmering effect( u3 P; j7 f+ M- N* p! N6 I
6 p8 Z( A! z- r9 U4 L$ Y" ? for(id=0; id<numLinks; id++)
' }' q9 O. N, p! \+ |) b) | d9 M8 |: X E( R( o
{) M8 E, ]; N3 V/ P
9 `' O1 ]" F4 D% n6 U/ v t=setTimeout('startFade(' + id + ')', id*100);
' ^3 t. B9 X9 b% S0 I. `, w2 A( V. P( s' C: \3 z
}
" q U0 o/ z5 P5 c$ W8 m6 K1 V: v- [3 k
} o+ Y1 S: G( F5 [1 s/ _. j8 o
% x" `6 W6 I$ G" k- `" W
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- f% m$ I4 I; F
8 @' \! X: x0 `* b/ Q/ R! K2 |
initLinks('#FF0000', 6, '#FFCC77');- l+ _2 @* }( e" i% y* o8 _" H
{. U- J9 A2 V/ ~, O0 d
//-->* J( |- l5 u: p* C s0 ?' S( D
5 G# p! C6 q$ `2 k9 E; x. M+ P</script>
) A7 e- t) O% S0 Z. E3 y, e<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
7 z8 E2 ~/ j: E- n- j' Y6 v! @</a>
3 s2 ]# T P8 K/ [& E<br>
( S8 T9 V. @1 p<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
9 z$ j( l$ D0 O. L3 R h# g<br>
% J( [6 V1 i! _<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># B- ]) f$ x% b" ~3 a3 h
<br> 2 I% @" h& W6 O% }" Z
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
. B( x5 v5 n. a# F0 Q<br>
2 K* C" }& f$ L s4 d/ E/ v4 W/ T<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>9 c2 d/ v2 {( \& `
<br>
$ n. G. e2 H. @: p7 V8 o; [<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. [* ~6 ^! Q% C
<script language="javascript" type="text/javascript">" ]) B, G" ]9 ^6 n* u
<!--
) V! L2 z v2 c1 c/ O& SsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
}! @) G0 Q, U |//-->
, M {6 N4 S+ L, j0 F8 t</script> |
|
发表于 2008-1-21 20:48
|