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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">) S0 ?9 {" A3 H4 u6 _5 y3 H8 L
<!--7 e& G/ U# b! ^3 @) H
// convert a single digit (0 - 16) into hex; b, b- C- C4 Z2 }4 a
function enHex(aDigit)! e1 }# ?" e( U+ @
{% C3 S h; M9 C3 W9 k
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
# q; R' h$ S8 r0 { }}+ T% h2 _- N& a9 q2 U% f% z
// convert a hex digit into decimal- B1 c/ X& G! i* j$ p$ t
function deHex(aDigit)8 X" q9 G) P6 I. t/ k2 N( _; ^
{; b$ @1 e' l8 n. { c
return("0123456789ABCDEF".indexOf(aDigit))
$ }& a" ?" R0 ~5 U8 W' {9 I) |7 P}
' {1 w$ ~: i' S, d* [9 ?+ ?+ K0 l5 E
9 H' V I& z. F// Convert a 24bit number to hex
! J+ P( ^$ W9 x0 vfunction toHex(n). i% A; P, f6 J8 f" Z! R/ a
{. r% H6 r0 s7 `$ z" M% Z
return (enHex((0xf00000 & n) >> 20) +. y, g* V" O" D; J0 H s
enHex((0x0f0000 & n) >> 16) +/ P b, R" ?) z# Z# H5 i
enHex((0x00f000 & n) >> 12) +
- T9 G1 H' I' L7 I# y1 ] enHex((0x000f00 & n) >> 8) +) ~ v8 ^' Q5 P6 f0 Q0 u3 c
enHex((0x0000f0 & n) >> 4) +: h2 l& z! P: v6 r' l
enHex((0x00000f & n) >> 0)); Q5 S6 ^* g% }9 S! K
}+ p1 [ ~4 d8 F! R7 }8 G# [" Q; W
// Convert a six character hex to decimal
( o/ a6 \8 `, y' o: y; Rfunction toDecimal(hexNum)- |' R( |3 Y8 Q) ^" c
{4 r. c9 W' ]+ S5 j% M! E) A# u
var tmp = ""+hexNum.toUpperCase()
6 l* Q4 w4 F: P3 h# x) z2 G0 B4 K" n while (tmp.length < 6) tmp = "0"+tmp
+ K8 G9 }/ W" N9 B* ?! y return ((deHex(tmp.substring(0,1)) << 20) +
- c* \. c0 k/ B0 s7 C (deHex(tmp.substring(1,2)) << 16) + % {: N6 I1 H% f1 w: u, h8 x
(deHex(tmp.substring(2,3)) << 12) +
1 E3 b! j# b6 z$ A9 @ (deHex(tmp.substring(3,4)) << 8) +* V" }* P; g2 V. M) N( U) M4 j
(deHex(tmp.substring(4,5)) << 4) +6 y$ o! v0 ]! d/ t' z. H1 n
(deHex(tmp.substring(5,6))))
7 L: g% T/ _4 ~2 A* _, Z}' _8 j) g- d3 W9 y$ G! l; D9 ?2 E
///////////////////Shimmering Links/////////////////////
8 u1 b+ }. @6 C& s//global variables
5 e% o5 b5 k. K9 p( nvar hoverColour5 }, J, y1 g; e& [+ r: b
var numLinks;
1 a# B3 |$ L; b6 I) Avar rate;8 N4 u% R* W9 U- N1 M% e: o
var numFadeLevels;
& a; {. x# r# n" Jvar bgR;
6 Z! _. [& h$ J* M! A" hvar bgG;
0 r& K. z$ i/ q5 @$ Y/ c) cvar bgB;
) N- d1 ^# k7 j. ]var currR;$ A% E) a3 O* q* r' f E
var currG;
* E; K7 S7 U& {! f) v' r% dvar currB;
' c {7 M9 m) z5 `var count;9 z! i* n+ ?8 O, m* }8 i+ Z
var fadeOut;
8 [; _; ?/ i$ u- B- G+ N4 y/ ~var continuous;8 R6 s" z4 o3 w0 ~! ~! J% b
var newColour;
% k. \, i! b6 y; B: J8 G" {var tID;
2 ?$ _+ Y5 L* w4 R. j' \( _var redInterval;
$ D$ E5 X% {/ qvar greenInterval;0 q& u/ ?& x4 J3 C* ^% D( v5 B
var blueInterval;
- W* Y& e; G. K7 p" y: R/ g( Jfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)# `: ^7 g' N3 V
{
, p4 |+ d3 _8 ?% p hoverColour = mouseOverColour;
5 {2 y# e3 X+ P! d$ g numLinks = numberOfLinks;
+ y5 p# P+ ~! K rate = 1;
, S6 o7 y2 p3 ` numFadeLevels = 30;# {& D. w+ ?) S& r* T2 A7 c
function initArray(theArray, length, val)
" J$ P, U& F% ^6 t {, Z D- P" D' \' J& N' C
for(i=0;i<length;i++)
B% l7 L8 Y* M- h0 S5 p {! h+ F0 D& ~) n: V# u6 Z
theArray = val;
% l6 o; K# O% `4 F8 o! h6 k W1 o }
/ l* @4 d1 S/ ]# o% C }! X' A9 _% D8 w: a, ]# p ]
bgR = '0000' + fadeOutColour.substring(1,3)- ]! t9 ^3 I( |8 D* {# `
bgG = '0000' + fadeOutColour.substring(3,5)
( M( C0 a, \% m, s bgB = '0000' + fadeOutColour.substring(5,7)
' X$ J1 o( R s1 m currR = new Array(numLinks);1 L% ]5 _- d0 P: s6 x
currG = new Array(numLinks);
' g- L9 T7 q* ~ k) \2 _ currB = new Array(numLinks);
5 h4 ]0 T" ]1 I1 j% Z count = new Array(numLinks);
$ u' Q, [% o1 v/ j* j! B2 O fadeOut = new Array(numLinks);6 _+ u0 C9 f7 f% w: `" X- `
continuous = new Array(numLinks);$ o# ^% M8 a5 V. ?2 ^6 e6 Q6 P' F
newColour = new Array(numLinks);7 E# ?3 m! t; W6 `
tID = new Array(numLinks);+ R% y/ P/ X% i! K: @
redInterval = toDecimal(bgR) / numFadeLevels;
& c: X G; b. t5 l# f& z& ~: c greenInterval = toDecimal(bgG) / numFadeLevels;
5 T1 Y$ _ v0 q: |! Q% ^ blueInterval = toDecimal(bgB) / numFadeLevels;
/ F; O# H7 v. }0 l initArray(currR,numLinks,0);
% X' h/ q% P7 S6 y5 b9 u initArray(currG,numLinks,0);
" f+ T6 u* }% n% D% Q- t0 R/ b initArray(currB,numLinks,0);. B: C2 A% ]5 }8 P1 e
initArray(count,numLinks,0);
2 ]: c9 ] S% x initArray(fadeOut,numLinks,true);
, I$ u$ i% W) Q/ m) @, L: F initArray(continuous,numLinks,true);+ G6 F1 _$ z3 Y. X4 K9 i
}
& P( W" }! m) f; ]function startFade(id)
+ J6 g: t& {5 m{
* \/ C* [* @8 `. L0 G) r if(fadeOut[id] == true)9 m+ `' i) C% M# |8 n
{ /*move colour towards background colour (increment)*/4 i7 [- a; h$ ^
currR[id] += redInterval;" U( R6 M# H; [* n$ m; y5 L
currG[id] += greenInterval;
3 ]+ C/ H* h4 P( |( w: m9 n currB[id] += blueInterval;5 R% ~7 k6 m) X" v- o2 M
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 R) W% |( x- R* v4 V
if(++count[id] == numFadeLevels)
+ K) C2 t; P$ M2 J {% Q8 [ i8 [1 l
fadeOut[id] = false; H: s/ O+ G' ~9 ~. m! I' H* D
}
0 E* M$ z4 ~% ]0 e D. A }6 T l* n5 O- g7 X
else
& G v0 u6 K1 h% S% X v, A {
0 q% x5 g0 R; Z4 ?' u+ u currR[id] -= redInterval;! z* \, X- G1 Z% R# A
# K9 d0 y5 @0 s3 |* r0 y
currG[id] -= greenInterval;6 a/ Z3 d7 {1 I+ U1 e
) ~1 j& {/ L1 P) A
currB[id] -= blueInterval;
% f0 u/ t4 n3 g% s0 J
; N t& C& r8 t3 ?+ E; D& x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, L" T" ?2 z$ E9 Y. T4 V1 {
& f0 b9 C6 m1 \' G* ]+ A5 S9 z6 f if(--count[id] == 0)
: I B& t5 r5 R) J: N4 t: e; K
& f9 C4 m9 s# M# m% u, O; g. D {+ h- y/ _0 I' a$ \$ ~
) J7 H# s+ Q/ `4 [1 t5 ?% p fadeOut[id] = true;
0 c5 W# l. a/ n; @0 O! D' V5 a! r, Z# u E1 u9 ]! i# K
}
8 V- G s3 r9 r M. R6 F! W+ |- i# z" N7 V- R
}( n6 Q4 d0 }( z% V7 W( _
1 u' c5 t$ [( Y, Z# F
if(continuous[id] == true)1 x9 y% J1 K4 C% ]
; z! K9 V4 \) h0 H5 Q {
/ ]8 d# I+ y7 s5 R! Y
^8 ]7 T/ j" n, @ document.getElementById(id).style.color = newColour[id]; ' a) G7 c( z/ g' ]0 Q) N. K2 B8 [
1 m6 M7 F4 [# w, ~/ z
}) j: _4 b- ~& w
3 t; e, K% @8 X0 u) C) h2 J
else
$ V, K) D! v6 }$ u2 l" n2 o9 i- t! O9 g- q2 m( u, D! ]0 D e
{
6 z, s# G# \* n8 F4 u; V5 ]* t! @1 F
& z( w2 B6 |: m: z document.getElementById(id).style.color = hoverColour;* L9 Y1 X$ Q7 Q& w
' G- T% X1 O) ~$ p0 d }
7 ~; ]6 L8 C# m( N# I4 f7 I$ g5 R, z/ a; I
clearTimeout(tID[id]);! E; D' r4 k, x3 U& x# g4 S' E
3 G( }! |1 Y4 c8 x- b; l! X
tID[id]=setTimeout('startFade(' + id + ')', rate);. _" \% B2 ]7 r6 J
: r6 x9 R8 e; x# D9 Z) i5 E
}( s" u" G; ^' _
; N/ q$ P; ~1 N0 j) U& c: {function continueFade(id)
/ a1 E' J! y, s+ e4 N
8 H8 Q- F P* p6 s: g{. T( t1 u/ q% J/ m9 u( B1 ~( z( o
4 b3 }, q0 X" {$ ~' {, q$ Y( b i
continuous[id] = true;
3 X8 D: |8 t2 i d& y" R4 Z& O+ Q7 x% S# d6 K3 P- f, B2 l3 D5 _
}. y. m5 t3 e9 u) M2 b
6 a: R( \' J. p& j7 t+ S" A) v8 x
function stopFade(id)4 F* i& T# P0 G7 h' E$ |. A7 q! y" A
) f* E$ r3 G+ O/ R B3 ]1 o* \
{5 V% D: _2 U; z/ X
: b0 N$ ], Q% z& R5 a& I5 o7 z continuous[id] = false;
6 _0 ~, B$ ] D a, i
X4 n! f5 N& D9 b2 v}
$ E( ~9 e; g& k( y& e; Y! N! E6 L1 q+ Q$ a8 ?
function StartTimers()
? F v j6 E y2 ^, a7 U+ v7 S- H3 P2 }+ [
{ //set up an initial set of timers to start the shimmering effect& C( }6 G0 P @/ e# v
/ l- l% M5 W1 Q# H1 k% U$ ? for(id=0; id<numLinks; id++)
5 s/ Q8 D6 e5 `, h$ U/ Q E7 Z% Z# ?; y! ~! ]! C S% V
{
6 s& _7 d9 O8 t- m+ l& y1 V3 l: m$ V" O1 {7 |. m1 L
t=setTimeout('startFade(' + id + ')', id*100);
2 I6 _6 o% E9 I3 ?
: f5 B; W4 T: E! ]+ b }3 j# O) |1 g8 I
: L1 t8 y; V& \9 O+ d3 ^}' O! K: ~3 i5 B; i- J
l- @/ Y! f& C: Z5 n0 j! u0 I* a
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 [- j- Z/ \+ j- x# N! A/ V% S2 ]
0 ~) a9 w+ ]! I" q, {% w8 uinitLinks('#FF0000', 6, '#FFCC77');' [- m- b# O7 f. |7 N
3 n* F+ z3 |9 h0 o; W z
//-->
2 v* U3 ~8 X& C1 _! P- h. x) `2 Z, a$ I( O9 O0 ? D$ B
</script>& W' \2 E V- g p+ X
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元4 j% p) m( {+ S( A. s% x
</a>* G( m( U" x& a( a4 m/ d
<br>
_' O8 r8 k; I0 T9 \<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
q. D# _6 g* B5 |<br>; E) b( [' w! S$ G
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>. | a& }% E! \6 {1 q
<br> : _& L! t" g1 t
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># m) H. i' t5 v# w
<br>
& U: c" f2 a9 p, C) m/ |2 J<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
6 _, q0 H! d& ^. f: p- }5 z, D<br>
3 W9 o5 ^+ ~- R% C7 P# s<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>! q2 Y2 [$ A3 s% L' G
<script language="javascript" type="text/javascript">
, s" G& X/ M) k" r% M0 M% t. x8 d<!--4 P I& Z( ]3 H
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
6 Y% w- q) @5 v7 s//-->2 E6 y9 l+ g# K9 o# {* f
</script> |
|