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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">8 i2 V7 s, ?& S; j) r9 Y/ x/ s
<!--; s/ ]% h- N- L
// convert a single digit (0 - 16) into hex
: V* V+ J; g4 c$ h# L+ x* D, t' E( kfunction enHex(aDigit)
6 q& ?5 Y" ~7 X/ L' X& W0 V{
7 }( u. |: {& V return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ P! U7 S' ^8 J! g- \, L# e
}
' N. |0 ], x: x: y// convert a hex digit into decimal) Y/ M: ^* R) N4 b- A
function deHex(aDigit)
: ], U; ~; t- ]* B; l{6 e: x Z2 g& {4 e5 W) A, D
return("0123456789ABCDEF".indexOf(aDigit))
4 z' H& m9 X* N1 c R' z$ C}
! G+ t x C& o& f. ^1 W. }2 D; c* K& _5 x0 i. g' _
// Convert a 24bit number to hex* U) _$ p; I+ w# M% l6 L
function toHex(n)) t" @5 N7 Z* B
{+ x) t" ^/ t: C$ p& i) a
return (enHex((0xf00000 & n) >> 20) +
2 r% a' R8 |5 s& l+ p enHex((0x0f0000 & n) >> 16) +
# O6 N. `" P/ Y e5 i enHex((0x00f000 & n) >> 12) +
: a2 W9 a! \6 \+ k; h/ t enHex((0x000f00 & n) >> 8) +4 V3 |) Q; Z! x g/ S. \ h
enHex((0x0000f0 & n) >> 4) +0 H* V5 M4 G9 R, H: L2 L5 o1 h
enHex((0x00000f & n) >> 0))5 A, D. x) o* u) O% Z
} d: ]/ u" [5 T6 r3 @ ^2 M
// Convert a six character hex to decimal
$ m1 |, y0 e- J$ n0 ?! a3 Rfunction toDecimal(hexNum)
7 Q! x+ v/ H4 j/ g6 h* @6 N{) g6 V2 k% Y. u! G1 P! r
var tmp = ""+hexNum.toUpperCase()$ u- n. s+ p! O. U6 f
while (tmp.length < 6) tmp = "0"+tmp. ]! x4 i5 c" e- M. `
return ((deHex(tmp.substring(0,1)) << 20) +# {& w& m8 n B! |" L/ N8 C
(deHex(tmp.substring(1,2)) << 16) + % h+ w2 t8 J7 H6 A5 u# I* O
(deHex(tmp.substring(2,3)) << 12) +9 i0 \- t: o1 Q G( N
(deHex(tmp.substring(3,4)) << 8) + ~& u/ f! z3 ?9 a2 J% Y
(deHex(tmp.substring(4,5)) << 4) +4 W" @; Z. e+ t/ ~4 v) S: W l+ w
(deHex(tmp.substring(5,6))))
& |% @/ i: N( n7 z3 h/ \! T}
: P- T8 h4 \& `6 `3 B. ^///////////////////Shimmering Links/////////////////////+ ? B0 G! W2 h
//global variables& R$ f) e; n7 B( O O* h7 R
var hoverColour D7 @. ~& \ A1 L2 y" F5 p
var numLinks;
# `2 [& _! |% ~( a- ^+ A$ O. Mvar rate;9 u) I! F3 X. b" b+ B" t
var numFadeLevels;
0 B5 c% A C6 S( Q4 `% avar bgR;
9 l9 X Q3 v; a: lvar bgG;
2 j9 [9 q/ F( n Ivar bgB;
0 Y2 s2 h! }3 c8 w. ]/ U$ ^1 _- Vvar currR;
3 Q6 j! G! j6 N6 m5 a9 vvar currG;1 D3 r* U" z7 T1 u& `4 n# @
var currB;6 c' e, |# |, L* {, p8 D% H# m+ [
var count;
, J5 q" [0 w7 `9 lvar fadeOut;
- m/ Q/ b1 Y, u5 f0 d) x) m* z2 g& g# _var continuous;
: Y8 a ]$ W7 T2 n+ @6 I& Uvar newColour;
8 p; s9 Q5 i7 U- A7 P% a2 rvar tID;1 o3 P2 v/ Z5 D
var redInterval;
0 e% C/ b8 c9 M) ]' Mvar greenInterval;
0 h, o1 r$ c6 k9 X# G* }var blueInterval;6 l, E1 V: O( m
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)/ x c) Z4 M1 D( S! }- a
{5 z$ V6 h3 F$ s+ ?, g
hoverColour = mouseOverColour;
% T W8 e! S1 d, N7 R) Z( [2 P) ? numLinks = numberOfLinks;+ S) C0 W5 d) M" p7 Z
rate = 1;. h6 t2 e/ T+ n) ^
numFadeLevels = 30;* l3 [+ ~' }6 v2 s6 [/ o
function initArray(theArray, length, val)
/ K: H/ r6 u2 _( y, z* ? {
( t. c+ b( ?5 q* C for(i=0;i<length;i++)1 i, u! X; n# o$ k( q1 J
{7 u4 Z2 C" r, C a" e
theArray = val;1 u- }0 A+ m. l5 z9 A
}
# P7 y* P1 g( X! G% N; k6 m V }
- G& O7 s, l% p* ]0 o4 V( p7 ]5 Z6 {1 } bgR = '0000' + fadeOutColour.substring(1,3)
7 W4 e& B, ?4 L" k; b/ F bgG = '0000' + fadeOutColour.substring(3,5)
! L& Z* X+ n( f* _! a, N6 g: P* X bgB = '0000' + fadeOutColour.substring(5,7)
! ~. F( g# G3 D9 D& x. T6 \ currR = new Array(numLinks);7 p9 {8 @, a2 g% r. e, c0 z1 t
currG = new Array(numLinks);9 ]" O, T' \1 Y; d
currB = new Array(numLinks);) c! ?; E2 ?. x& r; I: |7 ?
count = new Array(numLinks);
% }' Z9 }/ V% f2 C' |' e fadeOut = new Array(numLinks);
, I/ J4 S X+ y/ h* |9 | continuous = new Array(numLinks);) B2 n: ^; x* ]* W" x
newColour = new Array(numLinks);) |' K% O. K, v' t6 x: E
tID = new Array(numLinks);
7 t3 q2 m: V7 J; ~+ l H3 e redInterval = toDecimal(bgR) / numFadeLevels;0 W' w" e; D) V, X
greenInterval = toDecimal(bgG) / numFadeLevels;
" s% j. p5 i* C+ w! Z blueInterval = toDecimal(bgB) / numFadeLevels;
3 A6 E7 W9 s! R) I initArray(currR,numLinks,0);
8 P. Y) F& Q: n% Y0 B initArray(currG,numLinks,0);7 X. L _ b; }! I, \( v9 a' k, R
initArray(currB,numLinks,0);
8 K4 k! @5 }# Q) d1 ~ initArray(count,numLinks,0);
! J2 P* O9 a7 U9 D initArray(fadeOut,numLinks,true);& X2 A$ |" V4 ~! [* U, @
initArray(continuous,numLinks,true);1 m2 ]' c. c8 X5 M
}
% r& A) q/ C7 L; |% Wfunction startFade(id)
. V% J. d: \: ?8 B9 ^{: u- a5 S* p% f, H* _
if(fadeOut[id] == true)0 V0 |. L, U! s* A2 {2 x' B
{ /*move colour towards background colour (increment)*/
+ l F4 q# A" B% b" ~8 W2 T$ A currR[id] += redInterval;5 _ x" V! z- v& I
currG[id] += greenInterval;5 z+ v$ D) }9 o2 @
currB[id] += blueInterval;1 Y: W: G4 R. w0 I, Y0 e3 [
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
* K3 U% }2 E3 H* [% i7 _ if(++count[id] == numFadeLevels)
4 U6 N' h5 e' b& Z' @ {
* D* y- _- e2 T! S8 ? fadeOut[id] = false;4 V {7 U3 L# _; N
}
4 K* U/ J- }5 g# @1 p }
2 ]/ {: _ I, }" \ else
) N, W# p" I; R# K0 E {: T; M1 y4 J* T. ?3 h( R# P% o
currR[id] -= redInterval;
5 j: ]5 c# z3 x9 L8 b+ l2 {9 q( L% h4 k, t9 ^: [8 ^
currG[id] -= greenInterval;
" i, e) f) a* i& P7 j& d
/ D, d+ [$ A: D3 F" C9 r/ c) U currB[id] -= blueInterval; |: I$ X* f2 N$ y" H
5 o. }4 ?' e! j4 F
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 ]+ y( l6 g l: W. `0 m H1 u
Y3 p4 ~1 x3 C3 h9 K# s% A if(--count[id] == 0)
6 F- {! {. Q* [, |
) }# Q) j( M. ^ {
6 _' Q; \* ^; y% A6 y
1 @ j8 H( l/ ^5 V/ l/ Q5 a fadeOut[id] = true;3 _7 T+ m9 f/ p; n! D3 C, V
" j0 S# V e# n
}: O7 A3 @: m, L$ O
1 q! W: o; H4 F. I _2 l3 u }- f7 \ o3 S5 Y
0 e m, q+ ?4 C7 S$ Y
if(continuous[id] == true)
: z- ^# E9 s" R# Q+ \1 G$ _6 d' F1 c. |+ i4 H& M
{& x# R+ \6 u+ M, }9 O6 T
* r) W/ |) u( w2 ?) Q8 @# s9 ^
document.getElementById(id).style.color = newColour[id];
0 f9 C2 H1 `4 |* _( M$ a- `0 e; x' E$ F2 f, U7 Q. s1 {
}4 F) h# z0 z: u) M7 D7 h
0 y4 B' F& b" P. M
else [! {% X2 x3 |. N% J2 p
/ o3 S- z) F4 \ {
+ ` U% l/ ^- U8 g+ k* v
* B& F* Q+ H( u! p* h" Y document.getElementById(id).style.color = hoverColour;
# n1 B/ O" R! K" G# V7 H& a1 U! O, x1 W2 N
}6 t8 r/ x& X# s* M' w4 ?
/ _1 M. N4 d5 n1 {/ Y, l
clearTimeout(tID[id]);
3 k/ U q& t: V3 t" x$ e! g/ h9 T6 t, s3 d# V" Z% V: T' b! F! J
tID[id]=setTimeout('startFade(' + id + ')', rate);
, n8 L5 I1 [5 r3 ?
5 o4 ]3 i% n9 q) B}6 @1 s* l( Y; a3 y g/ X
$ r/ j9 ~7 U3 y& L2 {0 Z; y, ~
function continueFade(id)2 o: H% n+ c! Q
' d( |0 C& Q2 u% G: E$ \2 c% A: `{
1 k* X) M+ V: {7 }" D: n' ~& a* e% R" a! m+ X/ A% u
continuous[id] = true;1 ~/ M. K7 @0 T6 M2 W) W
' o: c8 m2 o# C& i% r' q
}
- k" Y2 H# w3 z8 J, B
# {) k' p8 o7 c' ufunction stopFade(id)
+ z+ D0 g H$ v" l% u I! ^ \) i! ]: W4 `5 D, e
{
J8 g8 ?3 H. @' ~) E
. M- O* j" j% S! ^7 l$ b continuous[id] = false;
, P7 @) G. u8 B0 K* i$ w" z4 e0 e) O# B q
}
3 N% d& y7 q8 o& i- ]. V5 A/ l O+ Q1 N
function StartTimers()9 W. C5 ]. f5 k0 B/ x+ Z
5 ?- |3 h4 [: w& Z! m: ~{ //set up an initial set of timers to start the shimmering effect+ t- \6 l- J z. R
$ }! w8 u9 c! I# L for(id=0; id<numLinks; id++)
4 I; D5 m& o1 U, p; D$ K6 R v* t- z) n. g9 {
{
) t( H ?- Q9 |: t: h
8 ~; L, w' }/ R7 q; r. H4 | t=setTimeout('startFade(' + id + ')', id*100);
0 K- `4 b/ b, P8 p X) B( S" q9 M# x2 @1 D# ^9 V7 n
}
% l/ T, v. L; l2 I2 Z# U1 P3 ^% C/ i# ^
}2 g2 c* I9 a+ R
/ e, K& v! W( B, t, s//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 `. E9 g9 E2 H1 u
9 `. D, J1 U/ n, V+ t. r
initLinks('#FF0000', 6, '#FFCC77');
& x, X7 c" ?0 u2 Y3 W+ V0 Q( F3 J, h
//-->9 G' N7 H4 L3 ~/ k& e; B/ m
4 n" P ^! C' c! Z" ^0 N4 C. J
</script>0 _ Y# O) T. P3 q0 S& W, N) {
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元: `) r. U1 x C
</a>6 a9 B6 g/ Z0 Q6 t
<br>1 e, N1 ]' R! e+ v
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
6 ^8 K1 I, U0 s# C) q" o; ?<br>: `8 ]; J9 K: D, M9 P( M& E
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
( }1 a Q1 I/ y8 x" w<br>
" ]) b5 h5 [% m! x. h$ l<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
. x: V4 K, ?8 _% H<br>
( O4 K/ Y* }+ Y e; ?' m<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
9 W) {4 H, G/ ^1 \- l<br>- k0 q& ^/ k0 u4 J
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>8 D) @. X n2 i: \
<script language="javascript" type="text/javascript">
( V, b1 H, m# A) w- N# a6 O<!--
: z( E' w5 a# ]. { |: HsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
) D3 U0 B6 _- d4 b) {: G/ O2 F3 c//-->
Y. Q/ k5 C0 @; n, a0 H</script> |
|