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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
7 L7 z( r- p/ a5 R% @) w<!--
) N) o: E9 v f0 W: N4 A! W// convert a single digit (0 - 16) into hex
! k2 X% T2 X7 b' Ffunction enHex(aDigit)% h, S2 p* w! I; o$ U7 j7 i( G
{
& A: b" p, b, L return("0123456789ABCDEF".substring(aDigit, aDigit+1))
8 D( E2 ^- P$ p+ d/ F* O! X}
8 S7 E" N/ F# F' ^// convert a hex digit into decimal
; a( g+ b9 K$ Z8 l4 g' tfunction deHex(aDigit)
; ?& h! v8 l0 H" Z* k# z3 x$ H{( G! w8 I$ I, Y' I1 T: q
return("0123456789ABCDEF".indexOf(aDigit)); `" D) E( d7 l( e# W( G
}
' X: \+ h! o- _" d2 X f- K) X9 }; \- S+ ]3 T7 A. R
// Convert a 24bit number to hex; b I4 s1 m' [, _4 O
function toHex(n), H+ G4 v8 A1 r1 H4 f! m
{ W3 r9 ?0 t2 e& g0 z
return (enHex((0xf00000 & n) >> 20) +
2 e2 s1 S/ u: l! a9 D) J1 P enHex((0x0f0000 & n) >> 16) +* a+ }/ b: V' p( U0 { |
enHex((0x00f000 & n) >> 12) +
7 w7 ?: r% |- d0 Q enHex((0x000f00 & n) >> 8) +) V% @3 F% ]4 N" x8 X2 q4 l6 o
enHex((0x0000f0 & n) >> 4) +2 W# f4 u' Y. l* u9 a
enHex((0x00000f & n) >> 0))! ?( ^: S1 L7 ~3 {
}$ g k* E4 y3 E& N
// Convert a six character hex to decimal. M# M5 n: v. E9 C2 G
function toDecimal(hexNum)# v4 _! X; X3 S! b6 |! h
{
0 h ~* c6 m. F$ ^' h var tmp = ""+hexNum.toUpperCase()
* X$ X; ?; l0 w5 C2 H' B2 K2 E while (tmp.length < 6) tmp = "0"+tmp
1 _* D/ l0 }) ^$ U9 T return ((deHex(tmp.substring(0,1)) << 20) +
% u4 H( V! t+ H- y* d (deHex(tmp.substring(1,2)) << 16) +
$ `" S- `) Y( ~& P( O+ u (deHex(tmp.substring(2,3)) << 12) +! g6 V6 A' f4 d, p, \# X% O3 F
(deHex(tmp.substring(3,4)) << 8) +& R- b# g, ~- i) ]6 \+ p$ O
(deHex(tmp.substring(4,5)) << 4) +1 _ v6 @) V" F5 I3 z
(deHex(tmp.substring(5,6))))0 ~5 G- J% Z) t* A8 ?9 }: @" B
}5 U' t# K y% j
///////////////////Shimmering Links/////////////////////
: @* a# ?; ~- h3 `//global variables
4 m) j. Z" A! ?var hoverColour/ Y& D+ s5 r! z4 m
var numLinks;
* R" A( l- i3 c% G( H2 l$ vvar rate;& J( Z4 p' }+ |; d- Y
var numFadeLevels;
$ F! z$ W, s; c/ z+ Evar bgR;: H! t$ f! ]+ k( h) v5 _
var bgG;0 X! `7 A" {+ Z# H% w
var bgB;8 t& U+ U" h/ J) v1 ^1 K
var currR;
5 W0 A9 j" L& V, }6 Y) N/ T4 Fvar currG;$ Y; k$ R2 [9 |
var currB;- |: Y B+ G+ d5 u5 i
var count;6 {) N5 p, k" M; L
var fadeOut;; e* C% j1 W3 r' r( \: Z2 G
var continuous;
4 ], P& G6 ]: m8 Lvar newColour;/ G# F9 z7 P+ \ E; ~& q& \
var tID;
5 }: c6 Z! s3 u- Nvar redInterval;5 X# ~" d% b5 c# W' @
var greenInterval;
7 l6 R( ^1 ]# a5 V- ]9 ivar blueInterval;
2 S$ X$ r+ a- w7 r& Z' z5 D* Ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
. I, T% m" t p; B{
) O, N, E- t+ M% p0 _+ H) n hoverColour = mouseOverColour;
4 `/ h/ Q3 S/ ~$ C4 E, v3 L _ numLinks = numberOfLinks;+ c% r# _5 c8 y) c- _: T
rate = 1;3 S, k% w; G' F
numFadeLevels = 30;+ j5 G) }7 ?' f: U I0 ~( T
function initArray(theArray, length, val): i4 p" n) B1 | ]; I3 \, V" D+ V
{% U4 F5 z/ e7 [
for(i=0;i<length;i++)4 g0 Z4 d; h" y% `& u
{
) S5 G7 C5 K! E5 j; S theArray = val;' |3 J. } }! Z4 n, ^
}3 I; P. R# r; q1 {9 b) Z% j
}
7 \. _! s7 }# O) n bgR = '0000' + fadeOutColour.substring(1,3). G1 }& l ~3 s C, ?
bgG = '0000' + fadeOutColour.substring(3,5)
8 ~: U1 W' p, K bgB = '0000' + fadeOutColour.substring(5,7)
* g# m$ |! }# q9 ?+ R currR = new Array(numLinks);
, L) B6 @2 x- P9 R% o: u$ Y currG = new Array(numLinks);
) w8 M* n c4 M1 P: Y2 ? currB = new Array(numLinks);) a+ L+ ^5 D1 p/ ^* _% K) @4 L
count = new Array(numLinks);& ~* u P" `2 T4 Z1 L
fadeOut = new Array(numLinks);
8 Q+ [9 `: x; E# ` continuous = new Array(numLinks);) [, y6 g$ K. g, x
newColour = new Array(numLinks);
5 n& V1 k2 Y! G. W5 ` tID = new Array(numLinks);
1 w, n/ _% N& `7 I$ Z" @$ q# B redInterval = toDecimal(bgR) / numFadeLevels;( s2 S! o& p! p
greenInterval = toDecimal(bgG) / numFadeLevels;, H; ^& E& _- F
blueInterval = toDecimal(bgB) / numFadeLevels;
; ]0 Z% m) e. N initArray(currR,numLinks,0);3 M( b. N1 X# T h$ q3 [% _
initArray(currG,numLinks,0);# Y" V/ v9 L5 O" W& n1 u
initArray(currB,numLinks,0);
6 w- E. F5 @5 G% C4 h' c4 g initArray(count,numLinks,0);
& S4 v2 y+ D& U, J% m, N initArray(fadeOut,numLinks,true);
" K" N0 u: y* N* Z1 `1 }, V. ` initArray(continuous,numLinks,true);) H7 D3 T, q9 J( h
}
+ K/ O& B |! v( p- u: efunction startFade(id)) d5 G/ D, W- P4 a0 y
{
6 J$ w0 [* V7 p5 P z1 F if(fadeOut[id] == true)% D- G! q& Y8 E: h& p h
{ /*move colour towards background colour (increment)*/& t) D( O. I$ }9 [5 b# R$ S& i
currR[id] += redInterval;) ?" P. P0 I$ j
currG[id] += greenInterval;, F" n/ {2 F; R" O: [! W2 X
currB[id] += blueInterval;
7 C# E4 u' S! S) ?: T newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- b4 R" o: X0 m; B
if(++count[id] == numFadeLevels)8 N$ r9 v6 s) @1 h& {
{& d* f x G8 W1 A+ K' T/ |
fadeOut[id] = false;
. b4 c/ v# P& G( c5 u& @ }* v- L- l8 K. @" p/ k% U
}
* c; \1 Y9 J+ r6 [: y6 t else6 ^/ S7 M- ]* e, }, Q0 E7 o4 C2 T
{6 F% L, N' G' v3 L ~. U2 v6 ~
currR[id] -= redInterval;
$ {+ Q9 E% F/ m/ }/ k
5 }5 e t/ ?+ ~( l/ {( l' U/ u currG[id] -= greenInterval;
* ~) L5 `# F2 B1 e( }" ~3 a6 _4 @& P
" H4 |/ U! [& b currB[id] -= blueInterval;8 E/ Y% q! Y: F
9 L0 e1 L+ }4 [' F2 s7 i
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 V" J* B" B6 ^! k
: e9 v/ R) _* [) N* q9 B7 w if(--count[id] == 0)% V' O3 O, O; Q3 ~; b
" p0 P/ X& V* a! q {! B: z5 L, \ D1 S* k* H( f0 p! ?( W& s2 p
: {* ?1 |7 B. q% v, n2 K
fadeOut[id] = true;" `; T5 Q- B1 L% z( f
# O& G, f) k* S( u" H }
2 }# f, R2 N9 h. i, O$ `: w2 J0 u' d
}4 i) g. s" i8 J) C" ^, J
8 j5 l( J4 W7 ~, j- X if(continuous[id] == true)
& ~8 \+ F/ s! t! x& o& s& K5 b
3 g% k" q1 ]3 k7 X8 J( t% q {
/ h7 h# g! a o, L3 b% k( G
- v1 ]' {# _3 [: E. m2 K document.getElementById(id).style.color = newColour[id];
+ {" L9 A. t9 s3 T/ q! z6 q$ h+ V! Y" W! d0 {! m! v
}
/ E4 v5 ^5 M# a U( p
- s, f! u4 B5 C else
, h8 R. L. J9 F+ y# C I: O
- u; L* c0 f. B; X {
7 A( K. a( G7 z0 K! x
, V: r% {* W3 ?* } document.getElementById(id).style.color = hoverColour;
+ F( V+ ^* E4 i8 n7 y$ N2 Z, r7 i+ L) d- t
}: N/ L5 r) O l% U1 h% s$ Y
) z9 j) [5 A$ \# p) V/ H
clearTimeout(tID[id]);4 w9 S, A) W4 Q7 q0 u% u, _
' i* Y2 m6 d+ X ]5 o' H) ? tID[id]=setTimeout('startFade(' + id + ')', rate);8 ?2 j) Q5 p) D7 `7 I& F) i7 q
' B H9 [7 W" @- D' ]}
A4 s- q$ ?% I/ v% `; x0 X* C% P/ Q. Y- N
function continueFade(id)
, I0 p- x) U% U; `, V
% j6 _0 `7 c1 k8 J. c5 e h{
% Q% u/ s! l# D5 A( D, `
1 @) B0 V0 l: ?; a- Z9 ^ continuous[id] = true;5 Q9 ]$ ~0 F. \9 W n# h
6 |" `: E# h) g4 D
}3 f& @) Q' ^. }! A4 T) N
* K" {% x9 e$ D) qfunction stopFade(id)# S. e* ?' S8 B- N( v, B. ~
3 A$ f2 G1 l O4 P
{ @" [+ ^- n5 ]/ o+ t- |7 f
! w8 t4 R; k, S6 ? continuous[id] = false;
! o% a3 i @5 i9 @3 R* p( O
8 n5 n+ S% D8 ^' ?9 \}
% h1 ^: z/ i% |) O; c% J; r
7 d' m' M" k3 [. D) yfunction StartTimers()+ Z' l( t9 e6 `( ^' x* T* T3 u- @5 r/ p
) z( P1 z4 ]- C( v
{ //set up an initial set of timers to start the shimmering effect
+ q9 X0 c8 M- M5 O- z4 r1 P; z( j" N. G& m6 g9 ]: V
for(id=0; id<numLinks; id++)
( T/ S* ^! v' `3 n- p7 K- U0 ^$ X; \9 w! d/ T: a% s
{) O8 `+ Y8 [) P. T/ @. _
6 l, d8 f$ M1 A& _+ ?
t=setTimeout('startFade(' + id + ')', id*100);+ ?+ u, S7 T, K3 x8 F# ?8 n
- d9 S$ s' u% Q* V- D" l
}4 w" o! @; y5 G [8 _# d
( G* K( [( Z* G' B. V) a3 g1 O4 O}
' ?* b4 R+ ^+ @8 R
! Y/ i' B7 e, P# p n//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ I. `- W7 L. t) T" y6 N
7 j+ K! I& Y0 `1 |
initLinks('#FF0000', 6, '#FFCC77');. ~7 x( j; ?( V- ^& x
* k) Z+ O0 x8 Y" U9 @6 ?//-->2 f( K# [1 ^. q+ z4 c3 z' ^/ i# }" L
# [% D4 k- t+ k/ j" i+ S" Z</script>5 Y( m, \7 o- h* V4 I. q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" L& q' j! O; W/ c* T6 {</a>8 _; n0 }4 E; Y: V% U' N
<br>6 x- @9 p9 J I% O7 @# }% r
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
/ m B/ c, z, z<br>
4 _ }7 c2 l& K2 H6 M3 ~<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 V, j9 R: e' y1 c& x6 {0 w
<br>
: H/ A. b* O( q( T p<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
; R* ?' c5 B2 N( |9 H* c; F<br>) ]* |+ E2 R t9 b' _6 h" W1 U. d
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
2 d2 B7 j6 _7 \* n<br>* u+ u! V6 L1 N% a4 D7 X! P8 @
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
3 T6 [9 A3 Q/ b' n) ~* C<script language="javascript" type="text/javascript">5 x5 N" Z7 U2 ^8 p
<!--% H Y% ^% Q5 \) t# M
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 b& ?" ?# p& P4 u
//-->
" S6 W! B6 a! m( H' k</script> |
|