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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- l' R2 K' M6 n: y: C<!--
^' l' m; [9 j4 _' @% U; ? Z- t3 M// convert a single digit (0 - 16) into hex
$ Q% G. Y, ?# m Z' T2 Zfunction enHex(aDigit)
+ p' h! x' K/ ?, }5 e! y6 X5 g{$ ]6 s- d9 F! ?# e
return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 o7 P9 G) A# E! D( V. u
}2 I% h/ c+ x, r. V9 ^5 d/ B9 R
// convert a hex digit into decimal- r3 f6 e& G4 D* y
function deHex(aDigit)% J% _4 a- g( g
{ U) R7 Y/ z. B. I+ Y" Q0 R( n
return("0123456789ABCDEF".indexOf(aDigit))8 o6 v) ~2 j! v% f
}: Z) ^3 |8 L# t0 J1 `& n% K8 N
5 P7 T2 Q- z6 G( |1 S1 n
// Convert a 24bit number to hex; ]: Z5 q& }- j# X
function toHex(n)
4 {# B* u# V, J, l( Y{& X. H( }! ?. U% k" G4 K) h
return (enHex((0xf00000 & n) >> 20) +
1 h1 G' K3 x, r* s$ |) j2 a% y enHex((0x0f0000 & n) >> 16) +
; d* i/ x' G* G( r* |3 I( c6 j enHex((0x00f000 & n) >> 12) +
8 H e2 }' E1 f* ]4 w/ y: a' N enHex((0x000f00 & n) >> 8) +
" |3 A" i4 \3 F8 c enHex((0x0000f0 & n) >> 4) +
/ O8 o1 y x/ K4 [6 E enHex((0x00000f & n) >> 0))+ ~- U4 c/ r; k1 ?6 H Z% K) A
}, Q( s Y! K7 P5 \
// Convert a six character hex to decimal$ n% F" F, P6 Y0 a- f1 x6 N! ^* o
function toDecimal(hexNum)
; {9 e2 E+ z& @5 a0 l& R; q/ X9 o{
9 K) `* @ i2 Y3 d; S1 |$ ^7 Z var tmp = ""+hexNum.toUpperCase(): j, O+ i# r8 G* P" F
while (tmp.length < 6) tmp = "0"+tmp) h. d3 d$ v; F/ f
return ((deHex(tmp.substring(0,1)) << 20) +
* G. B6 L s) V( D (deHex(tmp.substring(1,2)) << 16) +
# y* C& P) v/ }8 C; |. f6 \ (deHex(tmp.substring(2,3)) << 12) +' A4 A M3 E0 H" Y: ]: B9 O
(deHex(tmp.substring(3,4)) << 8) +$ }; d ?0 V3 f: ^6 c6 n' y0 t4 Y! L
(deHex(tmp.substring(4,5)) << 4) +
! F0 z$ ~) P5 n; ~# } (deHex(tmp.substring(5,6)))), M2 f3 p; h+ G0 V) l* `
}( P7 d" s% T% s# F, O- ~
///////////////////Shimmering Links/////////////////////
' o2 w: e) l" B1 ~8 V# L//global variables
7 D7 G% \+ {4 F8 A' B& Q, q3 Ivar hoverColour, m! n& K3 X/ x
var numLinks;8 W4 r- ~# v9 \5 o: l
var rate;
4 Z P. f/ `* d1 Xvar numFadeLevels;# ]" G) \" E1 F" o1 z" ?$ R. J! G# G
var bgR;: I4 x, E: |& v! ^. w
var bgG;
; }" s+ p8 w) k/ Q/ ? {6 Hvar bgB;* e. q* ^# B. n0 p; |- y7 W1 f
var currR;
1 q: c$ g+ Q% v; \# l. ivar currG;! ^) ^* b/ ^! R4 |! A- {' W5 r& D
var currB;. I8 D) i$ u J5 U
var count;
0 B" ]! P- F: Uvar fadeOut;9 k. Z7 X* X, _
var continuous;& k: h7 @2 \, J# v
var newColour;
' o5 Q! g+ `# i* a Rvar tID;% k$ Z! {' k9 _. k9 E. T$ R
var redInterval;
1 \- b4 }% n' m8 Q8 Q$ V( S& }var greenInterval;, X5 c8 K' s( A: t( N8 ]
var blueInterval;- Y% h( I" D) {3 J1 b
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour) R5 d( |9 H. ?0 Q/ \! S8 `! [
{* L, h. J7 y9 G
hoverColour = mouseOverColour;
( k: i G8 L6 m8 X. Y/ U+ s numLinks = numberOfLinks;7 w+ n3 u, g) \0 S Y* _
rate = 1;1 q' M9 O. S/ ^( w+ _, K
numFadeLevels = 30;
8 L( C3 [" p. x3 m1 I% ]3 \ function initArray(theArray, length, val)9 Z* h) Q" G$ u# J7 O$ ~
{
. u& [2 ^. J. X for(i=0;i<length;i++)1 m0 g) w& I! M. q
{
$ h O6 W! S5 `5 g8 q. n theArray = val;; E( E8 v4 ^5 E) W& C2 l3 J9 i
}
9 ^1 X! v8 b( G; @ }
7 A; L# K7 \" B$ o% n' M6 w bgR = '0000' + fadeOutColour.substring(1,3)
% m8 \% b# `' a) `* J. ~3 c bgG = '0000' + fadeOutColour.substring(3,5)( ?% l' j0 ^) s) N, {1 Q6 {6 `
bgB = '0000' + fadeOutColour.substring(5,7)
* a8 K2 T- c' q5 F- J1 O% C currR = new Array(numLinks);: O0 P1 Q. P2 z o
currG = new Array(numLinks);% T* i3 C$ m- _8 t0 p, |. c
currB = new Array(numLinks);6 p- H, C* u& S, Z( M3 K
count = new Array(numLinks);: t* M. B* T3 n) e
fadeOut = new Array(numLinks);6 X+ F( {! R: N5 J5 \
continuous = new Array(numLinks);# K$ e; K1 h0 L) m" C: M) Z6 ^, d
newColour = new Array(numLinks);; E9 X# a2 ?0 P7 r( f/ k9 l( T
tID = new Array(numLinks);
. H* @7 ?% `+ K. e- S/ F9 j redInterval = toDecimal(bgR) / numFadeLevels;
6 Z( L. M5 ~# X5 I' { greenInterval = toDecimal(bgG) / numFadeLevels;
' e- `; h( r; N blueInterval = toDecimal(bgB) / numFadeLevels;1 G! I5 \- ` U* t, C) d( F
initArray(currR,numLinks,0);
/ F+ F4 g7 P9 C, t initArray(currG,numLinks,0);
. C- U4 o/ e4 [9 U$ l/ F initArray(currB,numLinks,0);( t7 ` P4 V3 [
initArray(count,numLinks,0);2 {8 G7 Z+ ~ z& {) d5 d4 g* M
initArray(fadeOut,numLinks,true);7 ^1 c( d5 k+ {3 K/ p- s+ E
initArray(continuous,numLinks,true);; F$ c8 W2 u) M) n' s
} ' G! }) i2 J7 P' B% K/ ^2 m
function startFade(id), E8 d# T& ?6 S
{
$ A& n1 C/ w) `8 e9 h. x if(fadeOut[id] == true)0 f' E$ S. w. ]$ T" W% [
{ /*move colour towards background colour (increment)*/6 X, G( b8 a( e, `$ f
currR[id] += redInterval;
* Q. v' c$ C+ ~& x currG[id] += greenInterval;
- x2 m: l' E | currB[id] += blueInterval;
$ J2 U; U4 J2 W: q! C \8 V newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 h3 L* B% |$ a3 j; x X9 u
if(++count[id] == numFadeLevels)$ S7 B( [% g5 d8 a- s
{6 W8 j$ {" l, a3 G# ^+ B, F" A
fadeOut[id] = false; g( l% o$ f' v' K) Y* a2 a
}
' B9 A8 ^+ ]. ^& z) q }* a8 G3 N6 H6 o+ T; [
else
3 a k2 J8 B* b1 _8 J& c {
* _ B2 r4 q6 R% S1 w currR[id] -= redInterval;
) a/ k- w0 |# S! w
) K+ D% n9 ^7 K2 b8 F# M; t4 o$ ]$ c currG[id] -= greenInterval;' g2 y+ {: ]0 s: z
4 ]/ K) {9 y8 n currB[id] -= blueInterval;
# M$ h% G! N) r! S g
: M& Q( z* m, F newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ u4 u8 E7 M9 Y8 z
1 U- E, `& E( |( l/ {% q2 ?% Q if(--count[id] == 0): n- D2 {; ^* [* v' x
& Z2 e& g9 u6 ~, x; K" B& G {" O: v1 K0 D' R
3 G. B8 S x( l$ [5 I. e- I) z fadeOut[id] = true;
* ~, h9 l" K/ u, b$ V, C2 w# }- G, O
}7 \+ ?7 q& k( T6 a- V
( b) A& u/ o) E- S
}
& {4 {0 I' T; f# X! L% V+ l1 \9 ]
5 j* |: W4 K3 w- p$ w if(continuous[id] == true)
5 Z8 h! {8 r. w! t& p# q f0 ^1 Y# c; A$ w
{" v" Y: q' W4 w& s
9 L, P' g3 s% G. j% N5 S, q, J
document.getElementById(id).style.color = newColour[id]; 5 }7 @$ p+ [7 g* W
! c# ~- p, Q g( g5 ]
}$ s8 o1 X% D* v+ e
, \9 c; ?, W4 D+ W c
else
0 U% O' F3 q3 q" n* R. x6 A5 n7 p/ ~: ^/ A( Y- w5 P3 v l5 b
{/ }' c8 T1 }3 F
( T* u0 N& o! T: T, s7 F; v Q
document.getElementById(id).style.color = hoverColour;
+ N5 Q! c; a6 @4 v- G) t
5 @6 m" e8 _) P) A% n9 ?2 ~% q }
% }: `( b) h* k- U/ [2 Q; y. t2 V+ R
clearTimeout(tID[id]);
* Y4 P% S/ ~8 r! c: t/ }0 N% y/ W! g
tID[id]=setTimeout('startFade(' + id + ')', rate);
. b# S# F6 ~* ]4 ^
: E p! [! x3 X% s3 P- ?5 ?4 X$ T}
; H, {! o! S3 f% F0 s4 W* k. N V( B4 N
function continueFade(id)
) M9 B% u6 q0 r, N( p' p2 |' d% b8 O5 b+ e
{
: d. T. J) v, M {& |* M6 f
1 w) L, h Q, y: Y continuous[id] = true;
+ X) z1 U. B3 I
% a2 y/ R) ~6 q- W' w+ N}
- Z* `( F: A" a1 k w5 P' Y* T& u5 |" M/ B% v# l6 T: L
function stopFade(id)+ G5 `+ I1 B$ {; @
9 m6 N5 X. ]6 P$ J C7 B
{
7 a5 E. K0 U R1 {, h& S/ x d/ W
continuous[id] = false;
& t. S$ m* d, |) e' }) t8 ?
( A3 J" F) y" {. p}( k0 B- M& L5 {$ V; n. `5 [5 j8 g
3 y7 q4 o( p$ l; ]% U9 ^
function StartTimers()4 e/ J6 a5 v. U5 ~( c
( ~. X. y& ?- |. ?) A
{ //set up an initial set of timers to start the shimmering effect
! W) j) ^8 P) j: k B. Z$ Q/ L
# T* ~* A* Y* R% ^* k$ y3 o for(id=0; id<numLinks; id++)
! z1 }) s2 l% {$ W0 V* Z- P9 Y/ r( M' s9 M; M
{# \1 q ]" a! r$ Z
! K$ `9 d' f, _. x6 \ t=setTimeout('startFade(' + id + ')', id*100);
3 s9 k3 l+ p* X2 T+ f8 X9 ]4 a9 w
$ l1 B0 b- P$ M0 i! W }% `' g! H8 _- _" }0 J4 I, d
- P: g" U7 c- {6 S* f
}
& C0 ]1 r+ y' Y* ?! b% E; M3 x4 a5 p# W% b: h+ j- z1 \' I9 s
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
8 L$ m/ f1 L1 K
- I7 O+ n+ |& t. [6 Y8 d% m1 z W. YinitLinks('#FF0000', 6, '#FFCC77');. f8 ]) C" k; N/ ~
5 h$ N. E# `6 ]8 P- u
//-->$ {, D" l0 a7 n7 R+ c
& G/ E, b. K. R' U</script>7 x4 ~ b E, P8 i& f, @% F
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
7 T! Q. Y( u% E</a>
) Z( j0 A6 w$ E" A1 \8 o<br>
* H- k$ V. V) @& N0 }<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
* y) n6 e8 ]! y1 R0 r; S/ L9 [<br>7 L, Y+ o# N, [8 C" z7 o: ]
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 h6 U+ H6 ^2 s4 o
<br>
, B1 L# G l" `3 L0 S% y2 f9 Z, [<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 k) O, y* ~8 T4 o6 ^4 l3 s, l
<br>
: @. G! S3 E4 p" Q7 r<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
+ ~9 Z6 D- {4 K1 A1 [<br>- j: G1 N" |6 a$ `- I
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
3 o8 F M% z' ?3 \4 c! r% `<script language="javascript" type="text/javascript">% B4 C* \' i4 j$ [4 v2 [
<!--: {) Z# |' A5 A; c; F V/ c i
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
$ |& }9 a; W1 ~4 i% q/ c- z//-->% Z5 r9 x6 o) e# r0 J
</script> |
|