|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
8 Y$ ~/ q1 ?; K<!--
8 v# v2 k* g( ~8 T# u// convert a single digit (0 - 16) into hex
8 z/ C1 e" {$ t7 k0 s- F, ?function enHex(aDigit)6 l6 p2 \& _# D3 f' o+ ?* c
{5 C2 s: V; _; `/ z: M
return("0123456789ABCDEF".substring(aDigit, aDigit+1)); i7 N9 m% r6 e6 Y/ Y
}8 B& c6 p. ^4 [6 U0 h
// convert a hex digit into decimal
6 C4 \% k+ q5 y, N& ]8 Z2 Yfunction deHex(aDigit)
4 f/ b: p- j3 U# ^{. R; x( _. ^5 E3 f5 n
return("0123456789ABCDEF".indexOf(aDigit))
0 Z- X3 \' W3 X: m! K, F( m# q}2 m; r( W2 z& _6 _ b0 I0 C* z
2 N3 D0 I# I) ]
// Convert a 24bit number to hex& L; E; B( L1 t6 |9 m8 U" m/ Z/ G
function toHex(n)" M" F# K0 a. J0 t5 h
{8 q1 Y! `$ F+ [
return (enHex((0xf00000 & n) >> 20) +
% t/ Y$ Y3 K4 N Z enHex((0x0f0000 & n) >> 16) +
! c) ?% w/ y! ^- }% Z- E enHex((0x00f000 & n) >> 12) +2 w9 b. R! U8 l
enHex((0x000f00 & n) >> 8) +# c ^" l2 F$ L+ j* Z0 A& V
enHex((0x0000f0 & n) >> 4) +
H, t' q' s: I2 J1 O enHex((0x00000f & n) >> 0))
2 Z- `; }# I3 {: h& E}
" |+ N/ ]! s& G% @* b ]% x1 j// Convert a six character hex to decimal
( r9 A) _3 j+ Hfunction toDecimal(hexNum)
: c, o9 C5 q/ k: b5 r" b{9 X$ R- I, K( w* F) {& ~
var tmp = ""+hexNum.toUpperCase()
7 J) d. C$ \+ u: ^: n( M& }' ?0 G while (tmp.length < 6) tmp = "0"+tmp ^- Q1 C0 a6 ?; d3 u
return ((deHex(tmp.substring(0,1)) << 20) +
z) A/ @; Z; g (deHex(tmp.substring(1,2)) << 16) +
# }) d! h/ b2 a" i% L) I (deHex(tmp.substring(2,3)) << 12) +$ {9 s9 E7 P0 s- r& h' E' f4 {
(deHex(tmp.substring(3,4)) << 8) +; F8 k7 g. Y0 ~8 T
(deHex(tmp.substring(4,5)) << 4) +
5 E' C- ~; m$ c% H3 D3 D5 ? (deHex(tmp.substring(5,6))))
U9 U4 D6 b' A7 r' K+ X$ u}5 `4 r( Q) w+ j2 w$ O) W
///////////////////Shimmering Links/////////////////////" E& ? V( u4 V* J7 O
//global variables
$ w, d! ] c! f% L: T" qvar hoverColour: X2 u3 X2 A9 L9 V9 X
var numLinks;0 p' A+ e. y. Z* I
var rate;& g5 ^$ ?1 [ y
var numFadeLevels;
" `$ d4 @7 Q" m& ?6 O+ C& Dvar bgR;7 R1 z7 Z( E8 B& p' e, } K2 l
var bgG;
9 E# D* \3 H3 o: @6 t0 vvar bgB;. O+ V' Q$ Y9 c
var currR;
+ z- \8 V* M$ X1 Y# c) R5 q2 o2 _1 Wvar currG;
9 J% H' c, Z7 m2 K* I# g* G8 lvar currB;
- z' Y* A) ?- h) rvar count;# f' {( x4 G7 a) i
var fadeOut;& L3 u7 q+ N1 w X& T
var continuous;. O, I% I# h- e4 F# i7 \; w# E* c* e
var newColour;
% L' Q6 B9 P6 H1 wvar tID;" U8 z4 U; O$ o9 d1 t: D; v5 {% {
var redInterval;
; ]6 E0 @ e% I; e. D& }var greenInterval;
/ N# U5 `. V) O) }var blueInterval;
6 b6 h6 W' f0 T. xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
/ c% [, v# A; k+ B$ p) h{! @- l& q/ N, `9 F
hoverColour = mouseOverColour;
6 E* V( q4 B' y; e3 g, G0 M0 W H. h numLinks = numberOfLinks;5 R6 ~& O$ S% M) Y, Y% G+ L- R
rate = 1;: I3 J; B1 N: C* j
numFadeLevels = 30;' K* Z2 K! c0 J+ v3 Z
function initArray(theArray, length, val)
2 q" {( N! X0 Y0 C) ^ {
9 I. I( u. e2 x: S# h for(i=0;i<length;i++)
5 r4 F% _7 T, x {" f& ]& n2 @8 o; }8 O$ y
theArray = val;
% j b: l: ^" M; o! a }
( v3 q& o2 C8 }; g# Z: R0 y3 Y9 h/ Y }" g: L. X7 M& D8 o$ c$ b: _" [
bgR = '0000' + fadeOutColour.substring(1,3)
2 A" {& R9 ~% M5 t( {' p: K bgG = '0000' + fadeOutColour.substring(3,5)- j: X$ s" }3 l4 W0 V6 M
bgB = '0000' + fadeOutColour.substring(5,7)
4 C4 z6 ]: K7 W7 N1 _ currR = new Array(numLinks);- p0 G/ `- S. r* S& V p- v' _
currG = new Array(numLinks);& _6 V: c0 Q6 F4 i
currB = new Array(numLinks);
& U3 N, U3 `! Q! ~ count = new Array(numLinks);* _9 `' g, z+ {% K
fadeOut = new Array(numLinks);) }5 ], B- _! M: C$ P( |
continuous = new Array(numLinks);, l; W- Z! A1 z7 G
newColour = new Array(numLinks);, f1 f0 d' m4 k. e9 Z) J+ B% R
tID = new Array(numLinks);. ^- h5 P9 ^# A4 H" A. b
redInterval = toDecimal(bgR) / numFadeLevels;. O; x$ g. k1 |# }2 y6 c! [
greenInterval = toDecimal(bgG) / numFadeLevels;
) g- h2 @! p( U) G+ k blueInterval = toDecimal(bgB) / numFadeLevels;8 J, \& w& p% O/ @0 n
initArray(currR,numLinks,0);' T% f8 Q0 \" k. l* O
initArray(currG,numLinks,0);
2 S8 {: Z, W2 o; ?$ I& X: E, @: Q# V initArray(currB,numLinks,0);+ r% r2 U6 C j+ D; Z1 k+ T, \0 U% q
initArray(count,numLinks,0);9 Z5 ^/ B$ v; f
initArray(fadeOut,numLinks,true);
8 k1 R# y7 p) r! E9 P initArray(continuous,numLinks,true);
" a, p) _+ v7 o" |% M% r. ]} 7 b8 Q! y5 [! X- `4 Q" G
function startFade(id)8 h7 Y, g7 `# j8 E- Y/ i$ k d
{
% L6 k- I, t6 \+ T" f- z1 I9 f) {" w if(fadeOut[id] == true)# o' b! q9 [1 o9 v" k& v7 [# P7 d0 ^
{ /*move colour towards background colour (increment)*/6 B) a) a2 c: Z' j: n
currR[id] += redInterval;
: h- h4 b U5 U5 O currG[id] += greenInterval;3 L1 c' @. W/ p1 M% }% O9 p ]
currB[id] += blueInterval;2 X! x/ @7 P, k# G1 J
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
" a* H2 \ c, H) {9 ? if(++count[id] == numFadeLevels)0 x" g) Q2 b; m0 j- W9 N2 R
{8 k0 O8 i% t& x# f( ?6 O
fadeOut[id] = false;
! }7 d, G. L' c }
1 V' u) k, B; w }; f0 g, A: p' Y) M n: u
else% B1 e) M, _( d: k
{
# D2 A8 S/ A1 m" \ currR[id] -= redInterval;
7 ^) Z% y6 `8 s) b, h
$ F; }+ e& U1 ~2 y( t \2 ~ currG[id] -= greenInterval;
4 q- G; w+ Z- n: f1 a
! n- a3 l9 K9 x! i# n) C8 a3 X9 \ currB[id] -= blueInterval;! I: V: v0 n% P, z7 T6 @6 |6 t3 M
2 O! F+ l( t+ L- \ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' m" J2 {, J+ v7 b
5 C l. N5 ^& i9 z/ p if(--count[id] == 0)
5 J4 A1 _7 R' q, c0 l% I( e* q* j/ T8 D' l
{
& g) g& k( ~. f( n( e0 s6 k! E c/ u3 p. e& f
fadeOut[id] = true;: s* X/ c. j+ `* G; x2 U" b7 ~
# ?) F b9 ]' x2 U }' S) Z% u' |0 T% H# h' V' K
: l2 B9 U: V& z7 A! G
}
3 A% v: Q' G4 O$ M2 d: V
$ y$ D6 L- G: H, ?6 b- { if(continuous[id] == true)# r M4 ?; B+ F. E) y7 `3 Y
* V T0 U, D, i5 A6 j, Q, N {
8 |& _4 h0 r8 y: c2 n8 G) ~0 s! R4 M: g1 _! z0 c- t
document.getElementById(id).style.color = newColour[id]; % g5 K3 `( m2 a0 s/ T8 C
$ A, Z3 a/ x5 C4 g }( K$ m& D% ?2 C) V& ?
0 S: U: n3 T/ B) u
else
6 N1 F& l6 k5 G+ L4 Z3 E0 H! }) B) X% a! @4 i
{
5 n& }* C- W! ~! y+ p( v% `: T( C% J5 N# h3 f* U! u
document.getElementById(id).style.color = hoverColour;4 p& }; {/ R) k9 e
. S- y' ?* Q! B p3 H3 ~ }1 q& [8 O8 d7 J& C! X
) A9 p# s* c+ A& w' e. ~8 J
clearTimeout(tID[id]);( i z/ _) R6 D% N% W/ H
6 J+ `: y( t M# a P tID[id]=setTimeout('startFade(' + id + ')', rate);
) g( k1 y" u Z2 f" c
}. o$ M0 b7 N0 J}
* N6 I' e9 r( a0 m. A- u/ v
. n& A5 q: H- i1 b4 S/ N, ]# M- W/ Nfunction continueFade(id)
, y. J; l5 }2 X
! C! P' B/ ~0 J. k: f4 p. t{& Y+ S2 \ c q$ D" t3 S
4 Q3 w* d6 j T; u( U
continuous[id] = true;
! f R8 s4 |+ L: L+ i" Y$ Q; Z O V) _) q h3 j' I) D7 p+ _% \
}7 |! @, V6 c9 [* t; |4 M
' e2 x8 e7 g1 p6 t. Q1 j. q0 Gfunction stopFade(id)- L: E/ n4 ]& D# D7 ~( X" d+ k
* ~: ?- ^9 Z0 X0 q* k# F+ d
{( X9 E6 T1 x5 I# y
2 ^: m& `) q. y1 V: j( e continuous[id] = false;, U- f$ A* v Q. M& P% }/ p P
2 ^) O4 O( t1 G3 ?$ S}4 z" p6 t" B% |
. c, U \# L# H9 Y9 gfunction StartTimers()
8 j$ s4 ?6 a* D: O$ ?" A1 o( L5 h
/ L, N0 B. H/ Y! l" x{ //set up an initial set of timers to start the shimmering effect
+ A" A( }: K) a! d+ d1 U& o5 d) y7 u, J& E! F7 F
for(id=0; id<numLinks; id++)
& q" S. e" u" J' e/ K$ v4 d; X8 O, ^% B) [- Q; S8 d1 L5 ?
{
9 n3 I2 w/ Z, _& H7 \6 V* G6 `
4 x9 N; O( C& n t=setTimeout('startFade(' + id + ')', id*100);8 d5 C1 [- W. w! n3 G7 ]1 g: p
" i1 F; J1 Y C0 H
}* U7 x$ H$ ^2 y
& s$ P( }7 Q) h3 ~) ^
}
5 D$ Q9 f0 Q d, @% R- ~) P" z" ?* R5 T
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' P% {8 n* c& O
8 j1 C X) [& D& x* D# z" ZinitLinks('#FF0000', 6, '#FFCC77');
, @9 T) ?! `% a# m. Y/ @* E4 U' k/ Q" y8 _- E3 _# d
//-->
* U# \, y2 r" J' \& U) ?: h" r8 b; R% i6 d. _, O4 M
</script>; O1 H/ ~. c, n4 O8 P6 O( o
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
5 b; D V7 v: {# \( ]' @</a>
0 B) o( y! ~0 \" Z$ ]$ ~3 \% d0 X<br>
$ ?5 ?% \5 ^' Z: E<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>8 P; q& F6 i& n2 Y; h9 m8 G* N4 t
<br>
5 y# h; I) O! G" t5 a<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- v. M3 o. h* D- T( ~5 v<br> 8 ]' L+ L/ c {7 K# {
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
2 V/ I; e+ n! Y% j$ @8 B) L: w<br>- N) F8 z7 |4 x+ y" r) A
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ ?& w! P; G9 z, V/ \; Y
<br>
3 a1 F C& f0 G3 u' E3 ^4 E<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
$ c' f' ^, \3 T. q" w; ]8 ^; M<script language="javascript" type="text/javascript">
* v$ H% c4 Q( U/ P<!--9 Q! D) E q% v8 F4 P) E: O
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering2 I) g" Z2 r; m) {, p2 }
//-->: C; q6 v1 {, \0 j" V; s2 d
</script> |
|
发表于 2008-1-21 20:48
|