|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">" Q1 V) J4 o/ u# W* `
<!--! g; e5 N, |3 X7 b1 e2 I
// convert a single digit (0 - 16) into hex
7 c; Z4 l5 {# p0 Y) i4 afunction enHex(aDigit)- D% d, i" f; y) x w4 y
{* Z4 [5 k; w' O1 p, j9 U
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
* G$ V! L& a5 @2 c}
/ ]( n3 X' a" v4 O/ T// convert a hex digit into decimal- Z# L1 }- J8 `) N
function deHex(aDigit) ]2 r& d8 F+ B9 z) J
{" f' h8 J& w+ t; X+ J! ^' C2 J
return("0123456789ABCDEF".indexOf(aDigit))6 g( S! x+ z1 y3 q
}
w0 P* m8 j$ _0 [
, x* N& [5 x5 ^# O// Convert a 24bit number to hex
- c( a& p9 r% X1 S1 N* p2 o$ hfunction toHex(n): i0 M- s/ _6 D$ \
{4 [4 o0 R+ ?8 K: ~; O: k
return (enHex((0xf00000 & n) >> 20) +* j( N- f" e: ]7 c5 {
enHex((0x0f0000 & n) >> 16) +
# u& r$ g8 z# C0 ^1 v enHex((0x00f000 & n) >> 12) +" v5 S1 s3 o; c D8 Q, H
enHex((0x000f00 & n) >> 8) +3 ?3 L* e% x9 k
enHex((0x0000f0 & n) >> 4) +6 U1 j/ g% \; v' ^+ h- [, p2 x0 A
enHex((0x00000f & n) >> 0))' [" G0 I- U( [! m
}% @& W/ z# @5 P' `8 S5 B8 d8 @" b$ Z
// Convert a six character hex to decimal1 y" L5 i$ Z+ x4 L. k+ j+ |: \: }3 G& S
function toDecimal(hexNum)
. `1 K+ u/ T6 L0 G% T- B5 p3 k) f{$ i, }$ @! Z! @' N/ r! M. {
var tmp = ""+hexNum.toUpperCase()3 V( ^% J9 M# G) \+ y% w
while (tmp.length < 6) tmp = "0"+tmp' ?; X" W+ f: ]) p& s2 V7 l+ {; f9 }
return ((deHex(tmp.substring(0,1)) << 20) +7 A# y0 ?5 [+ l# M/ A
(deHex(tmp.substring(1,2)) << 16) +
8 {: f: K8 X! ?, w* e. U/ B* u (deHex(tmp.substring(2,3)) << 12) +/ M, \4 G6 P+ J* f/ ]9 }7 `! L
(deHex(tmp.substring(3,4)) << 8) +
6 p" f& M# j$ y3 E) g (deHex(tmp.substring(4,5)) << 4) +
1 v! N$ U7 [5 N; K' L1 {$ }& t7 S (deHex(tmp.substring(5,6))))% n7 h$ x7 y; ]# r, c/ R2 l) G1 ^
}2 _. T8 f- Q- K6 U' {" Z
///////////////////Shimmering Links/////////////////////
# L7 |. ^) g' E8 ^/ E9 i//global variables
5 k8 k: `; l, ^' j6 ]) U- Y9 ^$ Y& B: @var hoverColour; e$ Y6 D6 C ?" u& M( \3 |6 W
var numLinks;/ P7 u- h2 s( N0 V
var rate;
# h. O Y& a6 L) B/ o5 ~8 Rvar numFadeLevels;/ J* E: o& C0 @
var bgR;/ Y9 A5 N9 p- j6 K
var bgG;
) k3 [+ z5 d$ |var bgB;
" |3 d2 }! S' R- j3 [var currR;7 M& j6 F I2 @$ n* g. d( D
var currG;
8 e/ y" \* Q( l# s) @! Pvar currB;5 ]$ e. n3 o* y' H# y, C3 g
var count;
9 e q& I2 ~8 e: `var fadeOut;
/ x( O. _2 @2 K, W* O/ j1 nvar continuous;
, p+ A& [" y* q' o0 Svar newColour;+ c3 L/ l+ F/ Z3 r9 a! U
var tID;
$ X* }2 C9 F7 h' P yvar redInterval;3 n/ G e) H% M G! C
var greenInterval;$ ]' [/ i! m3 x5 m( n9 X
var blueInterval;
, i' Z/ l+ A' Q* H/ Tfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)3 A! w5 R# C0 L" u/ Q% U( f& S8 h. ^
{: ^. Z* E2 u' K
hoverColour = mouseOverColour;, b' e( p7 s3 \
numLinks = numberOfLinks;) P, T/ W( Z1 X/ n
rate = 1;
& r" K3 V1 {( Z; r+ v8 W numFadeLevels = 30;
I9 u, Q3 ~7 F3 ^2 T7 ] function initArray(theArray, length, val)
" [+ g) {% P- q5 _ {
" S) _8 y( R0 }1 @* ]2 d ~ for(i=0;i<length;i++)
4 \3 M+ Q, \4 J6 d) w {
6 q9 f i# |. W& ? theArray = val;
( |+ ?3 r% q, B* z* z" s }0 t' u. e% \$ [1 g+ G
}
; h' E0 _7 W& i c$ ` bgR = '0000' + fadeOutColour.substring(1,3)
+ L7 U8 G- K2 w bgG = '0000' + fadeOutColour.substring(3,5)) `' q* P" I2 C5 L$ g& n# n4 O
bgB = '0000' + fadeOutColour.substring(5,7)5 A ?! v$ R" _/ M
currR = new Array(numLinks);! p" B- H+ F* O4 _: D1 u. W
currG = new Array(numLinks);
4 D* B' H* a- ^4 A; l currB = new Array(numLinks);5 C% m+ b3 D/ v* E1 s
count = new Array(numLinks);; p" }3 K& M( ` ^# j( C; Z0 E& x
fadeOut = new Array(numLinks);' C6 M" w- _7 c, z1 l! f" s7 c8 k
continuous = new Array(numLinks);
6 @1 Z1 x* }6 d6 C+ q( C/ t! q4 x; ], J newColour = new Array(numLinks);
* q8 f# S% n- K tID = new Array(numLinks);+ e9 A1 B: s0 s: \$ G
redInterval = toDecimal(bgR) / numFadeLevels;
# r- m* Y, `# J- q% s; A greenInterval = toDecimal(bgG) / numFadeLevels;: v& `7 S7 w0 u5 G0 ]& x' z& t4 T/ g
blueInterval = toDecimal(bgB) / numFadeLevels;
; l, x/ y6 r( y6 r initArray(currR,numLinks,0);
# k# X1 k5 T3 u' b1 b9 U/ a* i initArray(currG,numLinks,0);
1 V% x6 O) y% C initArray(currB,numLinks,0); a& e1 l) k. o( n6 ?
initArray(count,numLinks,0);
0 o% _* |) a/ t! {% u" L initArray(fadeOut,numLinks,true);
+ E. [; f# g5 x initArray(continuous,numLinks,true);# }0 W8 C- r y2 F6 i! F3 D
} : H8 q* F6 d& v7 u! x
function startFade(id)
2 l4 i8 D3 F* O3 M! Z{
3 i! @' ~3 t6 g0 l& l, E8 _ if(fadeOut[id] == true)1 N/ j" C$ Q) z( L/ K
{ /*move colour towards background colour (increment)*/
0 u+ T7 r8 A% J$ a currR[id] += redInterval;0 h b4 x8 v+ [/ c& F! z U
currG[id] += greenInterval;! I# I6 ]. D: b O
currB[id] += blueInterval;
/ \) I% t' T7 L5 x: { newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);0 ]) o4 E" D+ h* E/ P" F4 e5 [- `
if(++count[id] == numFadeLevels)
* c: j5 i8 S+ i0 t3 h; f {4 z9 y4 _2 Y8 P: p, n
fadeOut[id] = false;
1 C1 C% O u! [9 L% N5 U* G- g }
; k: C6 ]- {- W: B }6 U; Y& i7 J) T9 G" P; T
else
1 O4 I7 e9 c& v3 V% D* p( } {; {; l% A4 \; s) @6 E
currR[id] -= redInterval;4 Q, ~5 _4 a0 M3 K2 y6 C% i
" m o. u- o O
currG[id] -= greenInterval;7 B- i7 P: R) L* x& y
1 F7 @; g( c/ D' {, c' p
currB[id] -= blueInterval;
6 _% `0 t; s+ z y, g! z3 M5 S) H
5 I: d/ p ?4 R, D% \: @- U, x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) [2 l4 P4 u4 ^; c; I8 h5 [$ _
# d9 H' u% d% r: x6 X- q if(--count[id] == 0)) x3 y) Q G r/ D) d' I
2 `% G- ^. Q$ s# p* r0 Q, X {
$ L5 m X3 U0 s7 B1 P1 R0 G
, V# _9 I2 n/ t! f/ N* k fadeOut[id] = true;. z" E S9 v& _% W" ^
" @0 _ s; F X& F% c1 Y; E* y+ b
} [ Z# t- P7 C
( C$ X7 b- V4 X9 O9 }5 U. k }" \# U- s. q1 b8 D# I
# J! z3 m$ E8 i+ E( o5 x if(continuous[id] == true)
# c' G& q' m# e' |2 \7 l% }' h; x- F7 Q6 s% t0 N( }
{
# h! d/ _9 S3 t" f4 W. Q% k6 q' ?4 G5 n1 z f) v* A3 w4 f
document.getElementById(id).style.color = newColour[id]; * [% X* o& {/ J1 K
* _: o% g' B @% O. A" h! t% [7 g }
' B/ {8 B. o# p3 E
1 i/ W' y, i. i else
! f5 y0 ^! V' q) G, c% J& |+ O6 P. l! T5 a: f9 ?' a1 D: G
{+ s l4 }" D! x. @! @" |/ h! Y4 N
* y# O: d3 d9 m2 p
document.getElementById(id).style.color = hoverColour;
, g F4 [! h' \, F
7 l, s! q# W0 | }' o9 H' m( q1 C s5 W, O3 X
2 U) Q; q5 \$ E/ g! _
clearTimeout(tID[id]);
; c4 N- S6 T2 }- n' w `% o& c% N6 I7 [: X$ w' u7 O# c4 K
tID[id]=setTimeout('startFade(' + id + ')', rate);
# G/ n( }( @ t+ Q! H9 f7 T: O1 i. @( l: {
}
0 W* j$ x* w0 @* h4 b9 i) I" x3 ~) p3 A, g8 B9 s" E
function continueFade(id)
0 T+ ?* \. Y6 r L' O4 I% J3 U
! H( a: Z+ n# E8 A6 B9 B8 a{. a) b! g& c0 A$ c/ n7 w4 s9 _3 B V
) i; l2 ?/ j' d$ X' U
continuous[id] = true;& s) U, C/ W2 Q9 a1 i
9 D3 g* L) p( g) k
}0 U) ~2 a) U% v" i1 X
# K2 |: C% H5 B( t1 S" U+ P5 r& A
function stopFade(id)
3 b; F# ~+ T9 C5 _
/ Q! e7 j4 O4 e: k2 x2 a{
u- a! j- W& C" A2 N( a: x( X, b0 U' R! `( M! l t7 r# |
continuous[id] = false;
! }, F3 n, h' O+ r2 N% _& u6 R. k3 m4 C0 N, Q0 }; i
}
' D: r: ^5 [% A9 B1 c, s# |8 h+ Y9 b6 M! w1 s: A( ]
function StartTimers()
8 ~0 ~, e( [. Q+ K M# _+ d* [ k& s
{ //set up an initial set of timers to start the shimmering effect( o( b$ F2 x% J/ M! ? `9 m' r
1 Y& q+ A" t. N* u/ Z6 ^8 H4 a
for(id=0; id<numLinks; id++); ~* y+ G1 A" ]8 B( C( \
( r0 |3 G2 J- z/ k: K6 i1 |
{1 t+ i. {# h. l7 A: p
# P: k% e* o" v- k9 m t=setTimeout('startFade(' + id + ')', id*100);
( q5 n q' \, [5 I$ V* }8 U) q" q4 x+ v( W& Z- }, n1 e- o
}
' Y, D6 \* {3 { U1 w5 k, T( W4 c+ D" m: u$ @
}/ {0 M* b' ^& C
8 O$ Q1 d2 a& x {/ N
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
# I! a+ ]1 P, C& m. O/ V
, W# J& r4 d0 ]initLinks('#FF0000', 6, '#FFCC77');, o* G9 K4 H" o7 D& \
* x, p1 c$ i0 f1 U( `# C7 f) K//-->5 x' i+ H. Y. S/ f/ S8 g0 l0 ~
1 }% p" z) k( t3 y
</script>
8 o2 u4 m; r% |<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元/ X/ }+ i' l8 O& M; t" D2 @
</a>$ K5 L+ k/ x. P& d7 t
<br>
. u/ h0 A- Q* {' Q/ @<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
$ F/ w( x- H7 [$ n9 Y% v' T<br>8 f6 [( `' p, @. }. C& x( r
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>8 E+ h. W0 X, i \
<br> % Y; g6 n9 Z+ B4 p" w! }! e, K+ a
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, @8 u: x5 P+ q J, u+ i2 _<br>8 s0 p7 {: }4 u0 j( ~% P
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
; W" D7 k/ t: S" {<br> A- o( z' c8 G* `8 a; R
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( G4 v t3 f$ ~) @
<script language="javascript" type="text/javascript">% q, c/ c$ k( J% g# L8 I. }) Y
<!--; H$ ]0 z* r' h$ w0 [- c
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering- O/ \( B v( \( d3 M# W8 y! @9 N
//-->
* K# P$ I2 {0 n3 E# {: }9 X/ d</script> |
|
发表于 2008-1-21 20:48
|