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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
! g+ e; L% \' l g1 C# y<!--
, y5 `- c" U8 }1 b, O+ K( p// convert a single digit (0 - 16) into hex
" G" J7 H- n" Sfunction enHex(aDigit)
b4 ^; F' R) \+ Z1 q, W{
, |2 i! l% D+ C6 r# N0 z" q return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 `4 r& D, x% M1 Q u
}) j+ Z5 n, v7 v3 d" o6 N
// convert a hex digit into decimal
+ X3 \* O- c( X- A+ \0 m1 `% V" afunction deHex(aDigit)8 P* k5 E# S4 C
{
0 O) I4 W9 Q2 r$ }+ m$ o; L' U return("0123456789ABCDEF".indexOf(aDigit))
- o0 @) }8 Y8 D, V, O0 E}
6 h5 q! ?% z, M$ I5 P+ Y" O: r6 H( ?6 `* u1 Q, [4 f6 J; p! W
// Convert a 24bit number to hex
( l" o" z! u* |& o' m6 A" ?9 }" {function toHex(n)
8 t# G( p- C6 I# x, V* h$ u0 ]{
+ _7 x( u* [9 a8 A) o0 J% G: G* B$ x return (enHex((0xf00000 & n) >> 20) +3 x, u9 q, \: Q) m& Z8 h* ~7 {
enHex((0x0f0000 & n) >> 16) +
0 W( F( w& @3 D, _ enHex((0x00f000 & n) >> 12) +
* L3 h6 k/ c I0 H$ z enHex((0x000f00 & n) >> 8) +
( ?, T' [. @) p enHex((0x0000f0 & n) >> 4) +! k7 |' r* k! O. p* u* Y3 [# _0 e
enHex((0x00000f & n) >> 0))
) g8 M V$ e. ]8 ~}& V. O+ J' E/ R1 w5 a
// Convert a six character hex to decimal, J# U: E( w& |5 C
function toDecimal(hexNum)" N4 B5 B8 a8 r7 b! t* ^3 S
{
3 O! h6 H) T8 n/ B var tmp = ""+hexNum.toUpperCase()
4 N" V# k8 l) w4 m( J- T( h" B while (tmp.length < 6) tmp = "0"+tmp$ k8 H' I5 E# M$ [- N. P; r4 l
return ((deHex(tmp.substring(0,1)) << 20) +
0 I/ d7 Q, e) Z: B (deHex(tmp.substring(1,2)) << 16) +
1 l3 h, \' S+ U" }7 p$ k (deHex(tmp.substring(2,3)) << 12) +: X8 y4 X- B% R
(deHex(tmp.substring(3,4)) << 8) +$ @" u3 N! G9 Z. g, s; p
(deHex(tmp.substring(4,5)) << 4) +
+ Y- e9 N2 d7 h9 K: w0 `; C (deHex(tmp.substring(5,6))))* `- o$ @* W' y4 K+ {% C/ ^ L- F, W
}
- r% s, C) M" e& u$ w& E6 ^///////////////////Shimmering Links/////////////////////1 q6 [. e! t- e+ z5 W* F6 L- }
//global variables! W' W- e# j5 l3 J
var hoverColour
+ H# N/ E! a5 W0 `5 T4 pvar numLinks;3 R3 L* H* y! o7 I5 Y9 [) s
var rate;
1 M( j5 L9 v- A+ Kvar numFadeLevels;
* p2 v) t5 ~# n( ^! ~6 zvar bgR;! `$ p" C5 S. v% |& ^* {
var bgG;
: [0 T9 J, Z. j, E' S z6 n# i+ kvar bgB;2 T; J0 f+ W( K) y
var currR;1 J8 X# ]. H! q" ~$ r" o1 V( z
var currG;
+ F4 g4 v5 `! J4 k! H! y4 Nvar currB;
0 }) D+ J$ L# m; P. nvar count;
" R' f4 b; y; ^var fadeOut;5 h1 F" X4 L- g& Z4 j, T
var continuous;) Q8 P" A5 `' j4 W
var newColour;2 W0 k3 i* w+ D; s2 S, }
var tID;
/ s9 v& u4 d: B7 z0 h0 Fvar redInterval;# s1 o T3 f: M. m, @
var greenInterval;
$ U. k: T. _' E0 z* f& G" k' Cvar blueInterval;" `8 I: M T: F i! F4 z8 L. b
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
/ x) w, b* c) e8 d5 q{( C' M4 Q' I4 m8 q1 Y
hoverColour = mouseOverColour;
+ f O: G' b/ [; `( T2 W+ }6 p1 P numLinks = numberOfLinks;
$ I' M; K/ f$ d" v( J5 ` rate = 1;* c( G# V1 a7 t x
numFadeLevels = 30;, V6 N$ o; b: y
function initArray(theArray, length, val)
9 }: \$ @- f9 J# w/ Y {
% B' N$ u7 X" Z+ F/ { for(i=0;i<length;i++)0 T* k; f# N6 L; w3 j, T" y& {
{0 c3 j! o+ F3 G+ W6 Z+ z
theArray = val;
8 M, V( O! z& B3 o( t: B# M* l }
1 a4 ?# t$ g3 b" v% F# C }0 F; V" q9 i2 S
bgR = '0000' + fadeOutColour.substring(1,3)
% j5 h) N; J9 D4 ~* g; c bgG = '0000' + fadeOutColour.substring(3,5)
$ T, @& [% N2 h# S bgB = '0000' + fadeOutColour.substring(5,7)$ W2 _# U1 X- K
currR = new Array(numLinks);
9 z/ A8 V2 Q" V. I currG = new Array(numLinks);
) T7 |9 L% K& E6 q0 b+ R% O currB = new Array(numLinks);+ c; t1 v# y& L+ h
count = new Array(numLinks);
k' S7 M0 u9 p0 _ fadeOut = new Array(numLinks);
' J7 \8 I* i* e9 W1 S* l( ? continuous = new Array(numLinks);2 i9 E6 f! D2 I: m! y- i
newColour = new Array(numLinks);
f, ]: o7 Q ?& X* j& m tID = new Array(numLinks);
. i* ?& t$ b4 d9 n- U) W redInterval = toDecimal(bgR) / numFadeLevels;
: E2 S* Z1 I1 E% k! J1 W0 `' U greenInterval = toDecimal(bgG) / numFadeLevels;! j7 _+ K2 T7 J7 h' h
blueInterval = toDecimal(bgB) / numFadeLevels;
3 s( H( D. C$ R) l initArray(currR,numLinks,0);
8 p4 g$ \1 B" L* M, y, o' O initArray(currG,numLinks,0);1 ?5 d* P, x$ U1 R8 |+ K
initArray(currB,numLinks,0);4 |$ s- R) ]* J2 L7 ^! E' h
initArray(count,numLinks,0);
- e I: f9 ^2 }! b initArray(fadeOut,numLinks,true);
o H l t) t+ a u" q: { s initArray(continuous,numLinks,true);6 Q+ Q; X$ W) f
}
! X; _( Z6 X+ k+ r, V$ N; Tfunction startFade(id)( `& K. V0 j' }1 N d7 Z- R
{4 N6 s b2 L( g! C
if(fadeOut[id] == true)
8 L1 Y C1 M9 k- {7 ~. ` { /*move colour towards background colour (increment)*/
- G; L7 ~; b! B0 j& P# a+ a currR[id] += redInterval;
& i3 [; m& Z9 r2 r currG[id] += greenInterval;
^0 E3 e3 C3 t) ]' A+ M v currB[id] += blueInterval;8 l6 _8 W, Q. r* }! k! D
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 c& n3 ]7 z" t if(++count[id] == numFadeLevels)0 t/ C; J4 A; y) @$ ^' j
{
9 J: ~& t0 j7 U fadeOut[id] = false;
$ A4 E( E* R( h+ p& K- R }
/ q! t. M$ S$ z. D; w/ R: R% B; i! r }
. ]6 |8 z5 D' q( y# ~ else2 `4 m1 ]( E! K
{
. `# S; M) @: ^2 ` currR[id] -= redInterval;" \7 `! P3 p6 m+ u8 p
/ c& S" Q+ m2 s, M
currG[id] -= greenInterval;6 U. W. r1 V6 G! Z# p! L
" H- G5 a' T$ t% d3 v4 ~; H; {
currB[id] -= blueInterval;* T; ~' a- r. j- D
! X" f% Y3 k; ?5 f2 E6 ?, M6 v
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) y+ e5 }" ~" c& T6 S: [
) f2 O+ b# V. T8 z% ^( } if(--count[id] == 0)# n& M# F- d( C0 m) Z0 ]
) K3 Y* i6 f2 p* Y& Z0 M {
3 s2 C! R; b- ]4 c& z
( w) |, P* G/ f( V fadeOut[id] = true;1 Z4 R6 o6 f/ x, j
+ [) k U J& @3 F }
# J; l8 r3 a7 d$ T- b' |8 s$ N( e( _% b8 n( n4 }
}' ~5 R7 X# \0 |0 L9 I. Q* S
: g$ E5 K$ u/ {
if(continuous[id] == true)
9 _, P. k4 ~# T) @. a8 z% ~( |) B% i" W9 W& ]
{! C6 p6 W% N+ O ?5 @9 H$ { R
5 s6 j* p+ t' i0 T& m3 ^) R( O, H" E
document.getElementById(id).style.color = newColour[id];
: k! [3 I1 M8 O. z$ s8 L' G% o9 \1 x0 f8 c/ r4 F
}! D: h" I, u7 P7 F. @+ N; H
" M0 X Z( B! q9 k
else
. O2 d( _! J) g' K- s) C3 J9 ^" }" }9 j+ [2 z
{ P4 D& \" Q6 z4 \6 p2 F( S$ j
3 n6 I3 t! }$ R3 h& z9 D
document.getElementById(id).style.color = hoverColour;3 ]% X" ^* T1 g/ v
. ^9 |1 s {" S2 H5 ]* O( o
}! R' o- D# P8 q; d6 O% `
6 z u( M- u* [7 D4 h0 s clearTimeout(tID[id]);! z: K" x! n% i& M2 l6 y
; |6 u. h b0 F% d; e
tID[id]=setTimeout('startFade(' + id + ')', rate);
( [, h% C; X4 a$ g% i- g4 @3 Q) R+ p% g5 ?
}
9 W) }( v' B- Y+ C
( |* u( [- k6 T, D vfunction continueFade(id)
! K2 o2 A K' d- D
& l" ~4 Z3 j4 L$ W5 f; a) K0 \{+ c% k. |. h/ |( Y) t6 w
1 M& g6 ]) V* N
continuous[id] = true;( a8 v$ m- l+ W; j
" P! I M' a! E5 \5 i} ]; A3 { G" z" g: a O6 H
" C' B$ H- v( b
function stopFade(id)
X" r$ Q$ L7 c0 C- _) z4 Z$ a& b3 G! P$ q0 \7 B) I6 a
{6 ]1 ?5 M! y7 O% R& t
* Y" |( o; F B! U continuous[id] = false;
( u* C0 Z W- r' Z1 A0 s4 ?
& h+ M" z6 @6 `: n}
; C+ N |2 N0 |( J. a
) ]6 v0 V s: ^8 F1 K7 k) Qfunction StartTimers()
) Y$ `+ ?0 A# J. t
0 @0 o; z+ x9 K: Q5 |{ //set up an initial set of timers to start the shimmering effect
a' q# S/ M( l* K* s
$ {; Q: c( J- J, Q9 N+ a for(id=0; id<numLinks; id++)
( U- w1 l9 v% z" I+ F2 K# ?+ r
5 e, \- R& `3 D" p: g& d/ Q {
& c0 i/ \* B% O5 p7 p4 d. M0 }! C |! {; u+ g; I# H
t=setTimeout('startFade(' + id + ')', id*100);
7 e4 s7 r7 m6 J/ U2 A# u' C6 T9 D" ^; Q8 G
}
: [/ ?8 j( `: Y! b; \* S
1 E( m- u5 Y& v+ U. \8 R) S}; ~4 P, n% j. L
6 y @$ Q2 y1 n//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
( S. @4 D! b O6 B
: x' L' o4 d C" t9 K$ O `9 minitLinks('#FF0000', 6, '#FFCC77');
8 r- p' h, C9 D6 Y; j
& B$ Q# _9 J+ t5 b//-->
9 x0 s# q+ \* D& p$ g; q( @& z' l4 c, n0 {9 ~
</script>. N: u4 h, P2 J/ M! b
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" k+ Z) A( _" m' b6 h& \! e</a>
7 ]$ S. y8 \4 c6 p/ l: ^8 `<br>
! I) I$ A% M2 s$ A7 Q/ E. i* |, g<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; P# m( B- C4 [/ c9 s2 e7 j
<br>
8 \* d1 | {3 J* k<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>) [/ N3 \! [& G; J) F: q2 F
<br> 3 _! n/ B) i+ R; B
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>1 h/ v0 `& \5 n Z7 M1 G/ C) L. s
<br>
3 v4 L% O: u- X<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
9 m5 t1 e. M9 a<br>
# a0 p1 m: f& O2 r1 g! a<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
" t7 ?- N& f( L8 t/ Q( Z% V# `# z<script language="javascript" type="text/javascript">
! C' h! S/ D6 ^4 ?( Z3 g<!--1 p/ \& X& A; s) `
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering9 o" D0 f5 R8 ?+ M0 l& b8 f8 M
//-->. j7 z$ a, @& a4 y) v9 l
</script> |
|