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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">0 @1 e# Y& J) Q+ i6 i0 H/ C
<!--
/ W8 R& `0 M& g* H5 A& g& b* D) X// convert a single digit (0 - 16) into hex$ j6 e, T1 x( N8 [, x
function enHex(aDigit)
9 {" n9 L' ]& d" \# ~{
q: q$ f8 h4 i7 P/ A6 H2 } W# c return("0123456789ABCDEF".substring(aDigit, aDigit+1)); E( b0 M5 K {! U! z0 D
}
5 `; h w* o& ~9 S& T// convert a hex digit into decimal
; z+ ? D, |1 M5 _function deHex(aDigit)( h3 `/ U: `# n2 q9 n+ s2 b
{
5 f, A: ^# A; {! c return("0123456789ABCDEF".indexOf(aDigit))
4 b: s. |. |: k+ R' l0 E0 k}
# N% N) O: s/ T. ^3 T
- \" O, J3 R0 T8 D// Convert a 24bit number to hex2 n7 q, I. [( o* a6 |
function toHex(n)
$ p4 \3 t4 _3 L, P! P{4 j( c" h9 O7 Y
return (enHex((0xf00000 & n) >> 20) +, p" E+ U, S# y1 }4 [% ^5 k6 R6 |
enHex((0x0f0000 & n) >> 16) +: P$ Q- [( g% ]& d, A
enHex((0x00f000 & n) >> 12) +4 k O& C& S( ~: B
enHex((0x000f00 & n) >> 8) +
- E0 {3 b, v9 H5 `! x1 G enHex((0x0000f0 & n) >> 4) +
; [- D+ a X' C- b: m! I# T8 S- F enHex((0x00000f & n) >> 0))
% C! U) W) G( d3 o' y9 W! }}
& A2 e8 j9 {6 Z6 X: z" n// Convert a six character hex to decimal
" b5 b0 P* s% N: L- rfunction toDecimal(hexNum)+ b0 w/ P! Z- V
{
7 H# ~' `9 y* D U+ x2 b( ` var tmp = ""+hexNum.toUpperCase()
. g& O4 M+ C* I while (tmp.length < 6) tmp = "0"+tmp: w* N6 o% l; H% r* J
return ((deHex(tmp.substring(0,1)) << 20) +
9 S* L% B( z* k. ~4 n- Q (deHex(tmp.substring(1,2)) << 16) +
$ T+ v8 _& @$ s. X; A5 U4 G f3 ` (deHex(tmp.substring(2,3)) << 12) +5 u8 n- h' P% u
(deHex(tmp.substring(3,4)) << 8) +% s4 D3 {$ U$ `% B2 b
(deHex(tmp.substring(4,5)) << 4) +
0 Z/ Q% N5 B; }4 J (deHex(tmp.substring(5,6))))
, I2 w" w$ ~' u# b1 m0 E) p}
% D& n& W6 M& n9 G; v/ U6 u* k3 q///////////////////Shimmering Links/////////////////////& {# E' l- n' |- `+ M* \; ^& J
//global variables
% o& ]3 E% Z1 m/ K0 i; a# zvar hoverColour6 C- Q* l5 h+ j5 J. |
var numLinks;
) V/ I% u* W( E% h% J. `var rate;7 n4 t. U1 l- H, k( A0 n+ H; L
var numFadeLevels;2 q6 T# \% }/ R3 u& ~$ g
var bgR;
. X* G# R9 a5 {; F/ _9 svar bgG;+ M I4 \5 V& {' C# g* `4 L9 R
var bgB; T0 Y7 |9 I+ G
var currR;' [* }) |) W8 m9 m
var currG;2 q4 B! m$ {. c/ f* B8 v
var currB;" A% R: F9 }1 z' q5 {! i+ C+ X2 D
var count;8 ~$ G R* B5 l% a8 E2 C
var fadeOut;
' }. C4 S7 e7 C# x5 Svar continuous;, T- k% Y" x" u# d
var newColour;
* P% y: L) p0 e# {8 c1 y6 jvar tID;. C: _5 I' ?% h$ M% ~
var redInterval;
' b3 W5 ^, E( {; z/ S* Cvar greenInterval;
* m' b2 c" r6 evar blueInterval;
; t( f7 o f( N. T& A4 N9 \function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
7 p3 G" ^; E) K{
2 x8 \2 e2 v8 b9 C% t# U hoverColour = mouseOverColour;
g3 x1 x3 t, h8 ?3 U numLinks = numberOfLinks;* [. J2 h6 F: O) j4 b- S# E
rate = 1;
3 o9 _2 F" m/ T: D numFadeLevels = 30; I _) D3 c2 d( o; \
function initArray(theArray, length, val)& m( \6 z$ F) S" ], G
{: g4 ^" ^& I# g' j8 p6 m
for(i=0;i<length;i++)" B/ X- m8 Q# M8 g+ N) ~
{
- e/ G7 g- v! Y" L, I! E1 v$ Y0 M theArray = val;
6 `4 G3 m( N' F/ z! F- J }
( l# r4 x& V" Q1 X# t( o3 h9 U; g }( g( I0 i& [+ B: }" \% ]! ]. g
bgR = '0000' + fadeOutColour.substring(1,3), f* o. d) G9 A+ n/ h
bgG = '0000' + fadeOutColour.substring(3,5)5 m9 U8 b% U$ k" d/ |) ~" [: D; O
bgB = '0000' + fadeOutColour.substring(5,7)
7 v0 W2 `3 a3 w& [& { currR = new Array(numLinks);
$ H$ s1 }* q* j# [% {7 L T) j currG = new Array(numLinks);: F3 L' b, j1 V6 W: M x
currB = new Array(numLinks);1 ^9 T# B9 l( [* A: l1 P6 r
count = new Array(numLinks);
6 z$ o# R. m* n( g8 A fadeOut = new Array(numLinks);
0 e- I. _% S& t- _, y continuous = new Array(numLinks);% M# [( {$ Q( I8 ?2 m
newColour = new Array(numLinks);: O, S" r+ }1 t2 b5 w% v" S
tID = new Array(numLinks);, q0 r3 |/ d3 e/ d1 R3 t' m& X1 `
redInterval = toDecimal(bgR) / numFadeLevels;, ^" K P0 ?3 H: m G: I$ p& p
greenInterval = toDecimal(bgG) / numFadeLevels;
E: `. i& y8 _8 a# z; z blueInterval = toDecimal(bgB) / numFadeLevels;
# a; \5 h4 v, p$ n s7 ~; o8 J& f initArray(currR,numLinks,0);
( b4 ^; }: v$ J: A3 E, I7 I: [* G initArray(currG,numLinks,0);; X7 c6 `: H) Z! }9 |2 l
initArray(currB,numLinks,0);
* I) U$ |. K+ {9 x initArray(count,numLinks,0);& G( O1 Q2 B8 Y) `
initArray(fadeOut,numLinks,true);
1 s+ Z( M, H G; ?1 x, V initArray(continuous,numLinks,true);5 k! T) g j- J
}
. e( k( y; W: N7 Sfunction startFade(id)
$ w/ T, @ }$ M5 r2 l6 i{4 M5 G5 M. D; \! M% O
if(fadeOut[id] == true)
7 `: q6 E1 M4 ~ P% ^$ b* g { /*move colour towards background colour (increment)*/
! G$ V: L; L- O9 @ currR[id] += redInterval;
5 e/ e% _# ^/ h" _% x% D3 r currG[id] += greenInterval;! l8 y' A5 N/ m
currB[id] += blueInterval;
& w8 s4 D ?- k newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 L8 m8 \" X( }, H, h o; v if(++count[id] == numFadeLevels)7 h' L. K, b6 J4 \
{
8 i. w8 g7 c H, k+ \. A fadeOut[id] = false;
" J& }7 u4 ]: d6 z4 h; j, V3 q- f }
' j6 y9 ]. r; r4 H4 p }* @ ?3 A0 i' J7 u0 A
else) a' w; ]5 W+ t+ p
{
3 U+ |% u7 `# D0 q( ?2 u currR[id] -= redInterval;
1 M! F7 V) L" `. A
+ M$ @. F1 m2 Y- L% Y9 D4 ` currG[id] -= greenInterval;
. c; \* ~- R% b2 A/ \: Y
7 `( O2 U+ W( @( o& O; M currB[id] -= blueInterval;
; \ `. G4 |' o0 W
2 [& T/ {" h4 i4 O' l newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: U2 m7 H; L6 {6 G9 L3 J
/ F( H) P- w/ z
if(--count[id] == 0)9 H. g5 A" s; k
9 O& Y4 r6 g: @2 T. J {
; }1 ]+ A- C% r# I' u$ u+ k
; q% f1 M# C6 n% ?. Q4 S( J fadeOut[id] = true;
) h( g1 R6 f3 E N) d8 f
3 W6 I# @+ ?2 @/ {. |. M2 K$ z( Q }
: b$ o& s- b" X: w8 s6 [1 K
6 z$ V0 Q" D$ |0 H; ]) [ }. @ Q! n( _% x& `
$ m+ {+ b& S3 f if(continuous[id] == true)
% n) A4 {4 m+ j& I% B/ u- m) W
% Q% Y5 P- p; n6 e# \ {8 q8 x) S: m# M# w
) E" Q% H/ K# g, b- J+ H' s# w; r1 _ document.getElementById(id).style.color = newColour[id]; , s; {8 E# W0 M# L# U! {; H
; j6 a$ G! O% h1 S+ R
}2 x% A' x0 S$ w ?! R; y
6 p2 J5 M* Z( N1 [1 j3 o
else
5 r7 Y( \; X* \! N9 H, ]: E4 _' d, x1 `$ _! H1 Y, Q
{, p$ q2 Z# A! T: d3 P* |
1 q% q5 p' s" m! F, [
document.getElementById(id).style.color = hoverColour;
3 `1 f0 F6 G+ M7 R, G- P. H) q1 S; w, G) K5 A+ O
}
4 b6 ^7 z, u: ]: s/ f$ r9 w2 F6 |
clearTimeout(tID[id]);8 x5 o2 h/ A7 |: S+ p1 V. ^* D
; S" V' a8 x( D# x% A7 G; d$ ?8 U tID[id]=setTimeout('startFade(' + id + ')', rate);& D) Y# N4 d: O8 j
. s% Q% ]0 } T3 \
}0 M$ _( C5 l% Z
8 n4 I1 x. o) `$ U+ }$ y
function continueFade(id)
+ s! B' }+ I% z* n9 v7 l- A3 ^, E
* \+ e9 G" L7 Z& e+ }3 }{ k- S u! ]: u! w0 s; v* b5 i3 `
0 }3 F$ O: \! M6 |2 c continuous[id] = true;
0 X W- l- o6 }1 ^6 v0 r0 A4 G, G: n6 v& V0 b C
}0 K8 V9 f$ T; C2 _8 h; R
, M) _; g4 l2 B) k! e# ]' }+ K0 O4 Q7 @$ B: Dfunction stopFade(id)
V* N/ ~" Q& Q. f. X2 e% O# h6 P+ \% b5 ^
{
% M; _+ m2 l$ R' @6 \1 V; O% \& g! O2 M3 z
continuous[id] = false;
6 I, }9 p* `! [' x' T& `
$ G5 T. Z9 e& w2 I E0 J* [}/ V9 l) J5 @: q1 T; ^/ q
3 e; {; Y( g; T; l( `7 rfunction StartTimers()
* \3 t N+ _$ n
8 k8 U2 a* k1 F9 m{ //set up an initial set of timers to start the shimmering effect
: n8 G( U3 T$ F) [+ A, r1 R9 o7 @: a; ~" o2 t4 M
for(id=0; id<numLinks; id++). U: d) i7 P7 n
" m' [) \. u. e {, X2 r }3 ~' L' u
5 }6 }7 t0 r9 H. _$ ~1 k' O1 ^$ ]
t=setTimeout('startFade(' + id + ')', id*100);
9 O. s1 G9 @* y' ?
" p1 I$ l( k+ l5 i- z }$ M' l; R6 ]& H$ B) c. \: W
& ?+ d# b0 Z8 N}
' w, X) L1 X- Z8 J$ B: K4 ^7 R/ [* M
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 F! e" }3 W: J1 w. @% z4 t
8 {0 j" R2 o) x# a$ S" i1 Y
initLinks('#FF0000', 6, '#FFCC77');& W _% o7 M) T7 g
* ]! K% c k( r+ x//-->/ J& T$ a" h) q9 Y5 t1 X
6 Q% z( P! u7 O7 c- R
</script>
4 U1 _7 U, {3 f4 h/ M<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元" W1 K6 e( e4 {: M: C
</a>4 b* c/ D: l+ P# B0 C
<br>
+ r; M& F( u/ \! x( h A<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
* F& p I( i8 q q. W1 v<br>, e/ \$ Y5 L. }9 X$ l
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>2 z b2 f7 {9 j
<br> * t1 U4 y2 v# v R; h! v7 l# @/ P9 N
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>& ~2 L" \% u, n9 }1 b) s
<br>
) z* p' l; [$ }' p<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
x9 s3 W3 Y/ B5 h7 B<br>* V& ~+ \& q! x9 m# E4 ?
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& @4 k9 M7 l2 J- @1 l7 j6 h* ~
<script language="javascript" type="text/javascript">8 c) l& _& U$ Z' k; {/ u' z+ z: \
<!--
7 @7 ~4 a3 ~ K# DsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 @% k$ j! r: L" |: N: ?0 Y3 Q//-->
: R- `1 ~ K8 F( T</script> |
|