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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
0 @* N6 [$ d( u3 n" R p& Q: p<!--" P: Y) b3 J1 w' V' R8 q
// convert a single digit (0 - 16) into hex9 v. Y; `. K2 C% S) O& A0 a |' B
function enHex(aDigit): t& _3 ~- a! ^5 ?+ U( k
{
9 ] _1 G0 C( I% A3 G$ r8 ^- l, V return("0123456789ABCDEF".substring(aDigit, aDigit+1))4 n6 N; j& s6 q+ o
}
' P* J) n( m( T/ r! I) a/ {// convert a hex digit into decimal* {- T; f4 h# u4 o+ l* Z
function deHex(aDigit)- G' ~& J1 ]4 o& j8 L
{% f9 J9 C# z+ A) d1 Z c1 b
return("0123456789ABCDEF".indexOf(aDigit))- d ~5 Z w% M. u+ t
}9 }; ~! P1 W# K: V
) P. g( b3 E7 p& f( A
// Convert a 24bit number to hex
" g' U9 \7 V' C/ b; h; {6 Pfunction toHex(n)
" F, |2 `4 q/ O$ Y1 A{2 x7 R) u" i( C3 a. |9 {
return (enHex((0xf00000 & n) >> 20) +0 l( y, W# Y& z' j; z' G' e c- D
enHex((0x0f0000 & n) >> 16) +
3 f& m" R% _- c$ L0 d! s enHex((0x00f000 & n) >> 12) +9 U- s& f# R+ Q3 F6 I
enHex((0x000f00 & n) >> 8) +* S/ E# `$ R: e. w+ X" E8 C3 \
enHex((0x0000f0 & n) >> 4) +1 M3 m* ?+ D. q2 O1 J
enHex((0x00000f & n) >> 0))5 K0 ]; C+ O* H* n! F
}
; w- A' F+ [4 m2 o# O' B// Convert a six character hex to decimal
+ I) h3 E- B. z6 w5 l5 `( W, x+ Lfunction toDecimal(hexNum)
2 D) F( x, J" `+ A: ]. f{
% A% g8 k3 ], d; S7 c var tmp = ""+hexNum.toUpperCase()4 S) ~% @% ?$ ?+ I7 j: T9 E
while (tmp.length < 6) tmp = "0"+tmp
* j* Z0 c0 c& L- m return ((deHex(tmp.substring(0,1)) << 20) +
* N* B' i& u e0 |: I' i7 W, ~4 ] (deHex(tmp.substring(1,2)) << 16) + ! R/ B3 `1 B5 L1 L9 W
(deHex(tmp.substring(2,3)) << 12) +
0 K' o5 c6 A7 _. A. L4 z (deHex(tmp.substring(3,4)) << 8) +
" j$ R( C% H* P8 v+ E) w (deHex(tmp.substring(4,5)) << 4) +
4 d! L# E% F9 f8 K6 n (deHex(tmp.substring(5,6))))
" E+ x2 y) {; f}
$ J* `8 i. D: l1 S: }5 m///////////////////Shimmering Links/////////////////////
$ H* B; X% A" k//global variables
* w* e3 u; [% l, rvar hoverColour! D" t6 X5 \9 i" b; Q
var numLinks;* Y1 ]6 w" i" h+ k9 f% f- ^
var rate;
* J: A& r# Y8 W" n7 }var numFadeLevels;2 ^" m4 R- }" z" K
var bgR;
1 ^3 T( G2 ^ P, K) l* t/ Rvar bgG;' k3 A8 A. ?1 [0 m+ G
var bgB;
; i" V+ Z2 ?% W# avar currR;
- j) @: J: Y1 J' ]! q. M% {8 Ivar currG;* ~+ x/ l7 x8 R) |3 O* @/ H0 A
var currB;
& A! [' H, N+ Mvar count;! l" A1 Y/ J5 I2 a. {' a ?+ l
var fadeOut;6 U) V, H9 |' i- J
var continuous;9 W* w! S- y( j6 O( ~% W# T5 c
var newColour;) ]! l, E% V) ]/ t' j
var tID;, G$ f I( M; T% b+ E5 {5 u
var redInterval;& J" B, N5 D/ E! s, S# k
var greenInterval;0 L$ q; v( }" ~' \' k
var blueInterval;% R, K* C- Q" v8 K3 ~8 m
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
6 y' }4 g9 o& k{+ g3 z+ a/ C& \' Q' k
hoverColour = mouseOverColour;4 l0 j! K. [2 `5 W9 n" b
numLinks = numberOfLinks;: |* N8 U# x0 o' u2 O6 O
rate = 1;( B* o2 h# ~+ O, V0 s
numFadeLevels = 30;
, ~0 i5 ]6 O0 L* v- a; s, J function initArray(theArray, length, val)
2 C& X' z( W# e- d) k+ d {/ I" K( P+ S0 ]
for(i=0;i<length;i++)& s% B- t# b' e2 f& o
{
' h" A+ l# a- M# \$ e Q3 I theArray = val;
7 v! {4 s9 k4 D: H# }# y: |! q }
$ V! ~9 H, K" _6 U0 n }
) L) U' B" K! m8 N: t; e bgR = '0000' + fadeOutColour.substring(1,3)
8 \5 f- }' \' b" Y% i' l( m bgG = '0000' + fadeOutColour.substring(3,5)
; U# ~% Q5 h5 j. Y bgB = '0000' + fadeOutColour.substring(5,7)2 g; X9 p& u0 n/ O2 s H5 `1 P0 m
currR = new Array(numLinks); D' k5 q/ `7 Y6 ]# B
currG = new Array(numLinks);. @# S1 @& `6 a% ]9 l- P: ?
currB = new Array(numLinks);, R g1 F, N: q( W9 \) W# h X
count = new Array(numLinks);3 t) w4 `& B1 D3 ?, S( u% H! I
fadeOut = new Array(numLinks);0 y, g* }4 }- T/ m l
continuous = new Array(numLinks); @) ?0 i9 n0 ^$ ~0 x
newColour = new Array(numLinks);
! w7 W# q+ {" c. z8 J8 t tID = new Array(numLinks);
. U1 B0 d6 H# R* s redInterval = toDecimal(bgR) / numFadeLevels;+ i0 D/ M% k6 p; u: B2 P
greenInterval = toDecimal(bgG) / numFadeLevels;: Q- ^9 ]& F5 H) z! X: h( N5 l
blueInterval = toDecimal(bgB) / numFadeLevels;
1 w6 p$ T9 B$ u8 g$ S" | initArray(currR,numLinks,0);
/ W/ p- D7 s& N& t8 b$ U+ C9 T# t initArray(currG,numLinks,0);
( u+ Y: q" A; E# ] initArray(currB,numLinks,0);& r; c, I$ I9 i4 ^0 V [4 T, n
initArray(count,numLinks,0);1 g7 W4 ]3 K0 K( {8 C7 H
initArray(fadeOut,numLinks,true);
9 Z* t3 @5 t* w2 _6 b initArray(continuous,numLinks,true);. ~! n( D+ {- T$ B# E
}
3 l# |7 m/ A0 Pfunction startFade(id)2 K1 r' K$ k( @" S+ ^3 ~: H. w2 V/ }
{3 I8 ~: I5 A) o4 t) R% o: a
if(fadeOut[id] == true)
# M, t# i3 l' ?. j3 p2 S { /*move colour towards background colour (increment)*/
# E0 D F6 W4 Z# c currR[id] += redInterval;6 U/ |2 N% `7 f, R6 n: g) o
currG[id] += greenInterval;
6 a" R4 [2 F" m X+ s! v2 Q* Q currB[id] += blueInterval;
% u9 O3 [+ I5 @ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ g0 p3 s& I( N K, Z' } if(++count[id] == numFadeLevels)% B5 v' K# b8 B- b% E
{6 }' t6 L, a+ f( U" g0 h9 L7 _
fadeOut[id] = false;4 u- \9 r1 h, G# Q0 h. w
}3 J& B( U7 X$ e/ J; f7 d
}
5 ^9 o* D# e$ o8 { else
?4 z7 _5 e# E6 L, ] {9 B# o1 Z; q( K h$ q
currR[id] -= redInterval;/ P; H, n, ]5 Y, |0 @
4 D/ h. i! P3 {& I( [3 T! }7 n# K currG[id] -= greenInterval;
+ I7 n g8 Q" I) ?5 w3 Y, H/ {9 O6 e
7 X8 j+ l6 Y) O; | currB[id] -= blueInterval;
2 h) v: z6 g, t
6 Y+ ~2 Q$ X- F! E% M newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);+ J4 i; z: X7 J
# f# ~$ z5 I( ?/ Y if(--count[id] == 0)
) s2 |0 M9 w% F/ ]0 b* d
+ e" a. x* U$ I- H {
; R* x! v! K) w: d
2 {3 R# Y: K. S, e0 _$ H" F fadeOut[id] = true;
, A3 Z3 I X) y4 N) K! N l5 w: h; }9 g( c8 S
}
* {0 A0 v! k) c9 H1 G* b6 ~& ~' E0 G% J' ?8 y& v3 n2 }2 _- \- e
}
; M( l9 k) P7 t/ q. E
2 `( A* x/ Q G: U. z- J if(continuous[id] == true)
* k3 e9 t2 E x& h
' d ^- b, g$ i$ R* L/ b {' q2 Z$ A( y( m( ]8 M
( q) `9 T+ \$ u; c9 L ~% q3 O8 b: H document.getElementById(id).style.color = newColour[id];
2 L) h* _8 M5 V- ]
2 @& k& n4 o: Y+ _: |# O- ` }
. t% D* {2 L3 m: w- M. Z/ ]- ^$ A# G8 h9 j- f
else
; h% q9 x6 d' X3 `; W7 X! P9 s4 G: {6 \3 X& m# j6 c
{
- Y; ]2 G g7 j e) I- p, w
8 @* b, V' a( k: k! n document.getElementById(id).style.color = hoverColour;2 z- h7 P% \0 ^8 q+ o
/ q( M& Z4 s4 G
}/ P% ?* N" b7 H4 P1 ^
# x! D" [9 t0 ]7 L! P4 F clearTimeout(tID[id]);) t# {2 m2 o; \- j3 G8 y9 ?
( D( X3 Q0 q1 n- B3 i3 g
tID[id]=setTimeout('startFade(' + id + ')', rate);' z+ Z, e$ c# d
) f/ B' N6 ]' K9 N. I: Y, \}: ?- Q: X* ~- H! Z1 n
( {: u2 ]8 }; n' ~! n( [- ~
function continueFade(id)
; X6 d9 }9 w2 j2 v
, f" H$ e" I; T! D{
+ [: x* o/ e3 |9 w) o2 z$ s2 F5 b% h
continuous[id] = true;
% p6 k. T8 m4 P$ \! b1 A1 z: d& O2 i4 m
}" w2 u$ e1 C \: h, g6 Z9 ]1 n
+ b2 v* F9 @" O I5 g2 B+ d+ w/ m* \$ s4 sfunction stopFade(id)
, H9 E' X# W& p9 R E3 C# `
& q' E, G9 W# Q, b{
) ?: K# H# e9 V2 ?
' K4 _/ z# B1 l. \9 | q continuous[id] = false;" J( s, d# R' A
( D! s8 T6 ~$ g" s+ ~5 P" ?}' a. z [' v' ?) w" k* F
& W l( S( Y% L. S& ?6 k9 j+ V0 W8 }
function StartTimers()
5 k: t2 h6 m) L5 v9 J6 P
' m+ A" t: d. G$ L/ _8 j- a{ //set up an initial set of timers to start the shimmering effect
% n$ o+ @, R+ O0 N8 ^
% @. n, Q6 m2 k6 o4 W w: p for(id=0; id<numLinks; id++)
/ y: _; m3 ?) }1 p! \7 |1 U, q: q; Q/ I: u1 \6 ?" V0 I6 u
{. F% d2 @! b0 e& `+ a8 d
@! u) c9 q- `+ P6 H t=setTimeout('startFade(' + id + ')', id*100);& K4 ~6 n) u. P$ A8 j/ ?9 }% ]: m
: K$ H$ E( L' U( K8 O4 v4 B }6 |2 B2 R9 |; U6 u( @; Y
" Q, S( H1 T, [- S1 D3 v}
5 R ~* Y* W3 i: `9 n
& k# ?# e" n3 S& X/ g" z0 k) y//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')! P/ S4 A$ x2 S9 N' q$ T+ Y
) W. d6 g- o1 P/ ~
initLinks('#FF0000', 6, '#FFCC77');
4 c+ ^# x1 [) M0 o" T9 Y& z+ ?. X: O3 x: `
//-->" G8 `' x9 R* k. X O- |; w* I% C5 h
! p6 ]/ k2 ?$ U" z* } |
</script>9 ~: I+ D+ n J# R/ h4 i O
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元4 ]7 q& Z6 k2 @0 Y0 W( m6 x7 v3 p
</a>
; e) p" k0 O5 J/ [* a% U9 G0 `/ @<br>
{5 ^, y, t# E! T; u& } J<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# I i3 q9 {7 N# P6 H<br>( b% h: [; E' ?1 y6 S$ Q( I$ Z2 m- C" M
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>) p* N6 d7 I/ ?4 B# t
<br>
5 j" H6 y* A6 i<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>0 l+ @/ u" w- _& H3 Y; b- M' {
<br>
* q, M1 f1 j: y* o( n<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>& S% E& x8 o9 z8 P+ r! }. e+ w
<br>; _! i/ H0 l. |- N
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& K+ s7 \# P4 c9 ?6 c# f2 t% o
<script language="javascript" type="text/javascript">
4 w# f- q% I1 ^6 @" Q; q* ?: `<!--% S$ N5 L+ w: M( L/ e$ y, Y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
+ \, W' o# P6 P* M4 _//-->
( d3 T) \! C# l1 Q</script> |
|