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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">) P, v9 ~) `( U! b# k4 E: }
<!--
. }/ n7 ?1 S ]9 T9 Y5 _+ Y// convert a single digit (0 - 16) into hex
" \+ R( x! N* A* yfunction enHex(aDigit)
. k0 @8 J, p4 K" N' E' K{
( O5 q- R! w7 I4 `' p return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 S J# `& P. l6 G" \1 R9 Q
}
/ Z( i0 e; N+ ~6 r, Z$ s// convert a hex digit into decimal% N3 e: c; T% c; n2 u
function deHex(aDigit): C0 F% \/ X: S! Z& K
{
( X' D# E* L* p return("0123456789ABCDEF".indexOf(aDigit))% b c; _8 z' t4 B0 i$ C
}
" p8 x9 c$ e/ D6 S2 _. W2 J0 i# d# V$ _+ H
// Convert a 24bit number to hex! {& M+ d, Z( t) \! h2 ~' o3 \
function toHex(n)$ j7 R8 C2 y0 F' S7 s
{2 E( ]( e- y u9 ]
return (enHex((0xf00000 & n) >> 20) +3 q5 `: H# u, g3 q; m
enHex((0x0f0000 & n) >> 16) +! v% z6 J u, ?5 H! T8 q
enHex((0x00f000 & n) >> 12) +
' |* q$ W' _+ p enHex((0x000f00 & n) >> 8) +
7 K% t. ^) r# P2 q2 K6 O enHex((0x0000f0 & n) >> 4) +
' b5 z4 W; g$ t enHex((0x00000f & n) >> 0))
. V5 g2 @& G/ A$ G! i}: @/ i& r) b' H% j2 U% g" i& D/ e
// Convert a six character hex to decimal
. X' C' t. X# U4 L9 bfunction toDecimal(hexNum)
/ K' Y3 A* R# A8 t$ S: L: F% v% r{2 B! y8 Y# d4 o7 @" u
var tmp = ""+hexNum.toUpperCase()
7 w4 k$ {9 K% X8 i while (tmp.length < 6) tmp = "0"+tmp* F+ {% g% p j* n
return ((deHex(tmp.substring(0,1)) << 20) +
$ ~# Q ?! K8 m. b$ L9 N (deHex(tmp.substring(1,2)) << 16) + 9 Q8 U* i0 `/ m1 X* c! ~2 z7 _! e: V
(deHex(tmp.substring(2,3)) << 12) +$ ~7 [3 e' h) y {
(deHex(tmp.substring(3,4)) << 8) +
7 b$ ?1 A7 @: p2 T* Q (deHex(tmp.substring(4,5)) << 4) +
. {. d2 c. N7 j X (deHex(tmp.substring(5,6))))5 a( D3 P/ P- x/ o& Z9 V {4 K
}
3 f L: {% ^9 [1 r2 F///////////////////Shimmering Links/////////////////////1 f# L/ { ]! {5 e4 D$ I9 g \& i. D
//global variables* C0 l+ e* s# z; V9 t* C c
var hoverColour2 Q" Q# G! \ ]
var numLinks;
$ h6 L& Y0 o+ t6 vvar rate;
( R3 I: c% j7 N9 ~var numFadeLevels;
' `3 L, t* y/ w) X7 Zvar bgR;5 r+ F2 X' B8 N
var bgG;1 q7 F6 q5 x: {5 O
var bgB;
6 f5 h0 _1 a& f' X9 rvar currR;
- q2 W; F- U9 W4 Dvar currG;
# v( b9 X: C8 t4 p4 g" Dvar currB;+ e& c& _$ @0 L/ ?/ k" J) b. R C
var count;+ e, R% I* P( ]+ {. g5 ?
var fadeOut;
0 t% _) @! p# h o: G. xvar continuous;# u) W! L- F% v" a" X
var newColour;2 B/ e! l( ?* M$ e
var tID;/ d* R! w4 S' F9 H U% y5 Q
var redInterval;1 M# V. g- E( @
var greenInterval;
0 K9 A+ K( }4 J$ G$ [+ L* [; ~var blueInterval;
+ F3 g `6 G; Qfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)+ n/ b# s# I- g2 a. Q" [9 c) f# d
{3 ^- K- u( G# s( K n# O; Z
hoverColour = mouseOverColour;5 q' X1 t+ K( N a) y
numLinks = numberOfLinks;( B# D! P& X9 \6 J; r$ L0 g
rate = 1;
& h' Z$ V) T# \) z8 g8 d numFadeLevels = 30;% U" Q6 T. ]! L: Q6 U& k& n- r
function initArray(theArray, length, val)
# \! X. _' a" f( ~9 A! h {1 a4 V$ ~/ |" d, a" I( ^0 Y1 D4 X; V
for(i=0;i<length;i++)
4 E9 K7 M1 v4 W- }/ d, K {
( K" `9 p c3 W& H i- i; ? theArray = val;% l+ d+ @% D' M4 a
}
" w/ q, h) y- d- } Y3 I }
& [& J/ z: p3 l bgR = '0000' + fadeOutColour.substring(1,3) [7 _# W3 M) ]1 O- n8 @0 }, U
bgG = '0000' + fadeOutColour.substring(3,5)- `2 B# a" c3 m
bgB = '0000' + fadeOutColour.substring(5,7)" J u3 O3 @8 D' h. g9 I8 u
currR = new Array(numLinks);
6 y7 X0 |0 w# X! v currG = new Array(numLinks);* G+ O& v3 @0 c0 A0 J9 K4 o8 b4 w
currB = new Array(numLinks);
- \+ T1 v0 r! L1 B count = new Array(numLinks);
& P# T8 a; m2 o$ l3 P fadeOut = new Array(numLinks);
; F% K" c, e* b7 U( U! V continuous = new Array(numLinks);
3 W9 s# F. X" x( Z: r" t newColour = new Array(numLinks);5 F! ^8 T* T$ |2 ?: k
tID = new Array(numLinks);1 T* @+ [+ i3 y3 E
redInterval = toDecimal(bgR) / numFadeLevels;1 s/ K" L' g+ I/ k! X+ L3 a
greenInterval = toDecimal(bgG) / numFadeLevels;, V! [# N8 x# {$ {/ t! `
blueInterval = toDecimal(bgB) / numFadeLevels; s: ]: a. r. l1 W( b& H# ]
initArray(currR,numLinks,0);
. v x9 _, c! @$ h: @2 S: @ initArray(currG,numLinks,0);
. S: v9 A( l& i. ?1 u initArray(currB,numLinks,0);% @8 `7 f2 E7 `- X: M
initArray(count,numLinks,0);) X) r1 j5 B& h2 O! j1 @1 j
initArray(fadeOut,numLinks,true);
* t& x) u2 d* K3 P5 @2 z9 z( I initArray(continuous,numLinks,true);
; q) O: A7 G9 d4 Q2 a} . Y0 M$ F7 d0 H- k# E, F
function startFade(id)4 R9 }7 x4 a& _6 b) L! G. ]
{* W' r J% }4 f1 K
if(fadeOut[id] == true)
. [( x( b3 [5 D! {% E { /*move colour towards background colour (increment)*/
5 U% D8 u! C! ]1 w4 r, _ currR[id] += redInterval;& H- H! w3 g3 `8 `. }7 \1 y
currG[id] += greenInterval;
! O9 @8 f5 J' S9 A# o) \3 S currB[id] += blueInterval;5 T2 m! T3 `/ t% Q1 u
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 H# u* c3 {; @* P
if(++count[id] == numFadeLevels)& {" ]& y# c6 T; D0 S h/ ~, E- v
{5 v: v2 h7 d8 Z
fadeOut[id] = false;
$ K5 c# d$ s$ m: L }; k7 |. ^. @8 P5 H" k0 L7 L" m5 e: r
}
$ ?8 K5 s2 t4 D else
0 I& X4 I% q1 E0 m0 W1 @ {
6 C# }! |' W" |# [4 N9 i! p3 T currR[id] -= redInterval;
% Y5 Z/ a8 {- k: o
% n/ j4 a5 f7 z! \9 W0 i: a6 I currG[id] -= greenInterval;; `6 k" V+ m, A5 d$ W
# J! Q0 O8 F+ W N$ w! i! d; F: t( ~3 q
currB[id] -= blueInterval;
3 q% \ O; \4 T- h' \) p. o7 n
1 v; c# u$ B6 w9 @3 z8 s7 S9 \ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- \. m4 i$ O5 B0 M
( N+ w' ~, N: j. {! F" V& t/ { if(--count[id] == 0) \5 j! }# M! k7 ~/ H3 A4 @1 [
1 f( A3 ^% I7 R6 H {
( q1 N% H; _6 c7 Z; x4 n4 w
5 J( S* k- [6 O f0 h0 H fadeOut[id] = true;1 H0 y! ]6 ^* o0 p |* J& x
% V0 [) J0 _& q5 V
}( }( X/ ~6 B `
6 X/ [) p7 Q4 r6 f2 L }6 m& @% O; ^" B, k2 p
8 O% u. [ {7 E% E' n
if(continuous[id] == true)4 B8 c* }( U* M: h$ U5 h9 M$ S
: `$ l4 L O; s! C5 e7 I
{
) I5 O0 O( N2 H9 T, W
/ W& |: ^- w5 A) Q document.getElementById(id).style.color = newColour[id]; 5 q1 r. W4 z5 q
) l# f( J! J5 }! M @, r& s9 o6 S
}( `8 w, Q ?$ z5 h9 ?6 ], C& |9 T
) h9 b4 i/ y. i9 r
else
5 \7 g2 o1 O& k! r5 D' s, m. E9 i2 l2 \7 {3 i1 J
{
7 M5 ~8 Y# t$ Y1 t5 V1 X P. n$ j6 D, p3 z/ e9 o% H# |* R
document.getElementById(id).style.color = hoverColour;
- z" S! `( b! n+ z2 \( X6 K6 R5 Y" k: L
}8 [: c' i' Y4 i0 N
0 C3 ^4 r$ w3 T5 _$ f; q2 u clearTimeout(tID[id]);
, ?8 b8 o' h1 h( @9 z+ E- {; ^; @3 z
- l% `1 h( m! \1 i tID[id]=setTimeout('startFade(' + id + ')', rate);
4 J! \ v4 o; C4 G8 X" l% X5 m- u- Q M0 L" U
}+ C( v8 m6 U* [' k: B) A
% J, ?8 t+ K p# E* x+ F" a7 ` c
function continueFade(id)- H0 |! D8 `/ i" @& d6 L! i
1 S/ U0 C# j6 {! q6 t/ A( B' Z0 p
{
$ w& Q5 m1 N# p; h2 X9 ^- m! @7 w$ a0 K4 i4 x8 v- N9 j
continuous[id] = true;
9 [# A, x& k. I' q* F- q( `& ^5 L8 L! B7 ^5 p
}
* q M% n' ]% T" K" [" A" w( S6 I2 l* o' ~+ b4 o0 f7 R6 S
function stopFade(id)& F0 D' m7 @9 | U/ j
( A" S+ E! F5 l9 e: ?{7 Z! W4 ?/ Z# M, a/ L6 u6 k
! `% p j$ V% o$ S/ I( `
continuous[id] = false;; v3 c& U5 m1 z
x9 k1 v9 ?+ t: y! [& \% y}
5 H, E) x* _* @8 X1 W5 m. M
: S/ {, e- P7 |' yfunction StartTimers()
0 b% Q* U) A' r" \
; w0 R) C! G/ y6 _{ //set up an initial set of timers to start the shimmering effect
6 g! Q( l! O9 ~" h9 A7 I: n- M
0 |7 T& a' h+ c& u5 B for(id=0; id<numLinks; id++)
. m1 D9 l' R8 [" x4 c& ^7 Y0 H* q; k
$ M# t: o6 U* w V {! q- c; W+ Y, N
4 \' H, K, |7 Z$ N" J% p t=setTimeout('startFade(' + id + ')', id*100);
4 F' O# u/ P* r7 O: S v& i$ W7 q; _2 k: v
}
. P' E* }" u& q* l1 J2 s$ A9 f) V6 V( x
}) d. k, A2 C2 e' q! Z' Z
) C' U6 e! m' s8 `- I+ M//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
" ~: ~/ `0 }& D( x/ d* c' J& f( C2 H2 e+ g: E0 D+ b3 w
initLinks('#FF0000', 6, '#FFCC77');
, R: V; ]6 k G- V# D5 `, N; t. {( X4 |% A$ e! C( ?3 q) n k
//-->
! F2 ^% u$ G. \ P
$ T/ Z4 n ]* U+ l</script>+ ~9 ~7 E* v3 d! Z5 G: x
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元# A1 d) ~/ L: a( t" ?& t
</a># x" z, e! Q. _( y3 I: K
<br>- y- e, W- H% v3 `4 \
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>3 Y3 p# g4 k7 E$ S
<br>7 u2 r' I$ N0 l, u: q) Y, \
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>0 P1 M& P9 t' l2 ~* n+ `
<br> ' G) M' \* C, f: H3 D
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
: `: A: o7 H$ h, k: _& Y+ G<br>
' K+ k7 G: j( S# E2 K" H6 ^+ [. g<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
/ _# J3 O. ^: P<br>
0 H' i, A( F" k. B5 [5 Y; n. l `/ ]<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
/ `( r/ e& j, J9 v<script language="javascript" type="text/javascript">
+ [) V2 [; g' D( P" [# f1 D: U<!--' J( ?0 A3 }! c- C! e6 `
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering( Z4 x. `$ N0 b- C& s! z( F
//-->
8 W! G6 Y; G* k/ M</script> |
|