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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
1 ~% q% k6 H# ?+ l1 K<!--8 B" E( Y) B+ R8 r: ]4 a
// convert a single digit (0 - 16) into hex# Y$ o0 y/ B2 p; {% v) u
function enHex(aDigit), p9 M8 d% m5 _ ~% H" F
{
! \ g' T6 V; o return("0123456789ABCDEF".substring(aDigit, aDigit+1))- n8 s8 p/ ~+ Z# V. S
}
9 a5 C7 S2 C* `! G) n// convert a hex digit into decimal
d' s: D ^* S6 `2 f& `$ Gfunction deHex(aDigit)
7 G9 q2 b! I, T( G' I; S7 Z6 c{
' _6 Q8 |6 \, z" Q' c return("0123456789ABCDEF".indexOf(aDigit))% e) ~( U+ m5 t# w* {& q Q
}$ Z5 n' ~5 A" p) S# \
$ \0 i( \8 s& A# J& {& Y// Convert a 24bit number to hex
7 |/ @$ Q. r- O8 \( S5 ]/ j1 nfunction toHex(n)4 j2 D# _4 J; g7 }! A; ~
{
& B1 `$ f) M7 M8 E0 m) U8 t" s return (enHex((0xf00000 & n) >> 20) +! y( V. `3 z: `& B0 y
enHex((0x0f0000 & n) >> 16) +
" J2 p% r: H! a4 V8 C# o: u7 s; _ enHex((0x00f000 & n) >> 12) + w3 M, O7 Z. s" }# f9 N$ {1 h. i
enHex((0x000f00 & n) >> 8) +
" U& E+ O) J6 J+ e, ]4 Q( G6 O enHex((0x0000f0 & n) >> 4) +
; E( f, S. V% l/ U1 J( @/ O enHex((0x00000f & n) >> 0))6 L. D7 T& d* e- ?
}
- ] O8 ^) E2 j3 D// Convert a six character hex to decimal- L% n# t" P% j: s$ q9 K
function toDecimal(hexNum)0 F" H: z0 A& I$ G7 P7 j. K
{ m! ^1 f: f4 B2 |2 U
var tmp = ""+hexNum.toUpperCase()
; g/ f e( F( `/ p while (tmp.length < 6) tmp = "0"+tmp
3 s# O" ]6 C) I- q return ((deHex(tmp.substring(0,1)) << 20) +0 Y' l8 Z' P" X# \+ p
(deHex(tmp.substring(1,2)) << 16) + - `1 ^- v) r7 F3 B f ?
(deHex(tmp.substring(2,3)) << 12) +
/ u! g3 J& \4 j) o |9 D (deHex(tmp.substring(3,4)) << 8) +
( F2 H5 m, T/ Y3 N) D b/ I (deHex(tmp.substring(4,5)) << 4) +
! {' L+ ~( X7 j! f4 D- W/ C, X (deHex(tmp.substring(5,6))))$ B7 t: X. ]; @3 f( I
}
2 w, U2 ?$ a, K8 K$ f2 E///////////////////Shimmering Links/////////////////////
* k! q5 H" N2 m3 _' w& X) V; C//global variables
3 B- t, z& S) v9 Uvar hoverColour
% @/ S( y( S7 P" v) t7 r. R' Bvar numLinks;& H, @- M% f( ]; K* a
var rate;* r# D' G' S3 M# S. i7 A
var numFadeLevels;4 V1 y/ M! y) H j
var bgR;
2 u8 X- {6 s) a4 }* X& ^var bgG;
1 I) V% }& i1 l& _, ovar bgB;
, _) F& `- }5 s: ^var currR;
0 ?* j* a0 s1 g2 a/ ^var currG;- E$ I" j. }0 t! s0 C4 [- t: |" M
var currB;0 p; r8 M* R8 C& z( T9 F
var count; ^$ ^2 \& v1 J8 ^. V- M, s
var fadeOut;) [" I& o e ]
var continuous;
) C. i, j2 s9 @* I3 Gvar newColour;* H/ R7 ^8 N' Y" i/ v" \
var tID;% A2 h V& i4 u& g9 }
var redInterval;( H% K, G& d1 ]
var greenInterval;
. |" q. r6 o0 r5 A J7 Mvar blueInterval;% a" C( r5 _9 n. D: o
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)" E+ m( Y$ D6 i& R
{
9 m9 |3 n+ {, i: l hoverColour = mouseOverColour;
1 s8 U% @- h6 {9 n _" b ?- N numLinks = numberOfLinks;
" x% T1 g, |& a: u, U, W rate = 1;
5 W. r$ t/ G T4 f& J& F numFadeLevels = 30;* g% c4 x+ {# K0 |+ z
function initArray(theArray, length, val)' r/ a! @+ z5 y$ T8 o, I
{) _( r5 w" e; T+ ?& E) N4 o, ]
for(i=0;i<length;i++)
# {1 s9 O0 e5 k/ L8 q {+ P8 k2 z/ T8 k9 }5 ?; K c( L
theArray = val;
& E' c# L% n P% o. b }, s( z& Z t; E) W
}% H+ s/ F; b2 H: w
bgR = '0000' + fadeOutColour.substring(1,3)
7 K" b) Z4 A) i* O* \ bgG = '0000' + fadeOutColour.substring(3,5)5 e0 V2 y; G1 G p
bgB = '0000' + fadeOutColour.substring(5,7)4 d( o* q) G- F2 k
currR = new Array(numLinks);
! S' n' V' x% y" |8 ^' S: e currG = new Array(numLinks);
2 ^ P. h1 _. r( S currB = new Array(numLinks);" O- H# z% a- u1 i. z# [) ^
count = new Array(numLinks);
$ r" s) A! r4 `6 A, C" x fadeOut = new Array(numLinks);& o, J& Z& y( v; F! x% g9 } C
continuous = new Array(numLinks);( A- U/ G8 V0 @7 U
newColour = new Array(numLinks);
1 n9 E; x6 S' w8 r3 y9 W tID = new Array(numLinks);; x7 a2 a. K9 d+ [$ m
redInterval = toDecimal(bgR) / numFadeLevels;9 G, D% T* {% z f# B& ]2 Y R
greenInterval = toDecimal(bgG) / numFadeLevels;3 r1 n7 t4 w- i) V/ @7 q/ U
blueInterval = toDecimal(bgB) / numFadeLevels;2 a) n9 |( i2 |; B# I2 {, w
initArray(currR,numLinks,0);
9 L' T4 y7 @, K0 A8 H initArray(currG,numLinks,0);
0 J: d& i+ t' P5 T% C1 b) _0 l' k8 \ initArray(currB,numLinks,0);
: _3 d; [9 n I# _; o initArray(count,numLinks,0);% i5 G% r5 @- ^
initArray(fadeOut,numLinks,true);- c* x- q4 t. v- r: n$ _
initArray(continuous,numLinks,true);
9 g" ~9 q; T p u# I& I}
' ?: k% V! T# ~7 ?" X$ l' T# U- ffunction startFade(id)" O. x# r: a% ?0 b/ d
{
4 q7 \5 B# u2 I) Z3 J# Y' w if(fadeOut[id] == true)$ A E/ e4 P# ?. w# T' L9 b
{ /*move colour towards background colour (increment)*/" N) s2 h+ f! v2 A, G; N
currR[id] += redInterval;
% r4 F7 l# d$ y5 w. @ currG[id] += greenInterval;
% x/ p( S( F( d7 E2 U8 t& x currB[id] += blueInterval;) `3 h! T" @5 w$ p5 q
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 `- @. z: m0 j6 T3 y( R& r
if(++count[id] == numFadeLevels)
. K5 h/ b* J: X6 O5 k! c$ H* g {
' T& v1 s9 b8 Z1 Y fadeOut[id] = false;' H+ e( O& o$ {1 K0 h
}
# _1 n0 |3 o9 E8 ] }
) I0 h& n, J [$ R9 P- `$ n else* ]/ O O2 d9 r# z6 H# H
{
- y i) @8 E( i currR[id] -= redInterval;
+ y% F1 a# v$ L3 }) f
4 Y2 g: J( R: d% W# f6 t8 o1 h currG[id] -= greenInterval;# O( ~+ p- B \0 A& o" ?- l* w! ~5 L
8 C- c$ h0 W6 V) c! E1 Z
currB[id] -= blueInterval;
3 a9 ` _: n$ @2 s) l% S" b& R7 U
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) t% m. @/ A: c" N0 `
9 b/ F* d K R I C! u) w
if(--count[id] == 0)
" \. J; s2 ]% T- q
' l" j% q S. k0 Q% q4 { {0 A k4 A8 g0 V5 [6 ]4 m, ]
3 @# I$ c9 A n0 ?9 t0 h fadeOut[id] = true;* d3 n( v+ f8 p& N6 H2 A
' z, n# e1 c3 U$ a& K7 }' d
}
+ K1 e! B6 D9 E& ^4 C
" u% X& Q- ], f A4 P3 q }
5 m, N) h9 a @* S- e0 S, Y# S+ S8 T, t7 i8 _6 s( X
if(continuous[id] == true)
- ]- O5 n& e4 ?- j; N+ a
; {, N9 j$ j3 O( i& G8 J6 w* p {/ b; A1 t, P, [, p& d# J- c! q& e
% B$ U% R6 @3 y6 l' j6 r document.getElementById(id).style.color = newColour[id];
, c. c, C4 P T7 s# H3 r) |+ r
: q4 R0 u- \& b: E& {7 W }
7 V7 X( M$ U0 V% i
0 X0 m! M1 C+ A9 e, {' K! p6 D else8 \( r6 m, f, Y$ G7 ^6 X$ m0 F, T0 |
) R7 X; {2 n, y* H1 o0 ] {* A& e% n+ V5 d1 Q- J* Z! T
+ Y2 R; a8 X9 Z document.getElementById(id).style.color = hoverColour;
8 C0 {5 \5 z6 s7 w; B! l
7 m8 E9 }1 }0 G: _+ s }
0 d/ v* v) z% _4 m
& D, A/ {% ]+ M1 K9 l clearTimeout(tID[id]);
( J5 X2 Y( f0 m+ s! m# B9 ?
6 A1 L, X: G* o* ~& N6 u, f tID[id]=setTimeout('startFade(' + id + ')', rate);
! t% t: k0 x% S* m$ q1 d1 X' W5 g# {" Z+ k/ N9 o8 g
}% J3 F5 K! U/ R2 e7 n0 \% z& v
0 r6 k; X# U+ |( K8 K+ kfunction continueFade(id)
- O9 G7 y* l b+ A
' \. d; \: O1 E{
, T8 M& `7 c/ t" R& m
) g6 Q; N, _5 n" ]9 W: n continuous[id] = true;5 F# E+ ]6 ?& M/ `, r8 H3 _
# Q$ f2 X9 z7 r! w. s& Z2 T1 |}
( h: U1 @8 t: @7 q- {) g* E
+ r) C6 B1 j7 Q) i8 c: C8 gfunction stopFade(id)- z& n/ K! e0 ]1 |0 v- M; k9 }% Y- O
; G4 N" h. x. {& F: w- f{
2 u; `& t/ K; R8 B0 t
/ B0 m4 z; y; m0 I1 N+ R continuous[id] = false;
4 a1 E. Y5 y _2 j, T) s( s' C9 f4 c
}! Z! s. X" ^* d
* S2 B& p; ?5 l$ x7 [3 Bfunction StartTimers()
: s4 f/ W0 q, T( c
, C( ]! ?* C! \* A; {# h* n{ //set up an initial set of timers to start the shimmering effect Z# E' ?% z- `: k
4 B9 q' T0 c# ?) ?8 m for(id=0; id<numLinks; id++)8 t) Y2 ~2 A0 Y& x/ Y, }
4 i H- L* w3 ^ {
, h+ ^7 g, F8 t- j
' c$ f/ w2 {# c4 S# E t=setTimeout('startFade(' + id + ')', id*100);
' s0 K- B6 @2 a9 ~7 K6 m
' ?1 G) T7 L4 U; s }/ N# Y' Z M- p7 @ c" J
" d; Z: X4 B2 q' [1 Q7 R/ ]( M}* `6 W+ N7 X- w
2 q4 j# u; z m' V) c2 W//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ H) ?7 K$ V* z4 V s
# a7 c" O( j& E1 ZinitLinks('#FF0000', 6, '#FFCC77');
8 |9 @8 Y& Y* B0 w
; G) _2 B! n% G& E1 }0 e. w//-->
; t, ~; \& m' v8 e1 w% J
& {) x) W7 R# F3 j- C6 H</script>5 a& H# U+ A8 m4 i
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
8 g; y4 J) H$ q! T* J% n1 f1 L4 h</a>' E1 ]- ]. }- l
<br>8 W6 e8 f& b, R5 j0 ~5 |
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
{& C, d. r5 J' ^<br>
- `0 H+ i3 V4 F4 c+ Q/ Q; ^<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># T, W6 X; n6 w7 I% `$ G* H- p5 R
<br> " L4 Z& A0 C. W1 G7 a6 h' J
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
$ S* l) A/ y2 f# J- Y<br>7 g6 o7 o) p, C8 J
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ G" I; c& l1 h' m' r<br>) Z$ G/ c! f* ^
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>- Z$ V7 g# E4 f: s T( a
<script language="javascript" type="text/javascript">
4 s4 U) K) ~4 r6 `2 X0 R# L<!--! O. d6 b$ E! P! N M* x6 G1 f
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering" Z& V0 ~* P2 v+ |/ ]- h7 ^
//-->
4 b8 _- T: a# w; q4 Q</script> |
|