|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
0 V6 @. F* _2 C, `: O$ v: N<!--$ h( ~, S! p; J
// convert a single digit (0 - 16) into hex
1 W- D# s8 G" `. tfunction enHex(aDigit)
6 G; o- x1 `5 t& ^* c) q{5 H) q5 { _5 U% _, A3 T
return("0123456789ABCDEF".substring(aDigit, aDigit+1))' W6 m6 \" W7 ~& ^0 @
}
5 F7 S5 O4 S6 O$ O) O! j$ N// convert a hex digit into decimal
8 F9 Y7 B+ d5 \) M- R6 mfunction deHex(aDigit)
m2 N4 u: f( v{
# ~) |1 z- @3 @& d" _' U- G return("0123456789ABCDEF".indexOf(aDigit))0 F( L6 h2 W: ~: ^* R/ A
}
9 y$ V$ j! `. U' Y
$ X7 k( E; H- m- m8 v Q// Convert a 24bit number to hex
# `% A& q A! w. \function toHex(n)3 t* u3 @/ Q% n
{
( [* I% I, \0 h. Z2 ] return (enHex((0xf00000 & n) >> 20) +
0 i7 C# X' C' D$ z; o2 t enHex((0x0f0000 & n) >> 16) +- h9 ]! j4 \0 ~- h0 |$ I3 {
enHex((0x00f000 & n) >> 12) +
5 `% ~5 N8 z5 C( @" v8 G enHex((0x000f00 & n) >> 8) +
/ W: f& Z) g% r. N* q9 Y enHex((0x0000f0 & n) >> 4) +; b- j* `+ s6 M: p' |4 `$ M
enHex((0x00000f & n) >> 0))
: q# p# a' N |}: W% u+ N! x3 O, ]/ N7 M6 M
// Convert a six character hex to decimal
; }& t+ Y5 s6 `2 P4 c" G# P& \5 Z* i% cfunction toDecimal(hexNum)
" Z1 x5 Z0 X8 a2 m( _7 t{) M% q! y9 V4 d! Y
var tmp = ""+hexNum.toUpperCase()
" ]4 G% z( Z, d6 G% w/ | while (tmp.length < 6) tmp = "0"+tmp2 G1 M2 c3 o' m, {( G( ^5 b2 i6 K
return ((deHex(tmp.substring(0,1)) << 20) +
# v; m/ r+ {# r C/ @$ ? (deHex(tmp.substring(1,2)) << 16) + ; B* t2 O! e- D( D
(deHex(tmp.substring(2,3)) << 12) +
* Y; R2 W; e" n! k+ W (deHex(tmp.substring(3,4)) << 8) +
+ H+ D) a i: o' [) z' S (deHex(tmp.substring(4,5)) << 4) +
! @: \0 q$ j1 p- h2 a, k- `) M (deHex(tmp.substring(5,6))))
A, N' `/ f! V$ v/ r0 U}$ k3 i% S; g. X( c+ O! }* E
///////////////////Shimmering Links///////////////////// U, z8 H% \* w4 _+ d$ {, o+ f
//global variables5 P4 p4 j r9 T
var hoverColour
0 P( W! J8 r# x, _) Gvar numLinks;' ~1 w3 v+ U! s; W/ J
var rate;
0 Y$ j% R3 X# ~. O- S% q* W+ wvar numFadeLevels;
6 B: {0 _ g& Rvar bgR;
* X/ W- b, H/ ?8 P8 k( G( dvar bgG; T& v' x; ~8 \7 D$ E) E; x
var bgB;
9 }! Y: k/ ^1 x& ^1 q6 uvar currR;6 @, _; l; p; Y
var currG;
" N2 e. U- ?7 A6 U. V7 T6 Ovar currB;+ N; s- O1 t/ k- K4 ~2 i& C
var count;$ o! w: J, o9 |1 R! i
var fadeOut;; @7 g3 o' W7 }. c
var continuous;! b; X- R I }/ m
var newColour;; w- B% r; n4 l; j" y8 {$ {
var tID;
, ?. X) R7 M) W. W' B- j7 d# Ovar redInterval;! ?9 i/ G& y) R4 L) H( w; [# u
var greenInterval;/ x$ a+ P' D/ k+ m! q
var blueInterval;2 `+ g* U6 E/ i% L0 k" e
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)% K3 w! Z! Q6 B* S* {2 d
{
' J6 @0 n2 |1 w" `, q' w6 u2 y hoverColour = mouseOverColour;! b( `/ e1 H1 C i" @
numLinks = numberOfLinks;
8 K3 l A6 `5 o f7 P/ ^2 t4 @- x rate = 1;
# s3 a; T" E+ B$ S! I2 F9 Q numFadeLevels = 30;
( S# v4 ], E- I' D/ m: f. A function initArray(theArray, length, val)
6 ]5 q# Q* y& W {
; v. S+ u7 _% f& y for(i=0;i<length;i++)
' X# H+ J4 O3 K' o: W {) F% j0 s0 X& D; e' g- v
theArray = val;" m6 D- N7 n _& c' r. Y# o" v# v2 Q" A
}- s# ?* p7 R7 q( _9 I3 k9 X
}6 l1 n8 G6 ?- y: ?' e7 i
bgR = '0000' + fadeOutColour.substring(1,3)
`. ]( u T. Z& x bgG = '0000' + fadeOutColour.substring(3,5)
: \( q4 L% Y/ z- ?: u' t: D bgB = '0000' + fadeOutColour.substring(5,7)5 x& x& V( c% c& U8 N, ^
currR = new Array(numLinks);$ J0 g4 C" U. v" }
currG = new Array(numLinks);
: H$ t& _5 M6 t" D currB = new Array(numLinks);
4 b" N3 o, _; K count = new Array(numLinks);
1 G8 Q# a/ e# k: x fadeOut = new Array(numLinks);
2 i* T& T- u: k/ [( L continuous = new Array(numLinks);
6 s" z9 K! S$ }; k0 G newColour = new Array(numLinks);
6 J% W; L. A# {- } ? tID = new Array(numLinks);/ I$ }1 f( A ]
redInterval = toDecimal(bgR) / numFadeLevels;
7 }1 v: P( y- v: s) f) k% F greenInterval = toDecimal(bgG) / numFadeLevels;
7 w$ K( W$ Q. ~4 L; [. x blueInterval = toDecimal(bgB) / numFadeLevels;
3 B6 e }) M$ e, U- a! @1 k/ C initArray(currR,numLinks,0);
: y* t* L5 J) O! } initArray(currG,numLinks,0);
# Z1 S$ N$ w0 d2 c2 d initArray(currB,numLinks,0);
( S2 p% ~# V( @( v; b initArray(count,numLinks,0);
! j: E2 [/ I- M( B8 B1 N) h initArray(fadeOut,numLinks,true);: e5 z3 D* R3 Z4 z' L, j$ W
initArray(continuous,numLinks,true);3 P9 Q8 A+ b, F0 N3 }2 {# z% ]7 [
}
) [# H3 F) J. o/ b( a$ N, w) v, Ofunction startFade(id)
4 F4 t. B8 ^1 z3 }* {2 p* m{$ Y% ]% T! [. z
if(fadeOut[id] == true)
8 W% ?6 c; y! j4 ^. n h { /*move colour towards background colour (increment)*/
x* X. g/ P/ u4 a; X) s currR[id] += redInterval;8 \: \. E4 M4 q# K* M) n
currG[id] += greenInterval;2 \" l' o" q2 ^; s5 E% F
currB[id] += blueInterval; g- B% n i; }: z. o
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 P7 _+ x% u1 b1 f5 U- c' Q& {* u
if(++count[id] == numFadeLevels)8 D/ v9 ~: x1 F9 Q: ^- d0 G1 h M
{9 a" g& f9 S/ S6 h+ Z5 a! ]- x
fadeOut[id] = false;+ C. O/ b" b6 d6 J6 V
}
; O. f" c& c5 z; m7 U( T( Z/ S+ J* s }
6 h2 ?, k3 n$ ~1 e" }0 p& L else
+ g: O' l6 t8 m8 a {
8 O. W6 X9 _+ N. X$ C) s# K currR[id] -= redInterval;
& d& m! O4 q2 x3 J! ]; B& p' ?) r' m5 J I
currG[id] -= greenInterval;$ v1 W( A/ P6 B" u) O5 W7 q+ r
- q4 E' O, b6 P currB[id] -= blueInterval;
0 t' Z" Y0 Y9 v5 D% u3 y
$ b9 Q/ I `, k" `2 X$ {2 z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
; C" Z/ v+ W3 Y2 b$ G, H; W
8 E! i; \* Z8 u: G if(--count[id] == 0)
& x: Y! ~0 ~% r' a5 ~# \5 O
2 z. t8 q1 }: {. W" U, X+ Q {7 T$ p. m, u% S5 T, G, G+ ^
8 t8 i- d) O4 i; P) c3 z0 k
fadeOut[id] = true;* P2 a( m0 |" m q1 k
* z4 N+ I* b/ f: W9 | }4 P, W; \# D6 K e8 A/ ]+ m
5 Z- U9 C, Z4 b ?: W$ H! J" q
}) J7 k5 D$ {7 P
- B+ X c; b. |: i( c3 l if(continuous[id] == true)) W0 L$ h s- W
4 N6 m3 u! |' O {
/ e1 R- J& X' q8 u% D+ ?
* M3 A- Z/ S+ J) T& L/ X r document.getElementById(id).style.color = newColour[id]; 4 L0 n( t3 L5 H5 \! @' P1 M9 `- S
" |0 d n( A2 C# r/ d }
`# h. G- k' N9 k
; P+ e# c* J" c4 N else6 r+ H5 G' Q" p( G/ I8 |4 \
8 R1 {4 c6 r4 V; G {! o( i% @6 k% z: V' y8 x% x5 @9 Y
9 g: U: G; p( J1 m2 n* m
document.getElementById(id).style.color = hoverColour;6 {" p4 |3 K$ i; F* r
! g/ G7 o( T$ }+ p4 w# M }
# B3 u2 u" {9 v2 S1 v0 S% U0 r
! G9 x+ p& U6 \# M& S/ O: K clearTimeout(tID[id]);& b4 ~ l# Z8 D9 O; z9 g& F
" s: K2 |6 w) n+ w5 v9 \: A/ m4 U
tID[id]=setTimeout('startFade(' + id + ')', rate);5 h1 ?# N& }& v5 k( ~
( m$ a+ j8 j$ Q9 U% k}, O) E, N7 c8 o- G
5 [5 ]! ?7 n+ B! T" B
function continueFade(id)9 ?8 B( G) n/ U5 N$ ]
# V9 n6 U* M7 M# R, l/ X& R{9 O0 j9 w# E! X# n% B- x
( m. s3 {$ K( d8 |0 \6 X& w3 H& L continuous[id] = true;3 O, H1 Q5 s3 |+ v! a7 b( L) u0 F
7 ]6 A$ U3 p4 _- m4 n" R}
5 \( k0 [/ l6 o7 b1 N) V! J1 f A& Z# N$ Q9 o y( j/ K
function stopFade(id)
! Q! Q$ b0 Z, z" ~0 U }& E T& R, w9 z; g
{
$ G- Y# c/ z8 T" M+ t8 @% B. N7 D& j0 b/ U& N- O, P6 T6 l
continuous[id] = false;
' b% q+ A, w. ^/ w; c( U' v
1 V9 Z( ?+ q4 e. A}
: K7 x. P; U6 W. y3 q0 I# }
% d1 U! }. w" W# rfunction StartTimers()" r8 e' z6 _. d+ M
3 L- G, N' G/ g' \7 ?
{ //set up an initial set of timers to start the shimmering effect6 c" J) y* G) I, _& W, j
* g5 b; W3 K& _2 T2 a0 R
for(id=0; id<numLinks; id++)
0 P# C+ U( O3 b6 z X3 J3 ]/ c! N0 z, h# C
{
( {3 P* K: b& H B3 V, v8 k9 c; ]# O9 o0 q' Y: o
t=setTimeout('startFade(' + id + ')', id*100);
, r1 g# |& R5 n3 ?6 M" e/ y& h3 }1 D4 W; b" ~
}6 C7 I, e7 _4 z2 g" L) Q
, s Z! i9 Y" n' ^6 _* S
}
0 @. F% I. N# h8 e- ^+ h
5 \- ]5 z: e2 ^) [, d//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 _; ]- _) I2 Z& G% z+ C
6 ]8 g* G4 V; Q, ^1 qinitLinks('#FF0000', 6, '#FFCC77');
" i u) k7 c' Y6 _+ ~( V5 z
2 K/ B1 E! h: s$ e2 M q//-->+ I/ P9 ~' A3 `, v# K) l
$ c* ?# t C$ O* `' J( n, }% U</script>
$ x" c8 W1 S" R" Q- w8 ~<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元$ D' E5 @; D9 ?7 X
</a>; @9 b( I/ b' `. [9 o8 I7 `- q. j, E
<br>- [$ S2 W5 C; v6 h$ P
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
4 j, e. A/ M- Y/ [) t3 g<br>8 w# u8 Z; L' w9 ]% w
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>* t; M: w+ x# @3 H8 }1 J
<br>
' j- Q2 S- i: B! H7 z. p% ~<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>3 E: {9 j$ c# h! Z2 n" _5 x
<br>
1 B( e- K6 v/ O. j. I<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>$ n. I+ M- Q$ x9 `
<br>
- s( Z& Q2 W3 K8 {/ y, A<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
% G' d3 ?) N' Q4 M6 F<script language="javascript" type="text/javascript">
9 q5 l2 Y0 d! b2 x5 }* C<!--
0 v' H2 l; ]+ N, }& GsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
5 ~ d1 G0 l! X4 u$ e- `//-->2 B* V; t" V) ~8 V
</script> |
|
发表于 2008-1-21 20:48
|