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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">. j a9 ^% t# ?* s9 p* q8 _
<!--
) h9 }6 N' G- [; @- w" {$ u* ~// convert a single digit (0 - 16) into hex; A! d, C* W/ ^: B' R3 ]
function enHex(aDigit)
' l$ t0 p7 g% I! y{. f8 m9 O& n1 `& B' o. f D- h' m; Q
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
: y. j# q4 R$ x5 _( ] c}
6 ?9 T( `, O4 D/ U// convert a hex digit into decimal
/ \( I6 W* O8 U2 V5 rfunction deHex(aDigit)
0 t% n/ [# _9 t A( |$ @{+ b4 n$ O W* `5 x
return("0123456789ABCDEF".indexOf(aDigit))
0 x' C( ^$ y* G% E$ v* l, d}1 @8 c' V4 f2 J
; {' L0 ]# S Q0 j, n; Q
// Convert a 24bit number to hex1 l9 i w& s& E! u+ [ Q
function toHex(n), \2 x2 b: N4 d; ~# _ l
{
1 X& x1 ?) X: j4 T return (enHex((0xf00000 & n) >> 20) +; a% x2 G( N: Z1 L+ l
enHex((0x0f0000 & n) >> 16) +( D' D- b# w/ n" U' X( g4 W: g
enHex((0x00f000 & n) >> 12) +. n7 z! k9 P& `$ w% S
enHex((0x000f00 & n) >> 8) +" W! M* V! b! K: F M+ A
enHex((0x0000f0 & n) >> 4) +
/ h: ?, w- h' W2 F) f enHex((0x00000f & n) >> 0)). a6 P' k$ I: m: Y$ B2 W
}, q8 d% v& m4 T* U' C7 X0 `* d
// Convert a six character hex to decimal* E. d! A6 ?; y
function toDecimal(hexNum)
* W" T5 O+ F r0 V/ S# ^* r{
, e& e3 H8 f( b) u# ?( K7 j3 @ var tmp = ""+hexNum.toUpperCase()
; I$ @7 P! L9 D while (tmp.length < 6) tmp = "0"+tmp% _' H% y( q- c: P- J
return ((deHex(tmp.substring(0,1)) << 20) +& S" i8 O- t% ^3 \- X" I: ~
(deHex(tmp.substring(1,2)) << 16) +
6 @, `1 D/ M' W2 G6 I/ j (deHex(tmp.substring(2,3)) << 12) +% V9 P6 Q5 y- M8 G$ A2 V
(deHex(tmp.substring(3,4)) << 8) +& O1 ` k* B4 ?1 _% @) _* |+ L
(deHex(tmp.substring(4,5)) << 4) +
* i: l( f- @/ C$ y' m (deHex(tmp.substring(5,6)))). g4 ]5 H/ y$ n9 K3 e6 F
}
k7 r! d$ H, o8 ~6 J- J& u) t% y0 S///////////////////Shimmering Links///////////////////// i7 U; p; D/ W$ u" a8 w$ [' b
//global variables
5 y: Y( r' f1 I' ~; F0 m" _6 u) Fvar hoverColour9 M( v$ D8 V/ ?2 Z
var numLinks;6 ?$ Y9 o! m; A: L! W
var rate;7 g8 Q R; s, U f9 b& j
var numFadeLevels;
2 I7 I. j: y, V C% V& kvar bgR;
6 ^: U7 q. J9 V) ^" Evar bgG;3 U3 D; f* H0 ]: J0 m) U# o! G+ Q
var bgB;* h0 e) \% [7 A- u1 ~
var currR;
6 E$ K" a3 l& p' rvar currG;5 D* k( \ ^+ Y* W' b A+ l
var currB;
4 Z, Q0 x6 i. O3 K8 }! A; nvar count;# f2 W' C" f9 w5 x7 W( i
var fadeOut;
; e* W. e3 w( w! k6 { k4 U6 x" X$ M5 Dvar continuous;$ K+ s7 y" ] Y8 f9 w I
var newColour;
4 m$ h: J4 n) q1 E! P Bvar tID;
& g Y' [% k3 B% Mvar redInterval;9 G+ Y. s( Y/ S# L5 L0 H/ k
var greenInterval;
" J+ [9 @& n( b, | F6 P' c7 W" Bvar blueInterval;
% k4 R: y! f) ~5 c0 Zfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
6 h' |( q# b. _5 J0 R{6 y2 A; ~& o' m+ l
hoverColour = mouseOverColour;2 O+ |" O7 u& L! S. l/ @% C! G
numLinks = numberOfLinks;2 p: r( V$ `5 {! W/ {
rate = 1;7 o( L( Q- X! ^0 ]
numFadeLevels = 30;+ S5 b& m/ A/ X& u4 R& g
function initArray(theArray, length, val)
4 k' ^( _3 i. k. s7 o! v {- ^9 M F0 J1 X% s
for(i=0;i<length;i++): k1 p8 F, D/ G' b2 l2 w4 h' H
{
1 O- G) C7 ~7 Z: S) W! {1 e( z2 p theArray = val;
6 }, W& c `% Z: ?7 n |* S }
; w7 T) \6 W. V/ ~ }& S. L) j5 K' b- D$ R. q
bgR = '0000' + fadeOutColour.substring(1,3)( I5 n6 U" I# p
bgG = '0000' + fadeOutColour.substring(3,5)
' c2 a5 m6 [. ^+ d' I2 Q bgB = '0000' + fadeOutColour.substring(5,7)8 V8 s; p; i$ J" ]
currR = new Array(numLinks);
$ Y; }, c2 r! G ?: r currG = new Array(numLinks);
5 B2 s4 A: T- W& c" P currB = new Array(numLinks);
# H: {, x* w# J0 t6 k count = new Array(numLinks);
8 d; H9 A( \+ V7 k9 S8 V3 ~ fadeOut = new Array(numLinks);/ K4 I8 u' s ^
continuous = new Array(numLinks);
& U8 p3 t' \" B newColour = new Array(numLinks);
0 u& `+ b* b" N( ^ tID = new Array(numLinks);4 P9 N; g, W1 u% K' P) d6 t$ }4 B7 G( b
redInterval = toDecimal(bgR) / numFadeLevels;
y2 }: ] H( j8 ] greenInterval = toDecimal(bgG) / numFadeLevels;
" ]5 f' n$ n3 G- S& v blueInterval = toDecimal(bgB) / numFadeLevels;. S7 c3 ~7 u1 U% a G
initArray(currR,numLinks,0);
7 l2 G* ~5 W0 D# Q" r- d3 O8 d2 b initArray(currG,numLinks,0);/ V1 x/ i) q2 n
initArray(currB,numLinks,0);
- W6 Z! h( ]3 U/ z" ?- A8 ` initArray(count,numLinks,0);
) x: V' B. d7 C Q) R initArray(fadeOut,numLinks,true);
" \0 i# P1 Z4 }+ h1 z% e7 x3 r; Y initArray(continuous,numLinks,true);
4 h; a- p) ]" ?}
% S9 d" R: ]% {% t; M8 Z8 Kfunction startFade(id)" l" b$ y, b) ^3 E( K& ?$ ?1 {
{
, t& q% N$ q) d# N% P+ U# }, n" p if(fadeOut[id] == true)+ \4 Z( P8 v! W y% r* p. H* r
{ /*move colour towards background colour (increment)*/7 U8 p7 P% O# B% P* X& @ i. j1 |
currR[id] += redInterval;: n& b- a* m. G2 q6 |
currG[id] += greenInterval;
1 C# @$ S4 W. E* f currB[id] += blueInterval;
7 Q% q! s. C2 ^- h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% f5 v, H9 l/ L if(++count[id] == numFadeLevels)
. `0 ~, G9 W V* P {
' v8 l$ U" {8 C! G fadeOut[id] = false;- Q5 A' q! x: u6 P& m) b
}
3 g9 ?6 i |1 l! t }
, d$ i. E. ~; q: }5 K else
9 A2 c: D/ h; E a {
7 d1 l) ]" s& w+ L% r4 `. P# Z' i currR[id] -= redInterval;, ]9 T" @& ?( L4 D# z
1 n9 w& o$ g# |2 p' y1 y currG[id] -= greenInterval;- F5 r( [8 g! g
$ L% y+ A) s" D% V% i) U currB[id] -= blueInterval;$ B) ]! o9 ^6 |
5 q) s$ [ w7 \9 I9 S newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, ]7 c$ {0 V* r4 v
% u z$ Q# A V& S* \
if(--count[id] == 0)5 q4 F5 y9 x5 U& V
; Q1 K% D! F+ q! M# Z" G
{6 i5 s4 l) J+ P c& E
/ ~- m% I2 t2 n) J fadeOut[id] = true;/ B h, M8 ^+ V" C8 Z% M
- H8 y. ?/ T( H: m* W }# y7 r1 J; S0 s P' s
/ ]0 Q6 a! t2 l; F! c- _0 u( \
}+ h2 c" \1 N/ k! Y F6 U
* b8 V0 \% g: C' W( W- e
if(continuous[id] == true)# m+ D0 f# [2 Q
' o2 r% n% r4 I+ k3 u; y
{& l: e- d9 E$ g$ k
% b" r6 [) L- w9 P$ Y, l" G3 {5 i
document.getElementById(id).style.color = newColour[id]; ' ~( q' B" L0 y* J$ D6 F8 f
8 A- J- J' v$ v, o! p b
}
# {' o: z. a' a! j5 {. x( P+ F8 O5 Z4 q8 I( f
else
+ G/ T& i8 Q. j
" j p5 {* _7 d9 z {
% [( X) ?! l5 d$ E0 F3 [) h0 P6 K! n
document.getElementById(id).style.color = hoverColour;
3 a4 m8 X3 I, r1 l# R/ T. Z9 f6 x% E& h
}
9 G9 Y! W' ]( g+ u+ P
2 N% V9 V) D" b+ T, |3 M+ I clearTimeout(tID[id]);
& P/ @2 I% U" X# \& z9 w& d+ s& I0 Y
j2 ^% p9 O$ J: X) Y: g tID[id]=setTimeout('startFade(' + id + ')', rate);
6 e- r. q0 C# z6 U/ n7 i, {0 |, b" |4 |/ i3 ?+ }. O: B; W P
}) S8 n/ g$ H: M5 J' K
# E$ y; l. g5 D3 l$ b9 | I
function continueFade(id)
% L/ l& b2 u: G( B: ^3 Z, f6 @( P' A6 ]9 q- Y3 K: `& t0 I: C
{, M% u/ K& [/ Z, i. q
3 |$ v$ d8 X# \9 n: l& f# c
continuous[id] = true;( s. B, v+ X% B
) p5 r; K1 v! Q6 T+ H}
N* V$ S8 s' N3 I; W# c+ T
' B2 _( _9 M9 z5 L: y# Bfunction stopFade(id)+ ^7 X7 v5 o' ^
9 a$ J( O4 d/ J u3 L{
0 x L+ O& X& ^1 u L
$ _/ }9 c( d5 P( I7 |0 T continuous[id] = false;
" L0 q7 v$ Y* g( w2 N+ \! T, V6 a- h& H/ ]) B6 h: V6 u
}8 ~1 q3 H' A' Z* h
) T7 T! ]" [7 P5 N( f1 b/ F( s5 vfunction StartTimers()
6 B1 f7 g* c3 c$ V. ^2 c6 N j. E. P# c& L* I6 U) f
{ //set up an initial set of timers to start the shimmering effect
" m, z- H- {/ k: ?* @2 W
O( u5 v/ t k: @& U6 o/ w3 Y K for(id=0; id<numLinks; id++)
6 S6 W) x) u/ }$ {( m
! }+ R( n' x. H0 v- s7 U" s {
' U1 K0 G) b! u& \; ]" H) r% m+ p" O: N4 k! i4 N
t=setTimeout('startFade(' + id + ')', id*100);6 V$ T6 F% I9 V4 ^) r
$ B: l/ o I+ F1 ?* [! n: S9 |
}) P9 H' c4 |' f5 U8 F' [! F
4 ^, ?& l) Z) p, ]}8 C+ L1 ?) J1 ~- R2 P+ _7 c
& S O' }7 m( y8 g% f//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 y& H5 V/ u8 A
& g" n) U" S& a. M, p( O1 ninitLinks('#FF0000', 6, '#FFCC77');& H4 l$ y) k: S! C m2 a& B
, }/ }- `8 T( s. i: H3 W//-->
: b$ U* w1 s4 K/ g. s+ g, t+ c. \. X" H0 @/ N
</script>
' L, ~* L$ ^, z% a. J7 f<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
7 m& r: [, P" B$ d( O h6 N0 _7 H</a>
* v5 U) B" \; T# z3 @5 l4 q<br>
3 X1 }9 T4 |- f2 A8 V. w<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>3 w, X7 k' O2 [0 A, {& S
<br>
8 u* w V+ i. i9 I9 O<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
2 m5 S( K4 G4 R/ w) U; k5 \<br>
$ ] x* @2 D# Q1 u9 B<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
# [9 a; g* J4 H<br>
' k7 }; L0 {; l8 w" S* Y<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>; z3 \! i1 ^* @( D4 y: c% y% T* x
<br>
& q' ]/ g4 t6 n( P<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
* U, U0 g# F7 d6 d+ ]<script language="javascript" type="text/javascript">4 p g' K4 r0 Q7 z. k! Z
<!--
* b9 Z2 B. ~ o% B, \2 n+ ^5 `* @( `setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
/ u0 Z% z7 M d+ i% A//-->
; k+ b* q4 {) D ~</script> |
|