|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
. S: x& H4 }1 }8 \' v; H/ a<!--7 C" T% ~$ J2 @4 ^6 {4 f
// convert a single digit (0 - 16) into hex( ]4 F( g& b* q- d4 b$ x
function enHex(aDigit)3 D0 }3 `0 f1 `
{% \& N. ^. Q' P8 s& r
return("0123456789ABCDEF".substring(aDigit, aDigit+1))* _! [8 _) {- v! }
}
$ @# T* @8 v( a4 N3 i// convert a hex digit into decimal
! t% R/ X; T. a4 q4 _2 Z5 t3 ]function deHex(aDigit)4 q" E1 z0 f" i2 J' X! g0 K+ d, ^
{
3 B2 i) z" e8 Z, ?" L return("0123456789ABCDEF".indexOf(aDigit))! L% W: q, n" ?) Z/ x
}
7 Z. A6 t* ~5 ^4 |1 c: ?! [9 a- M* G& D0 T u; X
// Convert a 24bit number to hex
) A; ~% |/ H( \5 l+ Mfunction toHex(n)
" K7 m& U, a) S+ b{* X# a; [# X# V9 d6 T, |2 S
return (enHex((0xf00000 & n) >> 20) +
7 e7 c$ C( b: o$ t! C enHex((0x0f0000 & n) >> 16) + A- o) T. s M: u) U
enHex((0x00f000 & n) >> 12) +
, a/ i; |# b- ^$ q enHex((0x000f00 & n) >> 8) +% F6 ^ k$ e( f' x/ y& m$ e' `+ F6 d
enHex((0x0000f0 & n) >> 4) +8 G/ s0 H' |/ @7 h* F' M
enHex((0x00000f & n) >> 0))
0 }! S1 L) {; t, u}- r' s0 w0 V/ }1 g3 D; g! K1 v+ H
// Convert a six character hex to decimal
- p( n( n7 l% Z! X( ]function toDecimal(hexNum)
9 Q% N& y9 R$ A4 S{
5 d! J u- t3 ~1 }$ Y var tmp = ""+hexNum.toUpperCase()' @, r; `# P |+ \) r0 V, u. e$ L
while (tmp.length < 6) tmp = "0"+tmp
: U- Y* [; h! A' f$ z7 S1 b return ((deHex(tmp.substring(0,1)) << 20) +
, @/ N9 S1 U ^ B. H& ^ (deHex(tmp.substring(1,2)) << 16) +
; v& ~3 A& L# O, Z3 g (deHex(tmp.substring(2,3)) << 12) +
$ m; @* B, ~3 N (deHex(tmp.substring(3,4)) << 8) +
T7 @) q& G M& Y (deHex(tmp.substring(4,5)) << 4) +
, d0 x1 W& H2 E (deHex(tmp.substring(5,6))))$ c+ _' N8 ?1 H! I$ `& W& e
}
& H: I! |$ ~7 y' X1 _) S8 X; w" ~" r/ S% I///////////////////Shimmering Links/////////////////////
4 G# [/ x6 m4 X- n! l' t/ u2 H//global variables# i3 U1 ~2 w* l
var hoverColour
% @) ^4 x) S( ~- g7 Zvar numLinks;6 d7 K) P& L8 d: B! ~8 `. S
var rate;
- M! V) f! n2 w: ~; jvar numFadeLevels;
; e: `9 [2 Q( s; Lvar bgR;
9 M9 H% ^) Q _( d( H% r3 I% qvar bgG;8 S4 P9 d2 M* h# F8 `
var bgB;1 \$ v& d! R$ D- M; Y& |
var currR;, e# l5 y6 ^: j9 p& A6 S9 f
var currG;6 U' ^% e9 Y7 s7 p# e
var currB;% ^7 Z. j2 h/ P! d
var count;
$ J5 I8 L# V$ s) vvar fadeOut;" N+ B7 F; X! B. [! D! @: C
var continuous;
# q8 R8 }3 { Z8 d% Jvar newColour;( ^3 M6 R4 f+ w
var tID;7 ?0 Q K( f% T1 K; b* b
var redInterval;
3 `# U; Q/ w+ G9 {! `- L: \var greenInterval;
% {: Z/ G0 G) x0 yvar blueInterval;
% E9 {2 X, n/ X+ l a2 L {, ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
5 s3 J1 s$ V; N0 x{2 `1 f6 U/ i3 f/ s
hoverColour = mouseOverColour;
0 C$ i7 d9 Z2 G' S numLinks = numberOfLinks;
2 u' L0 Z7 Y4 r# B rate = 1;
' p4 S" m [' V numFadeLevels = 30;5 ]# q6 h5 N0 H. ~! C d* h5 O
function initArray(theArray, length, val)
( Y' |* d0 f6 j9 C* N2 ` {
1 X& @3 e' G+ k' E4 R: p3 C for(i=0;i<length;i++)+ U" E' F, {: W) y& Q6 h
{% w" \0 B3 h- e& s
theArray = val;9 s* r. C9 c7 O1 W6 y1 [! K
}
7 s+ D4 y# K% f9 ]7 n4 u }
' d4 c7 H* o4 A7 u3 Z' ~6 \ bgR = '0000' + fadeOutColour.substring(1,3)
0 h5 l4 I! ?* q# c6 t bgG = '0000' + fadeOutColour.substring(3,5)
2 ~6 j2 u4 O, Q bgB = '0000' + fadeOutColour.substring(5,7)
( r6 X: m: q" n: r9 i+ ], Z' ? currR = new Array(numLinks);* W5 n$ V8 Q4 |: c% ]7 g
currG = new Array(numLinks);
$ H& r) X; h; I# D6 Y9 ^* I4 S% U3 o currB = new Array(numLinks);' `4 s8 g3 T8 p8 V
count = new Array(numLinks);
6 |. s9 G6 l% T e. N' N5 b fadeOut = new Array(numLinks);
, L1 I* G; K8 G. B+ G: ?7 j continuous = new Array(numLinks);
9 g2 E2 c, ^; u9 ]( a; ]. @/ _ newColour = new Array(numLinks);2 J/ e! | \- x0 u( U/ X
tID = new Array(numLinks); Z3 x U7 q( k3 t# V# o
redInterval = toDecimal(bgR) / numFadeLevels;0 u, T0 ?5 C! K
greenInterval = toDecimal(bgG) / numFadeLevels;
" p" d- ~( s S* X" |' A9 C& b blueInterval = toDecimal(bgB) / numFadeLevels;1 z7 P8 _; U. i& L; s0 K
initArray(currR,numLinks,0);6 w3 b9 o7 H0 z/ P2 Z
initArray(currG,numLinks,0);
" |8 _! o2 p: j8 i9 u, y! o initArray(currB,numLinks,0);
+ W* M0 Z g2 O- M7 P" Z7 a initArray(count,numLinks,0);' Q0 m# F, \% p0 E: B
initArray(fadeOut,numLinks,true);
' n* V" \# s+ ^# G# ~2 w2 u initArray(continuous,numLinks,true);4 X9 l# }3 K! h& t6 {5 ]
}
& |0 F, @* y9 f7 F; d4 T5 gfunction startFade(id)2 W4 [- O* I- W. J+ Z% m% n4 m2 J
{
+ A6 @3 w# T/ g5 L7 K( o7 d if(fadeOut[id] == true)4 W8 _. s2 C6 ]" y: ]2 V) {3 m5 W
{ /*move colour towards background colour (increment)*/* j6 _+ A5 @. U0 k
currR[id] += redInterval;
2 \9 R4 U4 r' Z0 @$ I4 m4 O currG[id] += greenInterval;
, q& n$ ?4 V8 V; J- Z8 ` currB[id] += blueInterval;
3 A7 H5 U' v/ p newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 }# e- \. A+ j1 ?) s) O. {
if(++count[id] == numFadeLevels)- C' N; P+ F0 ]) }3 Y
{
8 N/ P% y0 [0 m l B5 J& [! m. r. l fadeOut[id] = false;
5 ^9 X9 B4 H9 y0 p( |6 v' F% ~ }
0 }( K5 o0 e0 K3 E! c5 w }
0 y4 w. o& G& J4 W else
; b9 W1 L4 A/ G- h5 g {
+ M4 A% z' ]' { currR[id] -= redInterval;
6 a4 O X/ |) x+ |. k0 D
( j+ s, U' _9 s* w/ T currG[id] -= greenInterval;
! y2 B/ F7 B I8 f& y4 L- z( E9 L* Y/ b4 O3 W- J. Y C% Z
currB[id] -= blueInterval;5 ^) B: H d* i
3 A% X( e( @9 ~
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# B. x/ o `' m& _9 I) l H+ k
2 T# U$ g% z5 l" b* Y! O1 Q1 ?1 f if(--count[id] == 0)
0 g! _0 H+ g/ x
1 W, D2 c, {, p! c, ]7 q% r$ a; T {
; p" C" U' O! d4 N8 I+ H: R
/ v- l' a/ v5 Z% |% O; w fadeOut[id] = true; ?- g& s! ^1 f- s
4 a6 `6 q" N- v, ]; _/ c' X) P) I
}; c& C2 y, }/ u1 b, P+ s X
4 _) f/ v m" o% a. E+ {) t% S }
! T+ b; s5 P+ P' q; j; T1 X
3 R$ Y+ _. I, A6 \! ~ if(continuous[id] == true)" C: W) M" W: d& I) D/ ^
) y7 N6 f, F3 F+ }7 }) Q3 j5 e: z {
2 M1 z' C. j/ h+ q' L0 r
' p' t3 _+ H6 c) d; D document.getElementById(id).style.color = newColour[id];
9 Z1 B/ p/ F; s6 ]- z0 B8 f# c6 P0 N6 `) b7 V; [7 R
}% Z5 ?) z- h/ u- \5 t# ]
5 L+ @9 M# m9 o) W+ I* ^( q
else J5 `6 Y+ t( V' r
, J# D }! x6 T9 y7 C3 F
{
- J* l) S/ R" t" F/ v& c/ J
, a" E- w. d/ I* H+ ~# `6 u; z document.getElementById(id).style.color = hoverColour;
8 C+ f4 V2 p% w/ Y% \" p
3 |8 D, z: N6 J4 u/ ]# y& K8 A }
6 F( X% j1 l$ U$ Y' L9 c9 U' _- b6 S6 y8 n
clearTimeout(tID[id]);; K: I/ }8 Q1 a/ G* K U
$ w% G1 V; x- ~4 ^" ~
tID[id]=setTimeout('startFade(' + id + ')', rate);
6 E* U- R K' l1 F6 e! ?+ e& _
" D8 ]8 A9 w% B2 n% {}
7 p+ c- w+ f, t3 F! H0 }! f7 R$ C& H
function continueFade(id)/ P% Y. K4 M( \
5 C6 T+ j' z4 i( F{
8 J( C ]3 G! G2 A+ {7 L1 E4 V) d2 ]
continuous[id] = true;4 C" ?" d5 I8 h& ]
6 G) x1 A! ~3 V& [/ n% y f
}/ e1 n5 _& j ~9 |0 U- p
% a) ]! V z+ I |
function stopFade(id)
5 Y4 n |: a: X# B* z
; Q& I( k5 D9 }1 x0 `, D4 h{5 i5 U4 ~. {1 M" R6 {! o
5 J# e: j6 \" Z- q
continuous[id] = false;- A2 y+ {3 l% d0 r
: t! V! p4 }" C7 d& k
}5 d# H+ J x. b7 T0 D) p; e. C
3 x9 d b {* p3 s4 Q
function StartTimers()
, _1 K6 H' l4 [
l" s- S2 q o: d; \: l{ //set up an initial set of timers to start the shimmering effect
. m, W) D& o e3 ~! X
8 c0 R9 z) P; }2 O. H8 N' N( n for(id=0; id<numLinks; id++)' @/ I) O. _5 z0 X) ?$ r
& {9 ^9 \# \" Y. B; S# c0 l
{
. z# X# C4 m* L0 l: E
3 S+ K0 i: t( G. r u: ] t=setTimeout('startFade(' + id + ')', id*100);
6 }4 q1 e/ n3 l& f f. \
: K! q8 p: G1 B# H }* E5 @& g7 @! y! G8 }1 I
; Q; Z% X. y. d! J8 F: ~
}
: V0 G2 j$ f# K, R0 q
$ g. l4 M; D8 l9 N( ?# Q//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ Q9 m% M* U( A3 E7 L. X5 T# ]- T7 E+ ]8 ~ ?) I4 J& M& ]( }' Z
initLinks('#FF0000', 6, '#FFCC77');
" X8 X' ~ c3 `/ A, Q- x6 c* B' B! g
//-->
, I# F4 J4 P/ u; s
9 e( j4 L4 g; B% l1 ], i</script>
! n# l5 s1 ^% T* F2 E2 E K<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
- N3 g( J/ {; Y7 Q6 t/ o</a>3 m/ Y$ H1 h- U4 o" C
<br>
0 R, } [4 e# h2 K& y( ] f<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
4 `( ~) G: g! v5 D) `<br>7 l8 p0 X: F" ?# H j* j
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 W3 |2 a( C- k/ B3 v<br>
x; F9 W/ c% Z7 c6 z<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
+ u4 r' O2 d) E4 F6 P+ {0 ?<br>
: g! u+ z, D1 W* `<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ G" B1 p9 {/ K$ n2 Y! N4 y( M3 G7 Z<br>
2 i! ]5 _ x, b<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
; O4 u# d$ Z, K3 }2 G! c$ t<script language="javascript" type="text/javascript">
# b, N4 x' _& B/ V3 u- [<!--4 P5 X) i [8 L
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
2 |/ _' [7 U, q; a//-->
/ |* E! v2 k) o6 u* i# {( H% Z' r# g</script> |
|