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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">7 y- ^& j& {. c F% ?
<!--
7 ~: B, W' }, W// convert a single digit (0 - 16) into hex: i, g$ p& y' q! \2 X
function enHex(aDigit)
+ N$ K+ x6 v9 _{8 e6 f) j7 h) n9 E! T+ K' S
return("0123456789ABCDEF".substring(aDigit, aDigit+1))( N) H4 z! `6 |. H
}! y ]1 G+ G' ?
// convert a hex digit into decimal1 @6 C) y4 u, H7 h% ^
function deHex(aDigit)! c6 ]9 y0 w7 K8 Y2 f
{, s4 d/ q4 x/ N( ?" D: O3 R
return("0123456789ABCDEF".indexOf(aDigit))$ R# R! Q, y r4 V5 @$ l
}
, q$ H& l7 n5 _; W7 w. `: p/ Z% {9 }* Q, r
// Convert a 24bit number to hex
+ A+ W2 e( J$ [2 w( s2 Lfunction toHex(n)
7 j3 y1 ?3 r9 B* p{8 `! Y# P: ~! i4 J* c0 i5 @, N8 ?
return (enHex((0xf00000 & n) >> 20) +/ u l- E& b# x: Q: G
enHex((0x0f0000 & n) >> 16) +
$ u# ]0 o3 v* h% s enHex((0x00f000 & n) >> 12) +( m% S9 k" q( ~# o( F
enHex((0x000f00 & n) >> 8) +
6 X: T8 H9 ~- i, O8 Z enHex((0x0000f0 & n) >> 4) +
8 l; r+ C5 f0 d enHex((0x00000f & n) >> 0))
1 e4 M" }' k- }" \2 n: n}
. X T, o n& R" W) U+ S// Convert a six character hex to decimal
0 x2 L. G* A& L6 K% ]function toDecimal(hexNum)
: w2 u I; B* s: q4 M3 _ m, m{
; p# w1 _, j; b% p' t$ \ var tmp = ""+hexNum.toUpperCase()
# a! B, L7 \# h9 ` while (tmp.length < 6) tmp = "0"+tmp; g- a& `3 M' f" [) n+ {( g
return ((deHex(tmp.substring(0,1)) << 20) +
6 e: j' i0 I3 e" K- f; Y) } (deHex(tmp.substring(1,2)) << 16) +
& m+ \6 F, S3 a; [- c4 R; k( @ (deHex(tmp.substring(2,3)) << 12) +9 p, _+ E W% m
(deHex(tmp.substring(3,4)) << 8) +3 s/ d& M6 [. z6 p, s$ [% e- e
(deHex(tmp.substring(4,5)) << 4) +
4 j/ B) B7 _6 k5 J: U4 k (deHex(tmp.substring(5,6))))
$ c+ C7 g8 y) t' `/ U0 d}
8 O. [2 k5 w+ i4 E( k2 u, J+ R///////////////////Shimmering Links/////////////////////+ g( y5 V: l! x5 y
//global variables
* \* R4 K1 v y8 ivar hoverColour
6 D. P& _7 Z) Kvar numLinks;: v+ r m% O& S8 F% l% W
var rate;
; n) M( s8 S2 Jvar numFadeLevels;
; v7 g) ^8 b2 m: `var bgR;
- \2 o& L9 v9 t/ ^; ]/ i% W6 Gvar bgG;
4 W, @# s5 ~5 }2 n. |var bgB;8 \ s* `" C$ N% F4 q9 W
var currR;
; ^- _* m8 ~7 }3 L @5 mvar currG;
% A" I8 V) F7 u( Uvar currB;$ x$ ^7 v" S* `; J+ d: v
var count;1 b1 u, E! {' P$ U
var fadeOut;
% g/ `% p0 g e6 dvar continuous;
7 l; n! {2 E8 m% c4 E9 A! [var newColour;) P) ^' l- P, E; }" b
var tID;
7 O' S6 v& N: u8 N' l7 N, A g' F) Jvar redInterval;
0 c ]0 {/ |- \/ n0 _var greenInterval;
0 [1 Q3 l+ B7 E; Q+ m1 M3 ovar blueInterval;
\4 S2 C0 a2 J: Xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour): k5 ^9 x2 }- G9 i. L2 S
{
- ]4 u. Y: Y# e6 i hoverColour = mouseOverColour;+ R7 T! ?8 R9 F" ]. l; \9 r
numLinks = numberOfLinks;8 h1 d/ ]' \* {; m0 o9 G2 t
rate = 1;
! @* q4 k+ y4 s/ w7 v6 k( H v numFadeLevels = 30;
: F1 U; v1 D2 w. r8 W/ @# Z function initArray(theArray, length, val)
2 E1 p( m u( o! V {4 G! C" @( T4 }1 M! A! l F" n
for(i=0;i<length;i++)! Q1 x1 m: W, y
{8 a: k( w, `; |( ~/ h+ k( z ^; B) ?! }
theArray = val;
+ y: y2 x$ Z) m5 A1 T }
3 z+ o a1 }3 G) u" h7 n! K }4 j6 s' O4 E+ e
bgR = '0000' + fadeOutColour.substring(1,3)3 i# J& N9 a D8 G% m% c
bgG = '0000' + fadeOutColour.substring(3,5)
# N( b* f7 }( G U5 M k bgB = '0000' + fadeOutColour.substring(5,7)% W; J6 F* W0 G' R/ H
currR = new Array(numLinks);- J0 L8 Z- \6 g R5 V0 G5 X
currG = new Array(numLinks);
# A1 t9 T, j, M/ Q* U/ M currB = new Array(numLinks);
F" F8 v. X2 g* p# M1 l count = new Array(numLinks);! }& d h4 D. G: r5 C
fadeOut = new Array(numLinks);3 K, b$ Q9 [! \
continuous = new Array(numLinks);0 m% M6 H0 @2 Y' J
newColour = new Array(numLinks);
/ L0 {7 }4 W$ n6 d0 A0 O tID = new Array(numLinks);$ W" C6 V/ R. E& L( m2 c2 T
redInterval = toDecimal(bgR) / numFadeLevels;! Q' v7 x2 r2 k7 l% l( M+ p
greenInterval = toDecimal(bgG) / numFadeLevels;$ E @, d* |- b* r6 B0 D
blueInterval = toDecimal(bgB) / numFadeLevels;. d. a4 ~" W! E9 ]9 J# r& g
initArray(currR,numLinks,0);
' z( U; g" a+ k( I+ ?: A initArray(currG,numLinks,0);
/ {- I- n7 a: }4 \ initArray(currB,numLinks,0);6 F# _4 Q5 U3 k7 J
initArray(count,numLinks,0);! \1 q7 r; x+ u+ S
initArray(fadeOut,numLinks,true);& o/ Z. L6 b2 Z/ s. x+ m
initArray(continuous,numLinks,true);
2 ?) m& X0 _/ G9 `# L4 |. c} ' I, D# K# d: Q1 m4 }
function startFade(id)( |+ X1 C9 B# ~7 |
{
- }$ @' w5 A! ~4 x" K1 C: n" k if(fadeOut[id] == true) P6 J% W! X6 d2 w8 e0 O4 e/ }& n
{ /*move colour towards background colour (increment)*/
2 `- z2 {& l3 F+ V1 j6 y% g3 E$ b currR[id] += redInterval;
8 P7 [; v) j+ o% | currG[id] += greenInterval;% L8 G" ]6 A6 z9 S. k9 v
currB[id] += blueInterval;
- l) S5 o1 y2 ]* r. v- k newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
; u8 _1 y. \( z if(++count[id] == numFadeLevels)) W+ \5 ?5 g! z6 J5 H0 d
{6 E# D# ^2 Z% Y0 d6 U
fadeOut[id] = false;
7 }9 P; I% J9 W/ m& }* r1 g }
, U/ [( q1 C* [+ D2 O5 f/ J }
% W, s% n, W$ U% ^. ^4 |4 H, } else9 q# ]5 g: R- C2 {7 M& Q$ N F
{
7 E" f; {) R, g currR[id] -= redInterval;7 v2 M" O! ?9 w# ?8 W
- \ Y) V& W7 ~# W0 [5 U
currG[id] -= greenInterval;
$ W0 m- s6 x+ `, B4 s0 ~
" t* v S K% ]8 @' J X- ~3 V currB[id] -= blueInterval;5 U5 l: i5 { ^6 L7 B( T
5 Z9 v% K- N, @1 d9 u$ Q1 M+ I newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6); c2 P7 S+ f; L5 S
# r, f O9 S. p- f( ^% x if(--count[id] == 0)0 K/ m- ^4 B6 D- ]& B% ^9 }" s' P
l" t0 |( O3 m+ @ I- f
{/ e$ o/ N# g' V9 V- u
: |9 r) W4 s7 m* K6 C+ C3 _ fadeOut[id] = true;
4 s, S$ \0 R5 O
: N# a8 r+ |; |: N# @ }, h) Z+ ~4 N. U
; v) S! @3 b# N( ? }. E; u% b+ x3 Z# T- Y
) Z9 ^2 h# h5 v! C
if(continuous[id] == true)5 I9 Z% j3 V) r0 G3 P/ @
& J) d# O/ t/ J6 M% E6 I5 k { \# B9 q) b& |. L8 U0 \
) @( l; o/ M; I( q& I document.getElementById(id).style.color = newColour[id];
8 Z1 Y! }8 R2 f$ e7 F
6 b$ _2 t9 d5 ~7 P" c }
- p& z. E8 X5 n0 o; r" f; D t. `% T% X( u/ p1 D
else
+ | ?/ @! n- r
, `0 M S7 _, m# c6 C" a* I6 d {' ^/ ]; N: K( V; Z+ F+ g
! l& z7 x' k% q( l document.getElementById(id).style.color = hoverColour;
) i: _7 k- G3 m0 |- G; s8 m3 F ?+ j& O$ w
}
: `( `! H& J [. T& }
. e. s+ q$ e3 D% \, Z7 S clearTimeout(tID[id]);% @- o9 a1 i7 r! p
3 A& H' r+ f1 j+ E
tID[id]=setTimeout('startFade(' + id + ')', rate);7 u7 a5 V. G" ?; d6 F _
7 f) e- `' d: A \8 _
}
) E7 A$ B/ v7 h) e+ Z+ ]
0 {- ]7 s1 m0 ^: b+ vfunction continueFade(id)% Q: T- F2 s; D- Z# }
9 T7 f& ]7 a- J5 e! B
{
- \% E. U2 u2 B. G, ]! A& ?: `: l7 F6 R- e5 Q* M$ |: T/ K
continuous[id] = true;
: w' E) T$ g/ E x% y+ B: y
/ a: T1 |- o% T: L6 h( H" I$ c}5 E5 n- @, W% ] j# [
4 H& k) C3 `( C" rfunction stopFade(id)) R1 ?# c9 ^3 T5 j5 Z8 ^
* e/ P0 G u* n/ f7 b5 `; T1 R
{" l/ |( \# H% z# h9 g+ x. F
$ Q1 H0 L/ K7 h continuous[id] = false;6 m4 N# [8 @- [- u8 m- m4 @5 b
: f. H9 q4 H& p) B1 p" r}4 L% v$ Y+ o; C% ]( w1 r
; K0 i# W. p1 R1 T' wfunction StartTimers()
% i5 Q% W( W. T" D9 y. N& ~! E3 ?. ^4 ~7 Z% l# M9 D
{ //set up an initial set of timers to start the shimmering effect
8 D5 `' s: i1 w9 U$ J* I% S2 `' f
+ W$ y- _1 O) s" { for(id=0; id<numLinks; id++)6 X; O9 Z7 H) N& ?: [
" y2 @( D4 U; b
{% U, C+ f( ~* |* B
6 k! W! _4 O8 B6 d t=setTimeout('startFade(' + id + ')', id*100);
& k" Z# n0 ~5 z0 o" v" Z( R4 K
& A' T1 T7 I& l6 C( i- Z7 O( g }
& ^5 Q M6 C' ?( H3 v$ j
6 d4 L/ y& ]% i: m5 u2 X}
1 _- w* \3 G3 N9 c" `3 B% W- n* m, K) Q0 ~" Y
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')$ c: K0 ^- h8 n( e4 W1 D
0 Y' n3 E9 n7 Q( p+ u
initLinks('#FF0000', 6, '#FFCC77');
4 X+ f8 x" C( \& F4 S* Y* V' N; m( G: ]7 ?
//-->" F. l' I5 Q! Y. l+ P
6 ^6 d3 l$ c; [& k0 \+ Y) ]% ?
</script>
5 e5 l @# a( P, `% p7 Z) w7 |<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元9 D7 s; V- a6 @* e8 V* M
</a>. O4 e! ]! L( S$ x& K
<br>
2 w# ?! X: b3 ]' i+ T; P+ J y: ^<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
; ^$ z1 _$ L' I<br>; Q7 a; ^/ |4 Y3 R: m
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
\8 r* g) d; w g<br> , u& P: T$ t; ]: o' ~3 C6 i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" n" A& W% q! D" n7 L5 h
<br>" ?$ ^2 Q# B& Q* C( Q$ o$ T
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>1 l$ ` x7 p! e
<br>1 D' _6 P8 N1 W4 J* B: ~
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 T' o0 P6 i" u0 v( f<script language="javascript" type="text/javascript">; ]! F) o$ m1 B2 l! B% ]$ A
<!--7 I& D2 W# X/ g) E
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* L3 t2 _+ ]" c, c
//-->
4 F* }8 m: w! R& o d& X' ]</script> |
|