|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ a: v& w4 |8 z6 j# q6 M<!--% G5 N, H- I9 `& \# K) J
// convert a single digit (0 - 16) into hex; c9 a# O* Z* y% s+ k
function enHex(aDigit)2 ~6 m. n& s! ]% g
{; z, N( y$ q$ z
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! O& w6 ^, D- t; v* K2 O, E( M& }}: d0 o9 n; ?2 I/ G- g
// convert a hex digit into decimal3 @+ s8 @# V" T: ]$ q* |6 i
function deHex(aDigit)
% h3 d' G1 ]' z{
+ [9 v3 h. j9 \9 G8 Y return("0123456789ABCDEF".indexOf(aDigit))/ o6 K; e) `) [# W+ z2 m% w1 C0 S
}
$ H; i* O/ A" ]5 N
; X; X3 ]" W/ x7 @; L// Convert a 24bit number to hex
" p" P0 `' R4 _ E! [+ A. w( [function toHex(n)
: v4 ~0 S% R& E: y5 _8 Q{8 f/ C/ ^/ k* U% c
return (enHex((0xf00000 & n) >> 20) +
& E, p& Z( z' b" ?5 ~7 s enHex((0x0f0000 & n) >> 16) +
0 o0 A- h; D9 X, H) j( N) Q9 b7 D enHex((0x00f000 & n) >> 12) +* I7 v' z( Q1 Y
enHex((0x000f00 & n) >> 8) +
/ ^ l# o, e$ M2 a, B$ c$ k1 ` enHex((0x0000f0 & n) >> 4) +
/ R- C7 n" s% N* E6 B+ `0 G- ` enHex((0x00000f & n) >> 0))( E! w/ a5 c0 r: d0 t
}
* i7 r& k I/ g/ c7 a6 w5 N// Convert a six character hex to decimal
, b0 o# p6 J7 |: N6 F' F' p! ffunction toDecimal(hexNum)
, J6 v, r6 G5 C, B' W{, ^5 M- i% q! ^) I* a
var tmp = ""+hexNum.toUpperCase()- Z2 z' k- O+ s7 W+ A
while (tmp.length < 6) tmp = "0"+tmp- s- ?+ Y S: A' \' Y- s! h9 F
return ((deHex(tmp.substring(0,1)) << 20) +
, Y* v+ x, q' |2 o. l( H (deHex(tmp.substring(1,2)) << 16) +
9 Y+ `+ t5 u! U, [( F (deHex(tmp.substring(2,3)) << 12) +% `% l4 c& a7 y& |3 D
(deHex(tmp.substring(3,4)) << 8) +* y$ B8 H- `- g5 E& E2 q
(deHex(tmp.substring(4,5)) << 4) +
$ Y5 X3 c9 b# e, a( w; | (deHex(tmp.substring(5,6))))2 ~# a" f, D9 N: {5 f9 N
}- S3 I& Z0 u+ ^0 o
///////////////////Shimmering Links/////////////////////
j( c8 U. k( w1 E! x' G//global variables3 V7 }% W' s. H; ?+ |* O) i
var hoverColour5 R2 V$ C; G* _5 F. Z D$ ^
var numLinks;
+ U8 T A8 {" O* O2 `" Vvar rate;2 E- M! c& c5 \6 K% b& P
var numFadeLevels;
8 H0 l6 }9 F& b$ s. `$ }" Evar bgR;$ K U) Y/ o/ a5 N
var bgG;1 |6 y) _* d' N/ H4 z
var bgB;5 \. e) W# `1 a: t! F* j9 y
var currR;
% N7 w) z6 E9 E; d7 jvar currG;
( e$ V% [/ Z/ Y4 V. X+ }var currB;
' l3 }' y6 D( l: V* P$ Ivar count;* g0 S& J5 j$ { E. a7 l! b7 X
var fadeOut;& V2 ^& u( V; U' B
var continuous;
% D' O" c7 [/ {+ ]4 k; xvar newColour;6 p* p1 u- E& U# v! e, v+ |; W
var tID;
& S b: y" T/ ^var redInterval;
9 Y; q l) z5 N3 o5 A# o" e5 Tvar greenInterval;
, o* H$ d! {5 K6 ~+ ?0 Zvar blueInterval; C4 W- E; q2 D) s# M2 e
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour). R" f' k) w1 d# H. A
{) V- m) U( O2 Q) n3 q$ U
hoverColour = mouseOverColour;% V8 R8 Z0 R' z4 m9 f3 ? @
numLinks = numberOfLinks;
! i7 V# M( }" v; n7 h5 i' [+ m rate = 1;
+ L5 W* v4 |/ v+ K numFadeLevels = 30;1 n; {% F% U7 u& `
function initArray(theArray, length, val)" J+ T6 A2 \8 i; x; h
{
; R! I5 F8 R4 H' P for(i=0;i<length;i++)
& y" J, n# ~/ ? {
( p) T ], ]9 [ Z theArray = val;
/ U. t" {& {, u5 _0 b9 [! Z$ G5 o }: u3 k: \' a" P* t9 e8 o [
}
+ @* Y |% F: k# N l bgR = '0000' + fadeOutColour.substring(1,3)- ~% M( b- Y" V6 [% E8 }) q
bgG = '0000' + fadeOutColour.substring(3,5)
- o; a; g$ E4 j( C, B3 @/ v, O bgB = '0000' + fadeOutColour.substring(5,7)3 e% v: D! [! P' n
currR = new Array(numLinks);
' _- d5 A7 {' D8 A4 K* g currG = new Array(numLinks);
( ^2 L1 @+ a" ^2 r0 y currB = new Array(numLinks);: l! c" _1 R4 o3 X: b
count = new Array(numLinks);
& O9 a& d$ N* ? fadeOut = new Array(numLinks);
/ P8 ^7 C" c# t8 |1 c% h1 M continuous = new Array(numLinks);
# P$ c# n0 b' A+ h" I5 X' r. y newColour = new Array(numLinks);
; p' q3 r0 n% D1 B9 K tID = new Array(numLinks);
- |, g' o" |5 ^4 P redInterval = toDecimal(bgR) / numFadeLevels;: i' W& b% v. o# y4 J9 f8 q
greenInterval = toDecimal(bgG) / numFadeLevels;
2 `+ J1 T5 n4 ^" h# H blueInterval = toDecimal(bgB) / numFadeLevels;7 P; K, n3 Y+ j2 e( i7 }* u) R
initArray(currR,numLinks,0);' L7 M* W) d% o7 G* ]( h. B/ S
initArray(currG,numLinks,0);
% \; g/ W% A% S6 H# K" R1 e4 U initArray(currB,numLinks,0);
2 X7 I C( [ J+ p/ C initArray(count,numLinks,0);: F- O) @4 B6 N4 Q- l
initArray(fadeOut,numLinks,true);
1 _- l9 j) h% k6 s. G initArray(continuous,numLinks,true);" u8 o1 \4 ?: y: `$ r. t5 I/ U
} * l+ H* X8 C/ `4 l6 c# `
function startFade(id)6 I" t7 m q4 q) C, K
{5 v& s" u' V+ \+ `& r8 ?/ j
if(fadeOut[id] == true)
8 D3 z! P9 f, O1 P$ p& c { /*move colour towards background colour (increment)*/) \; U- Y* z9 S
currR[id] += redInterval;* ]0 ]" x/ H* C j- r0 h
currG[id] += greenInterval;3 g: f3 z% y' ]( S8 Z, ]7 o
currB[id] += blueInterval;% o" m9 z( q9 {9 ^ l7 E& G/ O/ j
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 [8 P. b) ?' Z" _9 Y' N) G ^, l if(++count[id] == numFadeLevels) U+ l: A/ C0 N: u) S- i
{
( L/ H& }" X8 p, i" M/ x fadeOut[id] = false;
! ^. r( Q7 A( r! `2 V4 k }
4 D* `- \5 Q' U7 }' r8 c/ i+ Y }' t. C2 k+ ~+ \7 P( L
else
4 r1 P$ g3 U( [7 T* d# p$ r! { {
3 ?5 ]; b) h3 a( Q$ r currR[id] -= redInterval;, _; ?- c, T7 @7 W- V
* M4 | U9 ^) O, N/ u9 |6 `1 H# I currG[id] -= greenInterval;
" q6 {7 @0 k7 x( y" C; z& w* I1 _7 P" z" Z* c \. k8 G4 ^0 `. A! A
currB[id] -= blueInterval;* n- Y+ y' J- c4 i% z
1 {5 Y& G% v9 E+ d. Q newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 A+ Z6 q" x9 m$ x$ c* g5 k, c, w5 C: Z7 d; U; @" K: N+ |! C
if(--count[id] == 0)2 w b0 a6 c) S1 C9 {9 o
, j& }- Z+ K( r' ?; P
{2 W3 ]. s! W. d7 w7 ~( m& j, j
) \/ ~# D4 c6 q8 j/ {* R/ C/ Y, ~
fadeOut[id] = true;+ Y N* B5 o7 D. J
% a3 M E. V/ |* @ }7 j4 c" j% t# ~ f# r$ P$ h
/ x7 F* f$ R, A }
; F) q/ k% p' S$ c& n6 v
& [3 @: j" z# P0 n" }0 Q; N% o7 ^ if(continuous[id] == true)
8 C9 F/ R2 F3 Q- Z
7 z* I& `2 P1 ? |' ^. p! i {1 F) @3 C3 d2 l% U8 ?
1 _+ c- `' {+ t2 t1 Z. g8 z document.getElementById(id).style.color = newColour[id];
* @( [; } G7 e. C
) u( b/ r" p/ `6 T" ]2 G, l }
' p( a5 n- t6 V4 ?' {
% a( G$ d* u( D1 C. V) z else) q+ N/ p* P8 z
$ i' A& i8 N% D& p {3 J$ D7 G" E' L3 I5 m; Q5 e. s
5 ^1 m: X) _, i+ { document.getElementById(id).style.color = hoverColour;& x$ z: h2 ^6 S
0 `; c1 H- }6 X* E. }7 Q }% t( {7 M% n& S
5 m: j$ N1 ?/ e, Q$ ]6 W
clearTimeout(tID[id]);4 U# o$ `6 M4 j' k I6 ^3 d, W& E
# L4 s% A5 {0 c7 `- _1 i tID[id]=setTimeout('startFade(' + id + ')', rate);( j# k% N/ r1 M" z3 Z/ T
1 f& ^! G# q$ ^% B V8 g' |/ a& a
}: Q9 X# K5 D$ l, @. L
6 A5 g( Z7 V3 K& Q) S: a
function continueFade(id)3 E' K: H1 ] \+ L @8 E. I8 j7 ?: F E
4 x( d( x% k$ L7 t6 G( d1 Y* o) l& G
{6 D7 B# o2 d/ U
' X8 n- N* z0 u, }0 I* R# _
continuous[id] = true;
3 Q4 J5 e" X$ n/ x2 L7 N* [( R& C; @
4 Z3 Y% Y5 ]% K6 v" `5 u: h}
' `; s% B8 h/ M8 H( E! U+ E, D* q% z: w$ A/ h0 Z7 N6 v6 A
function stopFade(id)% P: ]4 Z1 K5 a* B$ V
7 H( E4 }! }7 t{# x: ?5 X7 _3 w* |- T2 C2 q
7 r0 j9 j/ d! t2 r4 s; Y; e continuous[id] = false;) b. a9 v, D' Y$ y/ O
- l- ?0 y8 m4 t* \' E2 h}
2 k% M( A# m. ^" X
% k! q7 @2 ~2 Ufunction StartTimers()4 v1 _" Q9 y* L9 H c; y5 Z
: {/ I% Z' M, E) Q
{ //set up an initial set of timers to start the shimmering effect
' P6 z4 ~! N- S$ c/ O
$ c, t* A3 k4 o6 w for(id=0; id<numLinks; id++)
7 a) |. h$ O k, [% L+ z Y3 Y+ _8 @2 M' R' A7 ^( d" Y( x; N; O$ {( T' u6 `
{( O+ W* F' `" O7 O- N4 H
$ V+ v$ \* p: q4 U t=setTimeout('startFade(' + id + ')', id*100);
- b* F/ [+ C1 }2 h1 k' N; a7 o. S) s" u+ k$ q' P5 L
}, L# \; O: P! ]+ H1 L& S
) o- W2 L, U9 m+ f9 ~# G1 J
}
' O5 l( p* k$ m( b0 G1 v
V+ H( C- f9 L/ W" u//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
5 e: v) M% I C7 G+ X( f G3 E* K6 V- z
initLinks('#FF0000', 6, '#FFCC77');1 Q( D3 O6 N9 ]
, G! _) O8 e% X K. ]//-->% C& K5 F" w2 b9 v8 ~" c: G, ~+ D
- _( d! d: u a* Q' w. C</script>
* w' \$ N5 z2 d# B( g* g7 e4 p1 U<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元. D6 u {' `3 C6 p5 j
</a>
9 V; I9 E/ E% U2 b' ?6 u<br>
3 H* @0 x2 a e7 r, x<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>' C) z4 X s4 {4 N
<br>
& s9 K7 w; J+ [2 B+ h6 u* Y( L<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
# [( ?, q& n, c7 Q3 t9 p" d6 v<br> 9 T {. Q6 {! e4 i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
. A( [# p# g- R* ?+ ]<br>
" F. u* w# F7 s: H+ P4 L" O' `<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>! L- Y8 \3 k/ r
<br>
! ^ Q! Z* Z( T4 s8 {* c" z8 X: C/ ]/ K3 h<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ }% z6 N% l0 V" u
<script language="javascript" type="text/javascript">
" N& ~* E% G q( D<!--
9 j& i+ V& M M/ WsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering. D6 e) G: [# y2 ^' w
//-->
5 ~1 c& i2 R8 i: G6 M</script> |
|
发表于 2008-1-21 20:48
|