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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
* X7 Z8 N, |) {* i: l<!--' m- J; t8 V7 c( H' F( {
// convert a single digit (0 - 16) into hex
4 Q/ U$ m% R! T4 a3 w2 Rfunction enHex(aDigit)
! ]) m+ n2 x/ B5 V7 `{
* {0 o( ?! ?! l7 o7 T) v4 \9 } return("0123456789ABCDEF".substring(aDigit, aDigit+1))
2 z E- H1 c* x5 V, ]}" b% `( ? i- O0 w. p9 s9 k* j: ^3 B
// convert a hex digit into decimal
" W% p( g$ T1 Kfunction deHex(aDigit)3 \- I( |. \& b4 M
{; \+ M/ y" Q( H$ |! \: S
return("0123456789ABCDEF".indexOf(aDigit)) F# E: z$ Y! R( y( m
}# m& ?: \4 E8 F: q
3 e( t6 J. E3 Q! x
// Convert a 24bit number to hex
6 q- L& u4 b" z7 X* W3 }; `4 Qfunction toHex(n) X; @, ?8 ~/ g
{; ?% D; d7 D! @
return (enHex((0xf00000 & n) >> 20) +) f* k5 Q: r# z5 `& @$ E& D
enHex((0x0f0000 & n) >> 16) +* f& `, W6 P% |* j' \
enHex((0x00f000 & n) >> 12) +% W- ]# {+ b) f$ {. D' c' W
enHex((0x000f00 & n) >> 8) +2 [- X! n6 w5 y. L- s
enHex((0x0000f0 & n) >> 4) +
0 B/ n6 f4 B2 M' h enHex((0x00000f & n) >> 0))
+ [. ^7 B( m4 R3 z1 T}6 \+ s9 B( b6 ^) o, b! Q
// Convert a six character hex to decimal
1 m- E2 B4 t- p$ Z- gfunction toDecimal(hexNum)
+ e& g; e% D4 k5 Z( y{
: g' X" e |" z: _, v2 J% a0 s var tmp = ""+hexNum.toUpperCase()
: Z0 |4 ~* P/ {4 f- R& D/ c while (tmp.length < 6) tmp = "0"+tmp" H7 L, o4 T2 q' |5 r6 _
return ((deHex(tmp.substring(0,1)) << 20) +
7 L, v9 j8 l, ?; f (deHex(tmp.substring(1,2)) << 16) +
- c) L ~4 M& H (deHex(tmp.substring(2,3)) << 12) ++ k) }" z3 G/ J) _* G
(deHex(tmp.substring(3,4)) << 8) +
" ?- E$ d+ V" v (deHex(tmp.substring(4,5)) << 4) +/ X+ _4 r) @7 g) P7 l( G! W
(deHex(tmp.substring(5,6))))
* g# J( k+ R5 y6 U i; N8 x5 ]0 S}! t1 N2 D+ J" e$ K
///////////////////Shimmering Links/////////////////////
: ?: z, A+ Z1 |+ P% D//global variables. G: A$ x0 m* D1 {. ^4 w3 X2 |0 k
var hoverColour
+ O2 O$ E3 T' |# H: V' Avar numLinks;
& j- X, U' _, fvar rate;
' z& Q& {) N& R3 X% j' h! ]0 S3 Vvar numFadeLevels;
$ q" m, d; {; y. R7 Yvar bgR;( n' j8 p2 J: y! j$ [; w2 A4 a l; b% d
var bgG;' s" ? w- Z: i! {) [: t+ C9 J* P
var bgB;
: k7 Y4 X" m- Z3 L7 ovar currR;
7 k P0 h& m* ^! k7 j4 w+ qvar currG;
T% ~: f9 z( J9 Zvar currB;* K! o% t( D5 f& \% |3 [ ?
var count;) w8 u4 u; S0 C! m$ h4 t
var fadeOut;5 y6 N8 ]$ x1 d& J
var continuous;5 b' @+ K( H# A; h
var newColour;7 B; }/ }/ v: Z* Y7 v0 x8 B/ @" i
var tID;) z8 v' F, e! @3 h+ o
var redInterval;
, G1 a$ u/ x9 U% f* P2 v& B8 avar greenInterval;
4 h4 |& K2 _+ u; m% ]& D" Ivar blueInterval;
' i! e9 G% z7 B4 Q3 ?- E/ jfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
: y# P* _& s* S9 {2 n{
5 p; C! l1 Z' r0 H hoverColour = mouseOverColour;. L; J2 o! S- T. M
numLinks = numberOfLinks;
! [8 G5 S0 m* _ rate = 1;5 h/ S5 W' q/ U7 j3 h+ i
numFadeLevels = 30;8 p; I, p' N! i
function initArray(theArray, length, val)
5 r5 P/ \8 [9 O6 x G {
+ d2 T2 I7 _& g& D* b$ E8 u: G for(i=0;i<length;i++)
, x$ L' t( ?3 n5 J& i' _ {
* h+ g8 q3 }0 t! H theArray = val;4 `4 z& q1 q9 b) i
}
' A8 n0 ]0 U2 `+ A& ~9 r! o }
- c9 s( K! z, c8 n1 {) Y bgR = '0000' + fadeOutColour.substring(1,3)
6 n7 N$ H. ?# G3 W: i1 ^6 `( W+ ]+ i bgG = '0000' + fadeOutColour.substring(3,5)
* r1 O+ h8 ?0 h& A( ~3 g bgB = '0000' + fadeOutColour.substring(5,7)# D+ \0 U/ J. @5 w
currR = new Array(numLinks);" W3 d C3 ^% ^7 O
currG = new Array(numLinks);
" j5 A B6 l8 s( K8 [, X currB = new Array(numLinks);( J- }: n+ A6 n/ o" }
count = new Array(numLinks);1 [# `0 \0 W' W
fadeOut = new Array(numLinks);
) y6 ~9 X' h {: B3 y, ^; s continuous = new Array(numLinks);
* O5 I; G$ y' a0 v6 u% K newColour = new Array(numLinks);7 ~7 r0 J& O0 a: Z8 Q2 y( @: T
tID = new Array(numLinks);4 L- O1 x: t- M {
redInterval = toDecimal(bgR) / numFadeLevels;
9 D( K/ h+ X( |" I: ^ greenInterval = toDecimal(bgG) / numFadeLevels;
2 q# S6 I6 ?* a) {. _ blueInterval = toDecimal(bgB) / numFadeLevels;# s* B0 E0 \& ?8 V" w3 L
initArray(currR,numLinks,0);. H/ |# O# [ x/ H* E
initArray(currG,numLinks,0);
. B K' K" t/ y initArray(currB,numLinks,0);% y+ }3 y, ?( c
initArray(count,numLinks,0);( b, s- O3 R0 K/ I9 Y" [: \" W
initArray(fadeOut,numLinks,true);! q; _( Z( E5 h: o& O, g8 l( S
initArray(continuous,numLinks,true);/ F- H8 L _: |. q7 A' A
} o/ x+ V: V; G% W0 a) O; @% }
function startFade(id)) A/ h3 D5 e; ~0 ?( c3 X
{
% c* I7 T6 D% R; c9 A, @* Z if(fadeOut[id] == true)- `' i% Z, V' t8 U4 U; |5 C- m
{ /*move colour towards background colour (increment)*/" ?& H% e" n: D$ l: ^/ \
currR[id] += redInterval;, A$ K q: Z3 y8 E! R2 ^' X6 s
currG[id] += greenInterval;
; L8 V, l$ [7 M; I k currB[id] += blueInterval;
* P; D4 N$ B$ Z7 q) S W7 t newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' _1 E7 z0 B8 B7 |6 H3 M+ ^' I if(++count[id] == numFadeLevels)
0 W( R% L& C2 A$ I1 h5 @& f r {
! j/ ~9 l1 j/ o0 |7 O Y fadeOut[id] = false;
1 e! r; ~7 k2 C5 R7 e- e4 Y. ~ }
' Q, H* j2 ]$ P& \4 Y& y }( j- A$ I) j9 [1 h! C+ S. r
else+ s* z+ T! ~* v5 h( Z
{7 u% A$ f$ U/ f5 a6 G( f
currR[id] -= redInterval;
5 B/ R2 [9 [$ K) S: t9 h- `7 w/ b$ t; v
currG[id] -= greenInterval;
" p/ h1 Z& c; M! L: Z4 Y( U5 s& g; P1 R, S# t# v
currB[id] -= blueInterval;( H% Q6 h" X8 `" N, A G
: R# c* E, A* |2 v
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: O. K. w9 Y+ ~ |8 B& k
$ u$ f0 h4 z1 j
if(--count[id] == 0). f+ q9 h! `) Z+ Y9 o9 b: j
; g8 w" y- B' {2 Y7 A* _5 r
{
) Y2 c8 a5 u$ U, T- L- j
1 t3 L! V7 _' k6 o fadeOut[id] = true;
* ^3 E" d8 B4 ~# H# ~! c0 i9 B @9 ?9 C! T: p% G9 o) O) t8 o. F, c/ B/ _
}
- l. n: a" b* C' U+ P9 U. G& }, ?
) h5 X5 w, L1 a" z) J1 P. K }$ f+ P+ s6 H5 Z6 F
! F% U- {, @# P) h if(continuous[id] == true)5 b$ h( l5 H! M: [& a+ a. i! D5 n
* X, w, Y9 J: }/ R4 D {
5 J% V, n, e: @* w: ~! R8 B2 y5 c& }; _' q! k d
document.getElementById(id).style.color = newColour[id];
7 T% C8 K$ A; W- P6 T# t* i( y' X+ m- t6 k( i3 o, S5 c% l
}2 z9 J C1 f0 I8 Y+ C( y; {
& l) ]. z3 t6 Y: F7 n else' f8 J6 }. ~/ g5 ]6 D& x/ E
7 d" A" v- N6 ~4 U4 J) I& x- b
{
& b/ [8 I' \0 Q3 c5 E; A; t) L1 o* g6 o& V% O
document.getElementById(id).style.color = hoverColour;
( J4 J5 u2 j4 g) p: a" d8 ?# @- X9 B) w% Y$ T" e
}
! F# Z4 N5 }9 v" ^% P9 M- B O6 G9 ]0 L
clearTimeout(tID[id]);; D& {! B1 p {0 o% p& H1 v+ B
& V& _7 N* ~( v" D& }9 y& X% m0 D tID[id]=setTimeout('startFade(' + id + ')', rate);/ `; w/ ~1 u# |0 ]
2 Y' |' P( _9 H9 U
}
" W! Q5 k. [ f
8 Z/ Y8 x7 }$ `9 h0 dfunction continueFade(id)
/ [2 Z, t; z7 V0 \3 s2 ` Z5 V) o2 W4 j# w* Y
{
! \) }5 c7 [2 h5 i& n! }+ R) r8 T
# t# ?+ ?( S' Z1 L- H. J6 |) _ continuous[id] = true;
. s! q( \0 _ N8 r4 S d+ u M6 M0 Y! A
}2 k& p1 V# [* V( o9 V
/ v6 i0 L0 Q( @3 E7 m
function stopFade(id)
. V) p, X" w+ v' J5 x+ E: Q4 l0 @' u
{+ ~( s2 }) E( ]% f
1 x, j# x, b: K& e
continuous[id] = false;
2 N! }; O* G! z. t3 I
& \9 E% Y% M# }, X8 D; F}
7 n$ Z$ J7 L' [9 C+ M: C7 K$ ^) l( I0 \/ Y% F$ i9 N, D9 Q8 Z
function StartTimers()6 |1 @! P2 A" H2 f3 G' j
4 D5 h; B. {- E2 h* z4 y7 H" j{ //set up an initial set of timers to start the shimmering effect' O1 P6 G; |9 [; m) |
! D( t& |# z' \ for(id=0; id<numLinks; id++)3 G6 h# p6 R; m
6 ?0 c- a# b5 a+ n3 W
{5 q. ~: B& }+ i7 {/ ]" L
+ P' f7 q/ i( E# H t=setTimeout('startFade(' + id + ')', id*100);
3 l, T+ j% w1 t, y h, b( a3 S7 D( N
}
% o, R" g2 W; r* C/ ~: ^3 U
' w2 I" V/ F9 t% z7 Z1 x; ^}: y6 T" o8 j" Y4 g: k1 E
8 U+ I0 i% ~- j2 D! E" u
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 K; l" u2 O6 Z
C. P5 A4 w" l& Q
initLinks('#FF0000', 6, '#FFCC77');
, ?# s& c Q G/ \& E9 B$ ?+ Z5 c! {( ]" Y5 ~7 y8 u: G) h2 J h5 T* D
//-->
7 t3 T1 i* x y1 m2 t9 q
. m9 A. {+ I" Z2 m$ M</script>3 F. Q, l- M9 O3 w% e
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
$ g0 Z9 x2 ? Q3 O1 Y</a>
9 x4 q7 ^8 b: Y% G! a7 R2 M<br>
4 ^1 A5 A1 \1 s6 l8 a* a<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
* D8 _' C* E0 m* }, |% E<br>4 l: h" F0 X' d# a' U. X4 x V
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ w f: W* o& V- i: K9 `7 t/ k4 a<br>
" T6 T6 f, @" Q3 a, W! M4 p<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
% I `! j! i0 h ~. B, R<br>
3 P3 b" X9 a# P6 O- I) ]<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>% |; n0 f( p: b7 h* R( B
<br>
1 M- i; q& Z2 `6 C& k9 p1 I. e7 s<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
% }( |1 U, h3 x- q<script language="javascript" type="text/javascript">
7 v2 R' K* I7 g0 I1 w ]<!--
; `+ x2 A' g% ]setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering) h8 R/ L6 J B, f! p1 \
//-->5 U! @& r/ p- ~0 _$ c+ q9 s( @
</script> |
|