|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ L7 i* f8 }9 W5 r0 e( r9 B<!--
9 u' [4 N& Z* v0 f3 s4 S// convert a single digit (0 - 16) into hex
3 V X2 {7 K% l6 C- z# Bfunction enHex(aDigit)
( S% E2 C; t9 |2 i& Q{3 t- [! {( j# J! F. {# O
return("0123456789ABCDEF".substring(aDigit, aDigit+1))7 P3 K' ~' X s# o
}
$ i' Y0 H# s' Z% s" j$ x// convert a hex digit into decimal- p( h ^7 o3 B) @4 O8 P* v. P
function deHex(aDigit), ?4 h& w* s3 G
{& K: `: d! z) }1 j+ j2 e' r' B. [
return("0123456789ABCDEF".indexOf(aDigit))
; D! U2 ~4 H, O7 A; c# c6 B L}
# Q; i+ b' ^$ z: _- D) c. q- s& P' R0 d% p. g
// Convert a 24bit number to hex. P: g* C' o+ g) f) b
function toHex(n): k% L( I, c2 m$ ?" _; v$ [9 N
{ w. z `$ D; V9 C& [4 S& M/ @
return (enHex((0xf00000 & n) >> 20) +1 i. y7 e) u- {4 H9 E
enHex((0x0f0000 & n) >> 16) +8 |' P2 n H6 D8 k
enHex((0x00f000 & n) >> 12) +3 S" d! w0 r& g5 E& G+ z- p
enHex((0x000f00 & n) >> 8) +
3 @$ B: A: K. N9 A enHex((0x0000f0 & n) >> 4) +8 H7 v5 \5 v, K* X. _" X# Q
enHex((0x00000f & n) >> 0))+ ?, r' E/ ^" m4 Z5 T: ~
}! I9 K. h; b* i# O
// Convert a six character hex to decimal
' h. I' @2 s8 _& Dfunction toDecimal(hexNum)
# N- w( G0 V/ v7 K3 S{2 i- o+ Q/ Z' p7 c, A$ @& L
var tmp = ""+hexNum.toUpperCase()" A# X r8 Q# m' r) [) X- \9 w
while (tmp.length < 6) tmp = "0"+tmp4 {3 m7 ^) r% O) C# ^
return ((deHex(tmp.substring(0,1)) << 20) +
% d& ^. _- F: J$ i [ (deHex(tmp.substring(1,2)) << 16) + . i0 k- ]6 z1 y3 s' C( b
(deHex(tmp.substring(2,3)) << 12) +
+ a6 q, X' f0 B+ \ (deHex(tmp.substring(3,4)) << 8) +8 i% [: ~1 V# x
(deHex(tmp.substring(4,5)) << 4) +
* X: E* v" F6 T1 P3 o7 { (deHex(tmp.substring(5,6))))
( t8 j8 U7 W0 }5 c2 |! Q# ?}
2 h; k2 e, r8 i( w; t+ V///////////////////Shimmering Links/////////////////////* F- R6 M( _" ~8 m
//global variables
2 u7 Z; k' `7 T: Y( Y* ^var hoverColour
: C6 ]" J7 B" V0 i# K- ]var numLinks;
% ~6 y, ~( o% O. y2 {3 a+ N" L: Avar rate;, Y1 h2 P- J' g' g/ u$ t B" k
var numFadeLevels;: w0 T, M) W" ?3 B
var bgR;
4 E. {2 w! T# j; k& q7 l" U& K$ `var bgG;
( Y8 b* N2 x% v. H# R [% a Z4 d( vvar bgB;
3 @1 \6 X1 `' d9 [4 t4 d, u9 pvar currR;! p5 x2 {3 I7 r* u& e( B
var currG;1 l+ `( l" U, P8 M3 C
var currB;
% {0 M8 }+ Z" o( g. o: ?* J, Nvar count;
1 S% t- f3 u+ \" z Wvar fadeOut;
% V: @- U! k+ E/ m9 qvar continuous;
: U: |# F# k2 M+ R8 y# F, N/ H# Cvar newColour;
. o* R. ^9 _# W6 _var tID;
. A+ ? \5 D: m: Rvar redInterval;) N3 `9 x9 x: o/ [0 N/ G
var greenInterval;, s$ z- `% ~4 h2 A
var blueInterval;
* ~6 s4 r( X( j; hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
: x* x( m" v! F) M{
8 W0 F3 P) ]& [ hoverColour = mouseOverColour;! R- d0 V8 c! v& s2 Z. X
numLinks = numberOfLinks;, G4 [2 v2 t. r+ v% Z- H2 \
rate = 1;
- [$ m. w6 g; L+ o4 y numFadeLevels = 30;# u* k4 Y5 | l
function initArray(theArray, length, val), l/ d; ^- V/ C. A% C% e5 u
{5 c, |; B. X$ \- P I
for(i=0;i<length;i++)
) ]' ?1 T' Y1 @" G* ~+ t0 K& l! T {! s$ `! C2 r; m& }% d
theArray = val;
+ u& O6 r* a4 n* s( y' u( j }7 e* H" h7 u! ^8 ^2 o
}
4 K0 L# c" t& G9 j$ G1 A6 [! z bgR = '0000' + fadeOutColour.substring(1,3)
4 {$ S! _7 @8 p, w8 m; Q. ? bgG = '0000' + fadeOutColour.substring(3,5)$ ^0 j/ Z4 W, F- N3 Y0 z; d y) W, a
bgB = '0000' + fadeOutColour.substring(5,7)
9 g. W2 _' J& W& p$ u currR = new Array(numLinks);
/ ]2 y& |" W& a) V4 D currG = new Array(numLinks);; b( b% X; n: q+ n) W
currB = new Array(numLinks);% ~' v, C) u+ ?% Y$ U, o4 G1 `" ^
count = new Array(numLinks);! v# W, h3 n- o' o* |- r
fadeOut = new Array(numLinks);
- q/ T. f7 l- m m" }2 F6 R continuous = new Array(numLinks);, c2 n" U/ M( C4 j
newColour = new Array(numLinks);8 c0 A+ a2 ~8 b' \
tID = new Array(numLinks);* Z7 M3 b( u" B6 ^4 s9 R* Q, i% r
redInterval = toDecimal(bgR) / numFadeLevels;
6 p; Z1 B9 l# v6 {( { greenInterval = toDecimal(bgG) / numFadeLevels;
; _* k7 G+ J8 _: l- ~1 c, u- |' m# U blueInterval = toDecimal(bgB) / numFadeLevels;
4 p! S1 j& p7 \/ {8 |5 R initArray(currR,numLinks,0);" R: g6 z6 L6 Z. ~4 u$ j7 ~
initArray(currG,numLinks,0);: p2 g1 E5 s1 `7 O
initArray(currB,numLinks,0);
; K- w) l/ g8 @2 J8 Z initArray(count,numLinks,0);; o" @" m6 s/ N* k8 I
initArray(fadeOut,numLinks,true);! w0 m! B) I4 }* n2 j% x, r
initArray(continuous,numLinks,true);3 Y* |* y- H9 D3 x
}
) B: o7 Q& h/ n5 Y) _: g; w( @function startFade(id)
+ Q( ^" b, Q% L{
: ]+ a6 u7 @8 F- R# x. a if(fadeOut[id] == true)9 W8 Y2 F0 a6 M) o: i) Q; O
{ /*move colour towards background colour (increment)*/
) H$ Z' k, ?! o: P9 F currR[id] += redInterval;
! E1 A! L- T+ p t G currG[id] += greenInterval;6 a* A0 c. |2 G V" K6 \/ D
currB[id] += blueInterval;* N0 h) f/ q- g+ W9 @
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" ^& T1 O$ M# t6 a5 m0 }9 E
if(++count[id] == numFadeLevels)
' ?, _9 H7 v% c% Z, I. N2 H3 @ {
' g) P. Y: P8 r$ ]- _, D fadeOut[id] = false;. r. g, t* p0 h+ L7 n/ }
}
/ o. M, K) ? ?8 a2 g* C }3 t: Q% q$ j }* y3 L; U2 ^1 E
else; o5 \/ a/ G% D7 p# i) q/ l* W5 S
{
4 d$ E4 e5 a& x* A; ]) o2 d0 ^ currR[id] -= redInterval;
- [8 R0 }1 o0 R, b, i6 `6 @- P7 V4 @7 s; h9 X7 O% u; e
currG[id] -= greenInterval;
2 h. C2 h/ q! a4 i J/ f" j, ~
' [$ R8 J g+ H currB[id] -= blueInterval;0 W+ W9 B9 Z# J! m9 T+ `: T& c9 O
5 M1 I) y4 F- Z* t/ U' [" c newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% Q1 p% R4 \# J4 C) F( t
" e2 y- L* u7 n+ L* x if(--count[id] == 0)2 d7 L! d q4 {# a+ r
/ D5 b, r# u( S. M) d& _+ E$ J; i* N {
; q6 `- B( _! y+ R/ {1 J6 s! N; i0 v" D$ r; K" e2 q2 P
fadeOut[id] = true;
N8 O# \* N6 X: }) W1 _
" }* F: M* s. n. N( h5 g" h) o }
$ x- I$ x" ?4 l9 x
0 R& K# h) O& _2 E# y& t+ c }
8 j; ^- }1 j, ~! V5 j5 u8 O5 L( v1 H( Y2 }% d! K. ^
if(continuous[id] == true); A+ V2 p e+ T3 D# }% Z
' J+ N, ^6 ?) o+ o9 ~. a4 y {
& e+ y8 J* T% n+ R
( V; [8 H, v& L" {0 R document.getElementById(id).style.color = newColour[id];
- v: q& x* ]4 v' P* H- [ m
R8 B i& s9 c; Q }( C) E& s+ U# K/ h0 ~
& k. `1 y8 s$ |* ]
else4 q! o: f" Q$ k; C" |
7 L$ s |; t* g3 p {
. _( J& f" F! G- f! K& n e" i" d' K! g3 C" h" h, e# T' H! W
document.getElementById(id).style.color = hoverColour;
# s5 L5 Q8 y8 ? ?3 p
" L; T# y- V8 ^! t4 G3 s }
2 U8 {$ v I$ Y4 |( f8 \
+ u1 q' }" p0 S, p0 l4 Z clearTimeout(tID[id]);1 w0 [, s9 {+ M
% A6 W5 d% B* k
tID[id]=setTimeout('startFade(' + id + ')', rate);
% j0 F( w$ ?" z6 B3 E! ]8 S/ o1 u7 g6 a3 M# M' G5 [0 o `: s% Y
}% B5 n, |' P$ h) V
& B* A$ G2 ~/ d$ V
function continueFade(id)7 n3 Q; _4 j% `% \, z5 e
$ s) \+ d, D% a7 A{" x* b4 U! J2 ^, b1 Y6 u) M
4 {/ N. K" w! Y+ K2 y1 Q continuous[id] = true;
! B% U7 q' d0 N( H. z
. f) d6 W6 F( A: M}( a; W1 P- x3 y G% V. Z/ }
3 Y% X/ y& P# _" q
function stopFade(id); X* h6 W; o7 w2 ~
& `- g" P* h* t9 V$ d
{, b f* _ E ?6 P
8 E8 e- i: D! A A, C4 y
continuous[id] = false;
2 R& i9 X# s" E
$ i; V4 J( v/ K0 c2 r$ s0 s}- E' A' y/ [) V) i" S. k+ ~
: m+ _$ r9 f5 x4 w" i2 `0 e) ifunction StartTimers()
; \+ C- ?8 R. c& x8 a( K1 J) D6 c0 g% j* I) G
{ //set up an initial set of timers to start the shimmering effect- O7 |0 V6 }/ a+ J" N B7 ?
3 e0 h: S1 D$ ]/ v8 n3 p( c. Q
for(id=0; id<numLinks; id++)3 c& [ L/ Q- B2 E9 @4 I% P
% w4 n, C2 b( \8 l R1 |8 u# t5 C
{
4 ?+ |6 h* m, \3 D7 K, U) w& u5 ?1 Y/ Y
t=setTimeout('startFade(' + id + ')', id*100);
$ O' k2 D. L: D Q1 h; w4 H, W5 u! R
}+ B( D0 B# Q, A
( _2 L7 h9 |( v8 }
}% i; z8 H. {! n @ q8 `- I& f
6 S) F a/ [/ p3 x1 f) Z1 \/ g//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
+ G0 [9 W$ ]/ V$ o; g; B) I3 i# i: }& |$ w* D6 @
initLinks('#FF0000', 6, '#FFCC77');
( G- x9 `9 i6 Y* p6 d3 s6 T ?& c0 _9 V- L: G, B! z6 H
//-->
4 m+ d4 H3 V8 M. L: @6 `5 f( |6 r# d/ ]( s
</script>
# |- M: }8 r: o: m4 G l<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
- a' D$ k: U: \( A9 L1 B</a>, f* v9 C9 O2 R/ [
<br>
5 X' b g* I+ T! B+ U$ _<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>+ M, s1 s, h7 T# G k5 K2 `: T1 Q( H
<br>9 G \: l; Z5 j' w% G3 U1 V& J
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- `% S0 i$ W+ U6 S% r<br> ; X" v' G% W. ]5 f. o
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
' `# `6 } a5 k7 X9 o8 l<br>* ? Q5 M4 ^+ K* U+ A! ^3 o
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>! C- M( m$ o8 U
<br>
; [" ?( B, l% f; T& D1 R<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
/ {' C/ m+ w! J& m6 h \# w% P* n<script language="javascript" type="text/javascript">
( }% R4 H/ G3 v( n7 U<!--, o7 Q% G6 R% O" u- X1 d
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering; Z/ j7 r/ x9 }. S) r" B
//-->
0 p5 l( e" A: E6 i- u</script> |
|
发表于 2008-1-21 20:48
|