|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
3 Q+ {$ g: E- k J7 V<!--- c4 B7 J2 q& c( L1 K5 D
// convert a single digit (0 - 16) into hex
; J7 R4 T: m# }/ I {function enHex(aDigit)8 l! |/ K, Y, a N" O7 c
{
# ]5 D, L' U, j& Q& {2 E, @$ t8 h return("0123456789ABCDEF".substring(aDigit, aDigit+1))
3 |# U* m ^9 A& M% ?2 l! v}
* R- }, Z2 s" x# g j+ {% t// convert a hex digit into decimal
* k& b7 @5 R3 v% Gfunction deHex(aDigit)
2 {/ _- a% b" ?3 x{, F# j1 v7 w+ I5 @: j
return("0123456789ABCDEF".indexOf(aDigit))
! y7 c- n$ }4 B, k$ o Z. S}; o- H0 V- v& [8 y* b
. w# c& y* [+ u% T5 j// Convert a 24bit number to hex1 i. M% Z" E* l7 S) p
function toHex(n)
7 }% v4 k+ k+ R, D+ y. Z/ j{' r" ^# p3 O: u3 h
return (enHex((0xf00000 & n) >> 20) +
$ i4 x/ s ?' O. A1 n enHex((0x0f0000 & n) >> 16) +
1 N7 @7 g/ u7 u% t$ D. t% c' e enHex((0x00f000 & n) >> 12) +
# j O( d0 ]: r enHex((0x000f00 & n) >> 8) +* Z8 o& c: _3 H
enHex((0x0000f0 & n) >> 4) +
; p. l- _2 R) W; t6 @1 O enHex((0x00000f & n) >> 0))( ?+ v" o4 M7 H A. }
}/ B6 p2 q. r/ _ e; J9 Q; E
// Convert a six character hex to decimal3 |" d; u, r* V+ h: z
function toDecimal(hexNum)5 `' |9 A3 i2 w% H( \9 G+ S
{5 X* U/ K' p# e5 ?7 [4 Z, A
var tmp = ""+hexNum.toUpperCase()
5 I7 c* F: h' }* }2 X while (tmp.length < 6) tmp = "0"+tmp7 P. z3 C/ V. u- Q5 t s3 a* F) p* b8 J
return ((deHex(tmp.substring(0,1)) << 20) +
8 a% b! I* r, q" q! p- L (deHex(tmp.substring(1,2)) << 16) + & Q& f* X: J. ?+ _) x3 T4 e" O
(deHex(tmp.substring(2,3)) << 12) +
7 r7 V2 Y8 a- @ (deHex(tmp.substring(3,4)) << 8) +
+ l% v6 A$ V! c; i! @7 \ (deHex(tmp.substring(4,5)) << 4) +
( p1 o* ?2 {7 j2 \' r (deHex(tmp.substring(5,6))))7 {9 F2 ]) m8 l' k
}# r$ H& c$ I$ c- l
///////////////////Shimmering Links/////////////////////
6 k' _8 @; R- n ]//global variables* L7 I- Z( v2 Q% [7 E6 H* t3 D
var hoverColour
) A/ P9 P& Z% q2 C2 N$ Z8 evar numLinks;5 F; b% \) G7 j5 q& p; d, N
var rate;
; t: H5 i/ F$ ` ?0 m4 z! Cvar numFadeLevels;
/ z7 I9 Z9 a* x) P9 Avar bgR;
9 R( c9 K/ I# \3 Yvar bgG;5 j9 X+ K7 @* Q$ a5 i
var bgB;
8 n m' G+ d9 w" R% }9 G3 `var currR;
3 i( m$ I) V2 z- M( Kvar currG;
) F) G- y; z9 U( }5 Cvar currB;6 E1 k. |6 a$ R! V. ?
var count;
$ C( b! U8 o" a) [( H/ j( M; kvar fadeOut;
, g g7 }2 e! K7 x5 V! _var continuous;/ |1 a# ]1 U) q0 r% D/ B
var newColour;6 N F% t* n$ w. F
var tID;$ Q1 P& I0 A9 Q: `$ u
var redInterval;
0 X+ A/ M( `) D0 Cvar greenInterval;) I3 e, M2 A- \& O: ^! I- G) [
var blueInterval;
0 I9 x1 H' q( o4 e7 t. Xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)& r& v# o% {' e/ M/ n
{. X2 [2 q6 `! h
hoverColour = mouseOverColour;; C4 l7 }; i$ ^
numLinks = numberOfLinks;! ^2 N9 R1 `* t1 s% y
rate = 1;
1 b+ ] X1 d) c2 ]5 l6 O" @ numFadeLevels = 30;) y4 ~1 _3 n5 ~0 A: P7 c, o% p! v) e& M
function initArray(theArray, length, val)
- V0 y% W5 O! [& q. B8 Q {
2 R6 |2 T( R5 H2 Z7 C for(i=0;i<length;i++)
" y4 U8 M: j9 }/ J/ M {3 J) M9 C( B0 |
theArray = val;' e5 g. E0 y9 H/ u( q' p& ?
}' i7 a8 f1 R2 k8 q) z
}6 ~1 w8 U1 ~& T( T6 O* h
bgR = '0000' + fadeOutColour.substring(1,3)" [( C4 ]" F6 {; f" w' b# i/ U( I
bgG = '0000' + fadeOutColour.substring(3,5)3 i6 P1 X: Z; v! W
bgB = '0000' + fadeOutColour.substring(5,7)0 L0 O! @+ c4 `$ m4 h& x
currR = new Array(numLinks);; ]' t$ k' o7 N5 _. L
currG = new Array(numLinks);
4 J7 e, M4 L' J) ~4 D* t currB = new Array(numLinks);0 ]/ d3 e- _ I
count = new Array(numLinks);6 x& B* \$ g8 S" o2 i& ]/ ]7 c3 r
fadeOut = new Array(numLinks); g" c! n8 x2 ]# Z, M- K
continuous = new Array(numLinks);* L1 S- `* h5 A- N4 U* a1 l" R
newColour = new Array(numLinks);' g6 r4 G9 g; ?, I8 u, P* f2 R
tID = new Array(numLinks);! G: o8 D6 }& N/ c) A- d" ?
redInterval = toDecimal(bgR) / numFadeLevels;( |# q' `; J( \! Q8 a. Q- |0 t
greenInterval = toDecimal(bgG) / numFadeLevels;
/ n/ Z- C; c: C3 W) \/ [7 Z blueInterval = toDecimal(bgB) / numFadeLevels;; G$ Q. J5 n, Y- m4 I2 p' O2 x
initArray(currR,numLinks,0);
4 y: F; a0 H2 c/ V initArray(currG,numLinks,0);( a# n8 {5 L1 R" d( X R) x
initArray(currB,numLinks,0);( a C$ O; _2 U. X
initArray(count,numLinks,0);
y8 Y( B+ h: \4 P initArray(fadeOut,numLinks,true);' K/ z6 A0 d' T* x# ~% F; V0 [2 G
initArray(continuous,numLinks,true);/ E4 v5 H+ U8 }0 t2 f( [5 {5 X
}
$ c! J) P" y, Z1 N. y1 u6 |# nfunction startFade(id)
/ |' W8 F' p1 Q3 _8 H! y8 e{/ ]- r6 D$ h1 @- |, s) [4 t
if(fadeOut[id] == true)& j2 x) M5 Y* W0 U5 A
{ /*move colour towards background colour (increment)*/2 a" \/ K- g& a2 j
currR[id] += redInterval;
7 u M) n) K; B) ^& T currG[id] += greenInterval;$ s( |7 L4 L1 X" W& U
currB[id] += blueInterval;
* a; J' _; n( {) M2 f newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 A: Z; e* m' D( P if(++count[id] == numFadeLevels): I2 K |- ~, @8 w* J4 ?& Z
{
7 ]6 E# O- @1 {" A/ o fadeOut[id] = false;1 a5 C) ?- O. p5 k1 j- f5 H) u/ R
}
% H6 t* d/ o B& H% k6 v f }6 z! B$ X4 ~4 c/ D
else: f. t. Y9 o/ j$ I; l
{
+ a& ]- I/ P x& h1 z: `- S currR[id] -= redInterval;+ K6 X- }% F9 r/ f* I% j# h
0 j6 z; R; d* k2 {+ L currG[id] -= greenInterval;
$ s# [5 h" J2 ]2 H' |
1 y( A* g7 i5 E5 L currB[id] -= blueInterval;1 @) D6 A" s% M! i% D, j' y
( X2 l9 H3 I: n2 L- U$ i
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
. P4 n. L' F1 P7 b# @5 H2 c- A6 c+ x9 `* x. u. i: K9 |% ~& _% B
if(--count[id] == 0)$ I0 P" I8 {* }* _
4 |1 `! L) N6 `9 p/ v N {
- R& u! m! Z1 F% l$ r
3 X* I! P8 i3 M( h fadeOut[id] = true;, Y0 P" P/ I% s$ }3 s7 N% S: Q
Q% k+ ~/ j \! z p: i( H }) j. ~; V* _) C6 o
1 C* N5 y- S! @1 Q( ? }2 z; B$ A& ?0 `- V" R9 p' l
' D5 i* ]/ }+ D& f
if(continuous[id] == true)
/ u' i8 E" H3 |! ?! S- q6 h" q3 A
{5 {9 _$ s. L( G1 l9 _, ]' f6 ^
% u. f& y. k0 c9 b. w document.getElementById(id).style.color = newColour[id];
. p5 ?/ g- t$ D- K. C! u
/ P: y0 b$ v1 k- F! \6 ]7 P }
# f& `; T( n I# q: i; ^5 G
3 `* `$ c, k1 s1 S) n else
' j, `0 c0 k8 ~3 X
, a& T e9 v8 R' e {
8 V2 U8 W* S$ Q9 D- A
* @& C, D: U, [ document.getElementById(id).style.color = hoverColour;
8 O9 A1 J G- O" W: }
: t0 g: N; W) t8 j# J }
, f( f( ]- X7 A% ~. r" D$ U, y( e5 b
clearTimeout(tID[id]);( Y. C# L6 \% U( G
- ?: N$ h: J! b4 r- e( s; I1 _
tID[id]=setTimeout('startFade(' + id + ')', rate);$ l1 \2 W4 u8 `7 c% z
/ ?# B& d. c" g4 {* K! z, D
}
/ |/ v" m% x0 }4 A1 v- N/ E
3 N; P, k+ F" e# ], Y. vfunction continueFade(id)
# G* K3 V6 n1 `' O8 S. T* J4 ?5 g
{! l& U" L0 }$ F3 c
2 H: W4 m9 w* }5 s# B5 y! F
continuous[id] = true;
- B O( [6 S9 }
* F5 T9 W9 X; m. ^) ~3 Z}) F* \+ U$ g; {2 o' s/ V$ Q
' `0 H* I5 o9 R; s# Nfunction stopFade(id)" |. h+ @3 l/ ?: O0 \6 r- k$ \
6 ^$ [; n2 H% \- Z# F% R{* D; b1 y$ R8 u2 T
0 N9 z7 O% Y7 A9 X5 }; B
continuous[id] = false;9 ]2 X1 G; W) g
6 M% T3 ?* n9 ~0 U2 Y% r5 K2 m
}' t' C/ U) F3 N7 N. e. a5 s
0 ]- A( q2 E8 F. @function StartTimers()
0 k Y8 d, z" ^# v6 a5 w; P
% l7 r; ? s! c{ //set up an initial set of timers to start the shimmering effect
4 n z& `& e9 A' x0 S+ ^! | }# L' d
for(id=0; id<numLinks; id++)0 G2 |/ A# J1 @# E1 B
) y7 p n- P# s9 D# Y( t: o {
) o* h+ K3 b$ O7 ^# S2 E& o' d6 s* K0 q$ S
t=setTimeout('startFade(' + id + ')', id*100);
- [2 S: D. }; w, A6 \; c+ }5 Q2 a5 |5 }% G7 j3 }% }, F
}
, U. w' M% v7 e3 e; V6 H; _- K$ y% v
9 o* U' t h |- T! a}6 @' m3 ]5 p; s: U2 y9 \4 F
t9 D+ t( `$ y+ \+ S! _, S9 s
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' h% s( |7 H( |1 r5 v+ |% ^+ G/ a
* V, t" y/ T0 ~& j" v. N& sinitLinks('#FF0000', 6, '#FFCC77');# T9 I' c* l6 x) A
% d! }: U v+ ]/ U8 s% R/ w1 Y @//-->, s) r7 y& L6 f! A6 l2 X& ^
- r% ]# w ?& K, E8 P
</script>. ?5 R3 c2 z# t2 O
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
; [% b9 L0 Q8 | x" G' x$ A</a>, W7 K* e) K4 e+ c
<br>
5 g! ^4 q& g( n: I( c; e6 B# W<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
8 Y2 D6 B% m8 B v0 \<br># f4 Y& W, f7 P; G1 o6 g8 O+ S
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
; B, [2 J; N% F: I4 q<br>
' a, E4 `3 d( ^, K) q, B8 ~. K; S9 @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>6 J! B+ n/ ?9 Q' v% Q1 Z# L
<br>3 c; ]$ R. K) @3 J1 @
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>5 l3 ^7 \+ V7 f& W
<br>- I, n; }, D+ n4 U' [
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a> g/ @4 s- G& V K8 O- B, F( I0 w
<script language="javascript" type="text/javascript">9 h0 H* Y0 [' P s8 y% P; d
<!--
, W- B! u/ @7 Z9 g! A5 F! psetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& J) L6 t5 U$ N* I/ d
//-->
4 f8 t( L& Q/ O9 `. K2 n</script> |
|
发表于 2008-1-21 20:48
|