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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"> l" U3 Y1 w8 d/ a
<!--! n8 m3 R8 S4 C* g
// convert a single digit (0 - 16) into hex
4 U |9 [5 G/ B) G3 ifunction enHex(aDigit)
% ]% B2 m, @& D Z V{, v6 y$ z/ A3 H
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! w- w' ^: |% d3 e}
+ y2 ^6 Y/ B, ?; q: I$ Z// convert a hex digit into decimal
$ b/ l; K; I+ yfunction deHex(aDigit)
% @4 G0 Z1 b$ x4 m" ?{
" Y7 A- J5 C7 O6 I$ V' V2 A return("0123456789ABCDEF".indexOf(aDigit))
. D# r5 J1 T5 z1 B: N% g}3 w$ A i# {: t$ U* ?$ A1 U+ R4 b
7 {5 i% a1 P0 `) h' S// Convert a 24bit number to hex: M2 L7 z8 q; H2 g
function toHex(n)( M U- O7 P4 l5 e! l5 D T8 u6 D
{
, [) X: A6 |/ Z2 p. y return (enHex((0xf00000 & n) >> 20) +
3 r5 [( e; }$ U6 m! e+ T4 {! L3 X enHex((0x0f0000 & n) >> 16) +! u4 c7 X4 z6 m. h b9 Q
enHex((0x00f000 & n) >> 12) +. u6 r' Q2 `* N! C
enHex((0x000f00 & n) >> 8) +
, P0 V' V0 I; z4 q: G& x! @/ A# t enHex((0x0000f0 & n) >> 4) +
& g& j% x4 q3 _7 P enHex((0x00000f & n) >> 0))
& k7 N. g' c2 A; s}' k- `0 n9 W4 [7 U
// Convert a six character hex to decimal" N5 t+ g1 V9 p8 a: E/ j$ K
function toDecimal(hexNum)
' F- O0 X h5 ]- ~3 H{6 Q5 I. e: P8 K) m' l
var tmp = ""+hexNum.toUpperCase()
& T; C* d, b; J9 c9 n+ H while (tmp.length < 6) tmp = "0"+tmp/ Z1 ]6 w* P1 u/ w
return ((deHex(tmp.substring(0,1)) << 20) +' r( |: ]% P+ |! O, X
(deHex(tmp.substring(1,2)) << 16) + 0 A, F) ^1 J! |- E) b
(deHex(tmp.substring(2,3)) << 12) +
& G! n* k( l9 m0 F7 q7 [% `+ l p (deHex(tmp.substring(3,4)) << 8) +
$ ~: W' _7 s2 U! T (deHex(tmp.substring(4,5)) << 4) +
2 i. k* G3 c# H! { (deHex(tmp.substring(5,6))))
4 d* a u. Y- u$ N& K}
2 L Y% ?. B1 f( y///////////////////Shimmering Links/////////////////////
9 D, |3 b: N% o. x! I& \$ ?/ S//global variables
7 j; y2 O: ^7 {2 q) j2 ivar hoverColour
9 K5 \. M+ T5 q! E/ V4 B( wvar numLinks;
, A5 g6 d3 s6 R3 e) b& \1 Xvar rate;& V! d# T6 l' |3 I0 |
var numFadeLevels;
) \) U! ~, x. D# U/ S. rvar bgR;' O& a$ p% I$ ^
var bgG;
8 W% h" g$ r& E0 [$ N& `var bgB;
2 b; C! }1 d: t7 C0 B* `( Rvar currR;! u7 Z* J. _; N
var currG;
: S3 R8 Z( I4 B3 D- Uvar currB;
- \# n' T6 H2 o9 N: Y1 l: n1 u( Nvar count;
% ]( X3 |2 i4 Z) c+ gvar fadeOut;& q. K# [9 c* G
var continuous;7 c( r3 J5 k# Y
var newColour;) o+ @( T, c! g" K) X" y
var tID;1 {; H' O% m* d9 ?6 R. O" w
var redInterval;) u9 a5 }. V* C% Y! t7 g- u
var greenInterval;
! Q0 g% d+ S6 p$ p. gvar blueInterval;, v) R& L* M( Q$ @* U
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)+ @0 S* B9 |8 @5 _; Z# X4 f
{
v. {, [, p$ `) N; X) n hoverColour = mouseOverColour;
: u$ d$ I( u# m3 d, V+ E; n% x numLinks = numberOfLinks;
: L6 P( C. J& Y; X0 f1 Y. i rate = 1;, F* ]" H/ y' ^6 g7 V1 V" K7 {
numFadeLevels = 30;, Q! V9 D; t0 y3 ]+ j; ]) J
function initArray(theArray, length, val)$ Q7 ?; @* C! J8 ?& O. L, q
{8 T7 y: R9 n7 n3 }9 i- C+ U4 |
for(i=0;i<length;i++)
" S8 o* |& L4 t' K4 p {9 m2 ~/ x" C* b# _* q; D
theArray = val;. G: \2 `1 f; J v% s$ O: Y
}
7 ]1 c; g' B2 G O }4 }2 g. e0 @0 a2 B8 V
bgR = '0000' + fadeOutColour.substring(1,3). T7 M- \. g& y% |! m* o
bgG = '0000' + fadeOutColour.substring(3,5)
" K+ K$ S5 w: _' Z+ p0 o bgB = '0000' + fadeOutColour.substring(5,7)
3 B, z ?1 ` P, \6 A! S currR = new Array(numLinks);
8 f# T* n2 h5 J4 H+ @! F currG = new Array(numLinks);, q5 n2 q9 g. W4 {( m
currB = new Array(numLinks);, S% o! I; _% t. E Q
count = new Array(numLinks);; z5 ~! s; \& g* e! v, C
fadeOut = new Array(numLinks);
% @+ O# D0 Z! t continuous = new Array(numLinks);3 D/ T0 t1 x5 w/ ?
newColour = new Array(numLinks);
/ S* e2 s$ H4 X! L$ M tID = new Array(numLinks);
- `- z8 I* T# K" P2 }% L redInterval = toDecimal(bgR) / numFadeLevels;
7 y' o- |$ C, z5 T5 c' t greenInterval = toDecimal(bgG) / numFadeLevels;5 ]; p( V$ {7 v: k. J! z
blueInterval = toDecimal(bgB) / numFadeLevels;% L9 h& Y+ E- a/ r/ x; r+ R* p. r4 C$ | r
initArray(currR,numLinks,0);
% n6 h, P' @( Q' W initArray(currG,numLinks,0);4 v3 M) b6 q+ S
initArray(currB,numLinks,0);) v( K! u/ m0 y" n' F* [$ |
initArray(count,numLinks,0);
% ]% Z) \0 ^2 k! o$ O initArray(fadeOut,numLinks,true);
" e" @! W% `: z5 {9 y% I! M) P9 @# l6 S initArray(continuous,numLinks,true);, n' o$ Q; g' @' A
} ( ~' ]& \$ D( _
function startFade(id)
- Q0 @+ @- Y% D7 e9 h{
- W" J2 h6 \2 o8 k: J" J if(fadeOut[id] == true). F( |' I# P- n6 G
{ /*move colour towards background colour (increment)*/6 I' w, G9 J f0 M
currR[id] += redInterval;
4 J1 z: t# \9 R# q+ S currG[id] += greenInterval;
6 p+ }: m) ?1 K- S0 p( O" u. j N currB[id] += blueInterval;
9 T0 ?5 p- N) I( G9 F- w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);; B I. x+ ~* n# b" M' l
if(++count[id] == numFadeLevels)5 i! h9 M+ S) B- r$ N) I
{
& Y; l/ ^, W0 K. P6 h; j! M1 K fadeOut[id] = false;2 W1 @. w. N# a" v9 {, s Z- H6 `' ]# J
}+ @8 \$ O- D" `9 X9 a# e
}: |, [" k5 `; D+ e! b z
else
. |0 ^0 ^1 d3 ^- J( y {
/ L8 a) t; Z% S currR[id] -= redInterval;
; ~( W: A d7 e7 `1 E' z
, M3 j' e+ M1 Q9 \ currG[id] -= greenInterval;( R0 t7 O! Z+ a/ m7 m
7 a4 n) [0 ~$ ~( p
currB[id] -= blueInterval;4 \. o- S7 ^ n3 s* K3 M* w
, c7 i0 d8 n3 c2 A newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 j7 f1 Q _* h: h! h2 `
( z/ A% J& D8 U T if(--count[id] == 0)
P0 `+ b5 H. k' ?( M. R$ Y# c
5 v% |9 w, g6 `: p {
2 x1 Q5 G h% S7 B9 K8 } K+ I( T. _( E/ D& o8 K' Y* \
fadeOut[id] = true;, ?5 N3 C4 J# ]$ z0 }1 f3 u" X
" V$ B4 A, n( L! d }
0 A6 b @. A1 w( J' U% k7 E1 F/ r. r( z7 \4 `' H
}) t1 J$ K- y, I! V3 c# ^5 [
, a1 c# p' x" _. l" U3 `( @
if(continuous[id] == true)
: d# J% K: }" v5 @3 U8 u' P" [, Z% _
{* L' f' R. k. h% `, V' y1 K3 F( k
1 B& s8 F5 ]. S) | J+ n
document.getElementById(id).style.color = newColour[id];
8 s4 r6 n! c# G+ e6 p" }4 ] w1 e% d7 c( R f3 |
}
7 i1 `; A. @3 v2 q. X
) v7 s0 v s4 ^3 ]+ A else; x- j% m, a- o+ O& M* g* x: Y% m
" I. x5 w: X: H2 x9 D( R9 r
{
, R! I7 L, {3 k; P5 x" J# B( s5 d" N K0 E6 s! u( ^: i' }4 s- D! v6 t
document.getElementById(id).style.color = hoverColour;
% ~6 b. ^5 V3 M# ~
3 E" u4 ^& d& V: D5 T) f7 P+ [2 j5 a+ _ }: ^; z2 u: N. T3 {& }$ T* \6 g# B4 J
: Z0 ]# z; g1 `6 M$ ?; r+ d clearTimeout(tID[id]);
4 l. Z$ o3 _! E
- [7 `# q: T( q tID[id]=setTimeout('startFade(' + id + ')', rate);
8 {2 C4 K; S% X# W9 t5 _% |- k+ _+ T- K/ q
}
# Z3 F% d. }) s1 }8 v# y7 c5 r. p$ d) R* G: \; I+ H* q
function continueFade(id)
7 O) `! j1 q: H0 ^6 w0 t0 C% w/ P) l* N. b: a& F
{
7 L2 i- u- ?; a. }2 b& h# R! \8 r, B) @* g! U- m3 o
continuous[id] = true;
9 V8 i" o: v j
8 w) ]4 G5 }' Z8 r+ F4 E}4 u4 f. S, M0 p# s5 m
, o' R2 s8 ]3 g1 ~# n
function stopFade(id); g! k+ Q: E( u v2 U+ Q
. q9 G" V: S( m/ X5 l/ x1 k
{ J+ U9 f( I9 r
X B& r* D9 K( [, y continuous[id] = false;$ o, r1 w0 l' y" c
1 A3 Y# ]6 O% ? M; s}
- l7 c6 M8 r! m# M' O9 r8 I* Y* r4 j6 c c" ]
function StartTimers()
* b7 I$ @( I0 q1 {+ p4 c+ d
' O! S6 c4 W0 Y! j ?6 s7 U{ //set up an initial set of timers to start the shimmering effect
3 \3 ^7 ^ Z2 W$ |# u
! m2 G& N0 `" p) r2 u for(id=0; id<numLinks; id++)
! N! d9 {) Q) N- n2 ~
9 C7 R& u2 D1 q. Q$ x {7 U# F$ X6 T3 _3 W: \
: z0 ^) ^) t4 e0 f
t=setTimeout('startFade(' + id + ')', id*100);
/ n) ^5 F" C! W1 g4 K
# Q) v0 f: ^5 g4 j3 h: i }2 W/ f$ E: l S' a: c9 m
$ O3 j; ]( m3 L0 I7 i2 b1 U1 W& M
}
+ }& h h. G# w: w, ^! j! O3 k& Q+ K: S
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')5 H. B5 ~: I r: y
$ `, y; G$ f* n3 l9 _initLinks('#FF0000', 6, '#FFCC77');
# l6 s) W- _0 G4 O
4 f: m/ T1 ^* L( ~//-->
& a3 L( }' b1 Z' }# i- U' {( t6 m6 m1 ~0 O
</script>: ~9 T' u+ J" H3 ]
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元0 r5 s8 b- @9 V: p, U
</a>0 N# p" c+ o1 g, r3 B; }1 V
<br>1 c0 Z; Q9 v" W
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>1 Y: u( b( G# Q8 W
<br>( V1 `5 T" d4 \- F7 B) s% j9 L
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
& i" z, P/ C8 P1 [' x' t: E1 L, a<br>
* F6 q/ E; M4 o; M<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
4 U# H" U' L/ o: Z; U( V5 b<br>6 M' A. v# X, o" `+ |; y
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
, y; E! [3 R8 a; F<br>: x% R' U$ A( f6 y$ P
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>* W7 z* ~: O1 c0 @
<script language="javascript" type="text/javascript">
9 w0 D% ~& c0 D- J' D4 q<!--( B9 J: B$ H( D( r% x( p0 d
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering6 u2 A3 Q7 x( Z( |
//-->) M( X9 f, E6 v1 d
</script> |
|