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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">0 w0 ^5 e8 X( t: V) I# v; i
<!--
# d6 s& |+ Q: _, U+ ?9 d4 t# @. _// convert a single digit (0 - 16) into hex2 N6 H4 d L0 W+ c; Z% m1 Q' o
function enHex(aDigit)/ ]3 u/ T- }, S# e
{; S; i0 O" d8 o5 x Q/ D6 L
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
9 Q# ]& N F/ l \}) Z: s: ~/ J0 o2 j- r v4 T
// convert a hex digit into decimal; ^. U. _3 P6 S0 ^
function deHex(aDigit)
- v& v# X, Q9 S8 S0 ]4 q0 t{* e4 p- q( R$ K. K7 q
return("0123456789ABCDEF".indexOf(aDigit))
F" @* e9 e/ S+ J$ n}( w" K: U+ h/ Y: W. F Z
8 y" E ?. t) g4 B1 [" h' Z
// Convert a 24bit number to hex
( p2 {4 S5 n/ ?function toHex(n)
- C" T O4 s( z6 ]5 ?{& }2 v' E- }& x- X; T" \
return (enHex((0xf00000 & n) >> 20) +9 I b5 Q7 s9 G$ a; }; b' ?8 r
enHex((0x0f0000 & n) >> 16) +
1 y! c0 {. c$ D% p& e, w enHex((0x00f000 & n) >> 12) +
- w; o! C: h( S& Y1 l enHex((0x000f00 & n) >> 8) +
) q. C2 i0 ~) s; E, _$ V enHex((0x0000f0 & n) >> 4) +- O! L, A; Y* B' c& w+ g. S6 M
enHex((0x00000f & n) >> 0))! R# G9 r1 [) k) t
}, e" n' n. _( z! ?3 X S b
// Convert a six character hex to decimal+ s; D3 x: k& s' J9 a- S4 L
function toDecimal(hexNum)$ w8 e- W3 }. L. g
{: w! n4 \" v+ t) g. N7 H* V. n, @
var tmp = ""+hexNum.toUpperCase()
) a1 v/ |' V: D( f, V! D while (tmp.length < 6) tmp = "0"+tmp7 X; R" a) M( p" r: B% Q/ _
return ((deHex(tmp.substring(0,1)) << 20) +
* V3 M5 g1 q8 Q8 { (deHex(tmp.substring(1,2)) << 16) + - b- w! v+ r0 i5 |. _
(deHex(tmp.substring(2,3)) << 12) +
" z+ I* T7 ~6 Z: t/ A (deHex(tmp.substring(3,4)) << 8) +& S/ J3 d+ e) {% }* s/ P
(deHex(tmp.substring(4,5)) << 4) +# q5 \$ i7 @* Y+ b' B; m
(deHex(tmp.substring(5,6))))" L, [6 f. T) g( Y2 H& B8 H
}
8 h. x3 \* C; r# |5 b///////////////////Shimmering Links/////////////////////
4 q3 R: X0 i' T! W5 i, ^; y3 I" C//global variables% r$ W; O3 m- l
var hoverColour. n5 C/ Y) `* E
var numLinks;6 f- J. n2 k# }: o
var rate;6 Q; a* Z0 o4 |8 N
var numFadeLevels;
: @4 |" ^" b% d9 @! i: J2 Xvar bgR;& D4 l9 T( F6 m! Z# S
var bgG;
' G, Z3 P f; V O: }* fvar bgB;) `. d/ T9 T! o$ c* r
var currR;
$ o/ _- g( }$ o$ L- Evar currG;% o, F) h! m- {0 r! `
var currB;/ M: k' w: X4 J# q% M
var count;
& W3 Z* |9 z4 G8 gvar fadeOut;
2 n% w( L4 O, r5 s* ^; B, }7 Ovar continuous;9 S: R9 k" H& }7 r
var newColour;
5 Q. v$ J2 j, @$ B6 I/ J* m4 ovar tID;3 B6 m$ I; g$ ~ @, Q4 O
var redInterval;
: a# n, `0 I! W N" gvar greenInterval;/ I r* Q( ]% m: H+ ~: X! |2 n" D1 R
var blueInterval;5 ]+ n9 G1 N1 g; X. H: L
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 {5 ~5 H! ?$ j- V" H( v Q+ x# S# a{
) O6 P/ B5 `- j$ E hoverColour = mouseOverColour;. \+ }! p0 X, s$ a( ]
numLinks = numberOfLinks;6 i, u7 ]8 M4 b: f
rate = 1;
% j4 h: M5 P' w, M! u numFadeLevels = 30;$ I5 |- z" f+ k; c, C/ [
function initArray(theArray, length, val)
; p! J# Z4 H! s. h {( U3 P) v F: v( w9 o& C2 v# }! q: g$ e
for(i=0;i<length;i++)
, l* @! W$ ? W" `4 J8 x {
( t' M/ G* C$ ?8 V1 n, [. @ theArray = val;* q( e) \- D6 @! ^ H5 S( d
}
+ O6 D% }- k( g0 _0 Z }
: a$ Q" |1 x2 I2 b9 a7 d bgR = '0000' + fadeOutColour.substring(1,3)" U8 U$ U3 J( t3 n# Q ?
bgG = '0000' + fadeOutColour.substring(3,5)
% a/ ^( D! g. [- Q9 S* X) u bgB = '0000' + fadeOutColour.substring(5,7)
) Z; ^- P0 ^7 M- f currR = new Array(numLinks);/ j, t$ `6 P; X3 F) ]
currG = new Array(numLinks);
H& \8 J7 I+ }/ O currB = new Array(numLinks);
0 O# Q3 p1 ?$ }1 [* ~0 x count = new Array(numLinks); f/ P& O" r' ^! e
fadeOut = new Array(numLinks);- \6 g4 {) Y4 W/ \0 K* {, [3 K9 Z2 m
continuous = new Array(numLinks);
; H/ E% X2 ~% S( ~( ? newColour = new Array(numLinks);" \! i9 n; {& z/ k$ p% Y; K" C3 K
tID = new Array(numLinks);/ S7 u/ P, `: w7 C O( @
redInterval = toDecimal(bgR) / numFadeLevels;$ b" H4 v8 n4 T; i4 Y1 m: q/ p
greenInterval = toDecimal(bgG) / numFadeLevels;
7 T. `+ W7 ?7 P& D. r blueInterval = toDecimal(bgB) / numFadeLevels;
7 [- Y* a! D {! g) ?/ _, U1 q0 v initArray(currR,numLinks,0);) ~3 j+ S9 C) j3 g' m. G
initArray(currG,numLinks,0);0 ?2 [/ s, n# `9 ^
initArray(currB,numLinks,0);) @' \& j8 Q8 } r8 ^/ h7 c
initArray(count,numLinks,0);
/ A2 c d5 @1 N) D8 E. q( F initArray(fadeOut,numLinks,true);
* s% n0 `9 [ Y0 G0 V& v$ m; w& v initArray(continuous,numLinks,true);' b: A! m( K- c" R9 F# \
}
: [8 a) P1 V7 @' B+ r9 Hfunction startFade(id)
/ ?1 S: o7 `0 }& j{
+ F/ l' Y0 z& q: X0 `3 v if(fadeOut[id] == true)3 F. a0 w. y" t* w7 G1 k4 ^
{ /*move colour towards background colour (increment)*/
3 i* V6 l r6 X6 D* ?& \ currR[id] += redInterval;
# ^$ j7 P6 p: B# J! d. r+ A currG[id] += greenInterval;* S! O9 y' `6 G# U+ r1 b2 }
currB[id] += blueInterval;
! _( }4 e3 W4 d" n: o! C, B newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# w9 f' R, i, e* I4 V if(++count[id] == numFadeLevels): v t4 u# }% b. g+ O
{
9 _; m; o9 B; X- z fadeOut[id] = false;
?7 @2 u* q! ?4 ~. @+ n7 I6 a6 Z }9 B5 i; @; c f8 D. z
}
7 L- u- u+ d! \+ V else
9 F- ^0 G5 t% [) ^" S% a- W. i {
/ J" T+ R" }" T currR[id] -= redInterval;
. ^2 q; Q: d. y8 }: k% o5 \: _5 t, W( A. X
currG[id] -= greenInterval;
% Z; X' m6 p( ]) @5 o2 ^. X9 M! u* c- W
currB[id] -= blueInterval;( {( m" W: T! O$ c
) f, D, K' z# e( y) Z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: n' G) m6 j' B, U, n0 d6 U4 \: I
, m S1 E$ E3 W) `4 ` if(--count[id] == 0): H) Z, h+ J! B! c+ t5 h( D
; ^, ]9 A5 z7 v. W% W) b/ B( M. b {
% v+ q3 f4 p3 t' f8 p& b C6 E! n# V0 K2 y* s! s% u
fadeOut[id] = true;5 w' J9 s* N" U9 o0 K9 r: m
, f3 M! T3 w: M. @2 U }
0 J4 V- B* B, g: U Q. E/ R* d9 v) q6 K. x! z% G
}
* k( n/ p0 S7 Y0 S7 a+ c7 W5 g) q( [* e9 F! i( }/ y
if(continuous[id] == true)
) Y8 ]' ~9 p$ u( q! ~5 H; `% S$ D
$ U- p( r9 ]7 l' x/ `' G {; ?9 e: S& t/ |) U1 G7 j
# L, `2 X, Z: N, W% c document.getElementById(id).style.color = newColour[id];
$ E4 @. i- L& r, ^
7 r$ {* B& F" |' Z }
" P5 F* r# a* N v l% N2 u
( H! }8 h( W: n1 V else1 ]7 Y; J5 E0 ^( k4 q
' V6 [: K7 |( ?2 e
{% v/ V" M- `9 c
, x" K3 u, I" V& C" w/ R+ X document.getElementById(id).style.color = hoverColour;7 z& z ~6 N: m- V
: H/ t+ S4 z5 @7 e% J0 M6 Z
}# Z: \7 }* y0 h
9 y' h, U/ b/ p$ l( z0 i& T# ^9 S
clearTimeout(tID[id]); h7 L1 D) Y) F- P- ]' z: T" Q# u- F6 ]
% S( I! [/ Z9 S) _% K
tID[id]=setTimeout('startFade(' + id + ')', rate);
2 F6 z6 L- @2 a! E1 J* t
- T$ }! P2 v8 q; T3 X( j, o}
* T5 B$ V/ G, x* M: k# U4 e g( f! {# c9 \4 U, n _
function continueFade(id). X1 ~5 q$ i" y# j% i4 J u2 T: n
. j! Q1 ~' J' s+ l
{8 \3 m8 p2 _1 S' \2 G
* [2 s: \1 p% @8 n' M1 h9 M
continuous[id] = true;
" X: u2 i5 e! @1 G- U) @: h }
& f: |, \$ g9 P9 v: X}
L, q, ]5 x0 j) Z8 T4 P
0 Z4 R. c7 Q) D% f( X4 efunction stopFade(id)3 l9 d( P: n% K8 o$ J
5 y; p; H* j. y{
& S. M8 \& \) \* ~4 b" V& g
8 e" F# W, y# D; T continuous[id] = false;
W/ ]7 o6 q% ~
6 a) g7 ?( C8 q}
1 G, d, O" n; ^% p; a) }( C. z y+ W3 u, d
function StartTimers()( V* C! u+ c" S, G& k" a
7 x! y' z+ k6 \. a/ F. f( s9 C- N
{ //set up an initial set of timers to start the shimmering effect. w% t8 ]- c. ]4 r
5 X8 M L& f/ }& e$ J; Q
for(id=0; id<numLinks; id++)
! X9 G' ]+ s' F" ]8 w e4 a# n7 [9 z3 h t+ w; i6 |" I
{5 K5 K+ w9 J/ W6 q' z& m
8 `/ R! @3 z/ H5 ~
t=setTimeout('startFade(' + id + ')', id*100);0 B. F/ [ U" T* H/ S3 }2 Z
* t6 P8 s, y) C! _ }
: w2 u7 y7 ~2 V7 d# h8 l1 C* T/ M- m, `) Z5 I" G
}
& T5 C# K' [0 |) K/ q1 p3 n3 G( }8 o9 z1 k8 _6 L9 K
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
4 F; K; u1 J0 S0 u) b5 _6 J* G( S4 A; `
initLinks('#FF0000', 6, '#FFCC77');
2 L; T! ?* ?- o- o+ K' H
. w/ q5 l4 ]5 m$ Y9 g% Q W//-->
) v# e/ N8 P- h2 z. [ n6 n
$ c1 r B+ t* z: K</script>
v) W) `0 Q: J* i. b8 g<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
5 l; g1 u2 X# h7 r) @7 t% C</a>
- Q" @% k& J. | j6 h% G<br>' ?1 k2 e+ n9 e) F5 w# w% B; `# E
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>. f, z7 Z* s( Y& p
<br>3 |( J2 P3 O! Y" F# C2 ?* c6 |! N
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>+ T0 D6 T8 R2 P% M6 j
<br>
8 s- I( L. V# C8 j<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 i+ W5 l0 e7 h0 U
<br>
1 o: p( H, L) S9 I, U: }<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>% g" S: Y" @1 Z$ ~, u
<br>
- E% r( G/ P4 y; x/ _<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
& d2 V, [7 n8 Q4 r z3 c2 d<script language="javascript" type="text/javascript">! x2 {, b1 u% b5 h& X0 B
<!--
+ W" F( U; w5 ^, MsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
$ k( U B1 {) j8 Q$ h5 ?//-->4 }4 s3 p( ]% X Y! N q
</script> |
|