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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
6 h$ j w7 ~, k7 ?0 i1 v<!--
( l! W+ b2 |' G2 n+ G2 T// convert a single digit (0 - 16) into hex7 m% `$ c3 O) R7 ^+ O9 \. E! r
function enHex(aDigit)
1 R- L8 j/ A+ W" P{. l8 g; i4 d o
return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 Q/ M' C; c! J" I4 u& ~3 h
}
( q0 k% f# `( s- m// convert a hex digit into decimal0 |; E; m& i2 N4 ]" S
function deHex(aDigit) h+ T( S6 j) J7 T3 [: |
{
. O4 Y; X/ Q+ [5 ~6 |+ j& H return("0123456789ABCDEF".indexOf(aDigit))3 K7 Q' f! l: B0 ^0 G( M
}" ~. A; s* o/ M. h
3 C& p" O7 D4 X
// Convert a 24bit number to hex! ~$ l* e9 D+ A! H( x) h
function toHex(n)/ M! j9 U; a: S
{# K+ @. g2 C/ s6 Y/ ~ J
return (enHex((0xf00000 & n) >> 20) +
8 z3 G& R" B, J enHex((0x0f0000 & n) >> 16) + m7 N# _! z9 t7 P! T/ ~
enHex((0x00f000 & n) >> 12) +
; G9 G/ \2 D4 ^ enHex((0x000f00 & n) >> 8) +9 K) U) i( e1 `4 d/ t) p
enHex((0x0000f0 & n) >> 4) +
% [! P6 a+ D: s- P! T' O$ y enHex((0x00000f & n) >> 0))
2 @/ ~& {# W7 v, O}2 B( W- f3 V5 I- L4 l7 x
// Convert a six character hex to decimal+ x# h' o- K+ }1 v# B
function toDecimal(hexNum); q5 b0 X) n- ]( |( @
{
5 {" G7 P- n/ D$ f" \9 q/ J var tmp = ""+hexNum.toUpperCase()4 X( g' c. Z. s: J0 B' ~- W8 I) z0 H1 G
while (tmp.length < 6) tmp = "0"+tmp
' _% ]# A6 ^: }5 l+ i |; |& L6 i% f return ((deHex(tmp.substring(0,1)) << 20) +4 _9 N1 m. B7 N4 \ Q) \
(deHex(tmp.substring(1,2)) << 16) + " {. r& f, ]- s
(deHex(tmp.substring(2,3)) << 12) +0 l! E, Z* n1 {- f) G; w7 u9 S0 f
(deHex(tmp.substring(3,4)) << 8) +
* l# F ?; X# ]0 ]% P (deHex(tmp.substring(4,5)) << 4) +
9 T* U/ m4 y, s+ N' b: E( z# @ (deHex(tmp.substring(5,6))))0 w( D7 s0 }( r% m
}
5 Y) h7 R/ }8 U! {% G# [7 w& W///////////////////Shimmering Links/////////////////////1 }. B2 ?) B$ q/ H
//global variables: V( m4 ^& {' P/ k% Z
var hoverColour* P1 ]% a9 v; w8 i
var numLinks;
+ y- Q$ \: ~2 u' [& D3 y8 ovar rate;
( H# P7 c- g( k' M& g+ Pvar numFadeLevels;; R: r2 |% L1 W; z1 _+ k
var bgR;) B. w& Y4 a" L; a8 Q
var bgG;+ t5 Y Y! C; u/ f: m7 e" j
var bgB;
: _7 E- c6 @1 r& B+ s7 Pvar currR;* V$ {# C) P" I s# O
var currG;
1 I: T& H z7 wvar currB;
7 d/ x( l. r2 b0 O/ n, Nvar count;
$ W! @! r5 ^: Y/ E& O6 X$ ?var fadeOut;
' ~4 a' `% j; Z; ?/ z I. kvar continuous;
# n7 u) D; {* R+ m# [# v% {var newColour;/ P, H. Z" G' Q8 t/ _
var tID;
1 z" j$ Y: x. Dvar redInterval;+ J! j) {2 w' A8 ]; }& t% l8 V) k+ p
var greenInterval;: f. h V) x8 m' S9 `/ }
var blueInterval;$ P7 j8 J8 }8 ]
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
- y1 u1 m0 N" T1 B0 i{
2 _2 \+ {. e. p- j6 F( l hoverColour = mouseOverColour;
' h4 |: D+ X4 G3 s$ ^% F# S numLinks = numberOfLinks;
+ r3 d' M, k- _; w3 j$ L rate = 1;
! i5 V) v& K+ g4 Y, u numFadeLevels = 30;" ?% }, c: t# m. u# |
function initArray(theArray, length, val)
6 }$ g$ N! M0 i: }2 R! M {& ^ U O3 o0 A4 |; I
for(i=0;i<length;i++): r4 m# B6 }. x" U/ h
{3 n' `3 k H+ G. K
theArray = val;4 Z/ q2 n: g. _9 d. N: z0 b) Q
}
, @, z! j# v: \$ g2 \* i: o" { }: R% ~: U# x. a: b) a# Q+ [$ H
bgR = '0000' + fadeOutColour.substring(1,3)* V% b7 A) z0 o: {& j( x, t
bgG = '0000' + fadeOutColour.substring(3,5)
4 ?5 h2 u. |6 V5 T* v' P& ~ bgB = '0000' + fadeOutColour.substring(5,7)
( v8 Z( N S9 A$ c currR = new Array(numLinks);- Y* l; W# u/ q3 M
currG = new Array(numLinks);
% q9 j6 _. B/ ?+ D( @3 ]3 u currB = new Array(numLinks);
) j8 {8 k" \/ |5 L% ~ count = new Array(numLinks);4 I* m, ~$ E2 l) W$ ]9 h, W
fadeOut = new Array(numLinks);
, {4 ?& m9 T, p1 B continuous = new Array(numLinks);9 i0 \' T; ]8 @1 J
newColour = new Array(numLinks);7 X7 x( z2 c. s3 b
tID = new Array(numLinks);
3 u) `3 y3 e5 V) |; g redInterval = toDecimal(bgR) / numFadeLevels;7 g0 i1 n5 L. k" V
greenInterval = toDecimal(bgG) / numFadeLevels;. f, U6 ~) D& v! ?6 R4 e
blueInterval = toDecimal(bgB) / numFadeLevels;
7 ]" O+ V3 i6 B5 v& ~6 O( g( y( V1 K initArray(currR,numLinks,0);
4 P7 d* N* k( i6 _# P0 Y6 H initArray(currG,numLinks,0);5 i: A+ a. Z! p* @: E
initArray(currB,numLinks,0);3 C! y3 D# e8 J% Y
initArray(count,numLinks,0);
# y& Z4 i' @7 N, P initArray(fadeOut,numLinks,true);6 ~$ ^% c0 j# s4 q3 M
initArray(continuous,numLinks,true);! Z3 T3 d# W" m1 i
} " W7 x! O. D; v5 {6 y
function startFade(id)
3 l, [* {$ T+ S( P& Q7 f) }3 e{
h: w J/ k3 E" M7 w+ z if(fadeOut[id] == true)9 j1 `& \3 c9 G1 D
{ /*move colour towards background colour (increment)*/
& _+ t# W( p; `! C/ T v4 j& j currR[id] += redInterval;
7 D5 X- D6 N6 e+ _2 \: Z9 s2 s; \; ]$ z currG[id] += greenInterval;1 n: v0 `! l9 K
currB[id] += blueInterval;! Q' s- w E4 b& v) z6 V! `
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 p4 l c2 v7 R; Y0 Y0 _& y- g
if(++count[id] == numFadeLevels) R* o" R! W; S/ t% i7 O
{/ z! Y( r3 v) G' e4 A. r
fadeOut[id] = false;- Z7 {2 d! k- v* f! t' _8 P0 Y g
}( I1 h! g7 F o, s" \
}
- j6 i' Y! v: ~0 O7 i/ M else6 X% n3 }/ b2 E$ \3 Y0 ?2 B
{
( v& z( {0 f' F" ^7 T, V- U currR[id] -= redInterval;
# S# M4 {+ d# ~6 K% I3 f' n" m" Z. ~
currG[id] -= greenInterval;
9 O) n" w' u) i0 c( R( e4 X& s/ B" i2 _1 p8 ^
currB[id] -= blueInterval; s& g" c! y; I, {
/ K3 X- ?3 u9 f newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% v& Q/ U3 t; A# s& w1 ]* Y
* v" C% x% d) }2 ^0 V3 \ if(--count[id] == 0)
& J0 n7 y8 [( \- m$ P9 N& f6 \' _0 H3 L$ A f$ F- z" \! }
{
' D- r- T) L# K8 }3 U0 i
3 }# J3 P/ V) e! ?) a* H fadeOut[id] = true;
/ W. T( u, |: k1 z* I) m6 z
9 E! n2 ~9 A) x3 Z }
$ J' L+ S; V. }* p# J
7 z1 C/ P6 ]8 W2 G) ^1 w- h6 d }
/ c# O6 G5 j2 `, r0 ?
) z1 c, T9 T" J5 r f if(continuous[id] == true)
4 k% Q! `4 e- _3 g* ?
4 H+ l7 t) T B' E$ e0 D U- O {' J' G$ B4 a( p6 @1 q
) ^& x' J2 E: G6 L& Q7 S
document.getElementById(id).style.color = newColour[id]; 8 n: i; \4 V5 ]
! h' {7 o6 l' U# N) g: O: z }/ p! Q7 r% ]# \$ N* y
2 X, q" k; t: d4 U else/ T8 l! ^0 m: R& P- N- Q
, e5 q: q* N3 |0 ^
{
, q; ?; B- }; x$ c& W* N
8 n' t% y2 j$ W; {) D+ W" ] document.getElementById(id).style.color = hoverColour;
4 h8 X) b3 i; t. x
e" G& q: x$ w+ T+ q9 I }
( h5 O' N7 K. N5 e! |2 j$ z# W9 ^! M, M) ]% X& _' F8 L% S/ Y
clearTimeout(tID[id]);! K) ~& K8 B. ~
j+ u; ?8 v- `+ q$ I. ^! [7 G# K: |) G
tID[id]=setTimeout('startFade(' + id + ')', rate);
+ ^8 s; x, F$ B+ k& ?
. n8 f: n5 [' n. ^ B p}) _% y( B& U+ c0 N) \
G4 x. H& T0 `# J
function continueFade(id)0 j5 o3 q9 t3 S, z2 ~, G
$ v" v0 t# q1 g+ E
{
% ~/ K+ R: r: r# n0 J; V: g* ~, W+ G! P
continuous[id] = true;
. Z4 z# W( }# J& L4 m2 g, W1 X c! }: o0 v8 G
}
1 X+ @5 g! v. |! S; r' ]8 t* O, U$ Y1 [; O& U n. q4 C$ p4 f2 O
function stopFade(id)+ X& c/ _: ]: x# j
. y' M+ g# ^% z- N
{' S& V7 d2 k9 H. i7 Q& W) T
# t& C4 ^4 j: K D& G continuous[id] = false;6 g8 X: V# u( C) P8 x- l! Q" H' b
m" `. q- o( t- a& N
}( a# h% w7 O2 @; s6 m3 T: E
! [' n, R/ z8 q1 z0 M. _function StartTimers()
# o( ?- q, Z3 P5 l+ B8 N. p, j+ h4 g& ~7 x
{ //set up an initial set of timers to start the shimmering effect, y* ]; D; B% X2 _. O
# ]/ J/ n+ E _" @" K) l; w for(id=0; id<numLinks; id++): N; k7 e3 U% d+ \& k* Q! a2 y
2 i: E1 m3 u# v+ _2 _. [
{- N3 u, }# f& b" k
4 `0 W5 N; l+ p% f4 ] c t=setTimeout('startFade(' + id + ')', id*100);
8 M, v1 R/ _5 \1 Z8 E' W2 _7 o5 S/ Z7 }. }6 x6 {& `7 h* {
}
; U/ Y, j6 \# d; d- D* g4 S8 f5 }: U# W, j. h5 J$ w8 w6 o
}
. I! V% y' N5 Y, O$ P, y9 E, w4 F$ x+ |$ c8 ?2 u1 y
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
& x9 {! [7 M. A* b; i8 [; M# c: I3 H7 d. p8 Z0 y0 X
initLinks('#FF0000', 6, '#FFCC77');
: U2 p5 z. o3 n. p9 G, e
8 D# \ ~+ _& ]: r9 s8 n//-->/ J1 ]5 v M% _6 h
0 R$ C9 Q7 `* {' o
</script>- N' e/ P3 e# S! |7 x1 x+ R7 E% q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元* ~( X8 G7 }* g, x# ]- o/ I
</a>* | W, h7 R7 f4 K: ?2 _: P4 S
<br>
& k* B9 E$ {( V9 e* r5 m3 ~<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>) v% |3 s4 m9 f
<br>
& w0 T/ v) l V- J& n3 W<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 k5 ]+ T5 e5 E7 T1 x* {<br>
# ?& r: k% s* T9 T, L! K ]" ?<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
& j i5 [. y# B& b<br>
% y& S }, _$ j<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
+ ~0 L$ ^* b+ u4 `0 w, e<br>
9 z. ], Q+ H2 @9 b<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
$ @3 }; o0 x, n8 I; ?<script language="javascript" type="text/javascript">* z6 Z$ K" R, E
<!--
/ g4 q4 i7 C; j* e, R2 jsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
9 B; F& ~6 T; F3 ]2 J9 H4 h. B//-->: ~: c4 ^ I5 q1 O/ t0 n- a
</script> |
|