|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">4 @6 J3 K! u7 Z
<!--
) ?# }, a" f5 L5 T4 E6 H3 M// convert a single digit (0 - 16) into hex' j- E- ?/ |/ u5 V" H/ ?" i
function enHex(aDigit)
' ?1 `9 k9 N! x{
* I0 X% l+ H. V# k) a+ I return("0123456789ABCDEF".substring(aDigit, aDigit+1)); z$ n: I* [! w( b( ^) m
}( c8 C# z% r6 K: \' y- P
// convert a hex digit into decimal: e8 p' W6 _' T! K
function deHex(aDigit)1 l# M5 O* @" m6 ^/ ~
{
4 d' m: C0 a, a* a return("0123456789ABCDEF".indexOf(aDigit))
7 g4 W9 C+ q" O# B- q- z( H}$ c, V: J8 V, j7 k5 y6 \
: T, ]5 L+ H/ n! t6 ^+ J1 d. Y// Convert a 24bit number to hex$ M- ~$ Z* J, c. Z, H3 l6 u
function toHex(n)
) _0 @/ ^( }3 R( `9 f{
8 q2 e: _% Y3 A' F$ d return (enHex((0xf00000 & n) >> 20) +
, T9 b1 H) N* O- e1 B# {& ` enHex((0x0f0000 & n) >> 16) +8 `4 ^+ u+ S3 ~: U
enHex((0x00f000 & n) >> 12) +
/ k2 R- ]6 \6 D t enHex((0x000f00 & n) >> 8) +
7 q* l( B2 h( e enHex((0x0000f0 & n) >> 4) +
; z9 a& ~% V: E- \7 u: W, [ enHex((0x00000f & n) >> 0)). x7 \* u6 z: i H1 c
}+ t, |& B# q9 c) w% k
// Convert a six character hex to decimal
$ d2 y; W, A3 nfunction toDecimal(hexNum)
8 p/ a1 d! Q1 ]0 d: m0 ]. S{
4 U9 I' b; |. H( @! Y# i# R var tmp = ""+hexNum.toUpperCase()% D0 ]/ p% [) ?8 w: A; \2 [7 n% r
while (tmp.length < 6) tmp = "0"+tmp$ N9 ]6 |3 X4 A$ y
return ((deHex(tmp.substring(0,1)) << 20) +" E1 S5 [. y6 c6 P5 i+ P
(deHex(tmp.substring(1,2)) << 16) + 7 Y! g" s! V* ~7 Y
(deHex(tmp.substring(2,3)) << 12) +
' o- r6 o4 j" `% E4 D& P% U (deHex(tmp.substring(3,4)) << 8) +
$ q7 Z! u6 K8 z& ?! v8 [ (deHex(tmp.substring(4,5)) << 4) +
0 H" _3 ]% n) A1 j* h3 F (deHex(tmp.substring(5,6))))
% \& [- C [$ Y I' t; K% O}, B' E/ y( q" o" X
///////////////////Shimmering Links/////////////////////1 f2 {# W3 t4 {. o
//global variables
5 m S8 d! X8 C; o1 mvar hoverColour4 Q6 u8 e, ?! f' P
var numLinks;
& V3 q6 ^8 B/ a. D: g2 Ivar rate;
- G0 ~3 Z Z+ M+ |/ jvar numFadeLevels;
( N( V/ Q& c, |5 Bvar bgR;6 M; E4 S8 n& J( ?+ _9 P
var bgG;
) I6 K G8 `, {4 [1 T2 Dvar bgB;
2 L1 C/ f* b! Nvar currR;8 C! J1 ?' D8 H: e; `7 \6 K
var currG;$ L" u0 f( @; b; l/ U# K0 D
var currB;' N# E$ S. T" u! {8 L1 A$ s1 u; D
var count;8 n' C3 @0 M7 q
var fadeOut;
4 B# R% l; e6 T5 v1 Lvar continuous; }9 N4 ]! a4 X/ N
var newColour;
. X* `5 y0 W6 K) \var tID;
* Z2 x5 R: A5 Wvar redInterval;
" ^; f( G, A5 T5 zvar greenInterval;
9 T& _& n/ U" Pvar blueInterval;4 \5 Q) ?6 W: _5 P! E
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 m) C2 [1 R& ]: J0 ~ y+ w{3 C r0 Y" N& T" v- p* q
hoverColour = mouseOverColour;1 g5 f( X6 K6 ~% C5 L" p
numLinks = numberOfLinks;1 s* p+ F' N' @, c: }# ^$ K
rate = 1;
% q2 x0 Q& Z7 }% M! U0 L numFadeLevels = 30;6 K7 \! j7 b4 B! h) x4 C/ p
function initArray(theArray, length, val)
% A$ @6 \0 E3 j: M {
( _+ g: J2 F8 H2 \2 ~! [2 A' | for(i=0;i<length;i++)% @9 s N! e/ n
{
2 J) Z3 A7 o+ u" w. w# b% d theArray = val;5 q: _; p Y% l* h: L6 I: g
}
! z5 E. `7 z3 W2 U3 c0 g' u- n0 R }( E: g8 D* X" v& \, X
bgR = '0000' + fadeOutColour.substring(1,3)
8 c e+ M ^7 s l/ B) R bgG = '0000' + fadeOutColour.substring(3,5)
" F* _3 I2 c m/ y% E7 d# z7 j bgB = '0000' + fadeOutColour.substring(5,7). {# t! K, w/ n. O
currR = new Array(numLinks);7 C! x' F( J' t b; s, [
currG = new Array(numLinks);
; ~* @; I# \& V3 O currB = new Array(numLinks);+ [) x [* ^& e, P w5 {) [: a
count = new Array(numLinks);
+ ]1 u q, D6 n; y3 m0 L fadeOut = new Array(numLinks);
6 N7 S$ a. S( B# L* v: k continuous = new Array(numLinks);; s9 N c! w' Q( B
newColour = new Array(numLinks);
# a1 B; Z! I% h7 n tID = new Array(numLinks);
% I+ t- ~: z( }8 {5 ^4 k# k redInterval = toDecimal(bgR) / numFadeLevels;/ r$ b7 z. U+ {+ I1 ?/ H& h( v
greenInterval = toDecimal(bgG) / numFadeLevels;7 d5 m Y' R3 ^! |7 |# `
blueInterval = toDecimal(bgB) / numFadeLevels;
- o) w5 l' m( G9 ~0 \& q# s+ t4 N initArray(currR,numLinks,0);% B4 q8 i- r0 u
initArray(currG,numLinks,0);
5 F' W( z: H- ~ z7 K# `: v initArray(currB,numLinks,0);
* Y8 e7 o7 \) ~( M1 h/ V# C0 T initArray(count,numLinks,0);
& E- d0 g5 Q. y2 } initArray(fadeOut,numLinks,true);6 I9 C& N$ {; l4 M+ S
initArray(continuous,numLinks,true);
( G/ R6 j: H8 X. l}
0 X* a& I9 Y; Q9 j' j3 K, q7 Vfunction startFade(id)
3 l1 m: Q4 Y( x1 h. |{2 F2 h. V# w# z5 ~" k/ @: c6 x1 H* }
if(fadeOut[id] == true)
9 D; T9 A9 z- m, [8 @& U) l { /*move colour towards background colour (increment)*/7 \2 X- s7 E- ]: L4 d; G
currR[id] += redInterval;! ~ p' p2 P9 D z
currG[id] += greenInterval; m; Y2 I! {! y% y- Y/ ?
currB[id] += blueInterval;% C4 E) B( d6 h
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
9 M1 J, Y- o5 f6 ~8 f3 e3 K if(++count[id] == numFadeLevels)
) D& [" m5 Y3 Z g; ^ {/ N# z* ]1 W' c. x# O3 H3 `4 j
fadeOut[id] = false;
* Z& c7 O2 q6 y7 M% _ D }3 O6 T: r1 J. s E3 J. {
}$ Y$ V5 b2 P' l# P# h# u
else
7 K% o$ A, r! e8 ^ {3 p; N: E8 R/ l- E
currR[id] -= redInterval;* w: ?! N1 ~1 j; \2 O7 N3 R, c& \
/ `1 ~4 o4 h; i- }9 C) L9 K currG[id] -= greenInterval;/ y) m# v$ E" U9 F8 N) i/ a
" ]: ~( b1 S) ] v currB[id] -= blueInterval;
, G% l: H5 s1 \" Q) T# I* M
+ G3 g+ L( `6 p) z, N: q newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& w3 K4 T8 k4 |0 i0 k& R R# l) b- T5 r6 x
if(--count[id] == 0)
4 j$ B( |$ t2 b4 m3 O0 c, g% z
/ ~0 D! s+ q7 d0 M6 r. c {
# [9 M' C- }( i4 O
$ n' E4 t4 P M3 f- E( c0 @/ H$ k- n fadeOut[id] = true;
& x; G+ O, H) }& f$ \$ \! r: M; W! R3 r1 D
}
5 [1 r3 K5 j& F( o8 \( y( y- a S5 x3 \$ o. v) @
}4 I. ^2 o4 I) @6 {) T2 t
4 W2 c6 q/ x) L& Q. S1 e4 b( C if(continuous[id] == true)
4 ]8 l9 R w+ H7 V4 `% S, g
! v/ Q' s! `/ }4 g- r. Y7 i. Z! m0 d {
6 S. F" K9 F5 D4 i; n
( j- N8 f7 N: A r" a document.getElementById(id).style.color = newColour[id]; % [* n6 e3 Z4 Z& i* x5 X$ f
) g7 I6 ]# Z& q# X% }2 ` }, c: |# t3 a6 ]: d7 w
3 ~$ S0 I3 m L& O3 Q
else) N2 K* z s# m% ?) x
( t+ `& A: P0 v0 W {
( |! z I; Z: \/ u! A5 L4 V, b' _! f/ N# |. V% O
document.getElementById(id).style.color = hoverColour;
! r8 N1 j1 _; E) y- ^5 S* s5 ~0 U1 O8 K( @0 _
}. _3 K) C& r# y9 B. _. G; J& r
! w0 F- q3 I* p: j7 F9 t
clearTimeout(tID[id]);
! j* @4 r% V7 Z. w, `& {1 ?* I8 ^
tID[id]=setTimeout('startFade(' + id + ')', rate);. O7 R7 d0 }. K) i
+ R+ U F, i" p* x. m' {
}
" Q b7 Z: n5 Q% z+ Z/ L# m* p( \# P. {0 G7 _5 g* v! z. A
function continueFade(id)( R/ S. ~, V2 ~1 H+ V
* ~1 [; r r4 |* { m{
8 x# p/ w, x8 @8 S9 i8 C
: @9 Z' R- G: l, R- i( t" M continuous[id] = true;$ y# Y6 j5 G+ Q+ p4 F% {+ z( g i
5 a/ b* c( x1 q" G3 K7 q
}
. c( ]/ q0 A! y0 }6 F3 I% h
o9 v; V+ P0 _' @function stopFade(id)
+ D/ d! j. \0 P% k; C! @% D( q
' E/ d# z# X3 Y" a4 v5 P' ?{' s" D, g3 {3 A% a( k l' l7 c
9 z5 X# f7 U% @6 R continuous[id] = false;
' m, M" [: [0 m4 N" q+ a" ?: p" h
5 ]0 `8 _% s, N2 y0 K3 k}
# v9 ?" e+ \! F4 N8 y
, r; z7 J) X8 E3 gfunction StartTimers()
7 T% h. w# a6 k5 | L( W! T8 W
( ]+ M' q0 }+ L# G7 c0 X+ F/ g{ //set up an initial set of timers to start the shimmering effect8 g) j. A! ~, @: w- U7 h& _6 g8 O6 U z
, X% k5 G0 _) @. H6 K& U" {- E, c' o
for(id=0; id<numLinks; id++)
]/ L+ o A, n, Z) h* v* d* ?4 q3 G
1 A% \4 i4 ~) \$ x {
! x& ]5 q D3 A$ ^( E+ u4 _1 B1 D* G& ~
t=setTimeout('startFade(' + id + ')', id*100);
- g' q3 _- l7 R% S- r% i; n& g4 F
}
. X$ a" |/ [+ k2 w: I$ {/ l9 A7 w9 f( S5 m
}
5 c5 T$ @" P2 d4 ]
6 Z: \$ F$ s+ ^1 M: {6 y9 V, C# Y//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour') T0 u' u/ _0 M/ V! e5 M
, J0 g0 P, J4 |( B9 }initLinks('#FF0000', 6, '#FFCC77');
, a6 b, D4 T" e' ]# T9 Q
1 Z( E g6 W) a8 W! E//-->9 T4 \1 P9 Z5 Q# R
. B' v# b6 Z6 B7 k& l</script>
/ u. D$ P% B1 I# A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
5 D. I% m- v% {5 p3 u</a>
% D: |2 d/ N+ B1 [<br>7 {0 ?( R% V' |% y( l9 L7 ]
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>8 M( Q7 G Z% Z5 r/ {1 k
<br>6 H7 }5 Q# i3 b! g# e, M; W
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>3 h6 _8 l6 g( w: C
<br> ( x+ u- I, Y& U
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 G" n8 j: g' I: H! S/ t
<br>
- O. s' m+ f# ^8 b8 f( x<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>7 X. v& J# S& {# q6 R4 ?+ Z
<br>, ? r; F: M6 A
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>3 e3 \& _8 `* m6 Y' u9 _
<script language="javascript" type="text/javascript">/ T5 Y. E/ t4 |
<!--
9 v8 h- M! M6 ]4 r, ssetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 ~* x; ]% f* J4 P7 K4 D4 K0 C8 B
//-->& \. u) Y% |$ X# J5 ?4 v: d6 i
</script> |
|