|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">3 F2 {" x s5 g" D( z
<!--8 D, _; z! w$ H. m
// convert a single digit (0 - 16) into hex( w& l6 a9 \( S7 _6 {1 l! h( K+ X
function enHex(aDigit)! C% t+ i9 b. }4 m! A; B# K& N
{* d: j4 S+ {' t% Y. R1 r# m
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
: [* Z3 G7 Y5 Z) T% ]; N}
! y2 L% j! v0 S( r// convert a hex digit into decimal; \0 s9 P; M$ t ~% f& c
function deHex(aDigit)
$ M$ U0 b. ^- C0 d3 R! F{
1 [- f5 J8 e4 R |& y) A; ]1 M return("0123456789ABCDEF".indexOf(aDigit))
' ^; S! }; H5 @7 |0 e/ F}
# j/ j7 R" e* m8 Z1 S: P( ]: F9 j+ g0 z0 @" D5 q R
// Convert a 24bit number to hex
8 I% L! n0 I" Tfunction toHex(n)$ L8 g* S1 x) t! x
{
) N- I) F \4 r3 B+ E return (enHex((0xf00000 & n) >> 20) +
5 h' T S' [5 \0 N3 ]. Q8 N enHex((0x0f0000 & n) >> 16) +
- E- n W$ L$ V" k enHex((0x00f000 & n) >> 12) +0 p1 E/ \' y. K2 ^
enHex((0x000f00 & n) >> 8) +2 `( ^ g9 h) ?; j
enHex((0x0000f0 & n) >> 4) +7 K$ M* j/ `$ N; L; x
enHex((0x00000f & n) >> 0))! F% j$ g& t+ O' _
}, `$ t* X0 x: ?" ?* N) \% j
// Convert a six character hex to decimal0 E) y* F, L0 H5 e( A! p4 X+ A
function toDecimal(hexNum) w- w' J7 L0 ?( N( G: R6 m
{8 A* H \6 c) P# n: g7 R5 |
var tmp = ""+hexNum.toUpperCase()
) i( j( t5 @+ ~4 V1 ~& } while (tmp.length < 6) tmp = "0"+tmp2 F+ `' K# L! e, X8 G# } A9 u
return ((deHex(tmp.substring(0,1)) << 20) +0 O" ]- K. H0 F' W8 N
(deHex(tmp.substring(1,2)) << 16) + 5 W' f! B, E0 ~( M) A. J3 E1 G! C
(deHex(tmp.substring(2,3)) << 12) +
, e* }' h4 c, T$ ?7 O7 L0 Y) |- J) Q- S (deHex(tmp.substring(3,4)) << 8) +; L2 m* d: q- w% r& P
(deHex(tmp.substring(4,5)) << 4) +, `& q E! H3 b
(deHex(tmp.substring(5,6))))( _( r' B p$ j) @: G9 T+ D% M9 j
}
" s- U! F! t+ w7 r8 Y; n' k///////////////////Shimmering Links/////////////////////4 e* _' I3 a3 a% x
//global variables
& s" g$ L2 H7 L# ^& svar hoverColour
/ C+ ^3 a2 h! Y3 z5 [var numLinks;
# ~$ @/ c' _6 rvar rate;0 [$ H1 g8 [' A( N( b
var numFadeLevels;, F H5 J/ X- h6 M0 B
var bgR;' m. o8 q# [) ]& _; Z3 ^# H
var bgG;/ j3 l5 Q( ]( ~: m
var bgB;
6 M( t; w9 ]2 d" I1 n2 Hvar currR;
+ H5 {; l2 g! n5 Nvar currG;7 V" R+ i! x7 _5 p5 E% J) C
var currB;7 l; n4 V. O2 j% q/ Q. ?- X
var count;
! _' S' Z1 t- b# avar fadeOut;; |& [7 v5 K' n L$ z) P* e
var continuous;
- m% g* s& ~6 D3 {var newColour;! z; @- M+ C% P& d( x
var tID;
" Y5 K, ?/ i+ [3 [) wvar redInterval;
, A) ?* |) L* V; |5 Xvar greenInterval;' p( E7 I% T3 ~
var blueInterval; }9 p. K8 r5 E) N8 H! l7 y
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)7 D; B* [' s- [3 q0 v* x& b
{
) F$ u! P; [7 s" k& }# m+ R" N3 x hoverColour = mouseOverColour;3 m# x. E4 ?% | O+ s! y* @
numLinks = numberOfLinks;
/ b# ~. N) f, r( P. W' w) U rate = 1;
; k, T; Q' O: w/ g' o1 h& G5 H numFadeLevels = 30;
0 U7 H6 y' b2 h" Q; E* E( n* m, b function initArray(theArray, length, val)
! u% s8 `' Z$ V" O \2 s$ h {+ t8 d( _* h/ S8 J x( ~( w( w
for(i=0;i<length;i++)
" j" k4 r% V' z3 l3 v {0 `1 _9 _. C: |0 Y
theArray = val;8 K' Y( N$ z4 ~- D1 J
}) l: y, A, [' w" ~/ S9 j5 C
}+ H1 ^( w8 r4 s2 Q
bgR = '0000' + fadeOutColour.substring(1,3)! T4 A+ q$ R4 w8 T4 [2 z' v
bgG = '0000' + fadeOutColour.substring(3,5)4 z4 d6 p! }( m, M- i- T3 H; Z
bgB = '0000' + fadeOutColour.substring(5,7)% o3 _9 v) ?1 a* Q
currR = new Array(numLinks);
' C! W$ O6 Y' x. w- ?# e3 D currG = new Array(numLinks);" r5 T* h! i2 Z, [2 G! w. {
currB = new Array(numLinks);4 q! l/ C6 X+ ~5 @; R: G7 n) Y; ]
count = new Array(numLinks);3 p/ m+ x! [2 q* u0 L
fadeOut = new Array(numLinks);1 X0 J8 {6 k* P( \, R7 C4 D
continuous = new Array(numLinks);2 A) p* |! m* J. P
newColour = new Array(numLinks);
* Y9 U5 f, w# Y s6 w% m4 L% T tID = new Array(numLinks);4 R! ]( f0 h% B; \0 [
redInterval = toDecimal(bgR) / numFadeLevels;
% f+ a2 R1 u0 s greenInterval = toDecimal(bgG) / numFadeLevels;7 {" ~0 [7 }! z+ c. ~
blueInterval = toDecimal(bgB) / numFadeLevels;' c0 z' [; M, ] Z4 b* S! A+ i
initArray(currR,numLinks,0);% L7 \1 F* J6 i8 C5 _ \; W- L
initArray(currG,numLinks,0);' g; l1 m2 G' r2 n
initArray(currB,numLinks,0);1 l+ K$ n5 ~" | a4 v
initArray(count,numLinks,0);+ h! i- P7 E# A: ?! s$ y
initArray(fadeOut,numLinks,true);
2 E1 K, b! r- a' X. p- c" d initArray(continuous,numLinks,true);
! Q+ y; J" e! C* e/ I: l+ l} / L* M1 p7 I! e h# X& N
function startFade(id)
0 h3 v3 Z# F, k) j4 f+ k{! l2 e% g7 P7 ~
if(fadeOut[id] == true)! e- ~1 q# n: r" Z
{ /*move colour towards background colour (increment)*/! ?8 \) N! N% e* L1 Z6 ^
currR[id] += redInterval;* Z% l% Z7 R2 E% G, b6 L
currG[id] += greenInterval;1 b1 e( {. d; e) n; k( ?/ l8 e
currB[id] += blueInterval; n% L8 e0 K0 r
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);# \0 _: n5 M& U- P d/ f
if(++count[id] == numFadeLevels); E: Y* X9 Z% U% f2 Q a8 c) ], ]- W1 m
{; I3 e& m8 k" r* e! n( c
fadeOut[id] = false;' I0 w) T P9 m
}. [1 \3 x7 A9 ~9 S/ m. x& l6 V @
}
( q5 ~1 Q9 Z- R6 z0 K9 l0 l# @, {& X else
, w* @: D/ _+ z: g# m$ b {+ B2 {1 Y* Y9 \) D
currR[id] -= redInterval;* A5 p D5 j2 j
$ a8 D [. c! g7 Z. b4 D6 c. f currG[id] -= greenInterval;
% c3 ?7 N5 b5 l5 N$ {9 |
4 @7 B# L- H( A: p" \ currB[id] -= blueInterval;! q& Y/ Q5 r9 @+ O f
. L. t6 X6 k" k' n, ~! I* D
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 }9 U( u" N; C8 P2 y7 H, G' S4 ]% J1 m% f8 h
if(--count[id] == 0)7 L$ B4 o: O0 Q5 S% `" X9 f
/ C& P% q$ N2 ]1 [7 {1 P; P {2 d* q& f- B- o
]: D/ t+ z& P: @+ k% v fadeOut[id] = true;
, q' S# F2 G! v3 L# l, r& J. W. |
}
' D/ s2 @3 F! v! K, W `8 I9 _; J1 }! r) N. I+ @) f, |+ _! o
}9 b, i6 _( x& m( k# j; Q
' _7 i, R5 r; W7 v0 M* D% @+ I
if(continuous[id] == true)( ]% d+ h4 Z4 n3 j, ^% m+ g& q
- D7 c1 F' I+ N3 N% ?, [ {
( }! G- B% b, F+ o4 \' r9 p% I+ [
document.getElementById(id).style.color = newColour[id]; ' V& u0 _: ^* m9 `4 R4 T
% p* G8 T" f% `7 g- q5 S
}
9 o$ v- t+ r F8 E/ o8 `* h5 L: O
else
: N0 {5 `. X$ \3 _" ]" P) a* e' m- E) C7 J; G8 l+ q [( Q6 C3 w" \8 Y: U
{
. r- z( Y, K9 Z* s3 R) @$ \5 X3 Y! [( t7 G
document.getElementById(id).style.color = hoverColour;; r( v5 P+ _, S+ J( `) V, @
# X6 A5 g( r r, _; ^/ A3 S }3 h* q2 R# h. X2 G7 R
! K) g( I9 v n/ u: `% Z$ p& K clearTimeout(tID[id]);
$ F* x, ?, J$ Y0 x$ s, q- w3 n v2 g- y0 x# Y0 Q% Y
tID[id]=setTimeout('startFade(' + id + ')', rate);
2 w4 m$ Q% F- O( {- t8 g3 R4 H; d" s! e& h" j8 H0 l" N
}
2 }% R4 C' @1 |+ J$ M& ]# D8 _: D8 R8 c# f3 b! j
function continueFade(id). C" X, M/ w9 t& M9 J$ ]
5 v2 p0 | O L2 X6 h
{
' P2 e/ v3 h; {. Z: ~& W8 {7 o* B- J R. E
8 T& c, R$ h9 Z+ j) z$ J+ [ continuous[id] = true;$ x4 v1 I X* g: p
$ L$ N: ?" w2 i9 ~
}2 N6 b6 n. `8 ^# @5 [- q
5 J, L( Q- `: u. H7 |, Ufunction stopFade(id)$ H) P9 r$ M3 k
1 @. {' f: |, f7 e
{$ s% E# T: C8 L# M
6 k$ p, w2 @1 m1 V* Z8 a, P' X continuous[id] = false;5 m4 E. t+ J" s5 x5 w4 y9 A# o. q
0 z/ S8 Q: X0 J}4 i; Z6 Q% I7 L7 ?& O
" u" C$ l, g. L9 C; W; Z9 o3 j3 sfunction StartTimers()7 Y' b( p. w5 J8 L- d
4 [3 T; D& T0 O$ r4 u2 y9 A0 v1 F{ //set up an initial set of timers to start the shimmering effect
" E5 M) C! s$ |( r
' w& s7 J0 v1 v8 J2 Q( N for(id=0; id<numLinks; id++). [8 k m* W- o, B0 y5 E" W8 A& Y
! o0 o9 a3 }$ |4 n( I {# v" E* A. ^7 f3 \7 i9 y$ n; N
) K% T0 S1 t# r2 W+ R9 j+ X* M
t=setTimeout('startFade(' + id + ')', id*100);( T( \# W5 G% l
* Y, i* i* ]+ p' u }* e' N5 M e) M1 ]3 e1 v/ G
) b7 y9 m6 k" b5 S3 C}
& M1 o( Z% E$ i4 v1 P
6 a2 y8 F5 o! r# h" B//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
" x+ s4 C, e8 ^) B" K: `
1 Z8 u' O# y5 l9 W- q* }initLinks('#FF0000', 6, '#FFCC77');
# R' A# O9 @) e
5 ^3 g6 _; [$ ?7 G//-->
* u3 z+ D+ A2 I% x' ^2 d) {2 |
3 f& N$ m/ z2 I. y: p; {# S3 g& c* A</script>6 m' i' U5 T* p# \# q6 }" I0 A6 e
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元7 a( L8 |5 {. O& R- K7 W. W
</a>: T6 h2 `9 E; M7 Q @
<br>
! B) @& B) x" I3 }5 O# x$ E<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>0 k* H% T& H2 ?# m! X' d* `. d
<br>0 I0 V) Z, C5 Q u( Q' H9 N
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>: g" V+ V6 o0 P% @& J
<br> 4 C& o/ |5 U# w; U: @) T/ K6 O
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>* N+ h- q1 c7 t) f' V; [( l
<br>; r& f; _1 j# `2 y2 N
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>6 k6 f* q* I: {5 r. C2 R
<br>
- k1 @" Y) q3 e$ a<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 _! @, q) B% e) J3 X, {
<script language="javascript" type="text/javascript">9 F9 e% z& f; o3 D5 C9 I
<!--/ T: { b7 j3 b- U
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering. f* m3 S9 ]! p6 g' n3 p1 e S
//-->
3 r/ P' a6 N9 S: h7 V- q</script> |
|
发表于 2008-1-21 20:48
|