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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
! m( K1 B. r& d$ D: I<!--
" j+ ?9 X3 W- X I. V// convert a single digit (0 - 16) into hex
6 k/ y9 `' O4 h: z' S7 Jfunction enHex(aDigit)$ G; O; U$ t4 B. H3 F8 d$ g
{
* c7 v6 E9 Q) J; _ return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 g$ I1 p" `/ l( t2 O
}
8 v/ R" n+ K/ N% c/ i' ?- c// convert a hex digit into decimal8 c* h- @9 q/ e
function deHex(aDigit)- u1 b2 ] r2 n6 u; Y3 O
{. a3 _, `" Z- }6 _8 \/ Z
return("0123456789ABCDEF".indexOf(aDigit))
& w/ G. ]. o' F9 i: W}
( n) \& ~) {! C7 }( r4 G
& j9 }5 w; J. w$ t' ^5 s( S- [// Convert a 24bit number to hex
J8 V' x6 q. M- @5 ?2 zfunction toHex(n)
( F+ Q9 H5 L3 _6 C{
( e- k1 a4 l8 K+ ~* w5 V) f; N return (enHex((0xf00000 & n) >> 20) +
! E- a4 d3 c* m% E# ^6 k enHex((0x0f0000 & n) >> 16) +" D8 u# p |2 {8 T8 ~
enHex((0x00f000 & n) >> 12) +
) o+ Y8 [- ^) n5 K/ R/ } enHex((0x000f00 & n) >> 8) +
! ]+ o, ?3 p& q4 w6 [& E enHex((0x0000f0 & n) >> 4) +* l2 s3 {; T& \' G7 R
enHex((0x00000f & n) >> 0))
& g2 M0 x- _2 G$ y8 k7 R( `/ `}
0 g3 G% b; {, v- y5 F5 o9 w8 F, C// Convert a six character hex to decimal+ t! z3 `9 ?7 v1 ]) [( ]
function toDecimal(hexNum)
2 ]! |" ]1 z- l& }{5 c: A4 P, ]# R. r/ a
var tmp = ""+hexNum.toUpperCase()' Z4 G2 }9 \# J' G
while (tmp.length < 6) tmp = "0"+tmp/ d( M9 |& {; k F
return ((deHex(tmp.substring(0,1)) << 20) +
& j4 N) h+ D' M, y2 Y, J (deHex(tmp.substring(1,2)) << 16) +
5 q- L% |9 X; P' B2 c (deHex(tmp.substring(2,3)) << 12) +1 I; ~, n0 x- ^* a9 M9 C" }, o
(deHex(tmp.substring(3,4)) << 8) +' Y, D6 r* r |5 F3 D5 n/ Q
(deHex(tmp.substring(4,5)) << 4) +
% g P4 O3 [. `8 D# o (deHex(tmp.substring(5,6))))
( p) j2 U e# F0 ^}
9 j: g6 C/ T/ W9 [///////////////////Shimmering Links/////////////////////, `' M" r7 ^- R, ^' [- G- `
//global variables
$ p/ G; f9 f0 tvar hoverColour u I1 H) x3 a g5 X. |$ m+ I
var numLinks;
/ W6 K/ h6 e$ k0 Yvar rate;2 v' A L4 V4 ^* z" {
var numFadeLevels;
( X0 w! n4 G" `! X) i# o9 lvar bgR;5 [1 Z7 z9 p/ |9 m
var bgG;4 Y/ H R5 t" x, [
var bgB;
! j& a0 @: x" R1 Lvar currR;- T P+ m( X9 L
var currG;2 q% G& ]8 x& n K" O
var currB;1 X* Y$ |! u# D6 g& Z- C
var count;% p7 n! E1 ^& s% R
var fadeOut;4 T( u) Q. w( \2 e
var continuous;
2 `3 `( M2 m; \var newColour;. @9 Z1 A J" V r' d
var tID;
9 Y2 \* h) z7 f1 m1 g2 _var redInterval;
$ t( F- r$ k, ~% }- evar greenInterval;. Z3 W8 v; f9 u
var blueInterval;; q4 H5 a# J- H. {8 v5 C
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour), y v' @8 R5 d i: V3 M( n
{/ t" {+ A j' |/ B& `& |8 C
hoverColour = mouseOverColour;
: ~) ?, v: A# S2 G& D6 T) i3 Y' k1 w numLinks = numberOfLinks;
' X; y7 z* B$ C/ A rate = 1;
4 M* ?7 {/ G" m' A- }- V numFadeLevels = 30;
- K8 ]7 p/ x# Y3 ~6 W$ N4 W$ F function initArray(theArray, length, val)
9 n- D! l7 ?0 `8 @. [ {
# Y) @. X1 E9 O& p for(i=0;i<length;i++)0 ]& G$ ?: x: }- x# m0 e" V
{
( I& n! I9 e3 \ _ theArray = val;# W0 w) P* K: _5 H( V
}8 q- J* k" l- f& _9 Q, z) P$ r; b
}
9 D; H8 N5 T) `& X, d bgR = '0000' + fadeOutColour.substring(1,3)
0 X7 C1 K0 Y' ^+ ], B- O bgG = '0000' + fadeOutColour.substring(3,5)* V. {" k. y6 {; F( I" B c
bgB = '0000' + fadeOutColour.substring(5,7)9 P. t" W$ ~9 Q# `
currR = new Array(numLinks);
! Y! D; g( }; r6 _6 F6 X currG = new Array(numLinks);3 y$ y! T3 I, \ d; B
currB = new Array(numLinks);
/ ^ M3 g) o$ c1 I7 x- ^1 V+ u count = new Array(numLinks);5 b- p, ? Y' \% h: n
fadeOut = new Array(numLinks);
9 L- Z. Z& Y' f# n* g9 L! |" i' O4 } continuous = new Array(numLinks);
) n: B, v0 I$ A: }' Y newColour = new Array(numLinks);4 s; i# n2 T, L; X
tID = new Array(numLinks);
3 t% A- I) j7 L, @ X redInterval = toDecimal(bgR) / numFadeLevels;, W6 a7 e9 `1 K* U: v
greenInterval = toDecimal(bgG) / numFadeLevels;% Y7 i7 d- {& m9 l7 H, j
blueInterval = toDecimal(bgB) / numFadeLevels;
. e8 A8 j6 p2 v( M6 z `4 J initArray(currR,numLinks,0);
2 N2 { B% I- M3 g* D9 [* U initArray(currG,numLinks,0);
; J- h) u4 `3 x- b4 E8 a( G4 ~ initArray(currB,numLinks,0);
/ G4 H+ E0 @/ f& ]& G R initArray(count,numLinks,0);; x4 n# R O6 F6 {- o
initArray(fadeOut,numLinks,true);8 q9 d8 y# x$ N$ Q" [7 P
initArray(continuous,numLinks,true);3 X+ R" f/ |: ?9 H
}
) v5 I1 r( D8 ?: D/ s- G$ l" D0 Ifunction startFade(id)
0 D: ]3 i9 c3 b2 [' U/ _{
0 H, X5 W! R6 @' \& N if(fadeOut[id] == true)+ B# Z3 D! Q. T6 v' r
{ /*move colour towards background colour (increment)*/+ u v) H6 _3 K$ B. A1 A% A$ A1 u
currR[id] += redInterval;9 T1 u0 s% B3 f$ k) f. J% N
currG[id] += greenInterval;
3 a P& n+ k2 G currB[id] += blueInterval;
5 i& d5 d% f" } newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 _7 r3 ~1 z, N) M: v' l6 s+ b- i
if(++count[id] == numFadeLevels)3 k4 g( Y% c4 u+ c3 |4 ^1 w
{1 h5 z0 J& G& S, z
fadeOut[id] = false;8 Z0 R( l0 N7 K, N
}
8 m! b5 P% |- g F }
3 N. a$ k K1 i, O- n) o7 D else9 R+ j$ }/ ]! u
{2 N" x! B0 w5 q9 y2 z' y, d
currR[id] -= redInterval;
8 B4 S- M; `2 T! W
: m1 {# e5 F+ u currG[id] -= greenInterval;) S. J, l1 S3 @, }
5 V7 I3 G2 k) `, d: d5 g currB[id] -= blueInterval;: B' C$ W$ C2 U' x
! Z8 {2 c# c( ^5 F, V( k newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ `0 G `7 V! _6 j
3 o6 ?: y: D. @ y
if(--count[id] == 0)" s' v4 [( r" H: J2 C
8 h# h( m& }3 t {5 T* N9 i* ?! u" K) ~
& V3 X$ F* j h& x9 d/ t( P& O
fadeOut[id] = true;
/ ?/ L0 F4 r) q2 v, V$ u& B
* A# B/ Y F- Z" l) ^ }
2 |( H! e z5 a- c. T- A
, ] ]" T1 p! t: n' {" v: R2 n }) S5 [9 h' t, P! A! u+ r7 b
9 m) M. a. g( _3 u+ z9 {1 f
if(continuous[id] == true)- a5 Y% }- E: o) W0 Q! `" P
) \/ n" s8 e5 R3 ]8 E2 ~( L5 A8 b
{
1 c# W) v) I* j }8 z
7 N! z' R% b& g! T4 {: l document.getElementById(id).style.color = newColour[id]; * \ |$ X' w6 F. e( d
7 {$ H" I4 b0 i: x; ^. g4 g
}& V8 ^, o) I$ r+ D
& j3 u9 S1 v6 i( Q. C
else( n4 }) i) ]) n" ~, S) f
1 t; B' V; |0 g. g; j1 _ {
) R; C- _6 x% k& C0 K: b7 U1 U: Q6 g) ]' ]& u5 |
document.getElementById(id).style.color = hoverColour;, M+ ^1 L, D4 ~- y
' u1 L' w( v0 d% f
}
# d- S/ A9 R1 H8 I1 L: x6 K# o( q
( a; z1 k9 Z* a" r clearTimeout(tID[id]);
" a. ~$ x- G- P) t& K
) H# |# p4 J7 X) T5 [8 s tID[id]=setTimeout('startFade(' + id + ')', rate);
( w. V. h) w+ l. [
% n1 E, S1 n# m7 M- |8 O}5 d. F7 R, K" _ B* C3 {, Y0 G
- _4 W1 x2 U; v) j9 V
function continueFade(id)
2 o5 Y! K* |2 L
0 D( i- q+ I# `+ L/ _ r5 E{* d) }! d3 o& i
' u" B" \% P$ e" ^
continuous[id] = true;
* u1 j8 D& A; V3 v3 O4 k3 f
) i' d- M' {+ @* s}
3 r0 I+ j5 P" \' a; Q
8 L1 Q3 Y; N5 h% J- E' k9 {1 g) Efunction stopFade(id)
3 K3 A3 ?5 G' s5 S2 p: L% v
j* t% E+ Q0 x6 J% j4 I# n{
' @; o9 p3 R i( \2 Z6 Y C1 O9 s v. k+ y. e: u; j' G
continuous[id] = false;
# A0 s% j& g+ I. j+ `0 U, J4 J# z% G) p8 E: K" t
}9 S- ]- Q3 |- u/ G1 ^
2 y9 F6 E7 j0 O
function StartTimers()
+ ?$ v( ~% ]; @3 J* s
6 y2 @+ q* z. i, z# S: {4 j{ //set up an initial set of timers to start the shimmering effect' W4 y8 H, @: D1 }' w8 Z
. g2 W4 ?+ x1 x; H4 V for(id=0; id<numLinks; id++)5 x: t8 T2 s7 {- m! y+ M& g, I
- x" _9 E4 e; f% G$ U
{8 y+ ^! c: n+ T/ R
+ R. K9 |5 X# t( c$ y) X
t=setTimeout('startFade(' + id + ')', id*100);; O8 G- d) y- m K- @& A) w
! H* I4 A+ [ F! y6 e! Z6 Z+ N g
}
' l# _. x+ n# q a# u6 J# U, k
# V D( x# B2 z- v3 n7 Q2 A}0 i% p6 p( p5 [9 |( V* ?
' N7 ]! X3 P1 w* ]6 b) c
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 ~8 q- q& q8 a, y' N( v& Y& R1 e$ c! W- ?" X# Y5 O+ {
initLinks('#FF0000', 6, '#FFCC77');
' i9 C, n! K# b) G8 ]7 Q! @, Z0 J$ w& B, }, B+ Y x: G& |
//-->$ Y* p# q ^ P; s) {
: p4 H0 o S5 M1 ]% k. v2 U* \
</script>/ p1 |7 P' V# i& G# `- `. @! I
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元. {2 j2 w3 D9 R) v
</a>
% X1 X: ?- ~) N, w: X<br> d1 {1 h' t' K% ]
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>) q! J* r! e: K7 S1 j
<br>
- K4 X2 b7 {. z# N& g! z<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 ]& {+ [- E6 j2 g( t, t<br>
. a' `& O: T" W2 W2 e) j<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, c/ e6 d0 |; S; I2 e<br>
+ Z, R& D! J r2 e; ?<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" ?4 {) t$ L3 V. E% B1 j' `; W' H g9 x! {<br>( Z7 \' X( Q3 i1 k% @
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>+ G: q8 ?" \! z5 l: p# D) S
<script language="javascript" type="text/javascript">
" M J& \+ g- F2 b4 P<!--' K8 v! O" Y: e3 t2 a. R; J3 r# H
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
% d, o# S, P( y9 U( U/ n//-->
4 f+ f" Y6 v( C$ N4 P</script> |
|