|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
3 P$ h1 h5 {5 E) q d! |7 Q `<!--! c( A4 [9 Z8 J5 y/ r9 M* d3 H
// convert a single digit (0 - 16) into hex0 k j8 }( M) Q) G2 c
function enHex(aDigit)
. L, {8 b5 e2 x- w{$ q6 o1 x. R) l% r9 M7 a
return("0123456789ABCDEF".substring(aDigit, aDigit+1))9 g% U4 n8 S) [8 Y
}
. S3 v; l- Y4 d// convert a hex digit into decimal
& v% r7 ? s) L' j _2 Z2 pfunction deHex(aDigit)
$ R$ L. {: ~4 J$ w{
/ w! ^5 t2 ?5 A+ P" V! `- D return("0123456789ABCDEF".indexOf(aDigit))
9 z/ [% G6 i: H4 l; E5 {}2 ^* F, x0 g j
) C2 q6 G0 _- z% n' E' W: D8 Y// Convert a 24bit number to hex: s' Z; \6 X/ B- g# |& T
function toHex(n)5 P7 m) Z) r1 y: b/ N4 B/ @
{
5 K0 B# l. Q. H4 l return (enHex((0xf00000 & n) >> 20) +! \) I0 B' s! P2 p$ d( S X: T9 @
enHex((0x0f0000 & n) >> 16) +
* }5 P# D9 N" x" S" Y; p; v enHex((0x00f000 & n) >> 12) +- @) O' |0 d. ?- {. O2 O
enHex((0x000f00 & n) >> 8) +
) U5 }$ J r6 K4 v: ?- e1 |* @ enHex((0x0000f0 & n) >> 4) +2 ~+ r" n( p7 u* O
enHex((0x00000f & n) >> 0))
+ U6 T: ]( r7 q' H$ p3 e}
8 v9 q8 y' U( X/ t& U4 g: f// Convert a six character hex to decimal$ }& k! j) a0 R3 o1 X
function toDecimal(hexNum): G/ Z, v( z# o: P; x3 p# x& R
{5 c$ j) M2 l1 |! x) L* o
var tmp = ""+hexNum.toUpperCase()
8 q& S- z- o0 ~7 {& s* Q while (tmp.length < 6) tmp = "0"+tmp. Q5 x* `0 T2 W$ B! M7 [" c
return ((deHex(tmp.substring(0,1)) << 20) +7 w+ I0 c# l" b3 k2 l! Z1 R
(deHex(tmp.substring(1,2)) << 16) + 0 l$ v1 @- u z( [& i# O; c- U! ]
(deHex(tmp.substring(2,3)) << 12) +
' U g: u% Z x8 D! d' P% @ (deHex(tmp.substring(3,4)) << 8) +7 H* c/ A$ Y$ u( N* k# l: F# N
(deHex(tmp.substring(4,5)) << 4) +
* l( E2 P( S% Y3 p (deHex(tmp.substring(5,6)))). R/ y1 y+ u- M
}
* a9 W% h6 `: ^7 T/ b7 y2 F///////////////////Shimmering Links/////////////////////& J) I: l+ h7 ?- D
//global variables
8 r4 z& C2 q! p% G/ j# X6 z& D2 lvar hoverColour! P& q5 B& D4 e+ }1 `5 e5 N; }
var numLinks;6 C. u1 c- B& b
var rate;
) a* y0 Y9 o" F6 R( d# G$ Pvar numFadeLevels;$ Y# b$ B2 q+ n4 |
var bgR;
7 a8 T( U5 t- H4 W% j3 wvar bgG;, U8 T. G- ]" Z& d, c& `) u
var bgB;( Z4 d: r4 X% _, \8 O6 ]
var currR;7 n- O8 m6 c; b
var currG;
4 h: a5 n7 M/ d2 ^$ S, tvar currB;3 F; l& j; n" s2 u* ~
var count;
* E" Z. b8 J$ O5 evar fadeOut;
8 @3 O$ d5 g; s$ U* k# wvar continuous;9 \: {& h7 I2 M" E6 }3 `
var newColour;$ \* J7 b5 S1 \. M9 V. m5 c
var tID;
6 f, s5 H+ F$ y; d% g" ivar redInterval;1 C/ I3 I7 ?: J' y7 E
var greenInterval;
& t: N3 b. C. W& n: `3 d3 ^var blueInterval;
" b/ ~0 O6 G" E6 v. Xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
) c3 U; ]3 o( @( ^9 p{
" }- b. t& M* r) ]2 W hoverColour = mouseOverColour;
* i+ [$ f# |1 i+ r7 `+ e numLinks = numberOfLinks;
# o1 E* q& T" X rate = 1;, z6 k' K" |! I. x4 [3 a
numFadeLevels = 30;
2 q' w6 o7 h% J- j function initArray(theArray, length, val)/ r& l T" S9 L" m( H) ~ }7 V
{
) N T# M7 G' K for(i=0;i<length;i++)
# j* E h1 P1 B0 G0 e {
d% A. J% v* q/ N" e1 B/ I4 q. p theArray = val;/ L6 i/ ?" I$ R' Z
}
; c" ~6 X1 @, J H5 ?9 R }; W" H: \3 ?2 p. }, @- D
bgR = '0000' + fadeOutColour.substring(1,3)
4 V1 X' M5 `1 L# M6 Y bgG = '0000' + fadeOutColour.substring(3,5)# D6 _, Z& q0 q+ d+ ~2 k
bgB = '0000' + fadeOutColour.substring(5,7)
2 V, T+ a( |7 s6 b3 a4 ^ currR = new Array(numLinks);& k( K2 V+ t! A) d# b# x/ ~
currG = new Array(numLinks);' W x2 n. o4 ]7 x
currB = new Array(numLinks);
+ J# `0 d' v. I2 i count = new Array(numLinks);
+ t- w4 |3 L# ~( n# h* t8 H# l fadeOut = new Array(numLinks);5 X" u0 H9 n1 r0 w6 q
continuous = new Array(numLinks);
9 E% s" v$ ]6 C5 Y newColour = new Array(numLinks); x6 w/ v6 Q( q T, h% V
tID = new Array(numLinks);
8 L. C8 Z9 V$ r; m' \" {8 v redInterval = toDecimal(bgR) / numFadeLevels;# O5 ?7 ~. G7 V% Z
greenInterval = toDecimal(bgG) / numFadeLevels;
4 p# b- \. V! _: N1 I7 w4 u+ R blueInterval = toDecimal(bgB) / numFadeLevels;# i/ l' g" F0 d2 V
initArray(currR,numLinks,0);
/ N" ~5 O$ r: P$ r# i) Q& @ initArray(currG,numLinks,0);
& [5 R! v! q( a# d. @& P* ^ initArray(currB,numLinks,0);
% P$ J! W1 M9 N, ^1 e initArray(count,numLinks,0);& d. |, G1 h) k3 @2 I! F1 }2 }
initArray(fadeOut,numLinks,true);2 t2 G* L% o" U& V0 `( f
initArray(continuous,numLinks,true);0 k8 Q: p( Y |: g7 I" H0 @
}
1 V" A! ?8 y) w2 E( v, }function startFade(id); S0 F& b H: X- k. ]% s9 f
{& L* ~' f3 c$ F
if(fadeOut[id] == true)
' A9 s4 B1 g5 E3 D( F { /*move colour towards background colour (increment)*/- A8 f9 {; s! U) g* r9 L1 X
currR[id] += redInterval;
% i v2 V/ o) ^! D" v currG[id] += greenInterval;
7 F7 j% R( z. x; }( l1 S5 O currB[id] += blueInterval;4 \+ {5 h7 X( d
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! c8 y6 e q3 u
if(++count[id] == numFadeLevels)$ C$ I" c* D V2 @: v. ?) V
{ e+ X. M6 V) c. H
fadeOut[id] = false;
/ U$ v" q2 o) ~3 T3 P; F }
9 n! p U" r4 g; K* P5 F }, J9 T7 M+ t5 i: N; I) m
else
# l! [2 t$ N9 P! _4 g x {! X& N9 K4 v2 E2 E. W( ]/ v
currR[id] -= redInterval;- p8 H: \" c! j: A
; ?6 v$ o5 i) u0 I5 k- I3 d. | currG[id] -= greenInterval;9 b- E1 f2 p1 |( H* M9 l' k h
1 t8 P f& a, J1 ?: X/ F
currB[id] -= blueInterval;
% Y' e) {% Y @7 w- i* k* {
" d, t. @, q' _8 H$ l newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ K5 f6 Q" E) p* \4 F/ Y3 f; T& H% a5 M) N/ x/ P
if(--count[id] == 0)
8 @: s% Z6 H0 y+ M
+ C5 f$ ]( q1 x8 I: D5 u8 w {
2 B) D; j+ p2 i( [1 | A9 J1 r5 q: P' R1 q
fadeOut[id] = true;
3 Y+ y+ p. J' A5 T" \( V
( x9 s0 N' q: M9 m0 a8 F1 Z7 ^4 y }
6 ^# r/ V" {) v, \* f; Q8 c3 f
9 H& o1 T8 H4 Y6 b4 m" O/ D }$ _4 a! ~! e' ^3 ^2 E D: T
) I" Q: Y1 N2 y& p2 X' n W: E) h6 T4 E0 i if(continuous[id] == true)0 _7 @ Q3 K# m+ E
1 y i+ T, [0 p
{# Y- J8 M4 A9 L8 E
9 u4 |+ U1 ^) S% y3 D1 |
document.getElementById(id).style.color = newColour[id]; 4 C5 P0 v) a! `+ o) B1 o/ l
1 ]8 ?1 ]8 |8 {; ?! ]: o4 Z
}
7 f z" j' x1 y+ W0 k& _0 C
+ o+ t8 U7 v7 n' t" I else" m4 `2 R; ], f# G2 V
_* S6 P" w+ Y3 j0 L0 u- q3 u
{5 U4 m1 t# J/ i1 ?# U" n% Y: _
; Q- e& y1 @& c document.getElementById(id).style.color = hoverColour;
! Z( h( m3 C; T7 L5 k* O; r/ r9 ~7 r1 U: n+ y& a `) O
}
) c6 j9 c' a4 c, E$ f9 @! C9 ^. a
" H; }6 j) b* H/ C' r5 ^1 h clearTimeout(tID[id]);& @% Z/ v, J6 u, O9 c
8 U* B! b. F, x% _7 e2 `7 P
tID[id]=setTimeout('startFade(' + id + ')', rate);* E! `0 I; Y, [0 J! M
9 t; o* o. W% N( Q5 G: v; C
}, x( v% R1 F2 p4 t% |7 J
0 s. H+ N/ J0 c0 d: X3 Q* z7 k
function continueFade(id) y: p9 g# |, [) K) w
- n$ G- M# s8 p0 X
{, _4 [" ^4 n. _
1 L5 a: G5 j8 A1 @+ H# ` continuous[id] = true;
8 ^0 v! V! W% H% a8 O, s% b% _ }9 l6 E) M, N. }/ q3 P0 F& F) t
}
* R. g1 @& g; F4 B+ O4 g8 _3 i) @" G5 p- i+ [9 a) t
function stopFade(id)
9 [6 d% M8 j. P+ X! e7 J
- f' U( G8 Z: u{) X& K V8 c+ r) N1 V
+ p% Y, m& R& L* W5 `; G( g: a continuous[id] = false;& |; \4 h$ w4 S# s
- y! J5 g. x+ r& t3 l, G3 z
}5 j `5 [3 T- Z* b( k" @ f3 z- r
: S* U+ v/ c7 _& i" j
function StartTimers()
; w1 b" q- x$ H& [+ m) {7 Y9 q7 e% B& _6 t
{ //set up an initial set of timers to start the shimmering effect3 F8 P( F) m" H3 K* U
% |6 Z, m$ n2 y/ f
for(id=0; id<numLinks; id++)
4 t" s1 d/ M# W T4 O( b" n, L' u
9 L+ { `: Z2 t4 O# o+ J4 r) Y {
0 y c5 j H/ [ z) A) a% L7 Y' m$ k1 B
t=setTimeout('startFade(' + id + ')', id*100);7 p9 H# z2 n" i5 A7 a, u
3 I' {. B: ?% C$ f5 O/ K/ D }
3 ^5 z& L: H" B7 m! s/ y8 [0 Q2 }! U/ G3 ]. l! h# T0 `; e
}
+ A- m2 k$ z4 L0 X9 P" M2 v/ u
3 @5 z! J" \: U3 [0 C//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
+ B1 Q& v3 i$ N! D& A: }# N7 F3 ^* N' g# j) S% O+ F
initLinks('#FF0000', 6, '#FFCC77');
. \1 r" w* v4 y$ n/ G3 p; ~1 S& Z+ y* l! Z E
//-->
6 I' P y1 E& D+ Q- Z+ m7 n6 X0 Z5 o3 s" U; _' y8 P* `4 s6 c/ y
</script>
% T# [9 t5 \4 w0 U8 T p3 L' |5 Q- J<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元 A" ?3 x+ e* P+ q
</a>
6 J. f! A1 ]0 W: F<br>
4 I' x1 h |2 x3 [<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>" H% a+ K, k B) Y) F0 V
<br>
$ C2 n9 q+ B3 T4 h5 t<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ x. P9 D. j# {- H
<br> & d! v$ l3 x8 ~& ^! s, a
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>5 K7 U8 F" ~, p# a- B
<br>
2 \! j$ A1 u& r* Y! X<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ Y) W6 t* g8 T<br>7 _ f; z2 Z$ l) U9 ]$ t
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>: a: B+ [ b$ E' x! v
<script language="javascript" type="text/javascript">
( ?7 c& y G/ H( K, f8 ^. I<!--
5 _' ^& L8 \7 K- h7 r% ^setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 s. s6 u6 U k$ R | j. O//-->
2 c. w4 Z1 Y: \</script> |
|
发表于 2008-1-21 20:48
|