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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">: s- Q3 E! m$ Z% d
<!--! c1 {5 |) H4 D7 ]
// convert a single digit (0 - 16) into hex: @( g0 j0 {6 c5 y1 W
function enHex(aDigit)6 z+ I/ x# Q+ f: m( M. W. I# M! E& S
{
# c0 r) q; N1 e8 F8 j |+ z return("0123456789ABCDEF".substring(aDigit, aDigit+1))
c- J8 w7 V# D/ {}
5 b s6 H4 i' Y6 [- H. ~: x+ k// convert a hex digit into decimal
; S% U/ y3 \4 dfunction deHex(aDigit)
8 J& `7 g1 Z* J; Z$ z4 m2 z{
6 W8 B9 a0 [6 }. Z) U0 F7 n return("0123456789ABCDEF".indexOf(aDigit))
" `& N* d" [; R7 |4 g6 `}
; d% E6 i5 y; v/ T
6 Q/ t* Q8 g8 e" E// Convert a 24bit number to hex
0 \8 l b& i, j- ~function toHex(n)
- h8 |* F* Y* }6 `$ h9 X8 m{
8 L% Q! G, ]2 G) \0 D5 F return (enHex((0xf00000 & n) >> 20) +
& ~! @; @$ V# |9 d( }, O" x enHex((0x0f0000 & n) >> 16) +
7 t- X( t1 }! ?" F enHex((0x00f000 & n) >> 12) +7 X' z2 `6 y* i5 f- m
enHex((0x000f00 & n) >> 8) +
2 U p0 M1 C$ @1 ^- B0 | enHex((0x0000f0 & n) >> 4) +: c# ~* E: u+ U. Y/ W) t6 g
enHex((0x00000f & n) >> 0))
4 K0 o9 Y8 m" [' n6 D- k! P}1 P$ U6 Q8 W( _
// Convert a six character hex to decimal
+ I1 M4 ^* |3 }/ S, k( p6 Bfunction toDecimal(hexNum)
8 x2 n+ V6 ]2 t6 ?7 {4 t5 I. T{
, k( R, b$ o5 g0 B- w var tmp = ""+hexNum.toUpperCase()
v7 [2 R9 s2 H0 T5 F* w+ {( [; M while (tmp.length < 6) tmp = "0"+tmp
) J, W1 R% k0 M) r- ^4 S7 Y; ~ return ((deHex(tmp.substring(0,1)) << 20) +
2 V0 v' l; K; |" U1 s1 Z (deHex(tmp.substring(1,2)) << 16) +
. y( u( E7 g5 i& U4 J (deHex(tmp.substring(2,3)) << 12) +7 W! f6 H' ]- \' I) C6 o
(deHex(tmp.substring(3,4)) << 8) +. s1 v* i7 w& R# K5 b5 D; ?4 F; i
(deHex(tmp.substring(4,5)) << 4) +7 `, `6 w4 P {% ^! u6 U; i! Q3 u' X
(deHex(tmp.substring(5,6))))
; L1 I" q z) f9 @, [}6 ?) N7 T8 o2 f, ], p6 g6 J: o& ?
///////////////////Shimmering Links/////////////////////1 D1 ^0 k4 ]2 x1 K5 A$ z/ Q
//global variables r5 E5 E2 T3 w3 p A$ _1 X# B
var hoverColour
- y# G5 A l, _, D/ |9 X) zvar numLinks;& I Y: `0 t" Q0 [' N/ `
var rate;
1 W' x2 g- T: N6 X5 lvar numFadeLevels;+ m+ V L; V& [& t5 ]- y: N9 B! J
var bgR;
: @2 c f/ K/ @var bgG;
}+ ?$ e. E; s3 nvar bgB;: `0 n9 p2 D$ W9 @; k
var currR;
1 e4 j) b |) n% P0 N5 _var currG;. T" n. {; |" a: I# W% q
var currB;( g0 p5 `- I, ^: @; c
var count;
% f3 ^" d' ^, [var fadeOut;
/ U1 A" Q3 _ |& v g7 r3 M' _var continuous;' Z6 q3 l5 H0 S8 ?2 h5 u8 n$ T
var newColour;1 ?' f" S: f6 {6 Y! a! @
var tID;- v: V! @% e( Z) u6 X
var redInterval;# C4 h# J2 J; T6 f
var greenInterval;
0 d& b$ E6 m5 e# g( Y4 {8 Hvar blueInterval;7 v/ u5 Q3 r" f9 [; l: a3 p/ x
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)- i' E1 @6 i; E! ^ e1 m5 d
{
9 [! \) i' D4 }1 m/ E, _/ j9 o hoverColour = mouseOverColour;
; H# p0 z+ p7 v4 x+ n2 [ numLinks = numberOfLinks;6 B/ b; [1 a8 q$ t" c
rate = 1;
W, N# y; m$ ~ numFadeLevels = 30;8 I# N( c# [. M n5 `& F. _, T
function initArray(theArray, length, val)9 }0 p" h/ ?2 y: I s, }
{
! v; j/ A3 R. [& U for(i=0;i<length;i++)
9 S2 E. g& g5 P" e {( J0 ], O, d7 j- }' H8 k+ r/ N
theArray = val;
1 y( F0 z! |" u4 b0 V0 @0 ^ }
{0 g* ], Z/ @: u7 K3 n5 E }
( Z6 `" o% @/ w bgR = '0000' + fadeOutColour.substring(1,3)
* L2 y5 S3 a& n- j ` bgG = '0000' + fadeOutColour.substring(3,5)1 e' c$ h( y$ X4 R7 `1 S
bgB = '0000' + fadeOutColour.substring(5,7)
1 V- f8 v5 g# Z6 G' g& P: h currR = new Array(numLinks);3 ~3 a: Q( |' Y0 K
currG = new Array(numLinks);9 r0 v* k" k3 _' `, o
currB = new Array(numLinks);
# i- _( }+ d; l; _ count = new Array(numLinks);2 P3 H& U6 e( \ O9 W) \2 w
fadeOut = new Array(numLinks);
6 x+ v8 |: M: Q" x. b continuous = new Array(numLinks);
! k- y: y) h* v5 ]! u. R7 Q1 ? newColour = new Array(numLinks);
! o8 d& w/ Q2 P { tID = new Array(numLinks);
2 p+ {, L2 J- G& H9 h0 X; e. |0 T redInterval = toDecimal(bgR) / numFadeLevels; D* G$ X8 F [' f2 F
greenInterval = toDecimal(bgG) / numFadeLevels;, J* _8 Z) |- q% N5 i
blueInterval = toDecimal(bgB) / numFadeLevels;: T: c. s' h8 e" \/ @1 k2 D
initArray(currR,numLinks,0);
' t7 A( u2 o. Y5 X7 o) u4 K" ?5 f initArray(currG,numLinks,0); o: U8 K d) t8 {7 p2 E/ t0 n
initArray(currB,numLinks,0);; i( S$ G6 W0 Q+ N4 D) d
initArray(count,numLinks,0);7 `8 z4 N% ~8 H/ h2 d$ G
initArray(fadeOut,numLinks,true);
3 M' Y1 m/ a/ R* a$ K initArray(continuous,numLinks,true); g8 v) Y# m9 ~" y4 w8 U
} $ g& `& L& u O* Q- t* k5 C/ g; M
function startFade(id)5 I# K8 `' a! q! p0 G* ^! W
{
9 D5 Z: Z6 \. I! o" z if(fadeOut[id] == true)/ V, k7 d) X' ]
{ /*move colour towards background colour (increment)*/" D s% S: x- u2 i @1 U
currR[id] += redInterval;
/ [0 R1 L& `9 J* q& L currG[id] += greenInterval;: Y; Y& B0 I. O) |' G2 d- b' i
currB[id] += blueInterval;# U7 Z }+ d7 J" a
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);. S% \- V, h6 \, W& m: _
if(++count[id] == numFadeLevels)
6 g0 E8 G a) n! S @ {2 M: \ u% ]+ j% W
fadeOut[id] = false;
. A9 b0 w7 c7 H; R/ k }1 z' {4 c; l/ r0 H5 \
}
& Z1 z* r: w2 _9 J$ r& s else; Z* B* \4 T7 ]4 i- M
{* |4 O6 a1 U# c5 i$ a( @
currR[id] -= redInterval;) L0 }4 L+ F( [& t
+ Q) C( _8 t- k0 D& [
currG[id] -= greenInterval;( {, ]: x; p @4 p' i# L8 |# v. A
8 w) j" m4 {) t currB[id] -= blueInterval;
# T5 B; H: ~6 F3 ~$ g# h9 W! K! ~
( e( O% ~1 A8 w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" p- Q9 H# Z# a
' b4 | B' ~# J6 P1 k9 X
if(--count[id] == 0)
6 |) [' e- v. ~0 R3 C6 ~# Y' a% a4 ^
{* ^1 l8 p5 |2 x- j/ g
\4 f7 {- P3 F" }; L" i fadeOut[id] = true;
4 V2 d: Y, U% s9 f; K/ p0 _: Y. u/ m+ q2 R F0 r
}+ C; `1 l7 Q/ _& u
: W" M0 b s( w6 R2 }4 U
}" N* v: k0 `4 ^) h
( o8 @5 z+ H- c' _" U if(continuous[id] == true)
- C9 w! k9 Q1 p5 g" V6 O& e* R* D2 r
{
; e0 `) {4 x. q8 D1 e P+ _. q
document.getElementById(id).style.color = newColour[id];
- X, E- k/ { G/ O# b( ?1 \" R- B# [* X1 V. I* J/ N" P$ b" L
}& P$ C& `5 @9 J7 R% K
; ]5 g* M0 w0 t( j' ^, y
else$ M5 k0 r2 m: V/ `- W* s
/ {$ ]- x1 ^$ z( x t9 w {( ]3 \6 t5 i/ A7 N
* d2 k: Z( {+ R
document.getElementById(id).style.color = hoverColour;: \7 j9 x# o+ L6 T) F+ Y
: B& p( C# S6 U: E% m, f* x# T }, E7 q$ I' ]0 l
# F% l; `4 p$ u) @* i* D2 @( K clearTimeout(tID[id]);6 J; g2 R. Z C% F+ y3 R% K
% g' n0 v J+ r2 K tID[id]=setTimeout('startFade(' + id + ')', rate);
- V8 R$ O- K! P/ v
5 e9 ~' u2 I% V$ A ], B7 M}
+ i. H8 i4 M0 ]' o& q. C7 U, Z: C3 c! ?$ H
function continueFade(id); y9 B4 p$ o+ E; t
2 j7 E7 U7 T G5 x, c{
0 R% F2 i% o) E. T4 J) t
9 K9 G' z3 P& }6 d* ?7 P continuous[id] = true; G+ u* A6 E s7 m6 { G
3 M& v# R/ j3 n1 d- h}- m9 @& ]& D5 Q7 O; w0 X4 [
, R# ]6 `$ b9 ~' Mfunction stopFade(id)
* P _- Q2 X. y0 F0 s: a$ l3 X( t; T' O. f, r3 s
{
4 S& j6 d- Y! G! b$ b
+ G, Y* a* O) d- z6 G continuous[id] = false;
' ~0 t, v8 Y# t# T( O: g. p9 ]& U6 {2 A- G: y" }
}5 e7 {/ W5 r; ^8 e
" W/ k1 O5 p- h2 S& y
function StartTimers(). A) ?# t, A7 \0 V
1 q- ~0 X. D2 w1 ?/ r
{ //set up an initial set of timers to start the shimmering effect
% c. I4 B6 Y5 O6 J6 k" U0 D5 z! ]6 y) Q
for(id=0; id<numLinks; id++)
) G" B5 v0 Z' ]8 w- M0 H2 N& |8 T, k) h
{6 C0 d$ S& X8 U8 y* V
- i- C$ V1 }2 P7 m
t=setTimeout('startFade(' + id + ')', id*100);9 F9 A# d3 w6 K) ~5 D* `7 p4 C1 n
& N7 d2 I6 `0 i: q
}
# u- V2 W, h& c$ N* [- z! P: q' M/ G8 \2 N
}
% Q4 X; h, {( S) Z5 E' z8 l; C. v6 W9 I& d4 c/ O$ j1 G
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ c _1 O0 w" d& G5 U. s" z" {% g2 _2 e3 Y5 E
initLinks('#FF0000', 6, '#FFCC77');
6 c; U5 g& F6 F- l; |
/ V2 v' B. ?# D//--> V9 a% l. g$ D& ^
, I0 A' f8 u3 Z# h; i% }
</script>, l. v) n; H }7 t" s/ i
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
! Z( F# o1 @2 a. D3 B8 \1 \; m</a>6 B0 ^3 [1 g1 c! q
<br>
' P T- I+ L" M' K" H$ ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
) R4 i% u/ S. }* d* Y# ?<br>2 @3 r$ q$ H$ h) O
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
1 _$ t8 w# y- `3 x. H' [<br> $ r Z6 R N5 h3 a. p
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
! x' `9 j! J! D<br>. V# c; g) r1 J0 R+ n# ^
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>' F7 v1 v4 l8 X( W. F2 n
<br>
1 l# X* {$ R5 {% G" g; e<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>9 @ f4 q" c. a& U" A: W( _
<script language="javascript" type="text/javascript"># ~8 r4 J0 h1 u4 H% { a
<!--
' e, X2 m+ ~7 T8 OsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering' }, ~. n- ~. F8 E0 }4 ~0 O4 S
//-->; z4 E" x/ M# `- v3 E" [. U9 ^5 o
</script> |
|