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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">* K o0 C# z5 X
<!--
1 h9 @: V4 Z& l; E8 T0 g! Z$ O7 i// convert a single digit (0 - 16) into hex
; `( N: s. i4 f% o) Y5 Gfunction enHex(aDigit)6 N- ]. {0 s& n0 y$ P
{2 G/ ^! u8 U( u0 K2 O. G! P
return("0123456789ABCDEF".substring(aDigit, aDigit+1)); W9 R4 j7 W* t/ Z
}
3 t- j O6 ?( |7 b( E" i* @# u// convert a hex digit into decimal
' n5 I3 r' @! _! vfunction deHex(aDigit)* C( O9 a- H1 p: T: ~! p2 N! M) c
{% P) y2 Z1 o6 |
return("0123456789ABCDEF".indexOf(aDigit))
$ D( f3 f4 l, l" Z( Z( X}
) u7 ^6 S6 g/ C* j H5 g
t5 T- E2 x/ A( W) `+ D// Convert a 24bit number to hex# S& V4 z* l+ R/ [5 f
function toHex(n)
3 y& D8 _0 e( q{
- e/ ^4 d0 F# Y* ] return (enHex((0xf00000 & n) >> 20) +
% e, Q( N4 S& { enHex((0x0f0000 & n) >> 16) +
( g _5 ]1 Y% E5 d: j* v enHex((0x00f000 & n) >> 12) +3 Z0 P( c1 J9 k
enHex((0x000f00 & n) >> 8) +
! _ o& G8 ]0 j7 L enHex((0x0000f0 & n) >> 4) +
( ?4 V0 _4 R# a0 K enHex((0x00000f & n) >> 0))
@) R- v5 t# T& F! F}+ M( h0 c$ I: }1 F* @
// Convert a six character hex to decimal
/ K7 Z( c* b3 }3 Q/ t. hfunction toDecimal(hexNum): P+ ~1 i& C" ?( Q5 N3 ~
{5 w8 x7 ~5 N- B, a9 A
var tmp = ""+hexNum.toUpperCase()
- K. b! }) |! N" V* Q, v& E while (tmp.length < 6) tmp = "0"+tmp3 @: T" w& W2 a3 m- R
return ((deHex(tmp.substring(0,1)) << 20) +/ r* g6 P x0 D; v6 n
(deHex(tmp.substring(1,2)) << 16) + ( K; J7 `( i5 v
(deHex(tmp.substring(2,3)) << 12) +
- G; N i/ k! Z3 ~9 T+ b4 r/ i) K (deHex(tmp.substring(3,4)) << 8) +& M; ^, \9 q; m( W
(deHex(tmp.substring(4,5)) << 4) + x0 I# z+ M( P
(deHex(tmp.substring(5,6))))
/ ~' }' R! y$ B/ N% ]) E}5 r8 d& j: ~; r' t4 z% J2 K
///////////////////Shimmering Links/////////////////////
0 G- \6 E+ |( k8 H//global variables
. l* b0 u" ]; nvar hoverColour& e z0 v* _1 A! U% F/ }
var numLinks;+ [) c9 D0 q; U
var rate;
" G# W: Q" T0 ~8 z. X8 ^var numFadeLevels;
/ p8 o4 Q9 ^4 bvar bgR;: l9 Y+ J# B: n3 G: |% X. a) @3 a
var bgG;
1 w" x: p# `- u. k9 H- avar bgB;9 Z# r b5 n+ `& e; w5 F
var currR;
# x1 x7 h6 l8 M* ?2 zvar currG;
2 O( L0 |$ Q. j3 G1 nvar currB;6 t! {0 b$ ^2 W3 L+ z8 r3 K1 C
var count;
: y" w5 J4 y- m6 w" M2 {var fadeOut;7 f; s9 K" _8 [5 b. l; O
var continuous;! B& o& n! l0 i8 z( H
var newColour;2 m4 E( ~+ U1 [; S% Z
var tID;/ M5 y) t) G9 T) S
var redInterval;6 Z# `( D+ z) P8 m, I. Q2 s5 T
var greenInterval;
# M" ]5 W* a: `$ j' Q8 v/ qvar blueInterval;. ^& L3 L9 `( F( d/ C
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
) e- d8 k4 h2 l: q{
* _/ T( n4 E. p hoverColour = mouseOverColour;2 @7 S, Z* c# ]$ o4 T. @" e
numLinks = numberOfLinks;
, w3 p( G7 r3 W9 d rate = 1;
0 r( p+ J3 M; w; e numFadeLevels = 30;# |$ Q. ^4 y7 M( w, y5 c
function initArray(theArray, length, val)' r7 x( c- Z& k
{* e7 _3 ~2 e3 f7 M( N
for(i=0;i<length;i++)$ m) X* x; U9 \! |8 h; C
{0 M7 B& p- J" w6 Q
theArray = val;: u1 {5 ?+ A# [- z7 J! Q
}/ B. F, B9 _0 D' |2 b% V
}/ \& [& G% p3 I2 D) X. y
bgR = '0000' + fadeOutColour.substring(1,3)
6 {' |1 l6 {: O, v5 M bgG = '0000' + fadeOutColour.substring(3,5)& q; X! l' y( E- R
bgB = '0000' + fadeOutColour.substring(5,7)
3 G$ H C) H6 {5 P- D3 J0 { currR = new Array(numLinks);6 v. B5 Q H, r& R! z7 d) U
currG = new Array(numLinks);
( g( T0 F/ b3 N0 m$ }: {1 } currB = new Array(numLinks);" v, n% M1 X: i
count = new Array(numLinks);
. g7 X% l+ u2 z$ h4 L8 H; @7 k+ J fadeOut = new Array(numLinks);+ |8 A5 f: S: z' S& w
continuous = new Array(numLinks);+ m! I3 ~) l# y& u/ m& U6 I2 }
newColour = new Array(numLinks);7 B2 e F0 p0 ?' o1 s1 l
tID = new Array(numLinks);* k n' Y9 O5 |# V9 I" d
redInterval = toDecimal(bgR) / numFadeLevels;
6 v$ I1 A' o% b! n) W greenInterval = toDecimal(bgG) / numFadeLevels;
% o. l1 x j# A1 V5 E. j; i blueInterval = toDecimal(bgB) / numFadeLevels;, X0 ^9 C+ }; s0 z
initArray(currR,numLinks,0);9 v8 A% ?/ G0 c" K4 X: ?
initArray(currG,numLinks,0);
& _* d- { I- l" M: x. r; ~ initArray(currB,numLinks,0);
# v7 y. L' m4 s& F- w initArray(count,numLinks,0);
( p; ~2 j, w" ]5 l# r& W initArray(fadeOut,numLinks,true);
0 ?. k4 {+ d7 K initArray(continuous,numLinks,true);
+ J* x: P% `+ o4 W8 L" M9 `}
, A5 t. ^) H4 q4 ?' a+ B8 Tfunction startFade(id)# h7 h5 u2 o0 _5 T' d
{
. f; x6 l$ c7 q* R$ i! \ if(fadeOut[id] == true)
, ]7 o* m' [1 ]. P9 ]2 n4 M. ^, P { /*move colour towards background colour (increment)*/( }& o }8 [( z* h" b/ C5 j8 @/ I
currR[id] += redInterval;& b- J: z9 x8 O. z( u. \- L
currG[id] += greenInterval;: E& ?6 a! V$ I5 `- P8 `/ e9 t
currB[id] += blueInterval;9 z2 d# Q# Y: X5 e" Z- f7 K; W
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: K/ W/ s. F% z, ^) K9 S4 z9 ~5 W" V# k if(++count[id] == numFadeLevels)
" y$ e, @+ V8 R' v. r2 g ]* t {
/ `& D8 y- s- m. f: u2 U fadeOut[id] = false;
) e) s- R% s: b) o R }+ `/ D7 V4 W' Q
}
" p* f2 g+ @* j+ U. |5 \ else
A$ M2 |3 ]( H/ [9 }/ Q: E. R {' C; t' p k( O2 a
currR[id] -= redInterval;
& X) O9 a s7 [! j
3 x# n& K7 k( b; p: N currG[id] -= greenInterval;
% T# a. n% } ?4 t6 [
C3 H, N; w! y" z currB[id] -= blueInterval;- z @3 T w* A; ?5 F% b
w" O: g, {5 k+ P/ B# [ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);0 e# [5 v E' Q5 H4 q2 l. h
0 V& `8 \6 j; Y: M- H) v) N if(--count[id] == 0)
& g1 l$ N$ Y: D2 E) `, U4 ?
( w, c' H; Y9 s* j+ }/ s! Y {$ X% a: _9 ~) s0 x5 j
# k& z& h. t! G$ v fadeOut[id] = true;
1 o% R' q% x' z! c- x, r$ C) X
0 t, j( R; R3 D; n7 d, h5 h$ z: {" ]3 W }
+ l) c. Z. L( N8 h1 N6 r2 ^' s5 \1 e: R/ r; W' g. @
}! }# _5 o8 h0 p+ h
# U9 J8 y2 a4 H* ?2 f! Q
if(continuous[id] == true)( B- J: `' W0 F% \# m7 G5 J
+ ?5 b. M* o9 A. T- ]5 i {4 V0 U( m1 M" H' s' u# P4 K8 I
( _+ D) n& J' N( {' q# x; w
document.getElementById(id).style.color = newColour[id]; ! [/ y; u/ ]" _8 t1 Y$ c
( P3 T( }, D% ?4 v; l# o: M) y }5 c9 c) Q7 W4 d+ q7 {# q
& W- @: n! x) `$ P# O% I3 ?2 T. V else5 ^$ R8 f9 O) `1 B! s' W
+ P3 ?% \/ w I( R {$ [" P0 v. c4 @1 s X! R; G
, x( T# |; [! Z* \8 P M document.getElementById(id).style.color = hoverColour;$ @& U4 o' V2 w/ U2 F; I* c/ C
, J* A) C8 ^; q& T }
6 }; J+ y/ Z F5 H# ]
3 d0 Q3 U) ^. Z$ r; u clearTimeout(tID[id]); p# N5 k2 N: r4 I o: o
2 }% C4 Z" F- t. m. F: N& o g tID[id]=setTimeout('startFade(' + id + ')', rate);
. j2 t7 m7 [( q3 H9 H+ H/ k/ b4 A4 D1 H; v: X
}. ~4 ^ d4 Q5 Z; W
( Q4 F) z+ w" {, U) [: J* x
function continueFade(id)2 k* e4 i" C6 E4 [
" W; w5 H$ E3 ^8 c{# S( h k! ` j
4 g$ m2 |! S m. k4 X- D& u continuous[id] = true;& q/ H3 R3 _: s. m& {
, o" I. K2 j# H+ |}: h4 j' ?# y. n% u" h" N/ X# c
( {4 O# ^6 q. L- G. ?8 M5 xfunction stopFade(id)/ C% ]; x, ?7 k
# Z* W: E) J. U! A$ \" B9 x+ t/ H" D{
" {& C C! x; t: O$ J; H. A0 I3 z! {6 }( ]6 \6 g0 N
continuous[id] = false;
6 G9 p% c p/ O! ]+ U- H0 w
. z% R9 e3 n- @3 P }}' ?% v' W- a# r& c' j
4 f# P* f8 K8 x- T, N6 O
function StartTimers()" X% T8 j" E U! B
9 s" ^5 D U/ Q1 }) [ A1 g{ //set up an initial set of timers to start the shimmering effect( U' k1 O- e, @& S' H
m* C+ p+ l# w4 b, J
for(id=0; id<numLinks; id++)
, p- e5 K' \# u2 E4 R
! D5 c: b5 K) _: R, X {- j5 Q6 Y4 L3 L9 _1 V
6 h8 ^$ b* w8 v0 ~
t=setTimeout('startFade(' + id + ')', id*100);6 T+ R' E& T; y9 n4 g. _1 O' w' |
+ z8 K/ w' y8 ~4 C& a# A# R+ X$ C$ V1 W
}
/ c$ O% ?7 ?/ e& Z1 \% ~5 a0 j; x$ S: M# m; d: ~8 s
}
( ?" T# W8 s# V1 o! B0 Q* X' u. x0 S$ A9 d. L% C3 {! z9 O9 z
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' o. S+ u$ k) x2 j9 ~' F7 B/ _& g( E
initLinks('#FF0000', 6, '#FFCC77');
: Z2 p5 O9 t$ ]0 o1 l8 j% }! o6 |, O$ ]0 c3 B
//-->
v7 H0 q# ~: d/ W% {% m
* ]* U9 f$ _. @+ w/ \</script>3 A9 }3 Y( q: `/ W) R
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元. M1 L- y o' b
</a>- j8 x9 U0 t- E
<br>9 j- r: O5 }/ f. ?9 M. F
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
* |0 E; u( i* d$ F+ O2 C<br>
. _8 E8 {5 F; O# }4 J* J<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>& G' p3 j" Z' W( Y- f5 r7 _0 x
<br> 0 h7 u! n$ l4 g F$ w$ @4 |
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" ^8 [4 S) _1 M5 T<br>
/ N$ r; _+ \2 \" v6 P<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>* P3 N# O3 R/ I3 t# @+ G
<br>
! \$ \; V3 s4 `) g3 E) s<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 i5 j: T2 G( o% j8 n
<script language="javascript" type="text/javascript">
' A" H1 n5 j4 f g<!--
4 z; M, L( ]+ n8 m% p7 C* k# [setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
/ ~$ G& l$ \5 t3 I; S( g0 H! S//-->' s7 ]" L/ m( Z' `9 v R
</script> |
|