|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
$ {( v' b3 Z+ B) T' X+ i5 `/ s<!--) z! q" H& b# [( u2 n# [
// convert a single digit (0 - 16) into hex* p7 X0 f0 b+ W# J5 P
function enHex(aDigit), d# R% ? l, a% L: |3 I0 N, g& F
{, B5 j: f& m) [4 `
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
4 o6 I3 Z* t$ }2 @* q}
2 Y3 S8 V) V* \: F6 ^: b7 W: ~* b// convert a hex digit into decimal
+ f' ?& | ^( s3 Y% ^function deHex(aDigit)
' ]2 x) g. z) U" i( K% d{
/ k& p! e& R) y+ O% } return("0123456789ABCDEF".indexOf(aDigit))
0 W! b' T7 c) y7 b+ B5 o}
/ u C. |! W/ M f9 y" ]( j0 \: C/ q- p6 i7 X* }5 d
// Convert a 24bit number to hex8 G/ m/ T1 Z$ w1 i1 `
function toHex(n): [" w. @2 r& V. F0 P. Q
{
6 O9 f) B# s$ e8 V return (enHex((0xf00000 & n) >> 20) +
0 Z \. [0 n7 h6 c# ~ enHex((0x0f0000 & n) >> 16) +- Y7 h* c/ O; t
enHex((0x00f000 & n) >> 12) +
( K5 `5 T" A- T enHex((0x000f00 & n) >> 8) +! M2 M9 A. p3 w- e, Q
enHex((0x0000f0 & n) >> 4) +
$ Q6 \3 }% y6 M+ @# R0 ], f+ K enHex((0x00000f & n) >> 0))
: t6 ~7 {- d/ D1 p/ P+ [4 X3 `2 d}
$ P1 E% N/ a, D, j// Convert a six character hex to decimal. O3 C" I5 B& v$ v2 V
function toDecimal(hexNum)+ U% R7 ^5 p) n* V& j$ Z6 M2 X% }
{
5 I9 H" m. T u# q var tmp = ""+hexNum.toUpperCase()
% @* p u$ Y0 L; U9 l" J3 g0 W1 b while (tmp.length < 6) tmp = "0"+tmp
. s7 Q9 f' A% _ return ((deHex(tmp.substring(0,1)) << 20) +
0 o) i5 [+ e4 C0 p% W% T/ C (deHex(tmp.substring(1,2)) << 16) + - d; g* W- l2 M" {$ C, c8 z
(deHex(tmp.substring(2,3)) << 12) +4 i6 M: _ _8 c3 A$ H! J
(deHex(tmp.substring(3,4)) << 8) +
F: l- x! B8 }2 W* J% `- F7 S (deHex(tmp.substring(4,5)) << 4) +" d( S( y' |0 d6 @6 J- v
(deHex(tmp.substring(5,6)))): {7 S: ?( J# r7 l( N
}+ i2 V; t% W! f- n' N! j
///////////////////Shimmering Links/////////////////////
, Z# o* |' G) K& p% _* a+ I. `. d//global variables6 S( t \8 _- \+ ?% o) i S
var hoverColour. N1 W p4 [4 X
var numLinks;8 R" ]! @! ]* J4 m
var rate;
" K i+ w0 T- {6 uvar numFadeLevels;
" u% W2 L6 ^3 z+ s8 r+ A! l5 W* kvar bgR;) J c8 w+ V- G* R
var bgG;
& Z( U0 L% p8 `! avar bgB;( ^; Q. H% p4 N8 G( T
var currR;
& @/ N+ c1 ^/ d6 H+ Avar currG;
. V7 ?7 p5 R4 J4 n: z: @! zvar currB;5 o, Z" g6 Q; x4 W- K
var count;7 i3 }$ b# t+ w. {! D0 |8 L
var fadeOut;
) z! B) K( B: L. @( @var continuous;
6 c c( e' E9 t2 |6 v# pvar newColour;! T7 t" M2 [ F* f
var tID;$ q0 }$ I& P+ }% S1 L7 S/ L1 Q
var redInterval;
4 O* H/ D Z8 c8 \3 n, W/ V2 g xvar greenInterval;
9 G0 D N; n' P% `var blueInterval;
9 e* y% A; _, {; bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& u I/ F1 B* s{
, z8 A9 j: {, h; ?: | hoverColour = mouseOverColour;2 x' T+ i! X7 {; }$ j. ?: r6 [
numLinks = numberOfLinks;
N$ Z8 ]! P6 G# ^* t b rate = 1;
+ Z; A% M9 X. l% x numFadeLevels = 30;' L/ }6 Y# P: U% j0 c
function initArray(theArray, length, val)
' Y; Y- `' s0 A4 l) n {+ Y6 X2 E, X$ v7 d2 @6 T' `
for(i=0;i<length;i++), A. |9 f! A- Z6 z. D, g* [4 y9 c" }
{. R+ n' K. F- r! L" z
theArray = val;
) D; \. s- @) k! W3 \$ k }
- o7 V9 g/ @5 b: I8 z" l5 c3 p }, t4 h* O/ B: B3 B
bgR = '0000' + fadeOutColour.substring(1,3); b3 r4 ], Y+ x, Z1 x
bgG = '0000' + fadeOutColour.substring(3,5)' v1 ^" T; t' k
bgB = '0000' + fadeOutColour.substring(5,7)9 b: t: w* I+ y4 K- h
currR = new Array(numLinks);3 |/ d; r- T) x1 J
currG = new Array(numLinks);
3 L, }2 b! }! k' ~0 O2 O currB = new Array(numLinks);. B) K% H/ C! u& _8 z/ P; B9 N8 Z
count = new Array(numLinks);5 R$ D$ `% `/ b9 R7 v W
fadeOut = new Array(numLinks);$ [: y0 O+ N k* q2 O
continuous = new Array(numLinks);* ?3 _& U8 L: z9 `' }6 H
newColour = new Array(numLinks);
2 W! x- C6 _+ C: L1 I/ I8 ] tID = new Array(numLinks);
( s; n+ |: ~9 n redInterval = toDecimal(bgR) / numFadeLevels;
7 `$ V2 I) O- v- a" v8 P greenInterval = toDecimal(bgG) / numFadeLevels;
3 T8 b& F, ?& K. x' ? blueInterval = toDecimal(bgB) / numFadeLevels;( a8 V( I4 q T& K, {
initArray(currR,numLinks,0);* j0 t' x9 W6 F5 {6 B, m
initArray(currG,numLinks,0);
0 T+ m* ?/ D" n* G! ^ initArray(currB,numLinks,0);
, Y X1 e3 i) v+ m+ Y" Q9 [$ I. u4 Z initArray(count,numLinks,0);! R( s9 [& J' j4 {8 N. J8 m+ M; Y
initArray(fadeOut,numLinks,true);
& B/ ?4 k" C2 x t7 n+ X7 Y' Y initArray(continuous,numLinks,true);
$ O' A. V9 w" G) U} 5 E" p* L# D9 _3 j8 S' c* {
function startFade(id)
2 Y7 ~ N( e2 Y1 W5 l( ^{
% w" U1 h4 Y& |. V if(fadeOut[id] == true)
) F5 Y! E% o, y6 R; {; n2 @ { /*move colour towards background colour (increment)*/, J! M6 Y) T; C- u d' E
currR[id] += redInterval;
0 b5 d3 I S$ z7 u* { currG[id] += greenInterval;
! J/ ^" g. B1 R! I* H2 M currB[id] += blueInterval;
% ^; s; I- W( R1 c7 C1 X* [0 ~ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& [4 b0 b$ [7 y6 j* p. @: m; Q E if(++count[id] == numFadeLevels) ?3 \& @5 F8 x
{6 Z/ e. T$ h2 ~- ^; P+ W
fadeOut[id] = false;$ Q; i& a7 ]' z6 V& a$ ` g# {
}) `" R* j; ^3 K5 P2 F8 m
}- O/ ^/ h. K) I
else
! g. v0 `2 u4 t {
8 g9 [9 ^% S$ J' c currR[id] -= redInterval;
8 U; Z( b# Q- T- o& Z% C8 w- o2 o" L0 v( `+ a5 l
currG[id] -= greenInterval;( E+ O& q' U5 x2 B
3 X" _9 e* ^; K7 Y! `
currB[id] -= blueInterval;! h6 `" M' `8 }% S( @
; F# R3 O6 w& Z5 [2 I
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: W2 h9 `2 T- n! }
7 K+ r5 s& U; }% Q) }! ~ if(--count[id] == 0)/ @% `5 q0 y& m/ D
0 O% u: X% T* m' \" y- |
{
( |0 u. R1 g. n1 X; n2 p4 g0 w, T/ P4 D, v5 `/ G
fadeOut[id] = true;0 {) d& y2 g8 O7 A7 ~
9 h5 p0 f; r& _& M0 G0 p ~ h }0 d r ]1 @8 \" B0 W# }
. \3 ?! E$ a q( M5 }8 ~. y6 | }
9 _; W) u, R) h$ m t; C' C
N: w1 e* ^2 N/ } if(continuous[id] == true)
% S9 c+ |9 Z" m X: p4 e. a0 i9 [# b% W# J/ ?3 ~
{' h% ~- A9 e( w1 ?+ y4 A7 s
m' G! Y5 a4 s) F W+ V, E document.getElementById(id).style.color = newColour[id];
" N- n+ K2 i: L2 _
' [/ f1 J( |0 L2 R5 G; ?4 ` }+ J7 L1 n) e( Z! b5 s b' P
! ]" P1 W; b! @: M1 q4 [; x
else
/ @$ G/ m6 I7 T8 C2 K. R- o" K$ [( T: Y1 h$ R
{& c' S; F0 `, R
: j+ M8 Z2 m& \
document.getElementById(id).style.color = hoverColour;& L0 L3 k1 T5 L
# K7 X+ c& _/ X- @' ` }
) {& B+ e& z# D8 P( {. I, ~! }9 E. H: n) y8 ^
clearTimeout(tID[id]);
! d# y3 [% |$ M# S* U* q
% w& A) m+ x [* k' p' D tID[id]=setTimeout('startFade(' + id + ')', rate);0 J- K# d5 l/ b6 G
2 W4 e! p2 m/ i( \' L
}
1 y+ s* E3 h, f6 g g' h) ]9 m* I- P. @+ Y$ l n
function continueFade(id)
0 K0 h9 Z% m2 @2 G3 }+ l, n0 E6 F& i! k
& o% M; p$ D, p9 b" K% Z& H{
$ i* `+ u( G4 I) m, F
- ^" s8 {$ b8 f- Y/ x$ p continuous[id] = true;
7 | w2 A4 T$ k2 P- _5 E0 k: V& F( _7 x8 T7 r- h7 g
}4 v; l* z; E5 [' ?) R+ z5 n
: w+ i$ M& ?& [3 b" T( Lfunction stopFade(id)
1 A! n9 r. ?* l) A$ o$ ^3 L5 [% ]' A5 V
1 Z. I% l/ u4 ^9 R6 Y{
; V6 w( \6 g# v" g+ b1 M
! H/ W6 `$ S% |; E9 w continuous[id] = false;( `6 g& b" W' j% {1 F/ V6 ]& F
* f! [) v* [5 W8 @7 `/ o
}3 z5 u: x' ]: S2 `- h) ?1 l3 l
# T- P8 O: q3 e2 s. T$ n! @# Efunction StartTimers(). M" z! ]- g* @$ k
; N+ ]- d+ _. [ }* d
{ //set up an initial set of timers to start the shimmering effect
+ i$ B3 R. W% K$ m; `! {/ X0 X" l
5 m* W2 ~- B; ~! ?$ P# S for(id=0; id<numLinks; id++)1 `( }' t, V& C# N3 O2 Y
6 B" y. W$ j$ b B# g {- P B5 T* r( C$ F% ?
- [1 k. f% d/ i: ^5 }" S t=setTimeout('startFade(' + id + ')', id*100);
3 F1 O$ y. [% x3 C
1 M1 q. k; c3 h/ O }0 L8 ^2 G* ^2 M# \: g
" x) o# q: i0 Q# w- L# K}5 j. b2 z7 ?3 U& K/ f* D4 L4 v
9 P* h2 i) [$ m5 z4 @//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
2 A( l1 w5 m+ r1 n4 s# ]$ O' {
; k3 r1 e" t# WinitLinks('#FF0000', 6, '#FFCC77');. {1 Z3 P( w$ I4 ~5 v5 N# ?
) o& \; B2 u6 u5 b; {0 z//-->8 W+ E* F, w6 P+ F$ \
# u. t4 V5 o: ]& ^</script>
7 R- ^# c! a: e+ G<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元( {' s/ ^+ k5 _+ C+ B
</a>
: K3 h' [, x) [<br># B0 r! X; s8 ^- z1 c6 w9 q1 {) {
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>/ R1 e" c' i, ~8 p7 ?
<br>
! U/ n1 H+ }+ ]. w' z) T; a, r. ~<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
& u2 q6 Q; K4 D f& x- P; h<br> - ?' t$ r$ P, {/ G
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
1 l. f4 R H/ d( c% ~<br>
8 I: F; C F$ s* m<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
( M6 L* ]7 L8 s; z! h<br>2 f* g2 g; N4 P! H
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>2 e! q9 G, ^. n; `, b% f( P; C& _
<script language="javascript" type="text/javascript">; i; N0 B, e4 L( m
<!--
/ [% x! n- ]) `; _setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
0 I' ?9 O, s& D6 S# a//-->
4 Q; x8 ]! G. a, B5 B% O1 A</script> |
|
发表于 2008-1-21 20:48
|