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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 I3 g9 K# H+ R) m3 b1 [. t<!--
& B m; Q3 g$ u% f! ?; \: g// convert a single digit (0 - 16) into hex8 y, ?3 _ ? p' z2 {% Q* `
function enHex(aDigit)4 S7 |9 y2 L! S- I& o1 }( O: ?1 F/ A, C+ Q
{
. ^( Z+ u0 B4 y9 h2 o return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 y/ X; n) j& |; F J+ W' `( s6 H
}! X7 e7 O5 I; ]* ^
// convert a hex digit into decimal
4 Q/ p( P( F! k3 g2 T9 yfunction deHex(aDigit)5 l, ?7 m2 q% L0 b( x" ^, ]
{
+ Y- j5 y; s, C$ W9 L5 k return("0123456789ABCDEF".indexOf(aDigit))
0 M; U. U% @. q6 U: |+ {# f! I6 z}
! N; v7 l# y" E( l
: @: k( H( N1 P// Convert a 24bit number to hex
( H, p" W4 i. f* R* V" hfunction toHex(n)
" w1 J' l9 a* b! g1 s{
0 z5 i0 r8 V* x4 l0 d return (enHex((0xf00000 & n) >> 20) +
; c: ?, J2 ~+ u4 [( {5 N enHex((0x0f0000 & n) >> 16) +
, V! ?* n- {6 |3 w4 v9 n' @1 K enHex((0x00f000 & n) >> 12) +# J4 l4 z+ a( Q8 {! j8 Z& @2 e
enHex((0x000f00 & n) >> 8) +
% ~9 Q8 _3 S) d* C$ O; D enHex((0x0000f0 & n) >> 4) +
# m& F7 q/ @. Z. w/ L* h: ]' L7 b enHex((0x00000f & n) >> 0))
' G8 Q, K1 d& J}
4 a* @5 u8 B6 R/ @// Convert a six character hex to decimal
; H Q4 F" I2 @function toDecimal(hexNum)7 [% ]( p! G& @% v- L; A+ G1 M% @( m# |
{9 \1 ^! _* b9 i( Y
var tmp = ""+hexNum.toUpperCase()2 v8 S. Q7 U9 R6 ^+ |& F0 F- ]
while (tmp.length < 6) tmp = "0"+tmp9 Q) Q% J: d9 h& B- `% b: k
return ((deHex(tmp.substring(0,1)) << 20) +
' S- O2 W: q: z& U) S; h) ? (deHex(tmp.substring(1,2)) << 16) + 2 R5 {) C2 c8 Z/ r Z* f2 w' I, f
(deHex(tmp.substring(2,3)) << 12) +
* i: P9 ` d; @) j' Y" t (deHex(tmp.substring(3,4)) << 8) +1 W @/ I/ q9 {% _- w: {
(deHex(tmp.substring(4,5)) << 4) +% @7 I3 ?, A z1 U9 x- \
(deHex(tmp.substring(5,6))))- G6 B y3 R7 T( d
}
+ V' h8 h6 A. w///////////////////Shimmering Links/////////////////////
+ I1 f# Q/ O" t) L//global variables0 h( X; b7 J/ M% @
var hoverColour' Q# i% h4 A+ r( p+ @2 f% y
var numLinks;
2 ?1 p. R, M% D; l! |0 Y; Zvar rate;
3 k1 w5 C' P! m3 I, n' J! Q9 avar numFadeLevels;
: q% ]& }+ o( v$ _var bgR;
r- n" f. b/ O& w8 F/ ^; Bvar bgG;6 N4 K* Q& Y1 k& c
var bgB;
3 M V7 R: N, t( A* d0 uvar currR;
- l- I9 A1 k3 G- \var currG;1 ]+ S# @- p. K. F0 A; l1 N; L7 C
var currB;0 K# {0 D9 Y% L$ T' Q
var count;3 s( w+ m t4 b/ l
var fadeOut;
* b) K7 z4 A P3 Kvar continuous; q% J7 M. \9 {& r1 i
var newColour;" |$ G0 O: o9 a+ E; c* d& @
var tID;- a" J; K" {3 [% l3 g1 u7 h
var redInterval;( C/ v8 l n* M/ p. p! N
var greenInterval;; K, W" ~; A7 j* K r8 Y
var blueInterval;* ]1 W! s1 R7 w* Q+ d
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
+ e5 r9 ?7 h4 Q+ u$ p{
/ J3 D' C" n7 f! f hoverColour = mouseOverColour;6 i- S0 D) p9 ]& R
numLinks = numberOfLinks;( ]# Z% \. J8 B3 }) g+ ]
rate = 1;. _) D3 x' L; ~6 w- K5 S
numFadeLevels = 30;5 U3 N2 ^1 J2 q; F
function initArray(theArray, length, val), Z* |: b$ B E% b+ k8 j$ C% Q
{
" ]4 e0 W# w; ^7 W& i6 y for(i=0;i<length;i++)
* A4 j7 p. `' S6 ` {! h4 p; _8 b% T% ^" Z. L- \
theArray = val;
, E: b2 l0 [) ~+ ~ }6 i+ E$ |7 z& w* |1 }( g
}
5 S# j! |8 y8 i4 n bgR = '0000' + fadeOutColour.substring(1,3): D1 y" U+ X: ^* V' ^
bgG = '0000' + fadeOutColour.substring(3,5)
$ ^ f' y; w6 O- o bgB = '0000' + fadeOutColour.substring(5,7)
3 E* t* [, v1 w- y. u6 `! o" @% U; h currR = new Array(numLinks);. Z: b9 u; J0 i7 P
currG = new Array(numLinks);4 ~% a! J9 y7 z9 c) \) `; ]
currB = new Array(numLinks); c9 _3 K+ e: `: T8 D) } Y5 K6 s; T
count = new Array(numLinks);
( u* z" M( Z0 ] fadeOut = new Array(numLinks);, ]# `8 K3 u# z+ a N% O
continuous = new Array(numLinks);4 ^% e$ U7 V( f7 |
newColour = new Array(numLinks);
5 E( d& Y1 x/ R7 O. n) M1 v tID = new Array(numLinks);6 W0 y, p& `' k% M6 H s9 D
redInterval = toDecimal(bgR) / numFadeLevels;
) O: k/ J! S. e greenInterval = toDecimal(bgG) / numFadeLevels;
4 g; H( G `6 L2 z blueInterval = toDecimal(bgB) / numFadeLevels;
9 M: i. r& j4 V! R initArray(currR,numLinks,0);. i( N3 d6 I. @. X4 d! g" S
initArray(currG,numLinks,0);) }0 F2 H: S) ?
initArray(currB,numLinks,0);
, M3 s" _) ~4 k9 f4 N6 c' C initArray(count,numLinks,0);
; r2 w' y( M+ n% j" X c& D initArray(fadeOut,numLinks,true);" E/ S i2 z( _# S& z
initArray(continuous,numLinks,true);
- a+ \/ O" D6 J1 C; _}
9 z- M3 _! K, p5 G) Z2 hfunction startFade(id)5 d$ K3 ]& m: c% P' Y
{
( O5 q' i0 F# K( u if(fadeOut[id] == true), }$ x# i+ K4 L. i4 {, E
{ /*move colour towards background colour (increment)*/
' a J. N% t4 F! r7 H4 \; K currR[id] += redInterval;
! y/ D# E% r7 j' c6 t6 t- T currG[id] += greenInterval;9 x4 {' @: g2 d& H% a- p7 P! k/ c1 N
currB[id] += blueInterval;- E/ }$ D' c) Y/ G
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" R' u3 n0 P7 b& z w; H
if(++count[id] == numFadeLevels)
! J4 M C& x% J0 I+ M$ g { \- E) o2 C" L
fadeOut[id] = false;5 a& U& n* d5 A
}7 e- W$ i& s; K
}
% w6 \& q6 q# q5 m. ?8 ?, L% k else. u( ^$ l5 ]4 x1 @1 T* a+ A
{1 k5 a* A- s; x( ~1 G
currR[id] -= redInterval;: w& D' S( T4 S. p$ P! \
5 W C1 U% P, z; \, _
currG[id] -= greenInterval;9 ?' c3 m: S% d, _! V7 [; F
3 F2 ?! K: Q/ M4 ~1 P4 M. ]9 ^, T currB[id] -= blueInterval;/ m- t; W6 i* k7 r+ }4 s7 R9 S( A
# A& Y. M$ x4 B0 U" n0 {7 _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: K c! B4 V7 }( D
J6 U0 o( L+ ?( V if(--count[id] == 0)4 L1 U- g/ p: D& m8 Q. ?1 i6 s( e1 ?
' ~! U, p# l* l) Z3 A
{
* [) n3 I1 _3 E" x! J) \( i) o) K' z( l% A( s0 g B
fadeOut[id] = true;
0 k) R/ O# m/ M, y- j) s8 k m! h: M* G4 {8 Q
}
& q; N) f; H! j, e4 h& h5 n! b. w' K, T, Y2 A9 Q7 ?& H# @: z
}& t' [4 U/ v4 R1 S9 a8 [, e
+ h' k- q/ I2 A' i/ N0 e) D if(continuous[id] == true)
9 e! e- G# c; f
7 J" ]0 C( b5 V2 Q) ` {
" L: @- o8 A2 d2 |+ ?+ O" a6 s, W x0 p, v. @0 D9 T' Q! \1 \ ?) p
document.getElementById(id).style.color = newColour[id]; p3 d$ b3 d( c
- H6 k. U& ?9 @; `3 \( ]
}0 |+ \' P. P$ H9 j# r! c, m8 r
+ B! E7 |2 a. k P* I else, r; @1 ~1 G9 U3 S; e: w l
d+ L" N" v: ` {, a( N) F! W( }) `6 ], I m* R
! P& {* H: ~! _5 d- R document.getElementById(id).style.color = hoverColour;1 T/ X) x' b( }* ^
2 [! ]+ ]/ q+ k" C! h7 l8 v }9 J) J+ g3 Z# H5 X% A
/ J/ ]1 w# o Z clearTimeout(tID[id]);$ s5 e$ p. ?" R1 ?7 m( [6 s
1 I. S7 \& ` V5 R( q6 Z
tID[id]=setTimeout('startFade(' + id + ')', rate);3 K& L) i( _" B" N+ b
7 X- F6 O6 X3 I2 |" w; h5 w8 Z% z. _}
/ a( r# r1 e# P& @0 t# z
8 `0 P7 r4 x5 x: yfunction continueFade(id)
: B/ Q% [ ^* u4 s7 K# M
! Q. Q/ o# G- z+ y{
6 b2 Z% z( n! b6 g2 m
0 T& W) o5 L: ^+ L% c continuous[id] = true;3 V5 f* N5 H, N$ n1 D9 j
) ]% z% G, l* p' N
} \( s+ x$ `) p# T
/ v5 \; \5 s5 ?2 U) O" `8 ~4 kfunction stopFade(id)
" a+ @" \% ^9 c, W
. R; Q N" K* `$ e- o{
' N3 {: ]; O1 j6 C2 G8 S
" n0 F& ^( u- m continuous[id] = false;
9 I2 \" h3 a9 W% O
4 D. S2 ~# _" E7 ~8 r}) g2 A7 X i( Z1 h3 [& t9 \
# ~7 P( u2 K2 P8 }3 y& f3 c% Pfunction StartTimers()
/ c% C: Z6 J# s3 w& c5 M# c
, n x3 m* K5 ?2 E{ //set up an initial set of timers to start the shimmering effect
4 J! E2 u$ m' @, m$ b- X- n. ` z# c" n7 I! |) x
for(id=0; id<numLinks; id++) O: T2 i3 _) H' Q' Z1 O
% v; y4 L' I( l5 S) N& z {% R8 @9 H' ^; c0 \+ V/ [, \
" }% ?. e' Y* X3 Y
t=setTimeout('startFade(' + id + ')', id*100);2 v, O3 S6 O& x: f
& h7 g$ N) H' g9 Z }
+ b, n: M; I* Y4 Z- ?
1 `% y* s& b" J# e+ Q. g/ @# H}/ ]1 h6 T. `. Z/ t& W
9 }' V: b3 f" N( }, b& h
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
. y) o- Q. ~9 b. q6 w1 g2 N# i' \! d+ f2 ^
initLinks('#FF0000', 6, '#FFCC77');! y* I; D, [3 Z2 L# Q, [/ h
" V' M, P5 \: ]& z/ r% z//-->0 I! N+ h" f8 Q, K, ~
9 \6 w2 \# F$ D' x. o: g! Z6 X. `
</script>
' n0 v6 J `* R<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元+ D" u0 j: Y( @5 K
</a>
2 _& C8 k* k$ {7 {<br> I) q8 o1 a; d+ b* G$ i
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>3 I8 I( b8 O- w& E Q2 z4 \
<br> p* l m7 g' o8 C, V- P
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* @/ P( \0 J `( t5 m+ q<br>
: r5 J! [& V5 F2 C& m( @% q2 J1 o<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
) r7 \# i" Q/ R% a- r" E<br>
& y+ ~+ B" e, }/ k<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
: B2 e) l5 H. p" J<br>
4 X5 G0 o; I; ^& g- S$ M<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
" |5 R2 K: Y; Z! w$ L0 m% x, h<script language="javascript" type="text/javascript">! b7 m1 q/ ^: ^( ? M
<!--
/ V5 x" {8 f2 X# Q" z" i6 _setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering, u) {4 ?2 F2 ~/ X0 v2 \! _6 e
//-->
1 a8 F* L: ^5 y4 n8 r H</script> |
|