|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">+ `2 c% Q' |2 k+ [8 C3 X5 {5 b" N
<!--' r ~/ O5 z- D3 [5 E% }
// convert a single digit (0 - 16) into hex8 A& b, s5 ?) O1 z4 N% M
function enHex(aDigit)1 o5 {! k' J' _
{9 K4 c5 B( C s' P& \% E
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
+ e% I8 R6 z) M4 @8 C- h- d4 ~}
# Z5 q. C Y9 B- y; D// convert a hex digit into decimal: s3 m; G; m: P+ q0 l
function deHex(aDigit)
: O" V9 h8 U& i; c# v& {% q% {4 p9 }{
* d4 E) l2 Z$ V1 ~' z return("0123456789ABCDEF".indexOf(aDigit))/ F0 y" t+ U4 J$ C# `( o# q
}! v* i, [' }4 \" ] d2 V: r
) V# J$ X- K8 U& b% ?4 d0 v// Convert a 24bit number to hex
6 _" Q1 F+ v `2 u0 t S: ^function toHex(n)% X, Q) X6 F; u. _" C v/ |
{% @) Y6 d) e! A; e; g! m
return (enHex((0xf00000 & n) >> 20) +& V* Q, r# X C
enHex((0x0f0000 & n) >> 16) +9 `5 X4 S) M/ d" W/ ~
enHex((0x00f000 & n) >> 12) +
" J5 c o- m, e- t5 W1 i x enHex((0x000f00 & n) >> 8) +
: H2 Q; e P3 R, v% ]# A enHex((0x0000f0 & n) >> 4) +
" F4 _# F5 W8 ~5 Q& D) a8 l3 t enHex((0x00000f & n) >> 0))
. m1 }5 T% E( _' E3 w5 w7 W}
, Q: b% x7 }! K3 a// Convert a six character hex to decimal
: _, ` F4 @& m8 Ufunction toDecimal(hexNum)
S6 s2 ]2 z( i; W2 ]! n2 H# O/ g% h{
+ l! ^( \& p b5 { var tmp = ""+hexNum.toUpperCase()4 E) b- z/ ~4 X! C# \
while (tmp.length < 6) tmp = "0"+tmp5 |/ \1 S; H$ d
return ((deHex(tmp.substring(0,1)) << 20) +5 P/ D- x3 t% y6 y" H
(deHex(tmp.substring(1,2)) << 16) +
0 [. j: x5 i$ e( g: O (deHex(tmp.substring(2,3)) << 12) +/ ~: {& [6 @: c2 c) R
(deHex(tmp.substring(3,4)) << 8) +- X8 D( X$ @/ o7 [# `! n5 Z
(deHex(tmp.substring(4,5)) << 4) +: A% T d' j7 P! m
(deHex(tmp.substring(5,6))))/ Q1 i8 R; T2 d+ X9 n5 E
}( \4 T& t: Q2 K+ h
///////////////////Shimmering Links/////////////////////4 F& A! C' M# r5 o
//global variables2 ~7 r. \" m8 L& N7 X* w
var hoverColour
/ T# y2 {7 b9 q$ B0 Cvar numLinks;
/ k& z3 d" P- s B9 Zvar rate;, W3 N, y9 y6 T% X
var numFadeLevels;
9 B) D% V8 q, o5 w: evar bgR;- z6 F1 m Y' j
var bgG;, y4 X5 |2 z) Q
var bgB;
3 ^8 E5 G& D& A7 K+ D/ cvar currR;2 i1 _2 F i8 T* S, T
var currG;
' W, z5 k$ b$ A/ ~' Wvar currB;
) f" w1 S7 q6 `; W/ I2 \+ s# v' ivar count;
/ y) l5 P7 z3 H6 l8 i7 C3 Tvar fadeOut;; ], B9 \0 F( ?5 Q# S
var continuous;
9 u9 o1 q! X8 [ @) C$ Dvar newColour;
$ G4 s+ Z7 I0 P* svar tID;1 C# T+ o# j1 ~# \! h0 s) h7 g
var redInterval;
: m: W" |, S0 u& h# Q8 Lvar greenInterval;
* S7 x2 v' m, Uvar blueInterval;
# j2 L0 F& E! ~* Ofunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
- |$ \$ q( K. n) h{# m1 K0 O- |6 \* @3 f
hoverColour = mouseOverColour;% m: X( W) y0 c( l0 _ a
numLinks = numberOfLinks;" K. c7 z+ a$ c' h: o7 ]; C
rate = 1;
9 g& }- V( O* ^5 ?6 o numFadeLevels = 30;: d2 C" C2 H$ A. A* \
function initArray(theArray, length, val)9 r+ Z; G$ b+ u& Q
{
5 W. Z% l1 z& _/ n$ _/ A9 c% b) Z for(i=0;i<length;i++)
7 V' x, }6 X( B2 X( | G {
4 M3 {- B2 K0 g. ^- w9 B1 u, | theArray = val;
1 Y% P; C; u- p7 ?/ ~& W# S }
) G# c4 ]/ `- Z$ E }; K+ d! }, f4 n6 h4 }, y
bgR = '0000' + fadeOutColour.substring(1,3)( Q! x1 B, t j0 d \2 i
bgG = '0000' + fadeOutColour.substring(3,5)& H& ?2 ^# Z1 A! r; a- D3 e- c6 @
bgB = '0000' + fadeOutColour.substring(5,7), }$ m* |2 A, M9 {. {& B4 x
currR = new Array(numLinks);% }7 O4 ?4 | Z( ~; O2 g/ w
currG = new Array(numLinks);5 \* @) B3 V# M% A2 I
currB = new Array(numLinks);3 A8 g, P: x; J
count = new Array(numLinks);
- F v0 P3 q9 m0 |) ` fadeOut = new Array(numLinks);) m: v6 W1 M2 a# k) O! w7 V
continuous = new Array(numLinks);) [& m6 m& n# H
newColour = new Array(numLinks);# U) }9 j5 H* c
tID = new Array(numLinks);
7 R. k8 {6 [* L; Z h) n redInterval = toDecimal(bgR) / numFadeLevels;8 q9 b. v8 B$ A4 F& y$ w
greenInterval = toDecimal(bgG) / numFadeLevels;
- B/ @' R( ^2 r, D& R3 `% ]1 R blueInterval = toDecimal(bgB) / numFadeLevels;- [9 z' n1 p# F( V) H
initArray(currR,numLinks,0);
, l% { ~! d' b5 W3 i1 ~- e; ^ initArray(currG,numLinks,0);- u/ L- n. u4 S! E+ \/ F: u' q. z
initArray(currB,numLinks,0);1 ^9 Q$ V1 g+ ?* S4 k) L
initArray(count,numLinks,0);
( g! ]$ u, P/ P) H; g& H initArray(fadeOut,numLinks,true);
" F# B! Y+ m6 |+ | initArray(continuous,numLinks,true);! L+ Y4 ?6 h* B# ^" m
}
2 I( ]- p- o+ N) m1 Z+ \function startFade(id)
* p$ A. R" ~, h2 ]{
$ X) h7 D" P! N0 }! ` if(fadeOut[id] == true)
3 a- l/ {$ s3 k, O { /*move colour towards background colour (increment)*/
. c! w% h' H) i, ~ currR[id] += redInterval;
+ X2 L. k- d" Z" |) o currG[id] += greenInterval;: U0 b4 F" ?9 m% d
currB[id] += blueInterval;
$ N! b" a0 q! @3 G9 K. w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- K6 J" M; a1 S) D9 D8 O* a/ A; S
if(++count[id] == numFadeLevels)
* P7 j9 K, Q' ], d' H {, x) X% ~/ h) S/ J1 A
fadeOut[id] = false;
) d4 Q8 Q8 @! L) P9 H0 _ }
* D& L4 f. a @( l) v% i& v }+ p- I6 Z8 D% D! d
else2 o; a- A5 b9 U" o. M. s
{$ i) m" v9 m3 \2 Z' b" | o& e
currR[id] -= redInterval;+ j. v: S- a* t+ y; o, Z
9 M& d6 N/ K' m3 u5 y+ \, ?1 }9 d5 J# W
currG[id] -= greenInterval;" R, N! g. h: n4 [) p; y; |
" q- X7 u8 e1 l, C( o currB[id] -= blueInterval;
" r) f& z( D& a5 C- [# h* \8 ^& {- _9 U! e/ y0 p7 H- ]7 @
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 N* H4 f$ E+ f6 _
- s% ]2 I2 r8 q( s( [ if(--count[id] == 0)
3 y& d: N. O" y/ d. M
' S2 j0 G; Z( x4 a {
) d/ Y* K9 `0 |# C" x9 W8 \& F
8 p+ t) S$ w4 c fadeOut[id] = true;/ ]) A$ j. l% b, A6 U+ P2 @
6 d# ?6 B, I: v
}' `: L: ^( f: S2 O
4 b8 M4 c2 } N: Q
}- g2 L# W! j; p7 S: j: }& z
: W8 j% b2 m- x# x if(continuous[id] == true): U! I1 f1 @( x# [3 ?* G8 |: }- \
5 {3 `* A" ~, f. b3 t8 _ {7 k- v/ H- ]4 k" p0 H
9 T4 _" ^4 `& e8 \& g document.getElementById(id).style.color = newColour[id]; 1 _4 J& E5 k) l4 o
- {* o4 s+ i( e/ ?' A
}
5 u0 s7 j" U2 U$ R+ Q; `/ W1 r
0 U1 h% h4 o* o( C else
. I0 | L/ \" A9 e6 H( I7 Q
, o* j$ a; a; [& {. l* u {
, f# \* m. u0 p1 ~
3 Z) i/ B1 L* {: n document.getElementById(id).style.color = hoverColour;8 Q$ y$ E1 P! b. Q3 |8 ^% f* o* r5 R
- H0 I9 n) y. @9 W& z& Z4 d$ K. R
}
! g6 }) G, U6 `* s- C6 p3 c5 I) ]& @* R3 n4 a1 V
clearTimeout(tID[id]);- u9 i9 u8 ~5 y" c {
) T/ v- U/ N) D- n4 P2 Y/ v
tID[id]=setTimeout('startFade(' + id + ')', rate);1 [: v% `8 x- H
$ M* Q1 c; n) F( n$ j, O
}
* u3 M' H. G8 c/ \. z
' s; r* F7 j9 X( s2 \# jfunction continueFade(id)* \7 K. N) l% i* e3 f
6 I; ?$ j% Q; J1 J* s+ n9 d" n{
/ M& X, M1 _) S8 L# _( w; `6 ~, b m
continuous[id] = true;
+ ]5 Y& M) S! ~' J: I4 j$ ?2 d6 t9 q9 E8 Y9 u9 C8 Y, Q
}" N) }0 f, O3 F& {
& ^8 p. M6 C1 D/ o! @) u" ^) }* R' ?function stopFade(id)4 \, n" _, z$ s4 w& \( f& I- J
: v3 u! m& t y6 x; q! _% O4 t8 a# V{- r* ?/ N& P* ~: o+ w
! U9 [, O$ Y( o( P; F' e( u continuous[id] = false;
+ ^0 y9 ^8 Z# j& A. v: w v
; }5 D% T0 l" P/ ]8 I1 h. k}6 ^7 n) s' G6 {
7 {: F# k+ D" i$ X9 Q( Q
function StartTimers()
0 ]2 ?# {% Y( M+ X7 X& p1 @' U& k( v; p* K q" O
{ //set up an initial set of timers to start the shimmering effect+ i" C3 X4 G. ]0 U9 ]* v2 p/ d
. `3 i/ I# K- S) j% @
for(id=0; id<numLinks; id++)3 w8 |6 Z; r8 S5 ^# i
1 Y* [& ~, |: h% F# K. L
{
: s, s# a( Q5 d# G- \0 v- Z1 R8 ~* ]/ p. k. M U
t=setTimeout('startFade(' + id + ')', id*100);
, K; r; Q) J+ f) |0 m2 u
/ k/ d3 i5 d4 ^# t4 c4 D R }
1 s7 q( I; A9 T
1 [% i0 |( A" a. z: Q" H}& f* p3 g, f; z( p0 K
3 @. v M1 N1 {/ \+ m5 Z) ~
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')8 y" g$ Y W- w6 J3 [: \+ [$ v
% ]9 y3 Z- X$ X Q P- C7 |: b3 B! S
initLinks('#FF0000', 6, '#FFCC77');& x( T* E; x" ^
2 V$ m* L/ B$ ^9 ]% W
//-->
% \* M$ _( p# o6 h5 L, V
! h/ M& w; [* L ?! @& B; m0 [</script>
. e% e$ i2 U5 [8 i& V# t2 z( W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元8 A' O: G! m$ i+ e# S& ^5 k/ J' u
</a>
4 }; j% `) H. z! m9 X, e2 }<br>
" U' C2 Q- j ?1 w1 @<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>5 E# N! v$ e) T& r5 j% \( U( ^7 X
<br>0 ^* k$ x5 m' \4 Y. k O
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>' {8 S! a* T8 J5 z
<br> , C$ l+ B4 g1 A* d; J/ t: \: i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
* _- ?) J9 |5 C* `+ C& j" O/ l<br>9 v8 i( f& E R" N# u. Z) J! e
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
- @- w" ^; B' V- Q<br>
5 m& V% F ?$ b+ [5 r. X5 p<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 P" u8 B0 x; X# o# { P# S
<script language="javascript" type="text/javascript">
2 H6 G- ?1 X- Q9 e ^* W<!--
/ [ j1 U) \# {4 {9 HsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering- M2 W7 Z: ]/ o# e! k
//-->2 W( n' J. o, S# |, {$ A5 t" V6 x3 C; x
</script> |
|
发表于 2008-1-21 20:48
|