|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
. {& _8 U* [ H ~% N<!--1 ^ G8 ^% G4 z& a
// convert a single digit (0 - 16) into hex
" @& A3 q2 L0 G+ ~function enHex(aDigit): l6 w- n. ^7 O' B1 g: I! _
{9 x1 E; b2 D" X0 O8 @6 Z# a7 [
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
4 A- A" c; R1 i* ]}
% \- f: ^6 h% A& _// convert a hex digit into decimal" V; e, u9 G. j+ f3 N3 C
function deHex(aDigit)
% [4 O) d, e7 z" x/ U7 k{6 K8 b: O7 u* ~6 [ v
return("0123456789ABCDEF".indexOf(aDigit))8 k" z! k; m! H N5 E2 c
}
0 z" z- `/ @' i1 ?" S0 R! C! i7 G1 @- E k% X; R
// Convert a 24bit number to hex
" k8 x& }0 J( J9 c1 H# \function toHex(n); f; s' ^% T$ @5 J( m# D
{
- _& [6 m) J) d" |# t0 b( b return (enHex((0xf00000 & n) >> 20) +
% X: l r6 o" ~" q" G1 z enHex((0x0f0000 & n) >> 16) +: o& g, I/ z; C; w; L! F
enHex((0x00f000 & n) >> 12) +
+ b# t* ^2 a; k' A4 @6 t/ z1 Y: y" Y enHex((0x000f00 & n) >> 8) +5 v3 a4 W3 q+ [
enHex((0x0000f0 & n) >> 4) +6 y- L5 `& m$ l
enHex((0x00000f & n) >> 0))5 Y3 r+ P! E9 y) Q
}4 ]3 j( A! s, i( w& O4 R' G
// Convert a six character hex to decimal
9 V E" Z$ `( _function toDecimal(hexNum)4 o3 `5 N, S7 F( D
{, n! q3 k# C3 K. z& M1 Q( o5 q
var tmp = ""+hexNum.toUpperCase()
% u5 a% F7 m- {: \, B! Y while (tmp.length < 6) tmp = "0"+tmp# b8 ? X5 Y2 q: m
return ((deHex(tmp.substring(0,1)) << 20) +5 f4 ?+ C# F; B
(deHex(tmp.substring(1,2)) << 16) +
- k+ i3 Z( w% I' I# ] (deHex(tmp.substring(2,3)) << 12) ++ X0 R) M. X! O" j9 M. T! X
(deHex(tmp.substring(3,4)) << 8) +8 `5 f; _" R& G. f5 y1 w
(deHex(tmp.substring(4,5)) << 4) +
! S3 \" A, s$ @4 Q+ H (deHex(tmp.substring(5,6))))
" M+ D, K5 @6 E: F' J}
( D/ V8 v- {3 a: e4 y( w3 y///////////////////Shimmering Links/////////////////////
7 b$ I3 V [; G, W//global variables9 j* `$ ]$ [' V7 \9 k; x# s. l
var hoverColour# h/ Y; a E" i
var numLinks;! F# R- F J ~; |
var rate;$ V+ y8 \" k8 m6 Z7 `% o: Z" g
var numFadeLevels;
# r' j: s; d! V4 H* Nvar bgR;
4 I& J. |+ a- d8 t* dvar bgG;
+ T( j: w+ O) ?( p5 Tvar bgB;5 @% z; d9 N2 x
var currR;3 L8 J( T- T2 Z& a
var currG;
+ `( R( _4 H, |& o, T' zvar currB;3 p1 F+ R" f. s9 `* t7 B% K
var count;
3 X3 R. C }6 N4 x: O( Q$ U& o& {var fadeOut;/ p6 x, M/ g0 K( q
var continuous;6 A; i, }2 a/ w" }! O
var newColour;
4 `4 x8 ~+ r7 ~8 N4 i9 Yvar tID;
' e" o1 f/ l J2 X0 i+ G; yvar redInterval;* ^! y+ R: e) ~
var greenInterval;6 S8 [- u9 f: R z% h
var blueInterval;
/ h# L2 V& c! bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)3 n0 Y- @" b% n2 I! ~/ n
{
9 S ~- b b. d u* K* |9 r, t hoverColour = mouseOverColour;: q/ N O. S' F9 Z& p% w2 C% E( ^6 Z7 [
numLinks = numberOfLinks;& B# z% H Y0 U7 I: [, U ^1 ?
rate = 1;
: g! q$ G" B! s3 s4 H0 s numFadeLevels = 30;
r# f+ ?' W6 M- }: K9 c$ T/ g function initArray(theArray, length, val)
' E( X# L, Q- K0 D8 L {, u: h1 J' H: v) i3 d
for(i=0;i<length;i++)
( ?$ p% @0 a/ z- V8 K {9 Z) J+ O- N1 r2 H5 R+ U8 ]
theArray = val;
, b& v [- ?& d% H& t7 q- z7 {/ p }
3 D0 ^4 G. S6 T6 L }+ z% o1 r& m* W5 W: T
bgR = '0000' + fadeOutColour.substring(1,3)
, ?# e: E. P- F9 k( ?4 g bgG = '0000' + fadeOutColour.substring(3,5)% t, u1 s7 y9 O b& ~
bgB = '0000' + fadeOutColour.substring(5,7)' p- C: m1 M% l$ U! X) s9 e' R7 {
currR = new Array(numLinks); M, ?2 `/ {1 @
currG = new Array(numLinks);
5 t4 P @' Q; X6 V, E7 r! D currB = new Array(numLinks);
# J' s8 A, j1 P; A+ `: f9 @" K count = new Array(numLinks);, ~- {" {- L0 b0 _
fadeOut = new Array(numLinks);
$ l( | Y. d) [0 e continuous = new Array(numLinks);% [: b0 D& Z2 G+ ]3 x) Z. g
newColour = new Array(numLinks);1 u# l3 z: Z" q8 n' M: z# T
tID = new Array(numLinks);
' r7 E# r& z0 x5 Y! x/ x redInterval = toDecimal(bgR) / numFadeLevels;
- t& [0 K" Q0 n( S I! x) B greenInterval = toDecimal(bgG) / numFadeLevels; I: x! y C9 g' ~5 ~/ J; e9 H
blueInterval = toDecimal(bgB) / numFadeLevels;
1 Y5 h! T/ U4 T3 ]- R1 B& [. f" @ initArray(currR,numLinks,0);1 ]; S4 Z& s+ C* s# R9 o
initArray(currG,numLinks,0);
- Q n4 l' T9 p# z9 v, A' e initArray(currB,numLinks,0);
$ {7 `+ B9 n1 i) a initArray(count,numLinks,0);) M P* ^4 @$ f4 `
initArray(fadeOut,numLinks,true);
5 q: r& d6 H r( B3 e+ Y initArray(continuous,numLinks,true);
% g: S3 s2 M* ~4 Q} 3 d @2 X: v7 \7 z8 ^4 u- J
function startFade(id) s+ y5 x, e, U3 W
{
; f3 z% [0 _% X) ]6 R% t3 B if(fadeOut[id] == true)
7 r9 O/ l+ {0 k5 L { /*move colour towards background colour (increment)*/$ h% V" S! ~6 ^) y9 ]! a
currR[id] += redInterval;
0 i& u: [8 E) k currG[id] += greenInterval;
5 _8 n) c' r; Z3 U) B- i currB[id] += blueInterval;( o6 }- I% M. f( }6 Q+ e
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ ?( r' o* E2 i if(++count[id] == numFadeLevels)
" D; D+ s0 q; N2 J) _5 g {
+ J8 r4 V; d. D# ?; j fadeOut[id] = false;
c4 J6 {- Y* V$ v4 L9 @& ? }
. G. h6 E! R T4 z6 p8 E }
! {/ P5 ^1 F+ D4 I0 F% p6 r" ? else
' u5 y, n% G* d {2 j* h6 L0 L( N, D* J/ K
currR[id] -= redInterval;3 z7 H% `; }: Z, E( L7 b% G
' k! B$ s4 D& c# i
currG[id] -= greenInterval;
6 E5 X6 r @8 i1 {5 [
# N& `: \6 a! ^ currB[id] -= blueInterval;: k% Z5 T5 }8 z+ m6 G' f
1 ^. d4 ?: ]* m2 ] @8 ]
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( ?5 w) U8 t4 d+ N( k/ i7 e; t/ P1 E; P5 ?
if(--count[id] == 0)+ I ^) w% l" e8 q6 v
! r( y& i) s% J- B' p/ Q' V7 u {. v1 u& Z: L9 I, ?6 ~
7 n% ~$ A( ]* h$ C
fadeOut[id] = true;
& k6 x+ F6 u/ N2 o& h7 `2 S9 I2 a# [; g" t8 i3 y( j
}
0 S! m1 l" S7 [
1 \; b4 V$ F+ {/ s) P* a- {0 }- s }
9 W* R% y$ N: i) |; j* J) }! s6 |
8 K4 l( m, G$ |' @! r0 H, w if(continuous[id] == true)
$ @; n q( f9 j/ T! e& w. B( K: L: W
6 B; ]5 E$ y- H. S% I {. b8 a- u: f9 C) Q, q N
. U1 \- m; _; m9 J, R( L4 h
document.getElementById(id).style.color = newColour[id]; 6 v9 c4 q9 P0 r& h3 m: Q& t
( P3 i8 m3 C8 L5 p2 ~) h5 X }
3 ^) w6 Y* @, k3 w U- I) S0 W. B1 V& a$ M5 Z2 ~$ a) n* \
else
) ~3 v' g: o' L9 ]# E5 m0 P8 G9 ^9 W5 }- B5 {1 |0 q7 ?
{
4 r# z% E' v# Y
. X2 F" `: [5 N" e6 ]# } document.getElementById(id).style.color = hoverColour;
' R: P9 X' I; j, b$ h0 ?/ ]) q C# E) ^5 _" f: x0 V
}
1 Q1 i, T9 _+ |/ x) L0 s |! h7 ?! U
clearTimeout(tID[id]);' W7 L8 B4 X; C1 e; f7 s
! ]+ m0 u* Q8 A0 O; C" F
tID[id]=setTimeout('startFade(' + id + ')', rate);9 K/ l9 Z0 e! f# g( ^
- h9 j- }- s5 ~: s( v}
/ H) N+ T D" {0 {4 J2 Y; d9 U, ^+ f9 T
function continueFade(id)
2 X; s9 @$ G0 `% C- c7 z* L- M7 @ n& g. g& r
{
' {) c4 B0 t# J4 d$ L! D2 W+ V0 r; a8 b6 {# K1 F) @( V9 e
continuous[id] = true;
+ s6 o5 q5 l5 @4 S6 z' l9 O! T( U' h
}: N+ \: i [# v6 K6 w; N
' s% p' g/ D) y% k/ Q$ [
function stopFade(id)6 G; c* P/ G3 K: A7 ]
' ? h5 N, z- a8 _) f0 @) y% U {{/ q2 F) N" }: }7 c6 r
( b1 o8 X( H2 W: K continuous[id] = false;
- n0 Z7 O/ j; O8 B
' _" p2 [- s2 ^* ]}
& t9 J3 p* P" @
A7 p/ n7 q& c l* F3 n0 r7 Bfunction StartTimers()7 s) y! W- `- q) o4 N/ U; Z" v
$ j. N. |& w( M5 P8 l; @9 u* y
{ //set up an initial set of timers to start the shimmering effect) b# `0 e/ j: k# T9 f+ r
0 M; f* d: h0 g
for(id=0; id<numLinks; id++)
7 s; O& a5 a9 B! {2 O2 G# e' w3 b9 M' @ e
{
8 u7 c2 v9 E |2 p$ h
\3 D& E: L# ` t=setTimeout('startFade(' + id + ')', id*100); w; x2 N' s j( }# ^5 n# K
' }# r* M0 @ a* C7 k8 i3 r
}
" f4 u, J( H0 G& V/ M3 C _) v* A) ?9 l
}
# _6 X) n- u' r# D; `
# W0 y6 E( G2 i' Q7 H& m//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')+ P. F3 b* \6 [/ j
5 I4 [( @; ]8 s- r$ w
initLinks('#FF0000', 6, '#FFCC77');
; S: L" Z1 l, s/ G/ d2 y9 [$ `# i; G
. l+ B \5 ^! t( S//-->
; S, \( }2 K3 Q: R! W: j& W, U2 @4 @+ Z# t4 o
</script>
9 e: C' l# R/ c8 ?$ @& |$ G h2 j<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- c- i0 D$ Y7 ?
</a>
0 i) z$ T# ], P4 @<br>
0 P% h: J7 V; ?2 O+ c" U& U<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
7 F; ]0 k" s' i, k' ]<br>
6 ]1 p0 l- A$ ?. A- [/ g; A- ?7 \<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* X: s) }5 p9 c6 Q0 k& R* w<br> 4 c0 Q s3 d% C9 A9 ]" W* e [
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
6 G3 Y: w5 X0 ~2 e5 ^<br>
( e; |2 ?) U5 u# w<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a> u0 L3 q4 T! n
<br> ^/ V @- o1 J1 y( [6 f2 P) R
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
: n R! x# I' U<script language="javascript" type="text/javascript">; V8 B! A ~: Z! `# [) P, |: I
<!--
: @/ v; X, y! u8 DsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering- m- _' o* t5 E8 R7 y( ~/ G. ?( _
//-->8 U, T& U5 r+ v
</script> |
|