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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
& u9 s& o; Q1 ]) H. ~1 g<!--% @& O# q+ A: n# T3 q- V8 v# `% q
// convert a single digit (0 - 16) into hex
' P5 k5 p+ c' E7 I& ]' Ifunction enHex(aDigit)
3 m& ~: y) b T{
4 u/ c) F- ?8 m; P& u return("0123456789ABCDEF".substring(aDigit, aDigit+1))
- Z" ~. U9 f8 K6 e3 h h}
) [0 r$ T+ C# N8 Z3 |5 g# T1 ]// convert a hex digit into decimal/ v6 c9 x7 n5 H
function deHex(aDigit)
$ J. J# z) C1 ]4 Q9 P3 i+ K# g{
" r3 h9 l4 I8 `" y/ K return("0123456789ABCDEF".indexOf(aDigit))
9 ], V) I# G5 @0 W0 k! `}# c0 S6 t1 L. u+ B3 V; @6 z& v
9 A1 r$ W. ]6 Q2 L1 u/ o// Convert a 24bit number to hex
, ~* T7 J& L/ Z6 y" a9 Efunction toHex(n)4 e' D; U( Q0 W; O: K
{7 l7 ?" w' f2 q# e( Z5 e$ K b2 D
return (enHex((0xf00000 & n) >> 20) +
1 U+ b/ J- B5 v. S" x! J( u enHex((0x0f0000 & n) >> 16) +" \4 Z9 L5 n: N4 G3 `. ~3 C
enHex((0x00f000 & n) >> 12) +1 J3 Q1 p, o% n$ Y% A
enHex((0x000f00 & n) >> 8) +
: w* B9 c: Y. P$ A- V5 x enHex((0x0000f0 & n) >> 4) +; E' I8 e! C8 _+ G9 Q3 O% N4 o
enHex((0x00000f & n) >> 0)); O. L, c+ l! w$ W
}! \* f. r% m/ N z3 G% v6 S
// Convert a six character hex to decimal5 U; C) n) c/ A; m2 z+ O- I" z2 {
function toDecimal(hexNum)
# F% Z3 [) S% [! T E' l{
1 U y3 e0 }& M5 U var tmp = ""+hexNum.toUpperCase()/ i, ^5 \" H! E, c) ?
while (tmp.length < 6) tmp = "0"+tmp
1 T7 R. t; s; B# X! s. g | return ((deHex(tmp.substring(0,1)) << 20) +* e* d: r$ F. I- S% G9 O
(deHex(tmp.substring(1,2)) << 16) + , O( N( d8 c9 V& Y
(deHex(tmp.substring(2,3)) << 12) +, e, u _" c+ t, Q6 o
(deHex(tmp.substring(3,4)) << 8) +2 \8 P5 [! n- ~# B2 I
(deHex(tmp.substring(4,5)) << 4) +. _9 ?! h( b0 ?7 w
(deHex(tmp.substring(5,6))))) ^2 K) `2 E; s) Y- ]% H, g4 J
}
4 ~8 B, U1 J& v///////////////////Shimmering Links/////////////////////
9 F1 {5 L4 E" U- c) x3 h//global variables
9 E# ~ ?7 W) l5 ^, h: evar hoverColour6 A. ~; I) X+ u4 `6 a7 t
var numLinks;
0 s0 w! P) c. S6 R% b# J/ Wvar rate;5 J0 k" {( G/ a0 u
var numFadeLevels;
" p4 n- M+ e! o: C! `* x6 avar bgR;
: \7 J' o. P0 ~, dvar bgG;( l _- Z1 H" H
var bgB;
# J' Q1 q* F. [( q0 @; A' M, Evar currR;" E. {, o3 H2 w4 d
var currG;. B) G4 J# w5 j1 L9 b P5 K
var currB;9 J4 f) J+ x; z
var count;
! c& ?; \! N# ]) y6 m2 ^: s% M' Ivar fadeOut;
* y1 G* P3 f% }" g+ m9 ]' ivar continuous;
; n( v7 K/ V3 t! avar newColour;9 I9 D* e, _* T4 N& x5 Y
var tID;& k! i* `; N, }# D6 G6 o; ?/ d( {' O
var redInterval;, u* y$ y1 Z% M% T
var greenInterval;3 B* G! x4 }- D, A7 n
var blueInterval;4 A0 J4 g( W; I# i8 Y" j
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! [$ b" V/ L+ s4 ?* Y
{
7 ^0 [2 L8 f; N, L- ]; F! S6 k- `! f hoverColour = mouseOverColour;8 I( k p+ C1 d2 {* O
numLinks = numberOfLinks; E8 D( Q" Y" G S" L3 [
rate = 1;. q, l2 E0 L4 q1 `. y0 J
numFadeLevels = 30;* K; L4 k: b8 ^& _+ g8 x0 Y
function initArray(theArray, length, val)
9 b8 _7 w! y3 E {
$ _& p9 Q$ ]' ?1 R9 H7 w- m) J for(i=0;i<length;i++)) D1 Y/ M: n# L$ o0 }; N4 l
{% F4 _; U3 S+ d2 x
theArray = val;
' |/ t0 f7 t5 b9 L/ y% ? }
# w& c5 i+ D1 Z- v# | }
/ L' P3 {" l& t' u% H bgR = '0000' + fadeOutColour.substring(1,3): j, v. P* |. y0 ~5 Z$ E. u) D
bgG = '0000' + fadeOutColour.substring(3,5)4 c r# V* v4 v6 e5 h# t- t
bgB = '0000' + fadeOutColour.substring(5,7)6 ]4 F, m5 y ~# Z: L% o& F
currR = new Array(numLinks); L" C* D. `: G* H2 z: w
currG = new Array(numLinks);7 `0 r. X: T6 ?9 D2 h4 S7 t
currB = new Array(numLinks);
8 I% I# ?+ P" _1 e0 z count = new Array(numLinks);5 D: Q% q, E( x/ j2 ^+ o- t7 `
fadeOut = new Array(numLinks);! _$ ~ z m' b) a
continuous = new Array(numLinks);# d% d7 {1 i9 {
newColour = new Array(numLinks);: l4 }$ |0 T2 W# @4 H! ?: ~
tID = new Array(numLinks);
$ x: s9 O4 a5 U% @+ i9 j" J' e redInterval = toDecimal(bgR) / numFadeLevels;
5 K0 o$ m7 Q/ f greenInterval = toDecimal(bgG) / numFadeLevels;
) [0 `0 A) {* G- V" g& h6 W blueInterval = toDecimal(bgB) / numFadeLevels;
+ Z9 W) ~8 W) T* p initArray(currR,numLinks,0);0 n' D. i6 O; ~/ y: g: J: W
initArray(currG,numLinks,0);2 n1 }+ Y1 @2 @& m/ g
initArray(currB,numLinks,0);
8 }8 F- [- q7 I7 | initArray(count,numLinks,0);# {' j2 T( b6 }( X
initArray(fadeOut,numLinks,true);$ v4 l) q1 B! W: c% h+ Z9 E$ f6 ]
initArray(continuous,numLinks,true);' t+ w1 o& P1 c3 v7 ]
} , k8 U. Q9 m" U, i5 ~+ @
function startFade(id)& L, z( G; {; p2 q) q
{
: m4 M: v7 ?0 ?( M- U if(fadeOut[id] == true)
0 G! j( L2 R6 p, [6 d { /*move colour towards background colour (increment)*/+ F) i8 G# l; Q5 A6 n4 ?1 G) t0 n- g
currR[id] += redInterval;
, y$ P3 M: p' B. [# A, o currG[id] += greenInterval;
) I. l' P) ?2 R% u! T: M. g0 Z& h currB[id] += blueInterval;
- y' i9 i% F2 }( d: v) P: m! h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 k. g7 l" T/ D if(++count[id] == numFadeLevels)
1 n/ @5 Q- Q b- ^ {
6 j c' x& f. W fadeOut[id] = false;/ x6 b4 w. f( a: ]1 m# b& C9 E
}8 O2 R( o5 f; h8 k9 Y
}
; ~: f# O( Z0 s$ s) {7 l$ i# E: O else
! A% ^ W* g+ r8 B {
+ q$ ~6 A! y( |/ R currR[id] -= redInterval;+ O+ }8 Z% f: [# ^3 l8 Q
. A$ _9 ^3 `& Y0 m( k7 |" J& t
currG[id] -= greenInterval;, i. ^+ m; t$ I: G+ t% Q+ l2 u( _) s
$ j3 H* k- O1 _ B, w
currB[id] -= blueInterval;
& b4 Q/ L+ y: [% s! W$ M8 J, j* ]5 p$ b. w1 d
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 _% k- ?- l' }* \
5 C) ?$ W" F% G
if(--count[id] == 0)# y# m! {& z6 E: k2 E7 U
: o; M# A& h, S/ V [& d3 k
{% p1 `4 m: Y& w: N; M
" a7 k/ k) \1 M+ v9 P9 V
fadeOut[id] = true;' j9 w! ]5 g8 @! e( e
/ ]0 E/ _2 L4 B7 v& D+ `% x8 c }
' R" C0 K/ g+ N: ^2 ~( A3 Y9 g; P. ~
, l- ]7 {% v$ E# `7 V }
1 X$ L1 t: J% }1 x& l- n2 Z' B
7 C$ L( M& B/ t6 A& I! V if(continuous[id] == true)
2 y% @: `* j$ D3 e# ]) |* a! e- @* F- D; a, T# r' g- e
{( n8 n2 [+ N! V5 u1 F9 P
: @9 D2 ?- N. @1 n document.getElementById(id).style.color = newColour[id]; ) K/ Z# `" ^1 I* Q3 a2 v
: ~5 @. K+ {0 ^: E
}
# f( ~4 i+ x% N0 I9 v3 P, i: d0 b
else
, m( P/ X; K7 U" }% B
( ]# J* Q* a( _/ g$ C5 }; ? {
! e- o& o+ ]( k& T4 I7 G% u/ U- z: d1 v2 W1 H' }
document.getElementById(id).style.color = hoverColour;6 V# ^/ ^& Y4 `3 d$ K7 j+ ^+ K9 H
% O1 ^0 y3 m0 F) } }) D" y- c+ ?6 C4 {
; V! r3 }' N* M( O/ Q$ |% \ clearTimeout(tID[id]);/ [. K9 p, A7 Q: s( K
) u& r+ O/ l) f
tID[id]=setTimeout('startFade(' + id + ')', rate);2 e* F1 ]7 k( o6 s s% N
- y2 Z- U! j! _8 E: Z}/ {0 ^% ~, b, v4 G M) D
7 l+ v2 P! k, ^ s6 |4 _% cfunction continueFade(id)
^2 G* Q1 J8 v9 S
: b8 B; S D$ }8 E1 s. U0 p0 `{
% {! u9 G/ x4 b% ^+ s9 N. L' S. n5 q z$ I6 R2 k; J
continuous[id] = true;
) d* O6 e, H+ o; F9 d6 P, k2 I' p; ^
}* G, x$ n0 K7 F$ y
K; M+ Y( W3 ?6 Q% tfunction stopFade(id)6 t2 o3 D1 U3 v0 T
3 W: l, P& R3 L4 x9 P, C{9 j& S* [" c- y- e7 n+ M6 r
. S/ j6 N, r% k: A: C! c
continuous[id] = false;
' {' c/ l2 D$ v) V
7 C: b! [2 r$ j7 m6 E( m, ?}
! P$ A3 M2 Z# |; ]2 `1 v3 [0 o1 P% D% j* `
function StartTimers()3 S9 t2 T ~5 |( O- P
) x4 I2 d& Y* b5 h9 K- ]4 K9 r1 ?{ //set up an initial set of timers to start the shimmering effect
7 X6 B3 j: {% Y' ~$ r% n& n
# s8 [6 U- u6 n$ r7 y! h for(id=0; id<numLinks; id++)
" b! ]. ]. R: a# {0 u+ k z& |! a1 D9 C0 D7 @( M
{
% _2 N: ^6 I Q8 ^- _. p
- n- }4 h2 p+ R4 x t=setTimeout('startFade(' + id + ')', id*100);
3 h* H7 ~8 p3 Q( f2 }5 [6 y, w0 @0 X: D1 G) @
}
, E1 |8 R' U7 N9 X" k: [& P. L. G1 q) m7 [, v
}( [; s6 ]9 p5 O8 C+ S
% x1 P4 X& u$ {9 s' E# ? Y6 P
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')% c9 I% u7 P% c
) _9 U2 M/ Y+ T, z& J- c# a% b4 linitLinks('#FF0000', 6, '#FFCC77');
' w8 r/ B* o2 x& W n) q7 T0 Q% o. l# k6 I
//-->
( Z8 S) H" s( D8 n: v* U
% B! g; P# w5 Z) R0 Z4 h1 [</script>
2 m4 z6 P \. J: c' N" B1 o<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
. b/ T1 e: t1 ?0 P1 Q% o( }* }</a>
& C6 ?( ]& @3 _% w5 L) F4 u/ s% \<br>' U4 T+ X' ?7 `6 k% H6 m! _$ O8 A* t
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>: z: o: }) {' L
<br>
B$ F2 K. l, ~* Z; p; J1 N<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a> H& Y& v; h# F" L$ _. Q! k
<br>
/ O9 I( s9 n% X: z& ~ G<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
K! j# Q! \# ^<br>
0 W' _/ q4 h0 |, P2 h3 n0 m<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
9 R0 D7 ?$ m2 T+ O<br>- o0 w5 L+ L. {; a& |' p
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
+ a# q: a% p% ?2 j0 Y% R% S<script language="javascript" type="text/javascript">* y: Q' @1 l4 ]
<!--
8 W# I/ A& [' T* t# osetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. Y5 O9 {9 o, o//-->7 r; ?- _) F- I( }6 a
</script> |
|