|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
+ z+ ?: O; i- v* [<!--6 W D- E/ S0 E, D2 ^' o
// convert a single digit (0 - 16) into hex2 e! o5 ?! K* b6 }
function enHex(aDigit)
7 \3 Y3 C3 X8 x7 p7 l( d% ?{
- d0 w) l; C& X5 X" x# D, R9 u return("0123456789ABCDEF".substring(aDigit, aDigit+1))
$ y' E1 T4 Z. y, j- I G5 v}9 |, h: T. W# O- J
// convert a hex digit into decimal
3 _7 D4 W8 v: f% q4 z! K- }function deHex(aDigit)6 `' D( X! W3 J
{
5 \( x& }3 J5 c4 O F- ?% X* \ return("0123456789ABCDEF".indexOf(aDigit))
9 a7 l3 Q7 B+ U* @" q}' o: L: G# |: G% u' D! S
* n0 r6 A% d" {! W5 O// Convert a 24bit number to hex& x& Y1 P2 E+ k
function toHex(n)3 R- g2 M T8 x# P0 f; _
{* l# [; F3 `) o& O$ ]
return (enHex((0xf00000 & n) >> 20) +
* H( U1 q: J+ r: h: ~* V enHex((0x0f0000 & n) >> 16) +* {) }" p, E6 n+ p
enHex((0x00f000 & n) >> 12) +
; r" r8 B' V: \$ Y) ~) W enHex((0x000f00 & n) >> 8) +) i* r) J3 ^/ A+ F
enHex((0x0000f0 & n) >> 4) +$ [) j, v2 y- ^+ U4 d$ s
enHex((0x00000f & n) >> 0))
0 u |1 \+ _" o* i+ m3 f! a1 V}+ |% D$ C3 |2 y
// Convert a six character hex to decimal+ j0 |% e* |7 U" L
function toDecimal(hexNum), t( O+ O; y& c! D
{0 m' I) K2 R) p% C/ G
var tmp = ""+hexNum.toUpperCase()
9 U, d% y2 F9 w while (tmp.length < 6) tmp = "0"+tmp
3 k$ U# ^ m, I8 ]% q; `! H return ((deHex(tmp.substring(0,1)) << 20) +
" Y* ]# b; y: d8 L% u (deHex(tmp.substring(1,2)) << 16) +
& z1 D; K& s* j8 }) n (deHex(tmp.substring(2,3)) << 12) +" K% i+ }& D d
(deHex(tmp.substring(3,4)) << 8) +( N5 }& x! O1 S& [6 U6 Q1 y6 J
(deHex(tmp.substring(4,5)) << 4) +
1 K% P; R" \) k% P' ^* n (deHex(tmp.substring(5,6))))
) W( D5 V9 g$ W9 K* a( e}
8 u: R: k" U% u, h, |/ T8 ]///////////////////Shimmering Links/////////////////////! X/ G. K: L* C
//global variables
9 Y9 P R5 U- U( b! c. Wvar hoverColour
5 m5 a6 K Q7 ` N, Svar numLinks;9 S) |; |3 V0 [0 t4 u
var rate;5 f: g( m$ T6 o& J
var numFadeLevels;& O* e9 `* [( @' p3 S( u" |3 o
var bgR;; W% v! R2 e9 i# |) F
var bgG;" x: L* a* n+ X0 M" l
var bgB;$ @" X( E3 y: Y; ^3 Y8 R
var currR;
' f! U) N, g% J9 @) k* Xvar currG;) ]: W" ~- T3 O+ Z/ m+ J
var currB;; Q6 c( R5 A5 I( v/ }1 K+ W
var count;
8 V" L0 j5 E* ?' {: T3 E9 `var fadeOut;! W- X4 Y y* w# `
var continuous;# {( j+ q% F3 ?
var newColour;' c+ G3 ?2 C0 V# u
var tID;; F6 }( f7 o- V+ Q8 h
var redInterval;
' b9 I! y+ O5 L8 r% avar greenInterval;. `% P. Z; K0 r- ^, r
var blueInterval;
% \6 _& t1 d9 K# dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)& q* ?+ G7 q: u% F6 h8 o2 o. A2 H8 | D
{1 n B) G k# A- Q: r9 Z
hoverColour = mouseOverColour;
; W7 k$ M/ V% H* Q7 ^! V4 h! f numLinks = numberOfLinks;
1 t- Q) y/ m j4 g; Q. O! [& q7 Z rate = 1;
, y( [8 B, f+ ~- n3 Y8 x3 x numFadeLevels = 30;
6 ?& ]# |: k" R4 q7 y7 y9 V# t function initArray(theArray, length, val)' G6 k" s2 K% f1 c$ i
{
5 \9 r8 t0 W V7 k; n; C for(i=0;i<length;i++)
* O6 ~0 g8 _: O& l {
3 q6 O' h m+ i* b: t* j" ` theArray = val;
9 y* c: V; r1 P4 z1 Y( g' l }
/ M6 O4 y* ^% x7 {- Q }
0 ~3 [. m) ^0 N; [8 y bgR = '0000' + fadeOutColour.substring(1,3)
2 w! \) P# j+ u* }& K, l; Z a bgG = '0000' + fadeOutColour.substring(3,5)& X4 s9 D Y9 V% B S
bgB = '0000' + fadeOutColour.substring(5,7)" o) g% _! k: x2 D$ f- `) _. V/ p! Z
currR = new Array(numLinks);
( i+ Z% l8 y1 @ currG = new Array(numLinks);
' B5 U* Q g5 _2 Z; t currB = new Array(numLinks);
! |, S$ B8 r: A$ h. |! }0 Q v0 \ count = new Array(numLinks);: u7 n5 ~% J6 h% O1 f3 P' j
fadeOut = new Array(numLinks);
! x5 L, o' O a# [+ T R continuous = new Array(numLinks);4 i+ b$ ]" y- t& A
newColour = new Array(numLinks); X5 B' C$ p! x! x
tID = new Array(numLinks);
0 j. I* _* j' G2 j( k redInterval = toDecimal(bgR) / numFadeLevels;- o, U: V2 J! ?, b. \! _
greenInterval = toDecimal(bgG) / numFadeLevels;
7 N; P" l6 M& Q( z3 @* \7 r blueInterval = toDecimal(bgB) / numFadeLevels;
. O# ^7 @ o( g3 L initArray(currR,numLinks,0);
9 _2 k3 {& E. x& P5 } initArray(currG,numLinks,0);
0 N7 D( d' ?4 C3 f/ a initArray(currB,numLinks,0);1 b9 y6 E1 W# ^5 @7 ~: }! U
initArray(count,numLinks,0);0 U* r$ v. {# l6 o
initArray(fadeOut,numLinks,true);
7 M) D: E3 b5 Q; n7 D* |+ i/ m initArray(continuous,numLinks,true);; `) f# l- V( U! A8 w6 r
} + ]* J( {4 w+ S: V6 j' U( x3 T
function startFade(id)# D& Y5 y n D2 @2 X2 ~% K
{- E* X1 K! W4 }! g, u
if(fadeOut[id] == true)7 j- i0 _- i% d+ ]
{ /*move colour towards background colour (increment)*/ O+ E7 ]6 \& ]" [
currR[id] += redInterval;2 O( u' ~* j: X+ H+ i5 m7 z' t$ i
currG[id] += greenInterval; |9 _. V5 m# E; W
currB[id] += blueInterval;! M v3 i, x+ ]9 M: l
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 F& ~1 G, g7 T
if(++count[id] == numFadeLevels); L1 }6 M8 a9 `0 s' l+ l" }; r
{8 V% r" `8 p4 D; `3 e2 R
fadeOut[id] = false;/ I& q# i3 ~3 j% I
}
4 S+ D- \6 t$ n" J }) L) n k- E2 n: }$ c; @. d% l7 l
else
$ E( u( z" u: m3 w, E3 x {
% C# t% Q6 Q; d: h currR[id] -= redInterval;1 b/ {: K& ]% G) \
, D* R# Q% r) {4 v9 I( m currG[id] -= greenInterval;: X' G5 L( u' N+ e. [$ U8 F. J
5 z4 `0 y! S: ]- \8 _ currB[id] -= blueInterval;
! D9 C: R8 {3 g/ f- j
, s9 s4 P: G( }2 ~8 e newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( \& j$ |) t: B9 U% o' {8 O6 F5 S8 t; C
if(--count[id] == 0)$ B- t) p: G$ e4 }( ^+ A
/ j3 x$ y5 K& i
{. U% Y; {! Q, ]/ ^9 u
% G4 \# v2 Q" }! ~7 b6 k
fadeOut[id] = true;& x- h% K# n+ Z4 M# c6 Z9 T
3 ~; [ {0 M: `- ^# R }
) N2 [. u, I: S, I+ e) N- g! Q# l+ L* W+ t- V
}8 [5 Z; [! t" \: f' k1 _, I5 \
$ A) H3 C4 @3 H1 w7 T7 p if(continuous[id] == true)
7 j6 u: r" n) `( c5 U% W) v2 ]3 L ]4 q$ a" ?, ^; l G
{+ a7 G* V: f! G! x/ c
: k& W4 n7 y4 z$ [6 I
document.getElementById(id).style.color = newColour[id];
7 Y8 V5 ^; R* [: B' g% i: }4 s% l; g( g3 L. c- q: q
}
) d. W& M# d1 \% n0 h
) k" C7 `0 x4 T else+ B+ T: P8 @0 t( v
1 X6 _8 M/ Q6 d# L/ P: h/ O {% l: M/ S% D+ G
4 D( u! @! C& b9 L
document.getElementById(id).style.color = hoverColour;' @% O* w6 v: c# t4 e
6 m% i0 j! M6 i" r" L& ~ }
$ r6 c6 s% E6 b9 R
# e" ^. K7 Q& z clearTimeout(tID[id]);: `. `; X ^3 _8 T! C! h
% S. X, o) a! t$ @
tID[id]=setTimeout('startFade(' + id + ')', rate);
# L# v3 L* z! d0 K& z0 ~# v' I
}
2 y# ^: s$ N' G% a+ C! e+ p Z- D% k/ @6 v t& S2 V, V5 E
function continueFade(id)
: z2 A' a9 M% Z3 F# i
- ~* B/ {2 Q' v. q- c0 o: G( O9 s) Z{, k. _( W7 c r: K( a" i3 a
& L; C# c7 B2 U
continuous[id] = true;
0 ^# _) q- L7 ]2 H" F! w( Y# Y5 j! s; N0 C4 x
}
) U4 t, L" R" S% W; _* ?
}/ K. ]: L1 ffunction stopFade(id)
5 U( H( g S- E- D6 p/ M. V1 V) ~" W \4 S& t
{3 h! }! w+ W0 K' g7 q4 K
& M: Z0 u1 Y9 b) U* b' F
continuous[id] = false;9 U+ w1 _" y* U3 d; l2 q; L. M/ x
4 n' K7 g5 j( y3 y
}
" n0 B3 W: T; s( `; d9 ~, f$ A5 a+ p9 D5 O8 M* K4 k
function StartTimers()0 I: |3 k( p1 g- ^ ^: f
2 ?6 l( J2 w5 w- Z: p& ~% d
{ //set up an initial set of timers to start the shimmering effect
7 V) _, V5 Y% h$ J, e3 Z' j6 b; M5 L! G; p1 F* K! B
for(id=0; id<numLinks; id++)
* U3 h( |: x4 {1 m) W [* e, z; V: [2 U2 N; u- ~
{$ W5 Z5 Q$ Z) h6 l* e
& ?& J N9 x% I- q2 G; p* b' R
t=setTimeout('startFade(' + id + ')', id*100);
1 M P. Q1 a7 ?9 o k$ @7 e+ ]: v
}6 `* ?! `: T' R. h4 O& u4 T! W+ I
6 }. H" k1 _3 e: |, z; _( n$ Z
}
/ ^0 \7 n& U) R6 ~( b# L2 \; ^& N2 X$ K6 I L; e
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
( {1 a: m& E( H R! f9 n) V% C1 u0 }% t
initLinks('#FF0000', 6, '#FFCC77');9 l& `. p6 ? b
7 N# E% R! W2 v6 k
//-->
7 ~) i) ~9 k/ U
8 y+ G% F1 l& a1 W& D3 N7 I$ a! u</script>' l) \2 {3 X1 b
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
% w) L4 t8 e8 T* d</a>
+ T$ a' H4 s$ i) e4 z$ G2 a( A<br>* q- T* v5 f" N+ J Z& q/ d6 A
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>. J3 a* R# ^ U+ E# Y& E P
<br>
! h/ q& u8 ]- |/ ?8 i1 @& i7 O+ u<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
! N3 n) \; u5 y5 Q# a: x5 Y<br>
! h H7 R; d8 {. i<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>7 Z# d8 E' m0 j# M
<br>) H9 X9 F6 k/ {5 N
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' }* m$ b8 X+ `<br>
$ J& C5 b+ q) ]- ~+ c7 m) `% ]<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
* M ^2 C$ v3 I<script language="javascript" type="text/javascript">8 g& y" @( R6 w- V6 P ~* C# c8 }
<!--; t3 C& l4 R# Q- S5 r% t
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering! Q% v9 X* ^4 u
//--> P2 B: } B+ L/ Z
</script> |
|
发表于 2008-1-21 20:48
|