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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">% \9 D; a* I. h# M* H: q9 x
<!--" U* F3 I5 j% S' _$ b" i
// convert a single digit (0 - 16) into hex
2 r+ H1 h4 g) E3 _ rfunction enHex(aDigit)
- C- D+ ]/ Z, g4 t{
9 X- i' `) {0 S( e2 i4 e return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! S7 L6 W H" t* e, k% x" f, D}& n# U8 q. D% l
// convert a hex digit into decimal1 H( X2 Y. N, M/ F
function deHex(aDigit)
$ ?8 ?; o' {; k$ a& p( R{
6 d1 Q: e7 U2 R! P9 T( F3 e1 N& \ return("0123456789ABCDEF".indexOf(aDigit))
/ X* y/ z8 I6 g0 o _}- o8 z, ?% s( L f% }; f
/ }+ K# ~2 c9 o2 A( E& Q// Convert a 24bit number to hex5 R8 W8 y' i6 H( i! H
function toHex(n)
# t. A) a9 _. O4 a3 u. d) I{
" P3 P; F, d! j( J% u# d return (enHex((0xf00000 & n) >> 20) +: Z; |% u; Y0 f7 r
enHex((0x0f0000 & n) >> 16) +
7 c3 A' B& s S7 P* a+ F- ?1 N enHex((0x00f000 & n) >> 12) +
3 u8 k; S$ r' P. @7 G enHex((0x000f00 & n) >> 8) +* g2 I4 p: y/ K; d( V: |
enHex((0x0000f0 & n) >> 4) +0 Q1 E2 Y y* V" x8 v$ `) C9 l
enHex((0x00000f & n) >> 0))0 W6 ?% ? V! V% H s
}% P1 j0 ~( G6 E6 H
// Convert a six character hex to decimal
6 O/ r" d, e- t" Y& h6 A6 i& vfunction toDecimal(hexNum)
! C& Q" h7 h9 u! U9 _{
# u/ K6 {9 H7 R& V var tmp = ""+hexNum.toUpperCase()
) L4 {$ n! w# M2 ~. c1 d9 ?$ D while (tmp.length < 6) tmp = "0"+tmp, @9 Y7 H7 y2 U P( C6 q5 |1 [
return ((deHex(tmp.substring(0,1)) << 20) +
6 h% `3 l$ `* ^- k# J/ Q (deHex(tmp.substring(1,2)) << 16) +
1 r9 R- W( u; @+ m (deHex(tmp.substring(2,3)) << 12) +
% t. }# S& Z! U0 ~; x4 P (deHex(tmp.substring(3,4)) << 8) ++ c# H3 k4 e6 }' i# Z# g
(deHex(tmp.substring(4,5)) << 4) +
$ R$ ]2 k0 [' P J0 t (deHex(tmp.substring(5,6))))5 \/ B8 J& g9 f0 f: c& P, F
}* u" z$ v, u2 a8 ]
///////////////////Shimmering Links/////////////////////
" v) V- ?6 |2 w/ q3 e8 x- U//global variables- T# ^4 k! l) x1 w
var hoverColour* D# l2 b: Y9 M5 b5 R4 t
var numLinks;8 s5 a5 N" B& K A& u, I: N5 r
var rate; M. E2 k) V! ]- K8 v9 A
var numFadeLevels;* Y9 }' E3 Y* {& |1 L( _- }
var bgR;; ?% Z8 j e- q7 T1 N. r( T# ~
var bgG;+ V1 ]" x" x' T y( w/ S# r8 r
var bgB;. V, i1 f5 y! @- h: m# \2 S
var currR;" A3 b& w1 E% P* b; G; T2 G
var currG;4 G b( h9 G r# j
var currB;0 c) W- o: h$ ~" W6 J. a
var count;
, Y' p) g; r3 `% V: \) nvar fadeOut;" s) O6 ^) M3 g: |1 a
var continuous;1 k* q* ], R( M/ N Y
var newColour;
; c- t; Z7 f. j7 x2 c+ Y) zvar tID;
) v. e: a2 ?# z. A1 k( U! }+ G3 o! Mvar redInterval;7 q. K' y# R, U7 w3 d+ N
var greenInterval;% U$ ~! _- H6 |
var blueInterval;8 {/ A" q3 I9 R- x% G2 d" H
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' W4 e) m! \) P& F( e6 b8 v- J& _
{" A# s: p" d4 `; q0 }( `' Y/ ?. S
hoverColour = mouseOverColour;
, w6 P% e6 R9 k S8 K( o: M& O8 [ numLinks = numberOfLinks;7 f! h* _2 X5 D; n! ?: v q4 `
rate = 1;) I: F5 T- I6 _8 `( g
numFadeLevels = 30;
! V) g. {1 y1 N. {( I( L2 f function initArray(theArray, length, val)+ r7 G t+ c8 y: w1 @
{% t# ~9 _) H! ?# H4 N& w! Z/ {0 I) u
for(i=0;i<length;i++) z1 }/ C' O4 v0 \7 |
{
$ N/ K o1 V- ?* e theArray = val;. s3 q( b$ w& z. \1 ]) z$ O
}) @; M* Y5 ?! A; L& H
}2 M/ S5 L2 I/ i/ ]6 m$ R
bgR = '0000' + fadeOutColour.substring(1,3)
' d& q4 u; ^" d5 M bgG = '0000' + fadeOutColour.substring(3,5)
) q- [9 y* m e3 v1 w6 c bgB = '0000' + fadeOutColour.substring(5,7)
* A; [# C; |7 Y9 j; _ currR = new Array(numLinks);
5 O2 c: T& u1 v- [" l7 M" @2 S currG = new Array(numLinks);
2 H! P# K- i4 u8 Y8 b0 Z1 n) b' O1 a currB = new Array(numLinks);
, ]8 f% R" W" l count = new Array(numLinks);# Q# l% c: t) M4 a4 o" }4 I
fadeOut = new Array(numLinks);
2 u4 ?1 r! }& p1 q1 _* C, c+ i) S# T# S continuous = new Array(numLinks);& [! y+ K% A; l0 z! p
newColour = new Array(numLinks);
* t6 _$ Z2 H! B& \ tID = new Array(numLinks);) ~; K6 B- y5 h) W# n6 P
redInterval = toDecimal(bgR) / numFadeLevels;
* l( Y K! k' F7 H0 i; S( t6 o greenInterval = toDecimal(bgG) / numFadeLevels;. w) B% q; K6 Z, F5 ?. [
blueInterval = toDecimal(bgB) / numFadeLevels;/ B6 q: M5 ^" @5 Y3 F
initArray(currR,numLinks,0);
3 ?0 @* G6 ^' w5 a* r0 p5 v; f. U initArray(currG,numLinks,0);8 C* f: G( j5 N6 S5 V
initArray(currB,numLinks,0);6 ?3 {) M5 _" ~2 A$ S6 d
initArray(count,numLinks,0);) E! @3 L% l5 O/ z3 ]7 u; N
initArray(fadeOut,numLinks,true);
6 g& L, c$ E7 W' U initArray(continuous,numLinks,true);
[. ?( g& i) u}
1 a6 l8 z" v# z: afunction startFade(id)8 u' \: a! \7 C- X) \
{' r+ r3 N$ k$ a5 l u- q! Q: S. E
if(fadeOut[id] == true)) E/ w' P7 V9 X% d5 v9 }1 d
{ /*move colour towards background colour (increment)*/( t& m2 q5 [& I' Y: ?; w
currR[id] += redInterval;
% d6 I# B {8 P currG[id] += greenInterval;
# H. n- `+ [" t. |7 H! [ K+ g currB[id] += blueInterval;
; `4 ]0 j) P/ k6 o newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- n0 n$ `( g% m) v6 J6 [* \! p
if(++count[id] == numFadeLevels)5 }0 C' V$ d. C5 w) W3 m6 ?6 r
{
, o1 {; G( i% O, N8 H fadeOut[id] = false;
! y$ F( x! e% }, k; o1 a }
4 Q4 e. A2 P+ [4 E7 K+ z }, Y$ d. w6 H% t# z: c4 \
else0 w) z8 O2 D% B) y8 a7 r' L ^
{4 H3 _, i) h A5 S- b% C5 Q
currR[id] -= redInterval;
# ^5 b$ l2 }" D# N: ~
W3 P5 R4 g- g1 V6 y9 }8 k# G( A/ g9 a currG[id] -= greenInterval;
, n1 h9 b' g9 c' M2 i8 p( m
7 k o2 H! O3 E; w currB[id] -= blueInterval;2 z3 K3 U0 [) E- c( v! p0 D
! T; i- F+ \2 _- o0 Y7 _$ B9 C& J& x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6); Q* S6 B& r6 Q4 R0 R- r8 o6 z
. F; Q* |1 K' O: S$ `
if(--count[id] == 0)' B, s) _5 o$ G
, q* f3 d# }+ X4 g7 ^" ] {
" W! |, \- ~" K1 X' U2 a7 K
+ p, Z4 `: @- q5 q0 n1 d* r fadeOut[id] = true;2 W: {8 h4 ~$ Q+ N2 H& q% r4 S5 c
~: x0 F0 _/ o& q' y' [5 T$ P
}! \+ P% L9 N& s& [+ b
4 M& f, V5 F" r% ^5 G }
- ^0 z: g7 o+ m7 ?( I5 m& H- ~! s: [9 Z5 y; h. X! t
if(continuous[id] == true) B0 N8 K* O: s6 q
5 K3 z+ k( g+ L
{
6 S: j {) |) M, s) `! d+ W; H8 E# ]
document.getElementById(id).style.color = newColour[id];
( ]2 V( a6 C7 V4 Q& Q/ j! }9 w& c" f# X" ~1 t& C+ d
}$ p* G) d2 x" z. V/ T6 k
2 t) ?: x2 p; M/ N+ U
else& [) k/ w; y! S
4 H" n0 t8 k* p& u: {; p) f% n& h
{
& E6 K1 Q' e. [. M8 M/ }. }) X* |3 M( f& v
document.getElementById(id).style.color = hoverColour;: T6 T# m! u" x; E
! l' x, ~( C/ Z2 | }
, r8 a1 V! A/ `4 Q/ |/ e! a/ k
2 \ X9 p$ k, m5 R clearTimeout(tID[id]);# \* v1 @" a1 z
}# m( ?: J/ m! M4 V
tID[id]=setTimeout('startFade(' + id + ')', rate);/ d" Y6 m0 w0 o
5 d2 h0 C. U @- C4 w* F
}7 g1 e: ^9 f" a+ g7 W. z
# d9 w* i7 C+ n* `4 V* M# V) [9 bfunction continueFade(id)
, p" n# j' T0 S* ]6 `2 d u1 T6 X6 R4 w+ N5 I1 L# C
{; Y7 X- D1 U) d( \, Y: g! a
9 W4 |, `7 D" Y- _7 ?
continuous[id] = true;
! @5 e9 W. j; L4 i1 ^: N% b- P; O0 ~: ]7 X- F1 _8 Z& V0 l; j
}/ V1 J2 v- `4 Y B+ Q0 w
+ O, r; v% A% F& j/ D5 t3 T, p
function stopFade(id), _: g8 V! D5 _3 h0 n
' J4 v9 E) q( s9 k% `6 q4 K3 l) m
{
" l/ e7 S9 ~( R" a2 D
& D% ]; D7 S6 }! [; e, V continuous[id] = false;/ F/ S' D$ Z" A: s, |9 c+ B
2 m0 A' }% k3 l. h9 M
}4 \1 T: j9 t. u: K" O* `0 v) d6 s% ~
+ N u1 o; r% j. ^
function StartTimers()( }8 h- Y, x; v9 Q
' ]5 |$ g( j9 m* E
{ //set up an initial set of timers to start the shimmering effect8 {4 d1 m* B9 Q8 C3 p0 U5 O7 P4 f
H( l$ W& }( k0 S9 n( l( L D
for(id=0; id<numLinks; id++) t* e- V$ b" ~; U$ ? G- J
?9 p1 q; @+ n6 M. k
{
! t3 W& B b. n
( ^: U2 E2 s7 D9 b$ w0 x, H t=setTimeout('startFade(' + id + ')', id*100);
0 Q8 C9 M% k: n3 r2 j5 n. s k @: x( X2 x3 j- p. V. i7 w7 w
}
' t* p( D0 ~3 J1 y$ S# J0 J) _" c! e/ w9 \
}% p U. G+ l2 p; o) e( p; ]
7 F# q5 t% y) W2 |! M, o
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), _4 m8 [ w9 @) O6 A
3 m" |, s% o5 U" a
initLinks('#FF0000', 6, '#FFCC77');2 ?+ y& J [! |1 s) }2 z% Q
0 g% B9 U9 G$ F, N//-->; I" Y4 t1 y6 H; G/ ^; i( a
9 U$ S9 z& b I8 b* @' W0 E0 z
</script>4 I, `; ^0 X$ _2 B
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
6 S: E5 y4 O# E+ J</a>
* z. x8 x( @7 L<br>7 R8 b0 q3 c( k) L+ i- G) ` P
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>& ^# V: @3 J1 T5 s& W3 g
<br>7 ?: q, ?6 m- H
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>( E# M1 o7 ^/ F) E" ` B& Y
<br>
2 Y& b9 r' B7 t6 C8 u* R0 D<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
! q- |2 |7 w4 x- c/ S+ U5 V<br>' e9 n1 V. N: }* ~
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ M9 \3 S$ ]( h
<br>! G* b/ @- L. ]/ x8 Q3 p
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
( U; S0 R$ k5 F<script language="javascript" type="text/javascript">
4 I5 r$ O& J6 @8 {" _% F<!--
5 M* o" Q: u/ W" o) Z% `7 xsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
' }+ x/ W& ?3 h; g: k: Z# E9 d. ~//-->
% s3 z% t- x5 i; M4 L. N" a</script> |
|