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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( l4 G8 \) F8 z* G
<!--
4 T/ T# w/ p$ W' q) f& u: T// convert a single digit (0 - 16) into hex3 |, ?( t% b/ _
function enHex(aDigit)
2 e9 c- m2 h+ r{
4 x0 f) @/ {9 }) ^ return("0123456789ABCDEF".substring(aDigit, aDigit+1))
; G; }; Y" D6 y9 r; h}
2 `8 G3 ]& I7 ?+ V; g7 @// convert a hex digit into decimal
9 E9 ?, V; k- [; Qfunction deHex(aDigit)
; `- W" ^. ]7 k3 W6 m6 }* @{
2 }, f% A# ?) n return("0123456789ABCDEF".indexOf(aDigit)): o6 @# v7 L4 B0 e+ `6 Z* r; C% I
} e5 F: n! p2 O
* [7 p9 p& D+ |4 d, q$ q/ o* F// Convert a 24bit number to hex7 S. ^& Z' J( _9 Z( g% C' q; [
function toHex(n)4 i- X% S# r- d' R
{, c6 w2 ]8 O% S5 K+ d
return (enHex((0xf00000 & n) >> 20) +5 L2 r0 a a; `) |9 R; v+ m9 K' B/ J
enHex((0x0f0000 & n) >> 16) +
- c. l, A6 c- F, Q% H enHex((0x00f000 & n) >> 12) +9 c% }9 }3 s& }* K/ o
enHex((0x000f00 & n) >> 8) +# D: W9 o t0 E
enHex((0x0000f0 & n) >> 4) +
' m7 a% ]4 \8 ^+ Q enHex((0x00000f & n) >> 0))
3 O. `" d% j2 w2 T1 _% z}% Q3 L c0 o6 N0 x
// Convert a six character hex to decimal& p. u/ l. e0 B
function toDecimal(hexNum)( z0 d- l5 q) }
{* ]) j7 v5 x0 _9 O1 |
var tmp = ""+hexNum.toUpperCase()
' z2 _. w* I+ g/ ~5 b while (tmp.length < 6) tmp = "0"+tmp
# n7 H% I. }! R. Q0 t3 ~8 V return ((deHex(tmp.substring(0,1)) << 20) +
* m" N6 [1 O' C (deHex(tmp.substring(1,2)) << 16) + 1 Q+ b- F% h! d8 B( n, e& |
(deHex(tmp.substring(2,3)) << 12) +, x" Y0 h" J- l/ A
(deHex(tmp.substring(3,4)) << 8) +4 ]$ X1 { h8 ^( `5 o* l6 ]' P8 |
(deHex(tmp.substring(4,5)) << 4) +
. g2 B! ~' Q0 N) S9 B: h (deHex(tmp.substring(5,6))))% ^+ X: G7 S; y' q
}; Z, S5 p9 g* o* c: r
///////////////////Shimmering Links/////////////////////
3 V3 q! E' n) r* O9 B& [//global variables
7 B( F0 m6 E( X5 L: @( {var hoverColour6 u U5 w+ I# _7 O
var numLinks;
( I1 t3 S _3 T- {3 n" Q# g) d/ lvar rate;
+ G" g6 Y. ~6 bvar numFadeLevels;
8 T( X8 T8 H8 i4 M7 Avar bgR;' w' t Z% N$ a: U: b
var bgG;% I! \2 `/ a2 A a/ j# X
var bgB;
, l* N7 v- n( l0 rvar currR;
5 ~0 h2 l# I& h' t3 o: u8 @* C9 cvar currG;# w. N8 X0 e0 e1 f' o( M
var currB;$ y; @' H# L9 Z; u8 Y
var count;
. A" t4 X3 Y( B! a/ \4 g$ ]var fadeOut;( e$ I* k$ G. n: t( a* ^- W
var continuous;4 Q9 f. g% ^3 F! O% z
var newColour;% _% M$ ?0 F% j9 O8 M7 X
var tID;" a2 T6 T5 [& n9 W
var redInterval;
) q# D& K7 P/ \var greenInterval;6 S3 ]* M# v, p; ?/ D6 V+ I
var blueInterval;% {2 v4 g+ [0 \9 r0 f# L
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
! o: U* J8 C/ M" K( N{3 x/ O1 i( _6 l
hoverColour = mouseOverColour;
+ w& X* [# [% H4 R numLinks = numberOfLinks;
" U% x# U; u) O0 q9 r rate = 1;1 `4 k2 L( e, t3 s% m
numFadeLevels = 30;/ q* T5 Q# s; c5 w! a {( R6 X% _
function initArray(theArray, length, val)
3 B1 t/ ^% M( P) t/ n. T {
& P+ D; H% w( |0 I for(i=0;i<length;i++); ~1 i5 g: Q0 L; k* N* O$ H
{
; c, c- ^: L% Q* L% Z theArray = val;5 H7 C! _1 F) R
}3 ?% ^6 C U2 M8 F' f8 i; E7 s; j5 I
}
+ P4 S" G4 \. \ bgR = '0000' + fadeOutColour.substring(1,3)# r9 h1 k6 C% N% J" N
bgG = '0000' + fadeOutColour.substring(3,5)
4 Q1 G3 Y6 Z+ m, j) R bgB = '0000' + fadeOutColour.substring(5,7); v0 x9 V' l# T; I
currR = new Array(numLinks);
: W, G, h7 U8 F1 K+ x currG = new Array(numLinks);
9 y+ j+ w+ _) N8 i/ B8 m currB = new Array(numLinks);
7 E5 k: ^7 w4 o- h& Z: S* x count = new Array(numLinks);
9 h9 d: O5 Q$ O; K1 s6 a5 H fadeOut = new Array(numLinks);" m1 l1 \: A/ j& ~, ^
continuous = new Array(numLinks);
% `1 y8 F! i p5 g& W newColour = new Array(numLinks);( r& z2 S4 e9 U4 _% ]( v$ Q7 ?* E( t
tID = new Array(numLinks);0 a9 b7 n4 i, Y
redInterval = toDecimal(bgR) / numFadeLevels;0 H V5 |6 z: E9 ?
greenInterval = toDecimal(bgG) / numFadeLevels;/ q. W2 F v( V: T+ Q
blueInterval = toDecimal(bgB) / numFadeLevels;5 t- k9 Q5 B" P9 W
initArray(currR,numLinks,0);
Z# O' M [: e9 _( m( O: f$ n initArray(currG,numLinks,0);2 |& F0 p# o' V4 m' k# f+ h g. E$ b
initArray(currB,numLinks,0);0 E" Y, S R: B, k
initArray(count,numLinks,0);
6 h [4 ~8 C5 v' Y+ Q$ U initArray(fadeOut,numLinks,true);* y4 T/ J( Y8 x2 Q0 c% q
initArray(continuous,numLinks,true);
1 R) l/ j; h( r& {}
1 b. {2 Q* h4 d: u' i3 s3 Zfunction startFade(id)& V# ?2 ^) ~ L( v1 b- ?2 X
{
+ S) Y& S1 Z9 m4 z7 w6 Y4 U if(fadeOut[id] == true)5 p; @! r6 z* J \
{ /*move colour towards background colour (increment)*/
- B! v. J3 P9 C currR[id] += redInterval;
- l0 F5 G% P, L4 E0 k currG[id] += greenInterval;
* y6 m+ c: [8 G$ {, f currB[id] += blueInterval;
8 Q+ W+ R+ X3 M3 j% t0 ^ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);$ E, f {* A8 u6 f ~( w' \
if(++count[id] == numFadeLevels)
# k5 \* r9 B( L# s x! }& t {
1 D+ t# K* I; {7 E7 d4 _$ ` fadeOut[id] = false;
: Y J) }5 Q h* _ }/ |' c) a7 {: y y6 a
}
4 V1 G: G0 ?. M else
) J3 S8 a8 I8 v. d5 t" z* v2 S {
9 E! P1 b+ l. i" j, A5 t8 T1 b* f currR[id] -= redInterval;2 u1 m g; E- ?4 M
, Q' G# x5 j: |/ | currG[id] -= greenInterval;3 I" `3 T5 q, q
1 I7 z5 a- J0 t- [
currB[id] -= blueInterval;
4 k' _6 \& M; m* w. y$ l) q
/ ?! w1 D% }8 e- ?, p newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' O" }( p }, r- |' l0 i3 }- l
- b m* \- Y' M$ D* _+ | if(--count[id] == 0)
& S1 g9 M/ J6 m1 f5 V2 F
+ A4 T( |( }/ p' P2 s% |: o {
* r0 @* v& `; s) j) _# j; G* `" ]7 q5 M
fadeOut[id] = true;
7 w4 f8 K |$ j) P9 h& K9 z% C' b4 c
}
) a8 A& Y# Y! v" x' m% G% |1 X1 P7 P& R. H5 A- N4 l% `9 x% i0 l
}( j4 N6 B$ O* w" k- b% p5 ]' \
4 O/ @% j; V" V& [/ o: G) Z
if(continuous[id] == true)1 G1 ]( u) e$ J- E2 f# J* D
6 D' J7 o, z3 I' ^7 |8 a$ [2 G {
g+ s0 F+ Z2 L0 F' ?) h) j9 R, [; _& c( z' E
document.getElementById(id).style.color = newColour[id]; 7 }7 }+ M5 g8 @% _/ E7 H
% h W! o8 R- e' z }. t6 p* n. H/ H. b0 p' B
/ g* q% v4 q; ?% @" d6 E else
( t/ f4 b8 i4 E& T( [6 S ~5 W/ E \+ R: Z0 j
{
' [9 F k9 m5 s5 P' X' s. U$ o4 R& I# ~3 f# x
document.getElementById(id).style.color = hoverColour;
" g3 y" ?9 P" J+ _: b& ]! t) G9 F N7 D! s( m" r- F2 j, q f
}
2 z; D* n5 {4 r7 v- ^* M. o9 Q# N, a0 a" `6 U- w
clearTimeout(tID[id]);7 F( T7 t9 h9 b# t) I& |9 f
; g3 L% j [, j+ m
tID[id]=setTimeout('startFade(' + id + ')', rate);
6 o: b1 N) b/ K6 }& T) h) q
1 L0 |, v" C8 _5 j# X9 d2 ?; O% x}1 o7 m+ W$ G$ _" k0 n
% j8 a: Q4 N& |
function continueFade(id)
9 M' }2 L; _0 u- b3 e9 X( n
" _4 v9 a4 B) I; Q{
, I, a/ K4 }" {
6 d7 X: {$ E" D1 S4 h! X( V) F! W continuous[id] = true;
+ Y a. J# \) [9 O+ A& M- r" u& G* C$ g' G8 H* Q
}
' d$ h2 O+ [) T/ H& w- l- g7 Q# _0 \8 u- _) l" L Z3 a, S
function stopFade(id); v. I! A( w( f* M# M6 _3 L
/ @2 g2 B; D# }) S{
A4 a8 S% G0 S! g. q$ Q
) z5 ~5 y% U3 q, W continuous[id] = false;/ B! C, \1 Y* M& ?1 r# f7 }
" r! Y: y) ~' p; B; {}
! Q8 S$ ]& t8 D2 ?, M( s# y2 O* P* Z2 a2 }; t& N
function StartTimers()( w9 V2 N( L/ K# j$ j8 D
1 l, e: L% q! f" F- @{ //set up an initial set of timers to start the shimmering effect
' P( Y5 W. }8 b. y: _3 x
/ ^% |+ W, H1 S4 x' T3 F for(id=0; id<numLinks; id++)
& C# M+ Q3 P: ~. D/ a6 Y+ C
4 I! e, s0 F! _' _+ y7 g$ p {
* y7 R2 u# S- o4 b3 X& U( @
, M. \; |/ ^) T2 Z7 p t=setTimeout('startFade(' + id + ')', id*100);
; d! Q8 W* S) k/ L3 _3 U" y1 x1 [2 P+ m5 t; `3 d3 s
}
" D' ^' q) U4 c( Y- t6 H7 @0 {# h- A5 w' M& ~
}
/ }0 S8 l' p1 G! R- C" b F( n. C( L0 C2 M# A* _) p$ }/ w
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour') P* U7 f4 m6 g% i$ k
8 t' w# T2 E9 N8 U* x: i4 p- {; q
initLinks('#FF0000', 6, '#FFCC77');8 x8 z8 @, R' Y* K5 l- y5 R
k D5 |- d6 C5 q. T# \ V//-->3 h: ], I# x |7 T5 o/ Z4 Z y
0 a: W8 B: I/ B. D, c2 }3 V</script>
( F% f: A* G# ]4 x<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元 |8 r, ?5 ]4 K5 R( k
</a>
0 N& S- I2 g" |2 {' I<br>8 m7 L/ m9 M8 S; f1 J; h# O
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# B+ `2 J' }! ^+ Q<br>
' Q8 G! s! X3 p4 Z- M<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
" J+ b9 j) Q" K, J! K7 X<br> . `; T( ^7 |2 w0 _% _/ ^
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' d+ l1 d* H+ J' W
<br>
4 `9 h, S: N3 U6 [& F/ D<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>% j4 B$ _. Z/ r# `7 {; s
<br>
, B3 o' m6 L# c/ [1 b<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>+ O: s# t7 M! U' O1 @
<script language="javascript" type="text/javascript">
- S& Y5 `# I% `7 y5 z<!--7 o" K5 u! E) a' p
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering5 n+ b+ H2 w% d- H0 Y
//-->$ g5 ?7 a, o! Z8 i1 `
</script> |
|