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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
$ Q0 Y) z, `. p* g<!--1 g* A; ^+ E# k3 _ @% N. ^
// convert a single digit (0 - 16) into hex
9 @9 B* w0 F! e+ hfunction enHex(aDigit)5 G0 m) U: S! e2 U* U" F* Y
{
: F: a, B; B; C# ~3 l) | return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! B: Q3 v, l/ U3 h% R) F}
/ z2 W/ `4 k* s4 B7 f6 v9 d// convert a hex digit into decimal
( [, L; g: o# d3 g+ g- Rfunction deHex(aDigit)0 X0 x7 i, J# i1 ?. e s, `
{
# e# D) b: K: |7 ]8 J; ^! c6 L return("0123456789ABCDEF".indexOf(aDigit))8 q- `: ?( N! a* u
}
+ F( Q( ~5 O4 s2 \/ A9 w, x# c, Z0 u* P
// Convert a 24bit number to hex7 l% e T/ g5 _9 P
function toHex(n)
" ]3 K# j Y$ c8 U6 r- `" U$ k{3 Q0 k* w" {8 N' k
return (enHex((0xf00000 & n) >> 20) +
$ N' m/ i# d+ U9 A$ G enHex((0x0f0000 & n) >> 16) +) B( J* o8 ?6 r* X
enHex((0x00f000 & n) >> 12) +
) \; Y w3 | m# L enHex((0x000f00 & n) >> 8) +5 `7 b. a; H/ m( P% ~, L6 m
enHex((0x0000f0 & n) >> 4) +$ `5 Y8 n9 \6 ~" }4 X
enHex((0x00000f & n) >> 0))
* b1 d, Q% S- D/ C% a}% \0 B. i) Z4 ]2 _
// Convert a six character hex to decimal. P# T2 B2 K& v6 V& e& p$ X
function toDecimal(hexNum)
3 y1 U$ H1 M: ]6 k{% N+ n( |# `: Y" g: g4 Q
var tmp = ""+hexNum.toUpperCase()) D8 M2 W% Q& H. R5 t q
while (tmp.length < 6) tmp = "0"+tmp& r1 _! m7 e4 G* ?8 @$ a6 ^
return ((deHex(tmp.substring(0,1)) << 20) +* Y. v% w* e; e+ n2 l" x8 X
(deHex(tmp.substring(1,2)) << 16) + 3 w; o" y. o+ n1 T: `( ^
(deHex(tmp.substring(2,3)) << 12) +
4 n' K, R; `" W0 E! ?% M4 }9 R$ M (deHex(tmp.substring(3,4)) << 8) +
2 ?* g" N4 R; T; x (deHex(tmp.substring(4,5)) << 4) +
. K, J6 l* X9 ^ (deHex(tmp.substring(5,6))))4 e1 f! a9 ~+ P- k. X5 @$ v5 i
}
7 w! B% {$ e% B/ E///////////////////Shimmering Links/////////////////////
) I$ d2 G2 i4 y* F$ v//global variables8 w3 U$ J/ X# ^% `% a* M
var hoverColour
' U2 \& ~% ~# x3 Y1 R) W0 l& l2 y% uvar numLinks;7 N# S1 f& d& M# e1 o6 g
var rate;% z1 m3 A/ V* g' |7 A k
var numFadeLevels;- ~' e+ k1 J+ L6 ^) d7 E
var bgR;
4 v) o( v) \0 H% S- jvar bgG;
& b* }7 o& P |% }' j* avar bgB;8 c2 z8 x+ v. }
var currR;; g# o. p" j: d4 W; d" H
var currG;
8 s* R0 ]) W8 E0 D3 a; [9 g1 }var currB;+ t" t2 l+ F0 j! w, W4 g1 m. N
var count;3 T0 r9 E9 Q& |2 ^, U! [5 @
var fadeOut;
; V6 N3 C8 H* X6 L) ivar continuous;
8 X( A# |1 b! hvar newColour;
9 l! G& T0 H1 q( b. _9 hvar tID;: D. a9 F3 y6 ~/ z$ c& h
var redInterval;0 L0 v$ Q/ E' h* o# f7 f% I$ n) u
var greenInterval;% A# k$ V6 z4 P# I
var blueInterval;$ j1 H( i' ^6 \% k$ L
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# a2 F# A: L7 m) C. j{
4 d+ F6 z; e+ a. i/ x' M hoverColour = mouseOverColour;! j& x7 T& b3 M. l
numLinks = numberOfLinks;* _, l, }" z4 b3 T
rate = 1;
$ ?7 `6 v: W4 l9 R7 o1 f numFadeLevels = 30;0 v- K& C% q3 D3 u; n) ~
function initArray(theArray, length, val)- L a9 O/ B6 z9 z/ ^/ F% `8 S
{5 V9 [( i$ J/ a2 q3 c6 r
for(i=0;i<length;i++)
+ }, R2 D6 Z5 S/ F7 h8 v- v- i( N: E% g {
3 U& N. d! n2 }. O theArray = val;' F8 W/ {4 t7 H# ]2 ^
}9 A ]# G. c0 x) X, H/ b8 ]
}3 _1 [4 O% w+ F" ^+ G' K R
bgR = '0000' + fadeOutColour.substring(1,3)
' s1 K8 W% Z7 M3 d! M8 ~/ | bgG = '0000' + fadeOutColour.substring(3,5) \3 N. o9 {- m8 C
bgB = '0000' + fadeOutColour.substring(5,7)
; e7 E- T0 F9 J! t8 s7 L; {0 @! d currR = new Array(numLinks);
( c: ~/ X+ z; Q currG = new Array(numLinks);3 F4 q( A% z h8 [7 ^7 T; M2 ]' Z/ o0 m
currB = new Array(numLinks);
, q: O) b4 n4 E* \: U2 v) ~0 o count = new Array(numLinks);
2 N. l- V. e( p1 [ fadeOut = new Array(numLinks);
; J5 y' u8 U, _- U8 x continuous = new Array(numLinks);) v, g* S) n Z+ l; Z
newColour = new Array(numLinks);1 `7 U% i! O7 n- l w( ^
tID = new Array(numLinks);
: f4 r1 }' y% [ redInterval = toDecimal(bgR) / numFadeLevels;
% v* n/ @5 w5 y$ H+ W; {/ V8 w greenInterval = toDecimal(bgG) / numFadeLevels;; ] I5 q# C) l3 P) w8 Z$ T z
blueInterval = toDecimal(bgB) / numFadeLevels;
+ ^$ c6 L& d- I. x, k x initArray(currR,numLinks,0);
9 ]" Y- R; e6 X' C/ w initArray(currG,numLinks,0);, V8 [# C6 M& Y0 g
initArray(currB,numLinks,0);6 V4 a9 ^$ ^5 p/ ]* Q: K5 N( }
initArray(count,numLinks,0);
2 h, a7 F$ R2 @7 L2 J# Q, `8 a1 y2 Q% x initArray(fadeOut,numLinks,true);. C' ]/ S+ }6 t$ ^- o
initArray(continuous,numLinks,true);
$ ^2 \5 q9 M% h! o2 N: _3 D- m s}
% L/ j+ f0 y' G! \8 Y* z# n0 @function startFade(id)
. i) n! A# b0 j. M7 A) \. w& Q3 s{9 A! c4 y! G8 ?2 y
if(fadeOut[id] == true)" u1 J8 k' l0 z
{ /*move colour towards background colour (increment)*/
( S/ ~ I6 B h, A& T: W2 k" G currR[id] += redInterval;
% S; r4 T6 v2 g# j' G' j1 z currG[id] += greenInterval;
) b( y0 v$ X2 z6 k, g2 [3 ?. t: f( F currB[id] += blueInterval;( j6 `7 A+ e0 a( }& e0 b% }. `
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 S4 d' m1 Y# X$ i9 G& Y/ Q; O5 B if(++count[id] == numFadeLevels)0 m, n+ {- F: K/ p
{
# d Q( o5 p8 }) R! A fadeOut[id] = false;
& w$ Y F: T/ V; Z7 V }3 H5 s% C/ L$ T* Y
}
+ Q7 i: f& `- K+ V: L4 w% f# i else( D, b+ w: K- r3 N$ x7 g7 j
{
2 I2 c6 S( K* ]# w% T currR[id] -= redInterval;& F' V+ \; Z# W% k: c
, B/ B; m% a% K7 r9 ^ currG[id] -= greenInterval;
. B& b( b; Z8 r- C. l) @
7 ]3 Y8 J+ U8 y" ? currB[id] -= blueInterval;
" u$ [7 T% ]. R& a* n z) C M
4 y0 l: \$ A8 t: C" O newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 L- S( g/ K! @: A J! U
; W" ^. Z7 }1 I5 @" j if(--count[id] == 0)
( \ d4 Y4 q1 f R- h
0 q3 Q n( E* J7 e1 P {
2 |" v, C* Y7 o! ^, a/ j0 ~+ B! M$ U* A) p- j: e
fadeOut[id] = true;% Y( N- I- b' f1 R2 J& U6 g
* |3 y6 N) Q6 c, t/ |2 B8 u
}
/ s2 ]. V4 b' c
2 v9 h- ^0 a8 d7 T" B5 F }; K, k0 `; `) g
3 r* P# }% x- h& d8 c if(continuous[id] == true)
( u+ H$ K* l- v) Z5 A
& E0 L- z4 j; A8 ~8 ^$ S) X {
$ `: D: U( E! b+ }3 y! M- M7 \( b$ M+ c
document.getElementById(id).style.color = newColour[id]; $ f1 ^6 D( k0 v9 i
$ ]$ _& R6 U" g3 y2 p# D# U: F
}+ W& n( V0 h3 f8 [
4 i: m, G3 F) L3 h$ s- E
else
8 k* v( t; a L6 j
2 l0 s( _( O9 E* v& p( E, t4 U5 D {; z+ Y s! Q& K+ h) f- @: L
7 M. W3 C1 x4 w3 I( Q7 E" e; g
document.getElementById(id).style.color = hoverColour;4 t, g4 y4 _& z( w9 L
% m3 n( H: H+ a" V0 B }5 Q H8 V2 Z. X& }( W1 p
, x' g0 `8 ^% V3 B, D
clearTimeout(tID[id]);( }( J: H* \( A' P- \$ s2 g4 \
; m; o" }5 k) @( x6 `1 r2 Y
tID[id]=setTimeout('startFade(' + id + ')', rate);$ u" G/ z3 `* Q9 D1 J, V
0 @; m* I0 y- v/ p* W# @, S" P f C}
9 ^, d( R, v: |1 w6 F, f
% o m/ l x% ~# h0 pfunction continueFade(id), s0 U# q1 T; f
7 N* I$ |) U8 @! X' c5 O! O( x' R& g( s
{
7 W; g* k, P/ a4 f' C: l. H5 b9 W2 m5 E# x% B% I
continuous[id] = true;' o# H# G, l$ N* d
7 c2 v3 _* V! V
}+ W3 J, T& r' B8 K& v# k: N: K
+ L$ _9 b1 m1 t: O* s! M g
function stopFade(id)
, D% _7 P' t- c' j
. o& |9 v% d9 T4 ~3 R{8 g0 |+ A( l, r$ P! f
/ Z1 o% b0 E) ]4 W5 \' h) s
continuous[id] = false;5 I/ i9 j( R# m+ |0 ?' a f* a0 _
. a4 }) C$ _% h7 M7 ]5 U
}
0 B# [+ p& C' e( n
% B. D' c1 }, X( P5 R; kfunction StartTimers()
2 q$ r# \$ }7 ?/ s9 w' Y- y, X1 \- ?% d& o9 ~4 H/ y1 m
{ //set up an initial set of timers to start the shimmering effect1 h% y. Q/ |4 j3 Y/ a' P9 T0 e
0 j! p2 A2 \3 u$ |$ F for(id=0; id<numLinks; id++)
% N a* `" A8 D7 ]( j
$ f+ ?+ {3 |; s( S: d7 h {8 o3 r* f3 P! X5 P5 i
( x7 T* ]/ m' q& c t=setTimeout('startFade(' + id + ')', id*100);
+ {5 w: t( G: a, Z: T( ^
0 E z D1 ]0 i }
( G/ w5 h1 u: u* @% h" }; y
0 W' Q; o3 E' T- j+ c& [}
1 z6 _; I6 a% {6 p8 Y0 X( l
' N; p+ Q! F1 i4 \) S$ D//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
2 x0 P; J1 q3 U. V
" c5 o) U: R5 Y( Y7 N( JinitLinks('#FF0000', 6, '#FFCC77');8 i- y$ `) u1 m; D
' k9 c: h0 ]3 Q+ L
//-->
) N3 i: Q6 Y4 L3 K& M& j% r! i T' O; B$ p& Y0 f M8 f- @
</script>
6 p; [2 [% O0 W6 K<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
3 Z- _; \! [. q8 |8 O5 V. b' o</a>' H K4 D3 R/ a& c! o; n
<br>
+ q! x. b' W _0 c7 s8 Q' F! q<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>4 S2 w/ [ W. [
<br>
* r! z+ I) l. E& {6 q& A( W, u' e<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>% c, f# U, N! \. K2 `% s
<br>
4 [, e& G% Q& X9 W" I& P8 R( R4 @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 |' {' Z) T+ V
<br>4 R) ^+ o2 C8 G2 V k
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
4 \/ \4 K% J: Q! D* z v<br>* K9 `3 Y) e0 M. \6 i9 d4 z
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
1 a7 X Z7 e3 W( L" z/ f<script language="javascript" type="text/javascript">, ~5 Z' t; A% f! j: S" g" X a
<!--3 O/ B( `, f" z2 d* w1 {5 C
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering! R1 C3 ~7 I* m/ X
//-->
2 h% F, E1 B3 [# T</script> |
|