|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
t3 c" m- z2 N) ^<!--
. S. A- O' T% ~// convert a single digit (0 - 16) into hex
* U) a, o! p: @: e4 q j% Lfunction enHex(aDigit)3 U* X, j5 Y, _6 y9 M; F1 [- R
{5 O8 n. t4 v5 a- i
return("0123456789ABCDEF".substring(aDigit, aDigit+1))8 @3 _. u4 K0 i2 P. G: s5 m
}
* H5 L: g( N4 c& P9 ~// convert a hex digit into decimal8 d* |+ V$ s; I, } B; t
function deHex(aDigit)
! p' U' d3 h2 ?7 g9 u{
# G! ]/ C& W' u/ S& |: s8 R( R return("0123456789ABCDEF".indexOf(aDigit))
) [. C, S* B: b}4 k/ }1 \% P$ U1 L0 o# }: y% \+ @
$ C8 o$ g# y4 s- N l6 @# o( M! X
// Convert a 24bit number to hex$ t' `! `5 I: C. d+ L# G8 v, l
function toHex(n)
: \7 [9 v9 \$ R% o& z{" l+ B% {$ A* o% {
return (enHex((0xf00000 & n) >> 20) +
" e1 r; P4 T) J5 ]' W% K enHex((0x0f0000 & n) >> 16) +2 R- m5 {( U9 E
enHex((0x00f000 & n) >> 12) +
3 l) ?* r5 p m, S1 F" y enHex((0x000f00 & n) >> 8) +
( Z( b" O1 l, x; d enHex((0x0000f0 & n) >> 4) +
/ }) Z+ t$ t2 Z8 x# b8 h enHex((0x00000f & n) >> 0))( y" ^6 d' _' |3 k# S5 \
}
. ?; @2 S5 G. Y' p: p8 V// Convert a six character hex to decimal
' t1 ^/ v2 e M- x4 E) u, rfunction toDecimal(hexNum)
8 n& F; W9 F" j4 I' O- s& [{
0 v$ i/ A; t$ ~5 d5 E* h var tmp = ""+hexNum.toUpperCase()0 `; }3 p& X+ L2 q9 m: P
while (tmp.length < 6) tmp = "0"+tmp
" s& {2 F5 [7 }" a6 l+ r return ((deHex(tmp.substring(0,1)) << 20) +
9 m. Z+ X) ]: u8 x0 S (deHex(tmp.substring(1,2)) << 16) +
/ J+ x; r3 c$ K- T (deHex(tmp.substring(2,3)) << 12) +
6 @: v' C- o# G5 B( V (deHex(tmp.substring(3,4)) << 8) ++ [" w7 D, C8 L* _8 r/ e
(deHex(tmp.substring(4,5)) << 4) +
3 R4 p' N) M8 _# n1 w$ N( P4 K* U; G (deHex(tmp.substring(5,6))))1 N, m9 k+ W# a4 l' i
}6 E! n3 O; D& ~# |4 v5 y4 A
///////////////////Shimmering Links/////////////////////* b4 h, o: G# b3 ^: b+ {. X Y2 O
//global variables7 [0 N9 ^' ?; K1 z2 `5 o8 j% a. N
var hoverColour
) t4 R+ Y3 q; m3 [8 G) |var numLinks;
1 r" o! h" c9 G$ I9 k- svar rate;
* x4 z ]8 f7 u0 W9 Yvar numFadeLevels;: j' t4 e7 `! o v
var bgR;, v* ~# d' D1 p) p# I- g; L! {7 Z
var bgG;
S1 ] D4 m0 H$ U0 [8 _$ \8 _var bgB;
3 g: s8 q2 u P. b% X) wvar currR;
$ _# M- w: V4 Lvar currG;" P9 A( m1 b8 ]) v" L
var currB;2 y$ [. C3 t; z' |, l
var count;
$ z' L9 f# h+ Z" M. Wvar fadeOut;8 d- V, Z# r0 |; w$ ]1 G
var continuous;
! ^( t' ~1 @0 l4 zvar newColour;
' k. T/ Y+ [( a, [var tID;
( L7 m, E" B. K+ y& {5 `4 L, zvar redInterval;3 x. W0 ^" d: \/ G) A
var greenInterval;- w: E4 g8 |/ h7 w% @; Q& N/ _
var blueInterval;8 _! }# X7 r* u$ u/ l
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
6 S$ i4 ^/ b* o) G7 w! p{, }! V7 U) s3 ~7 D& p0 }) o
hoverColour = mouseOverColour;1 O! } K" P# M r3 a
numLinks = numberOfLinks;
0 F% s* \( A* j rate = 1;
$ l( ~7 q3 [: F9 ? numFadeLevels = 30;
+ Q: I! j0 m4 e9 c$ M, R9 N function initArray(theArray, length, val)
6 J, R, f. \- m7 O: W4 ^7 S2 c- K {
2 U; O' w( w8 `) Y9 Z for(i=0;i<length;i++)
2 e) c1 q8 z8 z; B {
]# l9 m& ^) p1 z theArray = val;
: O0 v9 u; @) o% O. r) s5 R7 t }
2 c- A0 b7 Q; B4 E5 ^6 q( H; M }
: E4 p) A% P( X u+ ] bgR = '0000' + fadeOutColour.substring(1,3)
2 K* k: _ I* T% T) F: r! K bgG = '0000' + fadeOutColour.substring(3,5)
; g) d# ]+ Q- ?. ]9 q0 R% P$ F bgB = '0000' + fadeOutColour.substring(5,7)6 {" ^2 W1 @3 _, V
currR = new Array(numLinks);. |+ h9 f3 F+ v& a& e W t+ ?9 j
currG = new Array(numLinks);
5 A6 g! M% `3 B/ D' m0 {- y currB = new Array(numLinks);" h$ {; j. W+ o& \3 u& E
count = new Array(numLinks);
! G- ?: z% P) C, H fadeOut = new Array(numLinks);# @) S# _, |& ?+ I! V
continuous = new Array(numLinks);
' @$ l* P& k1 k x6 A3 U7 z9 H: x newColour = new Array(numLinks);9 V8 k1 Q" |$ e- R% b
tID = new Array(numLinks);
8 {$ Y+ e( |# N3 ]4 c6 g/ E9 q redInterval = toDecimal(bgR) / numFadeLevels;
0 k' \( F5 O/ g- {/ s greenInterval = toDecimal(bgG) / numFadeLevels;
2 K" O4 q% q% m v6 J. T# i# Q blueInterval = toDecimal(bgB) / numFadeLevels;* a6 Q: t# N) g. F
initArray(currR,numLinks,0);7 e+ D8 j7 W5 _8 G. }* W
initArray(currG,numLinks,0);1 e) z7 T- _5 _. B
initArray(currB,numLinks,0);5 ^, \% {: M" _
initArray(count,numLinks,0);- R& y3 l, ?( y T2 o
initArray(fadeOut,numLinks,true);& F5 s q1 I( o- j( {) i% {
initArray(continuous,numLinks,true);
6 W+ k" q1 w6 ?# ^6 T/ d4 o+ D& z} 7 q! R6 y8 H+ S0 w
function startFade(id)) R$ z0 C; z) e1 o" ]
{- @' ]' Q) |8 y" u
if(fadeOut[id] == true)% x/ {+ k. b* \/ P4 u
{ /*move colour towards background colour (increment)*/( ?9 R o' V$ r8 \7 w6 I& P
currR[id] += redInterval;2 M* |8 A( J$ G" v: F
currG[id] += greenInterval;: n( n. y4 s! H( Z* U5 i k" G
currB[id] += blueInterval;* v6 J1 l5 ?" [5 _0 g1 s5 S
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);. S% z$ m' y' z* y: y) S7 W
if(++count[id] == numFadeLevels)- m# i! I1 Y7 n
{
8 p& [! F6 ]8 l/ p fadeOut[id] = false;
/ Q" b3 C# I, x9 v. |( N# k }
; z: m) j% }7 T/ Z7 A }
& s0 R J5 p$ V else8 L: a3 {3 e' N4 N' H0 C+ Q: `
{5 ^1 _/ R# k% L! O5 Q
currR[id] -= redInterval;3 W0 }5 e4 O, a) {. V" w
" x+ o8 A! R4 q currG[id] -= greenInterval;5 b5 ?4 v+ y+ f5 N+ S6 I
1 K: |4 S" P* u% h% G h currB[id] -= blueInterval;
: ?+ U/ }: w4 X* Y2 V) Q! w- \% m3 H2 t1 ]% r6 |8 o
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 S) c& e1 V9 _. H3 J9 n7 v
+ U. y1 D( }( e, p if(--count[id] == 0)
7 O7 J B: c1 g: z! c
/ V0 ]% K6 d/ X* @0 Y$ V7 X; S! S {
, a; [; ^2 C s$ b6 [1 Y0 A
: s6 c [% k. b# Y fadeOut[id] = true;
4 m0 B' D* f: z F4 l- B+ u6 `/ T! P
}1 g' n) [1 H+ l
2 c. f2 f0 l3 k2 z
}
" |- @8 ]. j" @$ K" e" R9 }0 v2 G7 V @
if(continuous[id] == true)
9 E5 J8 x) F; }9 ^3 ?, ]5 [/ r% y4 x( v V& c' B3 C& _" ^- t% _
{, ~+ [8 N6 z& }0 N8 k5 b- I
. o: X. f* F( Y2 f
document.getElementById(id).style.color = newColour[id];
F% W( u6 u- `! K% a, N2 C5 c! w# S: f3 {
}
5 U/ D0 S- H" |
7 T+ x9 y$ E0 \- D else# a6 X1 g7 H. F- c6 _; T
! f/ Y8 {1 _6 p; p8 ] u2 _1 F3 ]
{5 K9 y6 W( j2 W/ W) a# K" e ?
4 o1 r2 A7 Z/ b$ l+ v document.getElementById(id).style.color = hoverColour;
, |" x) \- I9 q1 @) c2 v
) ?$ f6 z7 s% z& Z, a n1 g9 g }7 e: J) Q8 N2 I9 U6 ^4 D: L: k
" E, ]& }% f# p8 b" s2 | clearTimeout(tID[id]);! s i" y* I+ m- u3 H# M
' W6 S8 I$ {. [+ u' U# [; d
tID[id]=setTimeout('startFade(' + id + ')', rate);# B" [+ G5 `5 V- p3 I
$ W: `- f$ y$ d1 c5 r x}9 E( V. n, F; p( s3 v
7 A4 x$ M% n4 Tfunction continueFade(id); B" M' [& m$ P* W, D' c
0 W2 A; ]- b$ ]. ~$ l8 E8 z
{' s3 X P" ~ \
" l+ ^1 f# @! _6 y. ^# s continuous[id] = true;2 }) {1 u+ ]4 ]0 E5 ~" p5 r
, ^/ T6 e3 F* q& h; N9 Y}6 z) y* p$ @; ]/ ^! w1 p
1 c* }& z& U: u5 V# R- N" R
function stopFade(id)# e/ h0 }% Q# q
7 a9 U# c% z) k! y% s* [* `
{
5 v$ Z3 c3 D" Q8 h' y
: j2 j0 U( U- M continuous[id] = false;
, \" z& e) U0 b) G9 u+ A4 k3 V. Z* N4 b+ N& \* o
}
* h+ I0 x* O9 |9 \$ R* A. G, Y7 N: y: y3 U( ^3 s; p, N
function StartTimers()
! n% g9 W8 M$ p Z5 F4 S
9 D: U& Q5 |: X% P{ //set up an initial set of timers to start the shimmering effect2 y% W& V7 D6 T( s3 d
- n. l8 A$ M F5 s. i6 s
for(id=0; id<numLinks; id++)
6 d& f* s( h7 A; T" c8 Z, @2 S0 H/ I0 x, a2 ^( I$ \9 m: x, E5 C
{+ f; S/ b( l: }4 ]2 j
6 D S ?. E2 O- U
t=setTimeout('startFade(' + id + ')', id*100);$ K! ~! ^% X: ?! n3 }: i
$ q0 ~' ~, C* j+ }
}
! T+ I! b X& @* j1 d4 i4 b( U Y. P9 X$ H+ W8 j
}
9 P) x5 F% `4 T- w$ \7 n& t8 R- M6 q, I, T
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
3 N" I4 O, C5 d3 q% v# {6 {* E; c# o4 _' O8 y8 [: B4 J
initLinks('#FF0000', 6, '#FFCC77');
5 U: U& s3 O. ]! [) n! u. \! u, U9 X5 T5 R: _/ f% w
//-->8 v; [6 j; |. U- Y( _4 Q1 |
5 `3 y* `$ z; E7 x8 T</script>
/ s. y" Z& ]% e% L1 h<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
. Z8 b5 y k2 v( \5 Q, W* I e# c</a>* L; n! j6 X" l/ O
<br>0 t4 E. f3 b5 i. f. Z+ t4 N) P8 S
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
8 F* U2 }% x: z: x* `, q1 i<br>7 ^6 I; y) ^ ~
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ T3 s& D0 p/ }% Q, c# T- k<br> . [& E$ K* q. F; M
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>, o& L4 ]! x) `- C! R& ^4 Z4 B: g! ?4 i
<br>& O2 y0 g+ ]3 l. j& e
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
7 ^6 A3 k' i2 K( T, d- h<br>
% d; ]$ Y+ S# U ^( i% F<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
* A* h- X( e7 f; _<script language="javascript" type="text/javascript">
/ A, |4 D0 @* s+ {& Y7 H& G3 a<!--; z; W1 o, p! O- D/ m
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
% e3 V% o' j+ O/ W$ E/ [; i" a; S//-->- `0 @- ]: `& g: Q3 u5 b
</script> |
|
发表于 2008-1-21 20:48
|