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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">! C# I9 Z$ a4 `4 o
<!--" W6 V% k4 s9 h- L& S
// convert a single digit (0 - 16) into hex9 {1 \6 n1 l% m( H
function enHex(aDigit)
& Y4 y% v; t/ S9 Z0 I$ Y$ `: o{
* n: s9 |9 r: A z9 i$ w7 N return("0123456789ABCDEF".substring(aDigit, aDigit+1))2 D, F$ H! i2 L( W
}* v6 |) A& ~5 L' H! d6 a; C% A
// convert a hex digit into decimal( _% n1 w. P6 b
function deHex(aDigit)2 b1 y1 k% k; h2 F
{2 w$ D) M: e. C' J& v
return("0123456789ABCDEF".indexOf(aDigit))" e; B3 U p8 n3 _/ M8 i: A3 \
}
# s$ Z D/ {& `7 [$ l, [. }6 C( j1 Q0 U& N( Z6 S) n/ J
// Convert a 24bit number to hex
3 m: R/ r% R/ F4 gfunction toHex(n)
! K0 b( P* r2 K# R& k: ^% @$ Y! Y{' S: I3 j8 ]& \3 q8 l
return (enHex((0xf00000 & n) >> 20) +
8 K7 M: ^& C( X+ b7 y* j) ] enHex((0x0f0000 & n) >> 16) +
1 Q4 G/ w e" n( q; g7 ^3 d enHex((0x00f000 & n) >> 12) +) m+ T/ C* P, i$ I {
enHex((0x000f00 & n) >> 8) +
$ S1 V' M/ A/ f7 |, O enHex((0x0000f0 & n) >> 4) +
. S( Q M8 a& G$ `; l enHex((0x00000f & n) >> 0))
1 k) a8 g$ C5 d}
% \0 s/ \/ X/ J2 v0 a/ A1 W( @// Convert a six character hex to decimal
8 z" l' v3 L) x( w6 Pfunction toDecimal(hexNum)
7 ~7 @3 P3 }1 C. I$ M{
# v6 t+ J% N7 z; [: V7 l var tmp = ""+hexNum.toUpperCase()8 I0 o: j/ U5 R" b0 e2 {
while (tmp.length < 6) tmp = "0"+tmp
# E9 o/ Q+ @4 a+ m% }# O9 h return ((deHex(tmp.substring(0,1)) << 20) +
, Q5 }9 I9 ]/ [' \7 O: g' e. v (deHex(tmp.substring(1,2)) << 16) + % `2 w3 J K* |) v' u2 t" H% `7 n
(deHex(tmp.substring(2,3)) << 12) +7 b2 h! b; o' d2 Z( E& ]' S; ~$ o3 Q
(deHex(tmp.substring(3,4)) << 8) +
% }4 L) a) O s w. m2 x/ X (deHex(tmp.substring(4,5)) << 4) +
% |3 J( i# T7 O7 x8 a8 `- w% E. R (deHex(tmp.substring(5,6))))
5 W0 v" _2 w2 ^' S& \' K}+ h$ e5 a, D# A, g. j! f# K) y) i
///////////////////Shimmering Links/////////////////////; H8 `0 ^: C7 l+ a9 ~& [
//global variables; v' W+ W- T; v m5 n- S5 R
var hoverColour
' i: A5 L4 |0 _3 _var numLinks;) S) |& H7 t' Z1 U }6 `
var rate;+ o; h9 D- }4 ^8 m/ c; I
var numFadeLevels;6 ^/ V @, j% e9 W1 U0 V) `
var bgR;5 I+ C1 L8 A9 T0 D
var bgG;
6 r0 H0 g1 Q. P! V# Kvar bgB;0 d( o: Q1 \/ I0 T. j7 x/ H
var currR;
5 O" A8 t7 M* i. f8 I% T. Lvar currG;7 N& Y/ E. S# A, E; n. m) o
var currB;
+ w6 W& {0 G( wvar count;
$ m( o7 J4 p& k9 uvar fadeOut;5 y( i6 o9 s( q( L: k* S* j0 W
var continuous;
. N: v9 `8 i% F, Yvar newColour;
& d# [# ^2 j! I* p! n. k6 Mvar tID;
) {% ?4 c( }: `5 n( [2 _4 z0 m' |var redInterval;/ Z$ X, e2 B4 S+ n8 u) v9 Y
var greenInterval;& O7 [( |$ q; R; C" |$ R
var blueInterval;
( H+ {. f& d) v: c0 f/ Pfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)( y7 [9 S6 Z( P. F& o( C! z m6 b( B
{; e% _: k. s9 i
hoverColour = mouseOverColour;
, M" c- U; F% Q' k8 q& d" T2 P5 d numLinks = numberOfLinks;
0 g; I) y) s; \; x) j1 C" J rate = 1;
# j8 p H3 t4 y& x4 i" ]; E numFadeLevels = 30;
6 g+ c% @" p U' i9 g' u$ @& _ function initArray(theArray, length, val)
0 p. F4 e7 P b, L! e {/ \' C5 m/ z* _8 N/ x: ]- {7 {
for(i=0;i<length;i++)" x. }0 Z/ _- K! }# r7 _5 L
{
2 ~) ^# Z. b: R8 k# U2 o- x: Z. E/ ?; _ theArray = val;6 u. f' Y7 W6 F! V6 J" q8 |- t
}8 p) k6 P+ G4 q. y# T/ E
}
9 _$ H% }, |9 l" K, c I* ]& ] bgR = '0000' + fadeOutColour.substring(1,3)
. u( }1 d0 y9 g& ^% C- Z$ ~3 C* ^ bgG = '0000' + fadeOutColour.substring(3,5)
! o3 E+ ]. Q, h7 D3 Q i, e- b3 G bgB = '0000' + fadeOutColour.substring(5,7)- f4 ], D8 {. m z; K7 r; P+ o
currR = new Array(numLinks);
5 w. R5 [( L; W: c9 k5 k8 z currG = new Array(numLinks);
& \! B( E- J3 I& G* m! u3 P currB = new Array(numLinks);, p4 [' b2 w& s* [9 z) p9 `
count = new Array(numLinks);( o* Q: S: A; m; |. Q) I- T/ P
fadeOut = new Array(numLinks);) j! m2 N. d1 A2 |) H5 q6 I7 [: W
continuous = new Array(numLinks);
! N- m) \9 t+ a! {3 d) c newColour = new Array(numLinks);# c4 w* |9 j" ^: e9 R" j
tID = new Array(numLinks);
6 ?# N; c5 J+ j p4 ?7 _4 | redInterval = toDecimal(bgR) / numFadeLevels;
$ ?/ P" R7 j1 [2 i' } greenInterval = toDecimal(bgG) / numFadeLevels;
2 ?! }" G8 w. |' F$ h' M: \ blueInterval = toDecimal(bgB) / numFadeLevels;
' E$ W, V; c. L' _ initArray(currR,numLinks,0);
d9 V4 b: s r5 L+ b) h9 f5 k initArray(currG,numLinks,0);
( i9 E: \' U0 ~5 f3 E initArray(currB,numLinks,0);
/ E. s2 K* \& ~5 x initArray(count,numLinks,0);4 j2 j W9 A. M) p
initArray(fadeOut,numLinks,true); J- e- z% e( q# o, R! U8 T
initArray(continuous,numLinks,true);
3 I6 Q1 [( @( O" Z} 2 A9 [& U* C2 C* l" w3 @
function startFade(id)
+ o! G1 I4 y6 ~. n5 z{. g/ O* O F( R2 }* V
if(fadeOut[id] == true)
+ c) ? O% H. K% b" o/ A { /*move colour towards background colour (increment)*/
! N' m" r: \+ K) [2 V# H currR[id] += redInterval;
( ~; W( v! ]& Y3 Z0 y+ L* u" r9 w/ k currG[id] += greenInterval;# d9 v e- _7 Q1 G' z% N
currB[id] += blueInterval;( a& D, C( A3 v4 \! l- b) g
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' y, A i+ Q/ x
if(++count[id] == numFadeLevels)& R+ B( r1 u4 L7 `
{! U; d9 G- e7 v" K- M+ _
fadeOut[id] = false;
% T1 S' B! I1 P8 c0 a$ z8 k }
/ p8 k# `6 F& |9 s" j9 S2 r }
; S: @& \" s( Y+ H! y else
. N v! Y! K3 p; `$ Z {0 m( H: w( p7 e% U4 N. R0 c
currR[id] -= redInterval;' T5 Z+ f; p" n1 |) M6 g( E
* p) z: S$ f4 ]4 P" n
currG[id] -= greenInterval;
) y4 k/ }6 w { L/ M6 @. i9 [. ^8 u9 I
currB[id] -= blueInterval;- a+ H g" Q4 ]
) Y) |) U* t7 _, X
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 t: Y u' @" L4 O' M: L0 L' Z5 c$ R' a" v9 v
if(--count[id] == 0)
* K) E: C! l" `6 p3 t' h0 Z$ [: J! J2 R3 O
{
O& w% J3 e3 t9 v3 ~
0 c: m* C6 U0 U# M5 ~, k( {/ N fadeOut[id] = true;" S: b1 w$ \, q6 u. l# W8 S
0 R$ a9 v1 q8 f( e. h; t5 l( k/ T }
) j5 F) f0 L( ], N$ _! _$ i7 O
/ P& D0 a' X$ t( Y7 }' S; D }
# t0 P7 F$ r2 t0 W4 @6 r0 A4 D) M' B/ E5 s7 D, k+ u _
if(continuous[id] == true)
L8 s! @; s# C) b+ ^8 M8 @
% P- Y+ m" M% ^0 v8 t6 W5 L4 p {3 a% t) o3 l* O1 E
7 ^! X" P& S. z4 I
document.getElementById(id).style.color = newColour[id]; ( Y5 j/ K) M" R% _
+ m% p a% |) H ^/ W
}
' D" l+ J- D" l% N3 S. L+ w9 @& ?
& c0 h; g$ R1 C" T# z) p3 C, f% _ else
9 E7 Y8 m+ n2 c
5 ~' E& |* R* a) H4 m2 ~ {
; f4 e: |* u& F6 a, I1 K5 |( o! n# F( }$ S$ R* y/ P# N
document.getElementById(id).style.color = hoverColour;
) ?- C9 \) x) \& f4 V
/ [& o+ R( s* F" Y }. S6 Q Z! h- X5 g* e: z, \
8 {* {5 i. i# {) b5 G
clearTimeout(tID[id]);( ~' g& k( t n8 M4 p5 v
7 u" o# I0 Z8 C3 a0 v3 V" c tID[id]=setTimeout('startFade(' + id + ')', rate);( }- `+ F* K! m
6 a: d2 z1 W9 u$ Y}4 V& S1 e9 a) o, X# _+ F+ ~
7 Q: H U, s, _function continueFade(id)
: _. s) R4 \6 {. c& P; f, ]1 b' Z
4 K' a. k9 ]! K" ^{2 d$ j- @% z* o! v3 f |
1 R5 A/ b9 ^) s* n4 O1 ~% a
continuous[id] = true;6 m; D6 m2 W; }9 R& |6 \5 l, j
" i; M6 M& O8 Y$ T: y4 v}
$ |! I% ]& Q7 p7 d$ P) ]0 B- y$ n& ^) b+ l
function stopFade(id)7 Q3 w _1 Z0 B6 f) z8 t0 V a2 ]* m; x
% i( \! F z/ Q5 w8 [ m
{3 }( r1 h, {6 \! `6 q8 a
' ^& c9 E' z+ j2 ~ continuous[id] = false;
/ f( f- t8 y+ g9 m9 L/ f
. \% u9 h7 F: |: o3 A}
0 M0 T& w w: c% t4 X6 k6 Y, l/ X( h. d! L# y7 }1 [ T% t
function StartTimers()
. s, @& b$ z$ D3 d, l9 }: E) N' j$ P
{ //set up an initial set of timers to start the shimmering effect
) P! ^% I Y8 E+ A9 K& }. _9 I3 {7 C& e# j' G3 C
for(id=0; id<numLinks; id++)9 J: V% i" B% U: S) J! G* w
: Q$ D# w% y4 x, r- C {( p) N3 U- ^# S5 q0 p. ~0 d
* v; }/ E% L4 H7 I3 z$ s
t=setTimeout('startFade(' + id + ')', id*100);
6 ` x( A4 `1 h' J! ~: Q$ v. |2 m/ e6 U. t
}
. H$ q! a( h$ H2 E, {8 b0 C- }9 y) ~2 O+ A7 W
}6 f* T7 R/ W" ~+ M
' q4 ]2 d6 I0 Z* O+ ]/ z& Z( |//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 ~( P4 Z9 a0 E. \3 X
% M0 u7 g$ f- e! r! V" I8 jinitLinks('#FF0000', 6, '#FFCC77');8 ]* ?" [- B# v
8 X$ e, y. y( q
//--> K7 Y, t+ d; g( z
[0 ~. R/ ]$ ], d* H5 _- W7 P1 y
</script>
7 [7 Q* J K4 @" P. w$ F<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元8 P1 f8 k. Q) N/ d$ W1 E* l
</a>( |6 A, z+ }! B# _& R
<br>/ t/ K t1 T* a" _
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a># d3 V% q5 \4 H( s" f' }" o
<br>: s3 m; [$ Q' j2 E- @9 o
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
. i1 b* L$ v/ h<br>
4 p, R3 J- S/ S% D3 I1 ^" x<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>+ \- `/ Z% w/ z8 L+ T: @( h
<br>
7 B7 L5 L, n; N7 T% b<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>: w" e# t$ r$ R) E
<br>* ]* c+ t2 a" C; E) p+ h
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>% T9 T" ]* R0 Z8 A
<script language="javascript" type="text/javascript">
. h& |. Q5 g6 B<!-- {8 h) W. d# t0 Q; |9 N- N' o
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering. q" [) k& p$ ?+ ?( O2 r/ q
//-->
# v1 k- g/ [0 r0 \$ Z</script> |
|