|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">% ^8 W+ m3 G* d8 |, F1 q: u
<!--$ G( Z$ Y2 [# S2 M3 d
// convert a single digit (0 - 16) into hex
% t" L3 q1 W$ {' |4 ~& V8 K+ Jfunction enHex(aDigit)
* I# u0 v9 q7 ^5 r{
& \5 H" K" Y& I- u return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 k7 _' w) K5 L D* ~; G- l}% Z. G% K. ?. _
// convert a hex digit into decimal
2 j+ ]- _: x* `) H5 n* O0 W- nfunction deHex(aDigit)/ b) ] b: o& b2 t; l+ e8 X6 `# a
{
1 `. h0 [+ C* ] return("0123456789ABCDEF".indexOf(aDigit)), e6 c+ h4 ]/ P$ @6 V4 J
}0 W c9 w- Q/ K1 p4 ^* ?
3 v5 G$ _# @7 C- Q9 h' p/ j// Convert a 24bit number to hex6 v2 z+ w' c; u9 E& |
function toHex(n)
# r0 ^! X, W4 Z{; ] i2 x0 R' {
return (enHex((0xf00000 & n) >> 20) +
1 R' j0 ]# y2 U1 Y/ D# s enHex((0x0f0000 & n) >> 16) +
P4 G4 e# S7 ]$ X: L. v- U enHex((0x00f000 & n) >> 12) ++ L& F6 I4 h+ k8 {; G# S* A: e$ L, z
enHex((0x000f00 & n) >> 8) +/ I- l. s4 |( T9 C9 f+ P
enHex((0x0000f0 & n) >> 4) +
E: ?2 i+ {5 } enHex((0x00000f & n) >> 0))
# u$ l6 S O8 E5 u}5 n4 M" Q; S8 T) V. J
// Convert a six character hex to decimal1 x) N2 Q1 C! Q9 d+ Z" S
function toDecimal(hexNum)% {8 C+ [0 ~3 R) C" |! w+ i
{
* J) t; Y8 w( e4 ~ var tmp = ""+hexNum.toUpperCase()
% m. C2 g- d; m8 l/ ^5 O while (tmp.length < 6) tmp = "0"+tmp
4 I- A# `% @! Y3 N return ((deHex(tmp.substring(0,1)) << 20) +1 S/ [* Y$ o' [: Z* k" _
(deHex(tmp.substring(1,2)) << 16) +
K! m- M* ?( M (deHex(tmp.substring(2,3)) << 12) +; W3 v9 l% S& @! |
(deHex(tmp.substring(3,4)) << 8) +
+ ?6 I$ V. b+ j' N9 a+ G4 V (deHex(tmp.substring(4,5)) << 4) +
J6 ^; J$ N1 Z* y (deHex(tmp.substring(5,6))))
! w$ f% _( Y7 ~0 _7 C9 P4 y; m}2 }: Y, c8 u; _3 l9 V3 S) M) k) s
///////////////////Shimmering Links/////////////////////
4 u) F, Z- g. s2 p' r" L//global variables) t8 t& r1 _7 W; s& C
var hoverColour! O( S5 p+ z, A' Z! U
var numLinks;
3 Z, p5 m* h6 D, ^2 X8 \# ^var rate;
% ~5 U- L9 x% E5 t4 h/ Nvar numFadeLevels;% f8 k& ]2 L7 f: K! x0 z9 ]
var bgR;
/ g" y" u8 @ M, X* q5 {' s9 Rvar bgG;; ]& W2 J6 ^5 v; {+ s
var bgB;8 T+ i- ]+ ^) t& {5 ]+ \
var currR;" ]7 c2 H! `7 @% S1 `
var currG;0 N: L$ u' A+ M% r5 `
var currB;
; Q) f: z; w0 K. xvar count;% _3 B0 U+ N/ l) B3 z
var fadeOut;
4 n, d" `! _! w3 _6 {var continuous;6 t/ j; G3 g/ D5 @2 w
var newColour;, x) K4 ?% u9 O+ T2 X1 g
var tID;
1 |) O9 t+ B6 r7 c. V/ `+ O% a! Qvar redInterval;
5 w2 A, l& m) w8 M" Gvar greenInterval;* y6 Y* c1 s; A7 F1 V" M8 B- t
var blueInterval;) \' d* s! q& {0 Z7 k `0 a3 Q
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
) k, y: n; u c: `/ _. f9 q$ F{$ |% R F. _! P/ k2 Q& e
hoverColour = mouseOverColour;# a+ T+ D; V/ l$ g8 q
numLinks = numberOfLinks;
& @4 `2 H: P2 Y5 q/ P3 l, I rate = 1;& R6 \5 y9 A2 z( M+ c, _' h# |4 q, t3 o
numFadeLevels = 30;
, Y1 T7 J! S9 l/ w% T/ U- o function initArray(theArray, length, val) x/ @' e$ w* g4 B" E& z8 E e0 A
{
5 P2 ?) R) T+ P% t' ]5 ]* A for(i=0;i<length;i++)
" j/ `7 E3 G* Y {9 j, A0 C; ]5 E% q4 V+ U. N( p
theArray = val;7 x* E! m* [$ r9 I6 e7 @+ C5 Z
}1 `6 o* c) K/ h7 P' [
}" G+ W% S6 @# `
bgR = '0000' + fadeOutColour.substring(1,3)) B8 C' b! C ?9 Z5 O9 K/ Z
bgG = '0000' + fadeOutColour.substring(3,5)
% P; s. j8 k- W; M9 `7 f bgB = '0000' + fadeOutColour.substring(5,7)
5 B4 x+ Q) R" [6 w8 d0 e currR = new Array(numLinks);
b+ h" n" |3 d" Z) r% u; M9 O currG = new Array(numLinks);
* `. u; [/ }5 V currB = new Array(numLinks);
# r ?& y; R' T5 C8 r$ s count = new Array(numLinks);. O3 d% }( X4 z
fadeOut = new Array(numLinks);
. w& a7 B5 e; y9 C' Q continuous = new Array(numLinks);7 V0 i) \4 ~& Z5 U8 g
newColour = new Array(numLinks);$ m9 Z3 `1 T2 I6 u
tID = new Array(numLinks);2 j" D" ]6 b. X+ V" x1 ]. x
redInterval = toDecimal(bgR) / numFadeLevels;! q1 N" N! d, E9 Y7 l
greenInterval = toDecimal(bgG) / numFadeLevels;
# F, u+ [$ r' ~' m1 M blueInterval = toDecimal(bgB) / numFadeLevels;
: x$ J+ ~+ V( T3 u initArray(currR,numLinks,0);
; Y" j! X; @) M3 O @/ h initArray(currG,numLinks,0);+ Z* w8 {9 l. j& a
initArray(currB,numLinks,0); U) i5 ~7 @. D
initArray(count,numLinks,0);
6 n4 u" H7 ~- G initArray(fadeOut,numLinks,true);. W0 C" Q5 @+ D7 J8 H+ d
initArray(continuous,numLinks,true);' q7 E7 E" ^3 X2 l
}
' b+ t4 }' W! r2 J. M, mfunction startFade(id). _# v, z8 q# {) B
{' w/ z& x0 b% a1 |
if(fadeOut[id] == true)
% m3 L; d+ J/ G! Z { /*move colour towards background colour (increment)*/
! [+ L1 m' ^* J currR[id] += redInterval;# h" u2 n! y+ a
currG[id] += greenInterval;
3 c' @$ ?3 F: z2 M! W8 H2 \$ J currB[id] += blueInterval;. ]+ A, m L5 \% O; V
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 c% i; Q4 M8 O& S6 ^ if(++count[id] == numFadeLevels)
9 n" U' q) r: H0 y {
4 U f2 e7 V. \- w! ?# ~6 {. p fadeOut[id] = false;% p9 D n& U% @7 O4 y
}. [* r6 ~. N) h
}
* n' G2 W1 `; C5 U/ i else
: J# T! k; g% k, M" s- j {7 m" w+ t% m8 c2 g) d
currR[id] -= redInterval;9 | J6 u' G, z
5 V* R; \- v% g( W+ T
currG[id] -= greenInterval;
1 S* y6 Q0 [ p- L- Q1 w% w
; e5 C' k4 h# x9 q% | currB[id] -= blueInterval;
O' _8 A$ ]" q& X" e9 J. }
8 a# J9 k, }" h/ A& W0 ] newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);& T9 c! L- A) J, k1 ~ N
& m2 S* s6 q* \/ x0 ?$ @ if(--count[id] == 0)
! @: O9 @$ {/ i- |$ l* l8 K
+ j; t# H/ b8 U {" W+ Y0 p! L G" @& @
7 q. e( ]0 m3 h1 n) Q
fadeOut[id] = true;5 W! W- D, _+ V! C; T
8 f, ?3 N9 d3 ?6 W+ H }
' J8 i/ y: ?7 H+ U
( D( i) j" Q+ [. q }, N5 K8 S0 S. a
1 n' X" ?- I$ n7 u2 j$ z
if(continuous[id] == true)
3 n9 {# A# y3 g' ^- _9 z# S$ {
. T7 \0 x9 P0 `% M/ v, ` {
, L& b( u7 K) M( r8 e& f$ d
' e2 t+ y1 W& D document.getElementById(id).style.color = newColour[id]; ! o9 W T( Z" ?
( y4 o9 B7 p, x a
}
7 ], q+ h- j( C* J
6 S0 C$ @/ p8 F2 \0 B# \0 v$ c2 l* P else" j5 s6 d% s+ @% U1 J6 c% v
* T3 t8 |9 W5 N0 ?+ H {
) x4 G* H9 a$ H4 A( \. K
0 u. v& E2 e; P0 `5 ` document.getElementById(id).style.color = hoverColour;. k8 ^( Z7 l+ s, E' k. p z
8 r6 q" {/ G# s# Z }; F8 e) k/ t: G" Y1 L/ [% b
- z* `- z- b0 z2 e7 t clearTimeout(tID[id]);8 K+ X1 J3 k5 j O
6 \) r, E9 k9 h9 _ tID[id]=setTimeout('startFade(' + id + ')', rate);
" {7 x# e, V4 j; C$ Y$ y* N
! t! d+ M, i, L9 z1 N6 P}7 E) Q) b+ S7 d
?* ?3 Q1 N( R7 q/ K8 _0 Zfunction continueFade(id)* L# U" S) P, ^+ v' v0 p; t, b
' Z% y# q0 R9 b. q8 S/ a
{
/ A, L4 S5 e: f2 u3 M& \! s, u# ]- D" v5 x2 O
continuous[id] = true;
6 H5 v+ Z- y; b/ D; g, l# ^1 b4 g( A3 A+ n) B
}
; Q$ G. I$ d7 Y9 m
2 e% N# a: I: G) l) X( G) Ofunction stopFade(id)
) K$ w: t7 |9 @: B4 C, G, X6 H9 z# b
/ n1 e2 u; m% g2 s) r, b{- u" b9 m& B$ Y9 x
% f/ m& L' J* _* ^ continuous[id] = false;
6 o: G/ _# I! { b& M* J: x0 p& {
8 `3 d/ [" t* v6 y0 J+ m! T}
9 S0 R0 ~7 s/ H7 f8 \: ] ~
1 [9 C4 l1 N; w, B; f- Y8 rfunction StartTimers()
9 c9 ^3 W& q7 k& F q
( h A( [/ ^ K{ //set up an initial set of timers to start the shimmering effect
7 _- S0 ?! a8 M
. k* P* A# S1 {4 [! @ for(id=0; id<numLinks; id++)% _7 n `3 t8 w" f O- a
j. j |' E c( I8 {9 z* Z- V {8 S9 |1 b. f9 w: p+ `, m t! j
- ?* k/ B/ I7 A! b! w
t=setTimeout('startFade(' + id + ')', id*100);* d9 \ }" a3 j6 y- o4 T u( O3 }
6 k- Q# _ B; O }' Q/ f* V$ F: }8 `
1 q8 M. U* ^6 @8 ]}
$ b- {2 @2 c6 H7 k( s! J
) N: B v" O% Y8 B4 p0 Z/ \- X5 h//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
: F' O e4 Q3 _; Z9 f6 i$ Z0 x5 T( Q8 ]$ m) H; g; I8 e
initLinks('#FF0000', 6, '#FFCC77');/ c+ f5 ^) u; p7 C
/ U, q5 b9 q/ q1 z/ E) }//-->2 \: |# z- u, ~5 P- t
5 `" W% F% y5 M5 ]5 H
</script>
' p5 Q D6 s6 u) ?) [) }" p<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
- N \5 ]: G" E% k- A. j- m</a>4 O; R$ T1 l/ Q* b
<br>
7 u! s0 u. [- G$ i7 g% o# v$ p<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
6 J; m- o$ p- @$ O/ w/ O<br>
! o, g$ T; V5 F8 W! D- U- E; g8 L/ v<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' s$ E3 n r/ Z# B<br> + w# @0 t1 r7 T5 ]: u
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>( p! K3 |" @& w5 x# n& N* J
<br>' ~ [. ]: D. c, X% U4 |* a
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>- l N2 x, S5 P( {1 N
<br>
' e( r' |2 I+ A0 A0 r# _) o6 y6 R<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
: B5 y$ F% }; Z# J<script language="javascript" type="text/javascript">
$ m6 P0 `( _* W<!--0 L% s1 m M/ _, Q1 e
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering2 x3 } V2 F' H3 Y
//-->6 a" \* T; A1 [+ r5 m+ d
</script> |
|
发表于 2008-1-21 20:48
|