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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">% H1 {" a- o. S' W5 Y
<!--
a: `3 y6 \! a7 K2 L+ w// convert a single digit (0 - 16) into hex
~( Q9 U2 g4 _$ |; }% R0 Nfunction enHex(aDigit)9 ]1 y" Z8 n9 T4 {0 c, d
{
+ ^% S0 H' C P3 X return("0123456789ABCDEF".substring(aDigit, aDigit+1))
' r: U- c$ q, o% _- V}6 x$ b _' I- t, c0 t
// convert a hex digit into decimal) }5 Q0 x& b8 n; l
function deHex(aDigit)
k& s- x% t& j5 h! X3 R! j! C% u; [{! j/ P1 m, u0 r% u
return("0123456789ABCDEF".indexOf(aDigit))
# n* v6 o* K6 n$ \0 h}
, z; g# C; Y$ W' |1 N, j5 h; u- {
, @- S; W! Z5 N, Z// Convert a 24bit number to hex
, i. a% B* R1 x V3 H: |$ k' o# ufunction toHex(n)
1 K' w' E" n8 w{1 I5 x( m5 `& r& D8 f9 i
return (enHex((0xf00000 & n) >> 20) +
! M4 O ?( E2 Z9 u enHex((0x0f0000 & n) >> 16) +
7 Z( {3 J& @" s/ W2 p: F enHex((0x00f000 & n) >> 12) +
+ S2 G9 G; ^. Z9 T3 M1 O enHex((0x000f00 & n) >> 8) +
( a9 n2 G! U2 o0 f enHex((0x0000f0 & n) >> 4) +
" w; s( C& i' {. V: U- t8 Q3 d enHex((0x00000f & n) >> 0))
* s* |" k) N3 [- V6 n0 A}
T- D. u' c9 \7 ]- H// Convert a six character hex to decimal+ B% ^2 j+ P7 m5 `0 `
function toDecimal(hexNum)$ N4 W' x6 ^% R6 t
{
4 {, T: k8 J# B9 |5 M var tmp = ""+hexNum.toUpperCase(), q& K1 H0 ^ U/ B0 s* Q) h" v2 X
while (tmp.length < 6) tmp = "0"+tmp
& n$ u1 r$ [. a; B7 S8 h return ((deHex(tmp.substring(0,1)) << 20) +' s# U7 T* ^5 o _$ r% L
(deHex(tmp.substring(1,2)) << 16) + : p/ @! Z6 o! U7 {# m
(deHex(tmp.substring(2,3)) << 12) +
3 m; J9 q+ X* m. ^$ U2 K1 o (deHex(tmp.substring(3,4)) << 8) +# o. s9 i: O/ k& i! | y' I
(deHex(tmp.substring(4,5)) << 4) +2 D8 }" m3 r7 y% @! H) A
(deHex(tmp.substring(5,6))))$ o9 Q: k+ \- {% S
}
- k% m$ i! X8 e4 K5 ]) V5 | v8 Q///////////////////Shimmering Links/////////////////////
6 m* Q+ D* r8 U% h) U. j0 m4 u//global variables v/ D( G9 w6 k+ ^4 _7 a1 g
var hoverColour( b2 e! a+ l$ V8 r* E* k& \6 w
var numLinks;
( p) Q* j* U6 B+ w% [- G! [var rate;
3 f& Y/ T5 c" X7 E; E! x! R" \var numFadeLevels;
9 G- n, B& @( u6 ?4 p3 gvar bgR;
% h* c0 M) _, ?( F6 u0 @var bgG;- Y e7 G( z. h: j" P
var bgB;
/ [1 I# D0 G2 E' @. j; j: Q" O/ D" Nvar currR;
# n) e; T* W4 `1 ]* ?; e( Jvar currG;5 f* c$ m, M/ f' N Z
var currB;* e. O# [. o, f+ v; x; k0 v& _' T
var count;2 E e! Z7 u3 W, R. ?
var fadeOut;
8 @) n, a9 M7 ]- o: p) ?var continuous;- |7 r. N1 n8 ?$ j
var newColour;
7 V1 @" y& Y, \7 C3 m1 z: G0 uvar tID;
# `2 ]% P W* W! m9 M4 mvar redInterval;
# ?; C- q9 N) o3 ~2 Xvar greenInterval;$ w/ M# S3 z+ d f% t9 Y' ~/ O$ b2 g
var blueInterval;
& V& X' K* {% M+ [function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)5 I4 i8 C9 b, c0 y
{6 ?: O' z8 s" W1 o/ N
hoverColour = mouseOverColour;% Y$ ~4 k( K. A/ \$ y% K* n4 j. ]
numLinks = numberOfLinks;7 ^8 i, b7 P, ]% A6 X
rate = 1;
2 P1 k# W: [7 D& V3 ~6 W numFadeLevels = 30;
: k# ?; h! J- G8 k0 t: x function initArray(theArray, length, val)8 v% g$ L h. F! ?1 S
{8 J! w w- I; w
for(i=0;i<length;i++)6 y5 m: |# R( W$ q" [+ ?% k* y: T
{
" k1 w w. ^' n- T* E3 Y( f- z theArray = val;% r- y6 D( R+ S
}
* z: R# p1 y! z# s }
1 m% o. J/ F: `1 k" f bgR = '0000' + fadeOutColour.substring(1,3)
+ U/ ^) w" t* @' N+ M bgG = '0000' + fadeOutColour.substring(3,5)
0 J% M3 J3 G0 [$ y+ g' v" { bgB = '0000' + fadeOutColour.substring(5,7)* Y. \7 Y' i4 u+ T
currR = new Array(numLinks);, N( a6 x% X$ `2 P" W* G+ q
currG = new Array(numLinks);' j4 d% Z0 {6 \! d5 H9 M% T
currB = new Array(numLinks);" d. T! a- @4 y* U8 C. V+ t
count = new Array(numLinks);
& q8 V/ e. w, a7 n0 f3 S# ` fadeOut = new Array(numLinks);
K" O7 _/ Z$ f" l9 K1 V, N continuous = new Array(numLinks);: _5 q6 O( D. U. Q- ^' t. B9 Y
newColour = new Array(numLinks);" X M8 J( o9 W# J2 c
tID = new Array(numLinks);
0 i t- e3 M8 V8 X( u9 n f redInterval = toDecimal(bgR) / numFadeLevels;2 s& {+ p4 {& ~/ U, t* l
greenInterval = toDecimal(bgG) / numFadeLevels;; X1 q& P) B/ f* H& i/ w3 S3 S+ T
blueInterval = toDecimal(bgB) / numFadeLevels;8 M& X( ~1 {7 F! z+ U! k# }* J
initArray(currR,numLinks,0);$ w2 |. T _9 E# |! B
initArray(currG,numLinks,0);
; e7 [1 W8 t& G7 d1 [ initArray(currB,numLinks,0);
0 o! g! Q# K. A1 w" h2 a initArray(count,numLinks,0);3 h, G% W! M1 h8 [
initArray(fadeOut,numLinks,true);: ?# s. p: ?1 G* K
initArray(continuous,numLinks,true);
- p4 l6 ^; ~/ k; I& |8 q5 {9 l$ |" D: P}
9 n q+ e$ ~! k- f' ]) ?6 ffunction startFade(id)
5 @+ Z# p; } `; U{0 R0 j7 ?: q8 @$ l! Z5 \
if(fadeOut[id] == true)
- E- j+ r% ?; t: q; ^$ `6 l { /*move colour towards background colour (increment)*/
3 f' Q# c% K2 C. e9 W t currR[id] += redInterval;! p M" p+ Y' v+ ?+ g
currG[id] += greenInterval;" i, V6 j3 Q. G3 |% H- o" \
currB[id] += blueInterval;
; s- y+ W; Y5 H/ a u newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 g9 C+ J% d7 F3 I( K5 K if(++count[id] == numFadeLevels)5 ^7 k1 L) ~* ?; J( w0 `
{% c8 q0 ~, Q( B H; ~
fadeOut[id] = false;
5 @" @; U- Z8 k3 p6 o }
* n% s9 R6 _( l+ |& ` }
, N# d( ]( d8 t# z c else
2 N1 ^" T' X6 T { @6 `7 I* Z/ K
currR[id] -= redInterval;& o N* ]# ?9 C
; z9 |" T4 K: I( J2 V8 \
currG[id] -= greenInterval;
% w$ X9 @: j' q
1 K$ p: `$ r+ A4 j currB[id] -= blueInterval;
4 G2 X' ^- Z$ R' a% n' ?
5 g# `3 g- c) F newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 C+ g0 I1 X2 c$ Q I
$ z) r5 G& J) i) J, S
if(--count[id] == 0)
$ P; J+ z. g- D1 \- J9 j* Q# _
H; g* v$ V0 i( g0 H# g$ W- C: k {
# R$ y, _- z! S' s& D4 i5 W4 m
H, q9 P+ M) V: d& k fadeOut[id] = true;7 g* C5 w! Q& u5 [
/ u1 ]$ f8 E/ H; t7 m: s; K6 w }# Y$ Y; N8 P1 X# G
& o6 k, [, q1 x9 Y( j8 z }' `. n9 R2 _+ n5 l
* q+ {" g! t* n( H$ u& G if(continuous[id] == true)
' Y9 Z0 P9 `2 I8 G
' @/ t0 B5 w7 M( j$ P* F V) ` {6 f1 Z1 _8 N) S% @
) D9 y1 n/ [8 M* A& d9 B; M' y document.getElementById(id).style.color = newColour[id]; . W |: N; A* Q: ? }- J- h0 f
- }9 }, f6 N/ M/ x5 d
}# O* [+ `. O" n3 l7 o2 y
4 e1 M3 d4 b* s9 A
else ]: V0 [4 Q/ j( E& @% C
8 N( _: N% j. Y& T5 |4 n, F5 s+ \ {9 N5 h# a6 p9 U" h/ } A H8 w
0 K: r3 x; {" I b8 A+ h4 W document.getElementById(id).style.color = hoverColour;
4 H" ]5 Z( Y! G& {+ y
6 e r) ~* ]; } }
0 t( R: b* s" b3 g+ F c% ^# M+ `
4 T8 f& \4 r! f! {1 ^% G clearTimeout(tID[id]);% }8 q0 {& }+ w) S
3 D" ^ E) c" V" A& T
tID[id]=setTimeout('startFade(' + id + ')', rate);
6 j) G$ Z5 a! }; w; l1 y& d3 v% V7 S4 z7 j* Q" F) C, ~ J. e( [% X
}$ d8 c/ |* K+ [, A, _6 n: f
* D7 d1 n: v, G" Q4 R1 B3 W
function continueFade(id)
D! T3 \& z* p9 w1 o, I( z
+ Q6 i+ [; u. a4 H{* i. Y+ B" g4 m' ^/ b7 S
$ P' G+ J1 F7 V: ^' O! @+ V4 ?0 [# V6 d continuous[id] = true;8 B: V# j9 `. E
+ [8 c; m ~, G
}3 \& n9 _5 _0 i; x
6 U. l: N; A4 B5 i2 u0 {! G- Pfunction stopFade(id)& ~8 w5 N- p3 o. M. Z
2 R' D* w) {3 h' @/ _2 N{' R C) l2 C% [+ ~
1 O- c( h7 y' k7 A1 h+ z% }+ \& S% m continuous[id] = false;
: j( o* B* @/ F& x: C! i3 p
+ G) ]1 Q5 c# |: ^}
4 g/ r! @) D. b9 L0 c& w7 v# T0 c+ a L* B
function StartTimers()# y0 T! C& H l( |2 e0 G: O! f; Q
! a& N& I& ]! |{ //set up an initial set of timers to start the shimmering effect; W% G5 z6 s$ o0 }
: s6 A0 X* U$ ?6 j: c3 K4 O7 k/ C. g
for(id=0; id<numLinks; id++). q, M5 b+ _) }$ w5 o8 F
1 i5 Z; ?) a5 O. W% E
{
4 _3 k% h8 Y8 Y1 o2 L% n+ g0 v0 I3 |1 V$ T% n
t=setTimeout('startFade(' + id + ')', id*100);
9 N _- {% J1 a+ p5 \ g9 v+ h/ n2 j, i, q0 ^
}7 m# [+ d6 J- f4 E- n2 r2 L/ I
d$ P+ K$ S, q$ }7 f. W
}
: U. i( O ]6 E3 _$ e9 Q7 W
# Z/ Y! N+ p9 b//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
5 X+ r; p2 m9 \, Q9 _! y! [8 e8 B& }# W
initLinks('#FF0000', 6, '#FFCC77');
5 p4 G; n( Y+ \; q; `- l; i# w1 D7 f- i' c) C
//-->
3 f7 D9 ~3 |+ b. F
; Y+ J- m8 ^& a! }4 j) \8 i% G</script>! [/ k: e2 m" B3 h
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
& M% V. a- h3 o( H; W" O</a>( _; \3 ~, Y! L3 q7 V0 V. g# {7 B7 o
<br>; M, r f$ L: Q; y) i
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
- f3 d; c7 d8 k ~" W<br>5 K$ \) w0 i$ f; i, b& G- o8 ]$ `
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 G+ T8 j- M: x% ^<br> $ k [ c, `% N
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># ^* C- e8 r7 X, J0 [: n/ X
<br>7 m/ [& E7 n! c+ n" m9 {
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>7 t t: b( Y# c3 }! Q0 G$ D
<br>' ?& y: l, A! |3 G4 A+ u$ [
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
0 @% s& `# q8 N9 X' Z: l6 b$ s<script language="javascript" type="text/javascript">. f; ^8 c0 s& m( x1 \; t
<!--
a- n# t, B# E/ J: lsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering/ Q5 E4 ]$ u0 a0 x. [5 [8 x; r
//-->
3 j+ x$ a! Z! g1 I' W</script> |
|