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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
' u' l' q- X! o& P/ Q$ y<!--) z2 m5 l( H- y, O5 ?8 a
// convert a single digit (0 - 16) into hex+ C$ Y, z; J0 W1 ?4 Z
function enHex(aDigit): F, V2 E+ o! m V* J9 }3 q& A! l* f4 u
{$ A/ g8 I, I, R- s5 N
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
+ K3 t$ J$ Z5 x0 m, B5 ]! q}
- k4 _* Q: W3 v- a( n" e6 N1 c// convert a hex digit into decimal+ G ~- }& W @9 @8 E
function deHex(aDigit)
# A5 F9 y7 Y7 N {* c{' _2 u, x0 j: Y5 j2 _; ~6 \1 x2 |
return("0123456789ABCDEF".indexOf(aDigit))1 D1 R6 R; Y+ J, G
}! y% X2 v. W5 _) k* e1 e
; Y( G% [: ?1 j; I4 p$ ~// Convert a 24bit number to hex
# C# Y5 ], [8 Qfunction toHex(n)
! P( V$ ], ?# ^% l: m# K) ?; v1 R{9 v3 w9 E6 P4 G o
return (enHex((0xf00000 & n) >> 20) +7 i. M' [# y# l1 w) j6 l
enHex((0x0f0000 & n) >> 16) +- F9 I: f, F2 b! r1 J& I
enHex((0x00f000 & n) >> 12) +3 S: K0 v0 V6 U
enHex((0x000f00 & n) >> 8) +
1 ]+ e; J( k1 `6 A2 ` enHex((0x0000f0 & n) >> 4) +
; _ l9 B5 A* p8 a3 i enHex((0x00000f & n) >> 0))' t1 r4 O' J C5 X. o
}2 [" A' A ~: T; N- N
// Convert a six character hex to decimal
& i! i4 j& I) V8 |, pfunction toDecimal(hexNum)
2 e2 v6 |6 i: M8 T% G) c& {+ E. E- I2 ?{6 M) P U O5 W- v! y
var tmp = ""+hexNum.toUpperCase()
$ B' {; ?+ |. x6 G. l while (tmp.length < 6) tmp = "0"+tmp
) x; K) }- R3 N: w9 m return ((deHex(tmp.substring(0,1)) << 20) +3 [0 X4 A1 d6 Q" O
(deHex(tmp.substring(1,2)) << 16) + $ b! F8 D9 K+ T4 x* C
(deHex(tmp.substring(2,3)) << 12) +
1 a# M, `/ s3 S7 @9 j$ i (deHex(tmp.substring(3,4)) << 8) +# ~5 B8 g7 Q' \( p% }7 D
(deHex(tmp.substring(4,5)) << 4) +
# J g% J* Y! b9 S (deHex(tmp.substring(5,6))))" k' u( f' J& V' L! d4 X, q, L
}
7 T3 I* H- u! l: ~. w, K///////////////////Shimmering Links/////////////////////
- {- Y. K o' W1 n4 W V//global variables
) Q5 w- X, Q0 M4 ^var hoverColour' ?3 ~& ?) V2 F2 E; b. `& \7 w+ [- b
var numLinks;0 y3 v5 p; F1 h& e$ Z% p& [" U
var rate;
5 c# O9 D7 G) h8 P, R( X" gvar numFadeLevels;/ X. u4 C: \3 [* J1 U5 G( q$ X
var bgR;' ~7 B( W! T* ]9 r: z) S
var bgG;$ K4 ~, k: T& W
var bgB;( M& t) X& k- E0 b+ F
var currR;, i. A8 x8 ]3 l, |0 A1 P. D, f( p
var currG;" Z/ Q; V5 \0 X# T
var currB;
( R7 L( `( f/ ivar count;
) I- ?, K$ w( Q# t, ^var fadeOut;, U _% p: r7 ~- u4 a
var continuous;
& g3 {( t' g$ pvar newColour;
. y) \7 B \, k/ i6 v9 o( s; Ovar tID;6 g1 }0 B! e7 o. s3 E9 T
var redInterval; N! M2 n" r6 t0 }& T0 c
var greenInterval;
f5 p" l7 f' O6 Wvar blueInterval;
) W2 ]: k4 s; ]function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
3 K) \; O$ H9 A" b{2 E0 h7 t8 P" G
hoverColour = mouseOverColour;
3 [8 e/ E6 a. V) C, Y( D numLinks = numberOfLinks;- U) h& L- A9 n) e
rate = 1;7 Y7 i* G d" J$ J2 k
numFadeLevels = 30;, M6 d# S* Q2 q1 k: K7 z3 D; `
function initArray(theArray, length, val)) D1 ~, F" m. v2 I1 A- a
{( U/ k8 L+ I: h, M# \8 T
for(i=0;i<length;i++)$ g; @( r5 J% r' c* T! }% D$ B
{% ~. u/ g q- h
theArray = val;
1 [9 f$ d V0 y }
; w- c/ B/ r1 n& O# H- s9 ~- y( I }
& I" ^9 Q) i* B, k. ?) U bgR = '0000' + fadeOutColour.substring(1,3)
: h5 Q, {. c# z7 \/ l1 V bgG = '0000' + fadeOutColour.substring(3,5)( h6 \/ q( u7 @5 B# ~. \9 k- P' k
bgB = '0000' + fadeOutColour.substring(5,7)1 ]* W9 d; r/ @& R
currR = new Array(numLinks);) v: {4 G. {4 u t5 ]' z
currG = new Array(numLinks);' t7 e9 N/ z0 o6 F: E' {! R
currB = new Array(numLinks);& { u& j' d$ o
count = new Array(numLinks);3 f, d T8 `7 y6 w# a; U
fadeOut = new Array(numLinks);" i* g) v/ ^, A
continuous = new Array(numLinks);' c' t$ Q/ ]" W. X% V
newColour = new Array(numLinks);
9 }9 \; y7 s6 B# J# o; h tID = new Array(numLinks);- y8 b% T# u1 R" S* G
redInterval = toDecimal(bgR) / numFadeLevels;
; I) ~2 u3 V# B) k5 L3 t2 D greenInterval = toDecimal(bgG) / numFadeLevels;% F' G' l4 w) D4 v
blueInterval = toDecimal(bgB) / numFadeLevels;
" U- {8 A8 m$ S& ]' h initArray(currR,numLinks,0);0 `+ n% g+ n# K9 Y/ `+ O: s( I$ |/ ^
initArray(currG,numLinks,0);
6 U8 O$ F/ i q# I initArray(currB,numLinks,0);3 a m) y; x- y
initArray(count,numLinks,0);$ b, T4 ?5 N j; L% Y
initArray(fadeOut,numLinks,true);
4 {3 h$ w! y4 c7 M( b/ O/ f initArray(continuous,numLinks,true);
" [- ]5 W( P+ B5 n( z}
T' K# O) R7 |8 s5 {- e+ Nfunction startFade(id)
# h$ C" G9 P A5 p* a2 n" F{
, T: M- i8 w; C' {2 ~$ H if(fadeOut[id] == true)" z& M7 q7 B- B. L- C$ J
{ /*move colour towards background colour (increment)*/
$ c6 U% a7 i5 }# {4 S currR[id] += redInterval;
: Y, t6 u* I9 V: H& [9 c# f# w7 M currG[id] += greenInterval;
# J1 u* [$ S) f; a4 F% K currB[id] += blueInterval;9 e o9 Y0 ~# K( A, R/ G) }5 T& N
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 a( v q5 d3 J' I+ e if(++count[id] == numFadeLevels) f# I0 \3 ^% ?6 j; L, e* W1 ~7 l' W
{
4 z ?0 a" ~& h. W, ~3 T fadeOut[id] = false;
7 |% ?) B& A7 {6 y }0 L! G; V5 M5 g
}1 r$ W( }1 ~7 U# a9 z" H
else; q* V& `1 G* F4 K V" S2 l7 l4 t
{/ ]3 Q& H, d- ~+ y8 g" q6 J
currR[id] -= redInterval;
. \$ ~ p& I; F$ t; C2 A0 E& l: T! F: Z
. I4 s+ k \5 g5 h% v* z currG[id] -= greenInterval;
7 i; N! d! M8 t, J: O3 q, w8 o1 s
currB[id] -= blueInterval;
7 B3 ?3 A6 B. c" C$ V H/ d- V8 \
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' e% H9 N4 g* K
0 q. H! y/ a# s7 ?6 N' g* G
if(--count[id] == 0)
2 C' f7 R- w$ X2 R* |% d }6 @! [
9 V3 E' G( g4 T5 `* N {
2 J: y* @2 g+ E. f1 m! ?! M3 W1 P/ H& c" W: m& c2 q$ I3 Y j' Z
fadeOut[id] = true;- b$ r' A. V2 G/ c( H7 @1 F
0 K/ p0 _5 w4 T% D' i& g }
/ V+ d- |0 }3 ?2 t: [7 b# C* N9 I7 R- D ]! d0 ~
}
4 q9 F, j# j8 _1 c# ?& w1 {- i0 V$ }3 w; a, Y
if(continuous[id] == true)" {3 p1 s7 {! X1 R1 ?
4 ]5 Q5 r* B' f" L) s5 ]6 p% X! x {) T( b3 O, u: c3 X/ Y
3 l; d0 S& k% h3 _2 t
document.getElementById(id).style.color = newColour[id];
1 L8 P* @8 G3 M1 v B6 h; H0 w6 ~. Q: b0 D% r
}
! A' a r3 C4 s9 n% n Y* m! o
1 K8 w0 `! ~, K. c else
2 N( g) o2 W# i. `" E' B8 M) S5 b$ J% f" q6 M; f$ u, M a
{
/ v% \5 m) ?* q2 b, G
1 v# ^1 \% v3 {; ~3 U document.getElementById(id).style.color = hoverColour;
' m+ O& E7 S5 v8 ]3 X) I/ k* f# o: Y( l: Q L3 l# S7 k0 ?+ }
}
& k9 \$ _: w$ X
S {/ y% b. J: X& F clearTimeout(tID[id]);2 `/ l4 _6 }2 ^2 |
3 F" Q* c$ N4 y8 E" J9 z tID[id]=setTimeout('startFade(' + id + ')', rate);/ q7 Y# s x5 U& w3 a4 m
! w/ U0 G$ u8 ]: x( a
}
. H! ]0 u, ^* d, E+ Y* X" f
* f2 D5 e; Y5 U- l6 G" mfunction continueFade(id)+ `: m" z0 s3 |
8 X) L) X0 {0 D+ L3 J: B8 P7 c5 c
{
9 c' Y: E$ B: @, u4 l5 `, D" e6 R4 g3 F
continuous[id] = true;$ j" R0 y, M1 s; D+ {) f6 { Z
9 r" ^# P/ ^: i2 i8 Y}
9 i8 G& \, h5 P; a& G! h
+ I% `1 j2 \5 Y2 Dfunction stopFade(id)! `* h0 K* F# r( d2 m
9 X! W7 ^( f! ~# d{
2 w' @) e, U* T6 ]' J4 {- v6 r
6 _- `9 d/ i" V* S5 c continuous[id] = false;
8 D9 Y; N' T; `9 \) c' h' j
. `3 L! `* Z+ ?- @9 ~}
0 q3 ^% x2 X' I6 b" N1 ?
& Z4 R; Q( o; l% Dfunction StartTimers()
$ @7 f9 |: y8 W; [( x- v( K j
: E1 x- I1 H; O% ^4 ?+ M3 q{ //set up an initial set of timers to start the shimmering effect
0 O# h! b/ u$ o) W' e3 m- _2 @( n B1 f. D
for(id=0; id<numLinks; id++), d$ ]: f3 \* |0 Q' l3 o: n4 \
( w: M2 H' ?* h4 x) V) w6 [# F$ H" } q
{9 d4 R/ D0 Q$ b: i0 V9 m6 i T
S) A2 s2 n9 O! n& D- M t=setTimeout('startFade(' + id + ')', id*100);- P0 V9 w l' Y/ q9 a7 l
: O9 q# q9 w* J: k! G
}
7 V' R# {( E# Q7 P+ g' S; c/ r9 x( n0 I1 `; I: c
}$ K p% H' d1 j) a9 U
. Y3 O6 O+ I$ J; r
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 g7 ^. O2 _5 L7 Y) {+ ]+ h
: y& X) _% I% J& m* U4 N; G$ C* v' minitLinks('#FF0000', 6, '#FFCC77');
4 p% t% G B% U) O# J9 v5 l8 p& k" e/ L t# R' }- y6 M
//-->
9 v; ^7 g' P5 f7 M) S# h+ W& x; C0 O1 ~5 x" k# D8 P
</script>
+ D9 p$ g" V, l" a1 Y; e5 ?<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元7 H6 z% y0 |4 b- b1 d
</a>: Q# \6 B2 h9 q& d! T, |4 _
<br>
+ A. N3 G+ m# w. e* a4 ^$ o+ `<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>, L; w! B$ J1 N1 s6 D0 G% |6 U/ l
<br>5 w. B2 }! \+ h( G# E
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>- M6 V9 ], j6 E/ e7 M: L3 t
<br> ! F' D0 x: w$ }( F
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
+ U8 g" H- V0 Z0 Z3 p<br>; b+ \9 K7 S* D* T T' }/ l3 C
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>* v- P5 T- h \0 \& J8 q7 _
<br>& z% d0 P- Z' T! z0 Q
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>9 i9 x8 M" j3 Y, _; s
<script language="javascript" type="text/javascript">. F0 w6 z% ]8 @% e* w
<!--( k& o) X f1 T) v3 Q# J8 N
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 d, u2 @ T. g+ ]//-->( a4 T3 Q' _8 m6 q% J& g$ }# u
</script> |
|