|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
, S& A. L1 |5 V<!--. M# \4 M2 B n
// convert a single digit (0 - 16) into hex
" h. O: V3 N0 N9 z! s4 Kfunction enHex(aDigit)* R+ e6 S* [% _$ Y6 w( L
{
. @% f+ }/ h1 h1 i0 v return("0123456789ABCDEF".substring(aDigit, aDigit+1))
4 }8 F+ \; A% ~' o& ~}/ b7 V5 b; Y0 E5 z* o! A! ]( l
// convert a hex digit into decimal
* _1 s7 u( j4 Z& |8 P4 bfunction deHex(aDigit); @! \6 E6 }5 m0 C/ p
{
6 F; q( C9 n, g return("0123456789ABCDEF".indexOf(aDigit))
: i- \, o2 g! f7 N) Y}9 W2 N* M# Q% z
! S9 t7 J! F( n. e3 @# x// Convert a 24bit number to hex" V+ \1 M) \$ Q9 X. n
function toHex(n)3 t- r c( K( C: F( k, J
{
2 z: `3 G W+ T2 i/ I( I0 [ return (enHex((0xf00000 & n) >> 20) +/ _6 _; s- z" {- @7 I/ \
enHex((0x0f0000 & n) >> 16) +
2 X* I! D" r' y$ V2 i/ L1 {, H enHex((0x00f000 & n) >> 12) +
/ s& L0 `$ |. D/ A enHex((0x000f00 & n) >> 8) ++ H$ b3 v3 i$ i; ?1 [0 z0 q
enHex((0x0000f0 & n) >> 4) +1 ~' t, W+ V/ K* r5 `9 v2 a3 R
enHex((0x00000f & n) >> 0))
* B+ d: r9 L& i# ] q. S}
8 g( z$ R1 n2 ~, {% a// Convert a six character hex to decimal
A4 p' K! D! c% X h6 J8 Bfunction toDecimal(hexNum)! L5 }1 k- G& e# a# N( G
{+ k6 w0 t. Y. t; Y) p0 q" {3 x! C7 r
var tmp = ""+hexNum.toUpperCase()
& e x/ R x( c0 q while (tmp.length < 6) tmp = "0"+tmp
# n+ ?' M/ G3 N2 u6 E return ((deHex(tmp.substring(0,1)) << 20) +
9 Q" h# p7 e1 G1 z7 M (deHex(tmp.substring(1,2)) << 16) + * @8 \/ \% K+ x: `2 d5 x0 p; ?
(deHex(tmp.substring(2,3)) << 12) +
5 A6 p$ N: Z) L9 D7 ~! B8 E, N (deHex(tmp.substring(3,4)) << 8) +
, N, v% t% A$ k$ ?" ` (deHex(tmp.substring(4,5)) << 4) +
5 }+ |) }. X* {' c' f& i (deHex(tmp.substring(5,6))))
- ~8 k9 A4 i- H1 |! ?}
& P9 ?) _' z$ {$ a6 D///////////////////Shimmering Links/////////////////////( M0 U: u% T! _! E+ j$ Y j4 Z
//global variables
- S( \) z6 `# Q% x! q0 H& mvar hoverColour
4 a8 U1 f8 c% O1 q& uvar numLinks;0 x3 T# c6 m( L( l8 {0 g
var rate;
$ g0 _0 P" w5 O8 A( u# S- @8 rvar numFadeLevels;& c% h" P! ]1 w
var bgR;, {0 W' R# n/ b1 i: x
var bgG;
0 y% u1 p2 q* U ivar bgB;6 }! T3 m: C6 @" u. X7 N
var currR;) T* i4 E0 M* ?( o! i% R7 m: a
var currG;
- G# Z/ L- E7 ~- J# avar currB;' L+ o0 k, A0 S7 }
var count;& O) v, V" |9 h) G7 R! {8 ~9 c7 e9 v
var fadeOut;
! R8 n* U6 ?6 w( y$ M! lvar continuous;
4 m3 u% i8 l) }" r( a% `var newColour;
# N: H; q, ~% ^: v) M- qvar tID;' ^2 \$ n3 U I3 R7 v0 l$ r) A& _
var redInterval;
5 {8 v8 u# {( ~var greenInterval;
" A, w$ o" I( h& N/ ?var blueInterval;: I/ {( z1 F; z8 c# d. t% \1 G/ G( I
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
6 K9 j4 f) v& \8 W1 w9 k1 [3 y{1 V: ~9 f; ]/ f* B! L4 D0 M/ ~
hoverColour = mouseOverColour;4 Z/ T- X1 u( j# N9 H3 j2 K+ |% h
numLinks = numberOfLinks;
9 e+ G% s/ I4 f( v# q; [ rate = 1;
6 g5 }$ H8 [% ]' i5 s5 a numFadeLevels = 30;8 }4 t9 v' G( w! j6 f
function initArray(theArray, length, val)
& C& |5 V7 ~- b* r( u# ]+ u) ^ {) p2 M: R' G* P8 c8 \( g f
for(i=0;i<length;i++)
1 z6 A8 H5 B$ x7 n6 E0 t5 z5 W q {' w) @# ~$ U# Q3 R! s* G7 Q
theArray = val;
1 b/ G1 ?, r) a3 @8 }* X }
- n8 W! o& I' r6 x, ^ }# }2 y4 I% @; ^( r' E$ j0 D9 e( Q" u
bgR = '0000' + fadeOutColour.substring(1,3): [$ I: G% _8 j# |3 `
bgG = '0000' + fadeOutColour.substring(3,5)
8 \. R5 L' X% M bgB = '0000' + fadeOutColour.substring(5,7)
- b% T4 g, {! J) l5 d currR = new Array(numLinks);
6 h3 i1 ]) E4 P currG = new Array(numLinks);
% n* k/ E8 [) p4 p+ [: Y currB = new Array(numLinks);- T! e& V+ a4 i
count = new Array(numLinks);
9 E, y7 I& P3 B5 H! R+ X$ r- s1 { fadeOut = new Array(numLinks);5 C6 P7 ~$ O$ k ?5 g
continuous = new Array(numLinks);
$ p1 }) @5 b% |5 I/ j/ h newColour = new Array(numLinks);, L, L ^ [1 p1 _7 ?
tID = new Array(numLinks);
4 `* X1 ?% G6 x. h9 J& _ redInterval = toDecimal(bgR) / numFadeLevels;
, ]4 {" T4 M( V! m# T greenInterval = toDecimal(bgG) / numFadeLevels;% H1 Y5 ?3 Z/ E" K8 O
blueInterval = toDecimal(bgB) / numFadeLevels;" a8 d# \ r$ c( h2 |- V
initArray(currR,numLinks,0);4 ?" a: ?, ~! M9 g' }" l( v
initArray(currG,numLinks,0);2 Y- ]8 a7 R }3 ^
initArray(currB,numLinks,0);: j& q e/ H- G/ W8 b
initArray(count,numLinks,0);( k Q% B5 d' G4 G# T Y+ ?8 Y& T
initArray(fadeOut,numLinks,true);* y9 S+ k0 d2 o6 t, ^: E
initArray(continuous,numLinks,true);. v3 {% Y7 c# V' }) Y
}
. k1 {. c7 G& O- M) P7 w" }function startFade(id)8 |' ?% G. J9 }! K
{
! g) n; f! ^8 I if(fadeOut[id] == true)
, d6 x6 A5 I, U* A" n7 \ { /*move colour towards background colour (increment)*/
* Y+ X6 @" Q0 v8 e" u/ c, d: P0 Q currR[id] += redInterval;
* @9 M# \( b6 C5 p currG[id] += greenInterval;! ]2 K; f) Z. _2 G
currB[id] += blueInterval;9 g% ?/ L+ @( S
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# {; {* ^3 A; j! d) U) x3 g if(++count[id] == numFadeLevels); T9 G0 g4 e1 _: a- V# p- b! F) X
{' p, y" r. h+ U5 r- m n
fadeOut[id] = false;
& v1 H y) V/ C }
1 ~1 a% q1 R# c2 v0 k" d8 C }8 d. F ^# t0 c' \
else
8 P& `; s/ J! B9 b {
& O9 G, _+ K6 J2 O) c currR[id] -= redInterval;
$ g) d) R; Z4 i% x- I1 `1 M( A" i" M; W6 D4 c; m" i
currG[id] -= greenInterval;9 O2 w4 ]* s2 l5 }" V
- r: T" H2 _9 v) P7 A& P2 f/ \
currB[id] -= blueInterval;
- R) ^5 s6 m0 Z ~& i" a/ [. O8 y/ J5 R2 v
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- N0 R7 w2 g2 H4 z* m8 [
+ {6 y4 w: X \ if(--count[id] == 0)
0 Q# J3 M4 [+ ^) D% ^! B2 g2 {: _6 Y$ g& M& I
{
2 ?3 w, N# p* t6 X Z' b. z0 _( i( r# S: d& x* e
fadeOut[id] = true;
& ?+ V3 `7 y% e
/ d9 h H* P/ \' j' @# D$ d' l* X }
: O5 @- @, S. }) j( e9 c
( x# e9 l, H( n5 r, n0 e; k6 f }7 ]5 a- ?, b! c" I h, C8 X
5 |. w$ z$ g1 q if(continuous[id] == true)
8 b) E# X! c% Q- R& O( F' B$ @! S/ X/ C' e- B
{
. _2 W* X. d: w5 s$ V
; @$ T& e; f& H4 L document.getElementById(id).style.color = newColour[id];
( k; }# `6 T% w5 q2 J4 R; L) l* A: J, v) x7 ~/ ^/ ^) {
}8 a& }# P3 H# n T" x( L `4 g* C! X
! Z7 L" b3 Z, G; V else% K6 [% M' M. W# T* D3 b q6 w+ b
/ ?: t( Q2 h. }7 X2 P& B; f
{
& d- m5 N2 G* b0 G9 D5 I0 _! l% u7 i$ V
document.getElementById(id).style.color = hoverColour;/ H% s* R* v. A# t; W. \
7 N% F! Z$ j8 y; S8 j# K
}
$ ?# Y1 X- i; b3 g& d9 u
! ]8 X0 b& P9 P/ I4 L; u clearTimeout(tID[id]);* @3 t( L: [1 ~
& M" W6 S5 ?- I9 Y1 x
tID[id]=setTimeout('startFade(' + id + ')', rate);5 I+ s# _7 B6 T' B7 d4 `
+ W6 u3 Q. ]9 [( x* X. \
}& V5 Q) F0 S# N+ q6 X: f! l
- U7 _& n4 c8 b2 ]4 R1 ~( B6 s
function continueFade(id)
5 T7 @4 d$ X. U# L
6 F Q8 H$ n0 c7 V; ?6 v' o, q. D7 u{
- A; M; S" r1 `+ H3 F/ x- `! e q) }# i8 `
continuous[id] = true;2 D) f% w: P3 h3 b" }! n* r" w
1 Q& `% x: _0 U* ]- M" t
}% r5 u# o) W+ ~" k7 c7 l
! J" P7 E! Z" j$ e" J
function stopFade(id)
4 R2 l$ ~* `4 E/ s
& t- T$ u; y7 q5 j$ R' H) E$ @; t L{2 \* i8 G, v- Z c
2 d+ h$ \- T3 q6 o0 q
continuous[id] = false;7 O* O; ~2 E$ U8 s- N/ e7 E! N
5 b1 h# Z# S/ @3 b" Y}. A6 {6 e. b- M. q, R5 w5 E
% V/ {3 m. ]" A3 z. `2 K6 U
function StartTimers()# K5 B- y1 p$ B6 c5 [
: b) h2 @4 Z9 q4 K. g- l
{ //set up an initial set of timers to start the shimmering effect
N& d$ T# s" \2 R" i: ^ l! ]; g( U' S/ k/ v9 {
for(id=0; id<numLinks; id++)
1 e) L3 H& y# g( ^' J/ c1 g" b) b! W' A0 z! w* ]' ?5 w# A
{* h+ z6 l& _6 o( H G# i6 ?
! g8 M+ v4 J, @7 i/ c; U
t=setTimeout('startFade(' + id + ')', id*100);
l& q% N0 D& c( ~2 e5 p
' p$ Z4 N9 D/ Q [6 N }, r9 f* ^+ z$ T, r, G* ?+ c
; d% s: ?0 B% ]! z8 n
}' o# D8 M# L* M+ `! n' i
3 {. e% p g1 c2 W8 k I. t; r
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'). s& T9 A& q/ Z( {) q1 t
3 w2 U/ z/ }% N. h3 I/ D' x% m6 f! t8 k
initLinks('#FF0000', 6, '#FFCC77');
* n+ G8 z$ J) I
% c d& C s+ r' `8 I6 z. H# [' |8 a//-->
2 i; x6 M* o( b/ p7 g) n- D$ f9 K# T3 T: Y0 F& ? c' L
</script>! \1 p3 N! l$ ~/ v" Q T
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元8 V- Y+ t% m6 |3 ?. g+ `8 ^3 Q
</a>+ g" a9 Y2 d& [
<br>
8 U+ g, H8 K v* f) |<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
( u3 \ U6 C; p+ }. S5 d<br>
; v! _& ~/ I3 d9 N<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>* u k K& k; ]0 J: G* ?
<br> 0 W, x7 R% @5 E/ s% U5 H$ b' S1 u0 l
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>9 ~6 k) y+ g8 Q9 |0 t5 R* p" E
<br>9 m7 T+ \' C# A1 r1 k
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>; W. ~/ `( x2 N6 v6 ^
<br>
3 j2 g! H- w( N4 ^4 A& `% L" e<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
. O& v3 b0 K3 z$ D9 o, H. _<script language="javascript" type="text/javascript">8 u0 n2 w9 c7 D4 }! y/ j
<!--* \5 z; i0 [, m6 u: q0 D; Z
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 Y' Y, \ M1 y: [2 C( j5 U' V
//-->
& ?5 o$ T) u% ~1 T</script> |
|
发表于 2008-1-21 20:48
|