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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">9 i: [. z5 i7 p! }* I
<!--) C; O4 w$ ]7 x
// convert a single digit (0 - 16) into hex
& K) Y3 {% z" k& W( Y" afunction enHex(aDigit). c+ b) F0 n5 a/ j& I
{
% b+ _6 r! T$ S0 _3 H2 e3 [0 C return("0123456789ABCDEF".substring(aDigit, aDigit+1))! R$ v: C9 v& S J I
}
( u! C7 a% I, Y- q0 z! d3 M: a/ U// convert a hex digit into decimal
$ U5 c) I% A% _5 O! T7 d7 {4 L) }function deHex(aDigit). B! r/ b5 w, s- l5 U% I
{
$ b$ B; `8 R2 O. a return("0123456789ABCDEF".indexOf(aDigit))# i5 p& ^/ G6 { Y- d1 z
}
9 C# Q) [# U! N- _- C, r2 |* J# y5 c* N& e, @$ O
// Convert a 24bit number to hex2 A( X2 `! p" A1 H/ w
function toHex(n)
0 _& J2 U0 u( Y9 B$ f" M7 p0 j{" d! A! {0 L) m$ e: E# s
return (enHex((0xf00000 & n) >> 20) +# H) V4 e# `+ u& t
enHex((0x0f0000 & n) >> 16) +
* U9 P4 D0 z! c% T) a! I enHex((0x00f000 & n) >> 12) +
5 K/ @& s, C. f- W enHex((0x000f00 & n) >> 8) +& k# A. R) P: {/ P/ ?
enHex((0x0000f0 & n) >> 4) +, {2 O: r) j( g* p1 c+ U, F0 w
enHex((0x00000f & n) >> 0))
: \! b* h" Q' u1 O. _}+ h0 E' s4 n% c3 ?/ f* s; \
// Convert a six character hex to decimal
8 s8 m! Z/ s) Z( f. V# D5 [function toDecimal(hexNum)/ K; I4 `0 G# S; A) c
{6 B& l# \# s: n- N1 m$ e0 _
var tmp = ""+hexNum.toUpperCase()
! G0 C) }- Q5 n while (tmp.length < 6) tmp = "0"+tmp' }: k( \+ B6 F) R2 U" _
return ((deHex(tmp.substring(0,1)) << 20) +
x4 t1 g1 \8 A8 ^% G$ Z (deHex(tmp.substring(1,2)) << 16) + ; j4 c8 r! N, |' p
(deHex(tmp.substring(2,3)) << 12) +# ]* Y# @! }- k
(deHex(tmp.substring(3,4)) << 8) + `5 p5 Y+ q8 t2 j
(deHex(tmp.substring(4,5)) << 4) +
. N( H. o( L" C p; @ (deHex(tmp.substring(5,6))))# u" b, g( V- `2 {0 r4 E
}
# {( C, H& w3 [# _: w///////////////////Shimmering Links/////////////////////! g% }% O% P2 i
//global variables. G8 N. y1 y% e2 O e
var hoverColour# B! l% G/ ]2 B+ e1 E
var numLinks;
* t/ o( |6 K- X/ S5 T' M1 Z+ dvar rate;. c8 W9 e% N2 Q7 ^
var numFadeLevels;8 u6 I& q# X+ W& V/ R$ j: T2 `4 A
var bgR;
/ w* U, S: I3 T% f. @- _4 Ovar bgG;
& H6 R& }! s3 e& W) S' p1 vvar bgB;
1 u8 {9 E8 A9 T) M4 P Fvar currR;
, F) V, i) r/ e) X6 Pvar currG;
& d5 t/ T" i% ^$ f9 t6 Hvar currB;
7 P" n" P$ c/ ]var count;
2 c4 a/ @3 L. m5 `9 jvar fadeOut;! F3 T6 C* D5 J8 B8 d
var continuous;
K% O9 b3 n0 ?var newColour;. E5 U5 a; x7 v& x1 [' v
var tID;. F% I5 W) _3 {; i( ~
var redInterval;
2 T2 D+ O/ A1 @6 A$ m+ Fvar greenInterval;% t o; `5 V, Y, h2 I
var blueInterval;' `! i" d6 T! @* E4 T
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)* {; P7 d2 p6 @* G( ]0 O9 E; ~
{
, G5 j) \9 I+ c* S4 O3 j8 [1 w, S hoverColour = mouseOverColour;% f5 E0 ]0 d7 D& G' Q/ s6 w
numLinks = numberOfLinks;
/ A1 d2 G, J# R! F$ T3 d1 b rate = 1;
. J5 q) a: Z: T$ f, s& B numFadeLevels = 30;( a+ V2 [8 ?, }" u/ g
function initArray(theArray, length, val), v! K Y/ Z& Y% T- |
{( z2 J4 T0 _5 ?9 a
for(i=0;i<length;i++)
( x& i' G8 C. ]3 Q9 I% O1 C; E {. }! u, J- @. z2 D o7 e3 e
theArray = val;; S8 E) ]" Q0 D- S- g: C5 I# D
}
4 h ^9 G& u ~( l" T: w; V: R }3 E& s- K1 Z6 G- C
bgR = '0000' + fadeOutColour.substring(1,3)
# B. h q7 \) ~" o* ^. x bgG = '0000' + fadeOutColour.substring(3,5)$ I, b( n2 d% h y
bgB = '0000' + fadeOutColour.substring(5,7)8 K4 X5 B5 @& K! c8 [+ O! C
currR = new Array(numLinks);
& R: f$ U9 F. h9 p" J9 F$ ] currG = new Array(numLinks);
7 t( ]! e% N9 q( x. s* k8 @, V/ f3 U, B1 A currB = new Array(numLinks);8 w6 j' ?7 S" R5 I
count = new Array(numLinks);9 ~! Z9 _7 j3 e& S) d
fadeOut = new Array(numLinks);: Q7 O; U* W. O6 t
continuous = new Array(numLinks);
7 K& N& A8 e* f: n( t$ J; l newColour = new Array(numLinks);
0 K4 W% U5 S9 y8 a- h& |" | tID = new Array(numLinks);
0 [2 a5 I8 I9 i. Q- f! Z. A- E redInterval = toDecimal(bgR) / numFadeLevels;
2 b, O4 d0 X8 n7 W& d1 L- V. M. r/ @* \ greenInterval = toDecimal(bgG) / numFadeLevels;& r4 r9 L3 `; V3 W1 u$ u! r
blueInterval = toDecimal(bgB) / numFadeLevels;
" C6 i+ |/ @6 g4 R# |/ i initArray(currR,numLinks,0);1 _2 t# r9 X7 u" l8 L7 E: `: J/ r
initArray(currG,numLinks,0);
- x% V T9 P |4 t+ J, F( e1 B& X initArray(currB,numLinks,0);* j0 K% b5 b- s" Y- p
initArray(count,numLinks,0);
) z2 E. n# V$ T6 U8 I8 p initArray(fadeOut,numLinks,true);! Y, d8 n/ n& M. z k
initArray(continuous,numLinks,true);
8 `7 o! |' X& V; `( E& m( }}
6 ]1 `7 F( Z( h7 q5 j D- T1 ^/ yfunction startFade(id) d% e. W- `0 Y. c' x. a
{/ y7 X# m3 g" T4 S) Q; M
if(fadeOut[id] == true)
' ?7 Z8 T* D6 X$ u0 {+ g% D { /*move colour towards background colour (increment)*/6 R6 i3 s, C8 ?+ I7 ^" q' v
currR[id] += redInterval;$ n% T# Y$ F4 j' a8 f
currG[id] += greenInterval;
4 V$ d6 b. p# ^; K# R3 C6 e4 g currB[id] += blueInterval;3 l* r1 C- O* u t0 }4 ~
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 i# e3 ^0 r1 U( X& E
if(++count[id] == numFadeLevels)
7 h/ V% J6 t( q7 n {- M" t) ~% @! J- N, \
fadeOut[id] = false;
3 S7 x- R1 ?& L g }
0 [* r" d7 {1 \- t5 @ }
- O. j# I0 B% a8 V9 i# K else& h/ a% Y$ t$ y( Y( J' w
{
6 ?' L) \, @8 ]' K, O currR[id] -= redInterval;
8 F# e6 c$ t0 v5 H4 @: P2 u7 P& i( G
, c! u8 F( w i! H/ q8 B$ ? currG[id] -= greenInterval;
" _1 G3 N: q" u5 W
/ {8 l% y4 D; [4 @7 l6 @8 j. x currB[id] -= blueInterval;
/ A( V9 n& m M: k7 p( o8 e3 U' M6 q
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) N7 n$ x9 |4 ?3 A3 [0 U! s
: p8 S3 }4 K: b7 Q7 ]# K
if(--count[id] == 0)
/ t* ~' M6 c% j. r9 h6 c9 e$ A) @* {% o5 Q
{3 ?; A( T1 s- n2 M: w! O
; S: n6 l/ f! f0 J# \
fadeOut[id] = true;7 V; S& U# O8 n- t; }
$ l N$ s5 a D& z; X* n8 @. q }! ?6 s; x, O: t0 N0 _* X
6 |9 i+ ^/ K) ^# `. O* q9 D }( b7 h( `% c1 ^6 U
4 B i1 r s' u8 h" a# h2 l
if(continuous[id] == true)
3 w3 ]4 x: n( h4 z$ ~ `" s, g" w' \; L) u! ~+ Y
{+ p+ x& F6 H% U0 @, l+ T
! z: `7 M F% ~. r
document.getElementById(id).style.color = newColour[id];
4 g3 \1 f% B5 B2 y, v. }- l1 }* s
}6 v, Z f \% M+ |
# {3 ?0 ]) t. H Y+ i$ J4 ]1 E
else- K- D. P8 E7 r" I/ x6 y0 z
1 M& U; x/ h7 J: l( s0 m& ?* h {
9 }, [7 ^8 l. @% j7 A5 u* o
5 j1 f( K% f6 W3 n document.getElementById(id).style.color = hoverColour;- W+ V8 ?! N- [7 K2 O
. y7 {! m( I4 w) U- _( l
}# e0 z7 L$ S5 e- x
- n1 i# L7 \* U5 y5 S9 A clearTimeout(tID[id]);
+ |+ G1 v7 M; S& X+ \4 c" R9 c3 a& `0 S% t5 P- r$ a* |, q7 N
tID[id]=setTimeout('startFade(' + id + ')', rate);
K% K' s( a6 q. | w. y$ d
! c+ p! c U6 @, f$ I2 `}: [3 s/ d# F0 _2 A+ ~7 M$ s T" ^
' d, N6 [7 m+ W, x# U3 Afunction continueFade(id)' V2 r' F# V3 B c
/ [/ O1 n6 o4 m% h! h* M{! T x0 Z0 Z) S6 F( w- q6 B
- ^) C/ f8 z! n continuous[id] = true;& I! `! x% w5 A' O+ `( w
2 Y' q+ R- v! g( u6 p( U" M
}6 _% g/ r9 R& E2 r, `
7 x4 W7 |: N: U0 ^% K$ l0 U% o
function stopFade(id)% a) j9 b" X0 z9 ]- }* }7 Z6 n+ C
3 h, P+ _6 [9 u{" U2 \ k) D. J9 T! g/ x
c% C/ ^* I: p1 {& [+ `8 V continuous[id] = false;% M$ q' T+ ^6 q4 _* F
: S' y4 T4 F% G' s/ ^. A3 r, U}* h; o; k( [# H; r! g
0 ~: d; g9 f. y8 Z/ b+ B( dfunction StartTimers()
- H; S9 Z* a7 E" A: W$ r: n
7 A3 `. ?# t3 Y" R{ //set up an initial set of timers to start the shimmering effect( S% B' ]0 E( q% K4 d
+ @; \& J4 \2 y/ M
for(id=0; id<numLinks; id++)
! w8 b! a* n! W) F3 v( S( j. x% n
( a! G6 j2 c! Z$ v {! O7 _& j$ O. K) F3 `) p# b
; J& T! ]0 T3 u( ` t=setTimeout('startFade(' + id + ')', id*100);
8 T8 ?; e+ Z9 B
. r, d% m3 d& x }
# p% d6 u! O3 I, c( m% p, [0 [& A( t% n- b+ Y) T0 S+ y& Q
}
. \% o5 G5 S8 Y" r9 y" e( v6 b7 j! m( e1 E2 D' e' U
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 z3 M, W1 L$ Z& K% N- G$ P( W [
9 C. V: F/ E/ B& h$ e
initLinks('#FF0000', 6, '#FFCC77');
. f) V7 V) r* O6 j' P4 U( D9 \0 W( Z, D" a
//-->. V6 I1 N0 i, g! X+ ?* ]
. _9 u& \* g1 _- M& J
</script>6 B* R1 ~" c$ E0 B0 x
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元. J$ ?: }3 q, b L* `" A
</a>
; c+ U l C0 K<br>% Q+ y' x ^# G( U7 T( h2 R
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
7 s6 a: l# H: z6 W+ b. l<br>
. V+ @$ I+ L) B! ]8 Z<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- U! X# M4 J) M: g" I" H<br>
/ V7 u0 m1 G/ h- q<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" P @( x+ ]8 N& u<br>0 ]7 q/ G7 E U3 @( }, H
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
8 w+ b! K3 q+ d' I7 E$ _# j<br>% z3 \) ]$ [# e7 A. v0 ~) T. G+ ~
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>5 M# d" v. A$ B$ R
<script language="javascript" type="text/javascript">7 \' K: O. z. E( c# d" \2 x+ i) P" v/ d
<!--
; U9 N+ w: X2 }6 B! |, E, ?# C, SsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. O5 Q8 m9 q, m* e//-->
" G/ e$ H; o, G7 b) w</script> |
|