|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
( o# t* w' i+ t<!--1 \$ z* O+ W7 o# q' j6 o0 M
// convert a single digit (0 - 16) into hex3 a# X9 O7 |& T4 V6 `
function enHex(aDigit)7 w$ E; O2 X' D2 w& k
{
( V) Q$ x" q* v6 U return("0123456789ABCDEF".substring(aDigit, aDigit+1))
{: b% p( @! w( e}6 J* n" x. T) _* B, z% E) J
// convert a hex digit into decimal, O$ M/ j, [/ T, b, p
function deHex(aDigit)) L6 v' u* D4 ^2 S: n
{
" Y7 E% ]3 B# M7 | return("0123456789ABCDEF".indexOf(aDigit))
4 N' n, m4 U) [% A- x9 q}+ }2 a" a5 Z& r/ Q& L
/ i8 H' o' v% ~
// Convert a 24bit number to hex
; N0 f& @' t9 x8 t* u9 rfunction toHex(n)( m$ o& d. I- w+ ]7 |, Q; E
{
' r$ ?) G" R3 O1 ~8 J9 S return (enHex((0xf00000 & n) >> 20) +
; a- C7 i5 k" D& A+ Z' E) l( Q$ W enHex((0x0f0000 & n) >> 16) +' T. l( K) }1 F) Q; E. D
enHex((0x00f000 & n) >> 12) +
B3 ?" ^, S2 U6 M7 d9 Z" H; a. K enHex((0x000f00 & n) >> 8) +) ?% U1 i: D+ {% o8 r# J4 \$ X! M
enHex((0x0000f0 & n) >> 4) +
* c4 p$ l8 U1 L7 Y enHex((0x00000f & n) >> 0))
6 r$ c$ ~* D1 x& |/ t}- K! A/ J$ a! z- N2 ~9 X* L9 J
// Convert a six character hex to decimal$ D% ]& r$ p7 z: W) q; [
function toDecimal(hexNum)
# d3 z* O! \5 m8 L8 {{+ `6 M. x, M& ~! y0 ]+ Y- ?; N
var tmp = ""+hexNum.toUpperCase()
) m/ D' e% G' h& F4 n1 R while (tmp.length < 6) tmp = "0"+tmp
" U1 G9 f1 d) [0 D: G6 ^ return ((deHex(tmp.substring(0,1)) << 20) +' A; x' R( H4 i/ P5 A. c& e! R# K
(deHex(tmp.substring(1,2)) << 16) +
5 m/ M9 D, U$ b( D% C4 [' F (deHex(tmp.substring(2,3)) << 12) +, L# N" l1 n; s) Z3 h& M" R! e
(deHex(tmp.substring(3,4)) << 8) +
: _( \, l7 @, |+ a2 r (deHex(tmp.substring(4,5)) << 4) +
2 O) E3 r U: I) C* |/ j (deHex(tmp.substring(5,6))))/ J. \# a2 ^. n4 d6 h4 G: [0 u
}3 ]1 K) j M9 r( U" T$ a
///////////////////Shimmering Links/////////////////////* L2 w X+ q. B6 Q; p! M' l
//global variables; A5 l1 L3 C8 i! O! [
var hoverColour
; Z# K0 g+ g, V" E7 Vvar numLinks;! t7 H A. ?9 O0 m
var rate;
# M* v$ T+ [8 ?4 `var numFadeLevels;
1 l3 m* o: N5 P% O( Kvar bgR;& M! s: I5 u! I
var bgG;. y. J" [# ^6 d
var bgB;
# h+ E Z! M. Y( F4 Ovar currR;
u: U0 z/ d4 u1 }$ xvar currG;
5 l1 E6 m% L. `3 `' H: p9 b! Ivar currB;
0 H3 I6 A# Q, x* S* avar count;# I% {$ h" b0 ] ^
var fadeOut;
# w* k7 R( F% u: ?; |2 b6 ` b9 ~var continuous;+ \7 j, X \ P6 x7 j( q
var newColour;
+ t4 P$ {* K# c C6 avar tID;2 q1 O- y% H0 _# ~8 H. m# ^
var redInterval;* i' Q" z7 l0 ]: ]. `4 J; L
var greenInterval;0 O3 P# p8 _) e9 g+ f& U+ h9 u
var blueInterval;
' Q, F& }4 A% e! L8 D( t; \function initLinks(mouseOverColour, numberOfLinks, fadeOutColour). s, v* E" r3 S( d2 P$ f. {
{
: _( d1 x) ^3 n hoverColour = mouseOverColour;9 i" ?% C N) d( ?
numLinks = numberOfLinks;
+ U" b+ m- d! A8 \6 q4 k9 t rate = 1;
6 g& ]$ x& a- W" ~ numFadeLevels = 30;& H3 C* i' O) |7 t
function initArray(theArray, length, val)
4 ~$ ?& R4 _+ s+ h {3 z/ @$ D3 o, h
for(i=0;i<length;i++)
/ g& a$ m1 B& |9 n( q {" @" l6 X5 o$ N# e& c1 L* |
theArray = val;
, |" @9 R8 f! c1 u( ?: i% k# E }
1 U1 J& P l% X8 K. f! L- v } p# k* p' b3 E9 Q2 u0 U n2 z: Q" r
bgR = '0000' + fadeOutColour.substring(1,3), u$ ?6 q; w, f! |
bgG = '0000' + fadeOutColour.substring(3,5)- \8 j3 c( |9 v. J
bgB = '0000' + fadeOutColour.substring(5,7)! `5 f9 @* M- c' F& s' q! ~
currR = new Array(numLinks); E. V" p, Y- D# V
currG = new Array(numLinks);
: T3 H/ t. C4 F3 G( @8 ] currB = new Array(numLinks);0 _$ N+ H& [- w. h) A& f
count = new Array(numLinks);& f+ d, h* G: v5 z
fadeOut = new Array(numLinks);8 v5 g0 [* e6 Y
continuous = new Array(numLinks);
: B2 V4 D+ S* w+ T6 @2 @ newColour = new Array(numLinks);
7 G# N S" ]! z% F; x tID = new Array(numLinks);
; I1 u& v1 T4 ~. L1 z redInterval = toDecimal(bgR) / numFadeLevels;' d0 q' c- u7 q0 o+ m
greenInterval = toDecimal(bgG) / numFadeLevels;
/ L; P5 q ^. \ blueInterval = toDecimal(bgB) / numFadeLevels;
6 x1 X7 z1 ^% ^7 P' s initArray(currR,numLinks,0);
5 ?5 `$ d/ x8 m. ]7 O8 Q initArray(currG,numLinks,0);! U4 o s" V2 J) I0 u: b
initArray(currB,numLinks,0);: j- C Q7 j1 \
initArray(count,numLinks,0);
# Q# Y: ? d( }0 s initArray(fadeOut,numLinks,true);
$ Z- Z6 s" O. l! @) n initArray(continuous,numLinks,true);
6 [2 P' ]! g! [} D4 i3 O, \! t5 I$ @( B
function startFade(id): ]- ]/ g8 i0 Q# ]) D1 n. u
{
7 W; y' C. n+ D8 z if(fadeOut[id] == true)
0 c# E* O4 K" `5 |3 V# w r { /*move colour towards background colour (increment)*/5 p, P) I* w) X8 N
currR[id] += redInterval;
5 b% o6 z! _8 x currG[id] += greenInterval;
2 c) R( j5 v$ R4 h( ` currB[id] += blueInterval;+ g5 W; G+ y% V& Q ~# T8 U- [
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( f' g* p( {5 a3 ^ if(++count[id] == numFadeLevels)
! Q1 K2 s- E, c& w {
: S% p3 l# X" J$ Z& W2 V fadeOut[id] = false;
, \5 L3 N0 f7 T" m8 a8 I$ k }+ \3 d& _/ b. B! ~
}$ ]# P; C5 O j( G) |
else
9 R Y g/ g2 c {* R8 X+ A& c" m3 ?9 M% W$ Y
currR[id] -= redInterval; | \+ G, L5 z7 o6 }: W/ l) M
+ f6 }, A3 H( D2 @: m i
currG[id] -= greenInterval;
- _$ @+ m, ~1 Z$ c! _1 c1 w$ K' ^1 A
currB[id] -= blueInterval;
3 S3 v; I. @5 k* r" c
/ e2 N% E0 W8 m newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 ]4 z8 e/ P% t* M4 b; H$ P0 j3 ]1 a$ W4 L
if(--count[id] == 0)
6 Q2 j. O) H: M0 Z; W: C; S& R: ^
{
- X1 C+ x, ^( k+ |1 t9 F
6 {) b6 V- [1 o, P$ G% E' s fadeOut[id] = true;
( U$ T1 p# c; |1 q( j1 ]/ K
* r1 ?' H/ m. v! X: T- B" ~" L }9 X! M1 W* G2 R5 [ Q8 _9 A0 S
( A! I0 m3 \- o" w- N% F0 F+ M/ X }0 O; |+ I0 i$ D$ m9 h$ ]: c9 Y. K
! N- J6 _. y4 Q& W ^# D) P if(continuous[id] == true) U- C9 g" A' z( [* W' b. i2 w
# v0 p, m. q) g3 X' i/ O. a {7 z- N/ f( i" _$ T' G! [
R1 m% U" j% C
document.getElementById(id).style.color = newColour[id]; 7 C- z0 T* N/ h( z
! l% t4 D8 l& P( ^/ v
}. w1 f; L2 D9 k; c, Y* ~+ q8 o
+ Z6 S& s1 t8 u W* n
else
4 r, U, W" f! e
! x- s9 \9 ^6 }% |7 n9 [4 ?8 ~ {
& |; z' E3 w$ L c# H6 u1 @; p- }5 D
0 U4 e" x: I% W& b document.getElementById(id).style.color = hoverColour;
' u' J! S; b% X" ?
! y. g% q9 ]0 u) L }. V: T! ~- z% j: @0 ]4 h+ R% @7 i
: e& ]/ `* B! I: T' o6 R
clearTimeout(tID[id]);2 z+ T7 I6 A( m7 r$ L- f
- f8 I9 G, W9 h( F
tID[id]=setTimeout('startFade(' + id + ')', rate);3 ?8 ]4 t9 R' o9 Y" X) N3 S
# a0 L& n( I4 q7 [; M7 _
}: Y0 c, r+ [ p% Z- V* B
* P1 l, j g8 G9 N+ c( q' a! Mfunction continueFade(id)
" @. i( s) v; U0 i* m/ ?3 u2 r5 A, w0 |1 c
{
. C$ z- n2 ?5 o* { _& q0 Z
8 y4 ~8 z& n/ P G* E3 P continuous[id] = true;0 B4 N; b( A% L. o- A
8 H! c- o0 r' N" ?0 M/ N}
3 N+ Y1 v* V7 X% v! ~5 ^- q. I2 B
; @2 B3 \* ]6 d9 ^% q5 wfunction stopFade(id). r, l; p S6 m b1 i
0 ~+ g( O- V: V# @7 a7 ]8 u7 h% |
{
. v/ p6 [+ P* I, g- y- m; s
) }9 `# y r; |% T6 ? continuous[id] = false;4 L. e R# `; O6 U4 B$ Y3 h" [
( _1 x" O5 k. z! M# \9 i1 a1 V
}! O( D6 [' I4 R3 k
" E. v; b9 @! X& p* Z' o
function StartTimers() j5 y. ~ ?( D6 d
8 C. d3 ~( R) B' _6 N/ H{ //set up an initial set of timers to start the shimmering effect3 p( h j8 j7 o5 c5 a( d
4 [+ e, ~2 v k, ~5 L, D' R& y
for(id=0; id<numLinks; id++)
0 u, C; @* n/ @9 g
x$ |2 `6 | Y. `1 H {- i" @- I9 ^! D# ^% }& J. @
- B) G* @" N& O0 Q
t=setTimeout('startFade(' + id + ')', id*100);
; b8 d- w0 T8 n! N1 D6 ^3 W" P+ V( b& D6 L& z+ p5 i
}* J' D7 [# f0 k6 {$ R, W
8 N+ L( z6 R' q; a* f2 B}
9 ?$ l D, c. R7 M# ~6 n) p4 M9 f5 E- d# s q" X. o
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ K' @. Z/ l ^! Z/ z- |
9 U7 P1 Q1 ^" `3 I6 ginitLinks('#FF0000', 6, '#FFCC77');- ~: C l0 V1 E2 b1 O0 K8 S
" K% y& S J6 U
//-->
& E# M4 b d* D" _% N7 ~
" A `4 s, P/ B</script>
9 n) \7 ~2 ^8 u8 k<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
! e( h, X2 \4 b, J8 J' A</a>
0 B6 s5 S4 n8 p9 ^" l- K4 I- ?<br>" E( H' {7 C. E" y# ]/ Q! E
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a> }1 g8 S* n: V) k" P, |: I
<br>) ]5 i& c. q- ]! _% D/ c
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
6 O& n7 O1 S. J! X* N<br>
) _* Z# P0 u6 J/ j8 B5 n/ [' W<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 ?2 X3 [9 q, F: c$ C5 I' @( E2 @9 s<br>
% j7 {& S8 _1 T1 ~" e<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. {) @4 {+ E+ d K: Z' ]; U
<br>
1 H, |. f6 n% d<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>+ {! W. g/ S8 g8 N- q# ?
<script language="javascript" type="text/javascript">3 a% g' P& e" X3 z/ Q( d' X% X
<!--8 A F: @) K/ k+ `; O
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
0 S, G: \1 q! j: O( K//-->' J x9 T8 v1 y& C4 M5 x
</script> |
|
发表于 2008-1-21 20:48
|