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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
8 n+ U+ d8 \4 \& B/ B- T0 b+ _<!--2 \6 ~9 Z; Z8 A% Y8 `
// convert a single digit (0 - 16) into hex
9 t3 b/ N v" D k; \3 w' C/ O3 Dfunction enHex(aDigit)% `" B, @4 p. U: q6 W9 d- u
{
0 n3 S. ~/ f3 P! J return("0123456789ABCDEF".substring(aDigit, aDigit+1))
' g3 w6 B; S: V; q a}" }' J& Q% W8 v8 t* F
// convert a hex digit into decimal
% r( l9 [( p. b4 I4 U; sfunction deHex(aDigit). p; f5 W% E9 f
{& u0 b3 q# u! y: ^6 [
return("0123456789ABCDEF".indexOf(aDigit))
& I P i9 o% D- ^6 X, C, S} v& B, a6 H9 P7 W0 c# L
" f% B/ Z' _9 k& x// Convert a 24bit number to hex- U" R( }9 _1 D' U
function toHex(n)* h+ ` F. `" Z5 t6 Z' l/ }
{' I" M; i2 t9 ?9 Y
return (enHex((0xf00000 & n) >> 20) +' G, D0 I5 J& p/ o
enHex((0x0f0000 & n) >> 16) +
, @! ]3 ?+ D& S1 Y2 }. X8 U enHex((0x00f000 & n) >> 12) +
8 T9 m# D |0 S enHex((0x000f00 & n) >> 8) +
; \/ J4 y) }3 N5 m) K; ~ enHex((0x0000f0 & n) >> 4) +
6 u9 J. b- y- j7 a enHex((0x00000f & n) >> 0))
) Q0 ~' ?* X7 Q9 B( c}1 Q* q& C" q( a3 ^2 V( [, l. \( n% l
// Convert a six character hex to decimal" B1 M2 `0 b4 Q* | [& E! H
function toDecimal(hexNum)9 m1 l3 F6 E0 Q4 P0 a& u
{' V" M7 I8 d* P/ M4 ^. }
var tmp = ""+hexNum.toUpperCase()
4 `" P1 i! u; U$ i while (tmp.length < 6) tmp = "0"+tmp
+ Q; n+ z( K @$ t. B* \' p1 u! O return ((deHex(tmp.substring(0,1)) << 20) +
9 Q& ` Z) h! d4 |& p, p (deHex(tmp.substring(1,2)) << 16) +
, C3 ]7 e2 L( y' x/ {/ H (deHex(tmp.substring(2,3)) << 12) +
5 T* A, C) ^0 D7 h1 A4 N2 O- ? (deHex(tmp.substring(3,4)) << 8) +9 ~( n( C! `! Z* l0 F& S4 m
(deHex(tmp.substring(4,5)) << 4) ++ N8 v4 w# T- N, A, E
(deHex(tmp.substring(5,6)))); v; ?4 O( A2 ?6 z& b" U. G
}0 y2 M% |; M0 C7 z& v. Q5 @
///////////////////Shimmering Links/////////////////////1 R2 H# M+ C$ j8 {' V- K
//global variables
7 ~( O2 T! `: T0 V/ Svar hoverColour
& v' L' {# h( }. _7 I4 O6 fvar numLinks;. ?) g6 G# c$ S4 u# j
var rate;
0 y% {$ y" Y% N5 o# v; yvar numFadeLevels;
0 t9 O5 f" _2 x5 c- @var bgR;
6 w/ R% Y% }, U$ C) [$ Xvar bgG;
4 A2 N1 y5 b! c4 K6 ]. j. zvar bgB;
1 ~! G: F4 ]4 G; svar currR;" b8 u* g% d& q `; a w% J
var currG;
! C7 m9 A: a1 @/ f! Cvar currB;( z: c: Q# w o" D
var count;. _& G; h: u9 ^
var fadeOut;' E, r' f; }& g& v
var continuous;
# ^* ^, i* w4 E$ xvar newColour;
3 E5 J6 Y) V" {, D: g" ^var tID;3 S3 {" b% \' h# V
var redInterval;+ b- M8 U; C" L# W1 O
var greenInterval;& c' h& h& c; \( ?; Q* B
var blueInterval;1 H1 B( h7 f8 u1 D$ Y
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
1 p" ~5 P t! N6 F u{6 O9 N" h5 t) @# _. l5 E5 X
hoverColour = mouseOverColour;
9 @/ h- G) F& D9 n numLinks = numberOfLinks;
7 ~. h) b- R- T rate = 1;2 ]7 d4 j$ X5 g& o) a
numFadeLevels = 30;$ K' E; ]" ?8 {' c/ v- S
function initArray(theArray, length, val)7 i2 f6 B3 M5 J1 U1 [# v/ o
{
j" Z! D! E* i5 f# d3 g) J1 L for(i=0;i<length;i++)
/ i# n3 j8 b0 |+ g) @0 j {! B# d0 C i7 x/ E8 m
theArray = val;
8 l, }2 U1 l Z9 U }
# |4 }% z4 W, [ N" v: H }# a1 r# j0 i9 }9 t
bgR = '0000' + fadeOutColour.substring(1,3)2 Y3 A3 m, P$ L( P4 T2 Q9 H
bgG = '0000' + fadeOutColour.substring(3,5)+ f. I# o" E& }8 ?6 d0 U, ^+ t" U
bgB = '0000' + fadeOutColour.substring(5,7): U- z; f8 v0 y* x
currR = new Array(numLinks);
, ~2 J: C7 i- O1 [4 ]0 d currG = new Array(numLinks);. l6 e9 w/ J& \: W2 C
currB = new Array(numLinks);
9 b; k s% G4 o" X count = new Array(numLinks);
1 x r- g* M2 ?9 r fadeOut = new Array(numLinks);
& R0 W# H/ z* h9 v B continuous = new Array(numLinks);
9 W0 u! G Q. x( ? newColour = new Array(numLinks);
* T \( c# R+ p6 a+ k tID = new Array(numLinks);- [8 \3 d8 a4 A7 N
redInterval = toDecimal(bgR) / numFadeLevels;
% _+ u D! I4 g, k @0 K3 \" M greenInterval = toDecimal(bgG) / numFadeLevels;
- P5 v9 @& t. N3 S blueInterval = toDecimal(bgB) / numFadeLevels;( C& }; n$ q d* z, n
initArray(currR,numLinks,0);
- J4 K" V$ Y: I- Y9 F: n initArray(currG,numLinks,0);' @& z! k6 g3 p8 }7 t5 {
initArray(currB,numLinks,0);( d1 X/ c4 ^% J& p0 I
initArray(count,numLinks,0);
2 f7 a: n n+ ~0 x initArray(fadeOut,numLinks,true);1 |% W4 y# D! Z9 A& v
initArray(continuous,numLinks,true);
+ X+ e( M* s$ {& S, X4 V, _1 H}
( l* S8 c7 {' y" S- i) m% Qfunction startFade(id)
: c& O% ^1 O3 T' c; F{
0 w9 _. q1 S. P: }. P7 { if(fadeOut[id] == true)& U: g& Y/ k5 E$ ~* |/ ~( j+ J9 M3 T
{ /*move colour towards background colour (increment)*/1 ~5 g2 t; x. O) _3 R) u8 X/ n
currR[id] += redInterval;7 V: R& Q* i) N6 b& Q- Z
currG[id] += greenInterval;
6 b( M& o) J3 _+ x currB[id] += blueInterval;2 S; A+ x1 h+ M3 P. I5 f
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 V. g5 I% Q4 Q8 y. F9 v
if(++count[id] == numFadeLevels)
% x+ \6 O' v7 e# ?/ F0 B# x8 N {, L4 F8 n$ G) V" a4 G6 W5 v" v
fadeOut[id] = false;
1 d2 Y8 v I7 L+ j }) m p1 ]3 ^8 @. N/ e6 k) z6 J
}$ l( n) N- W, B, w5 ] v( ~8 u( X" \7 E
else
8 X7 e* A; o7 T4 D. G {
0 [2 H8 Y+ F" v) q9 \$ ~ currR[id] -= redInterval;
- Q* v$ J. a+ q, o4 `1 |/ M, k
9 U* W' E/ E" |! M" M% W currG[id] -= greenInterval;" j; n& ]: g2 @! f# _
1 |; r4 R6 X) }# k* `$ T- P
currB[id] -= blueInterval;
+ i; C0 }1 ?9 \" Q0 x }" F
( f( P, Z1 o# k) M8 e newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);- x- e+ M o* m! K" ^
# U+ |# b9 y ?# K( v" C
if(--count[id] == 0)
( }3 O: ^' {/ k* {1 j/ i: T: Z9 x/ t* L+ \! I0 r% g
{
7 Y5 q( P; x# N6 D
! h6 V; [3 |# _+ f5 h: y fadeOut[id] = true;
( d( H. w8 K- e, w* Q6 T* q3 C {" ^" S
}8 Q4 e3 i9 T6 v+ q, D3 K' _ }
* u5 U$ Q& r, t. t' N9 v
}
2 K! H7 p2 s6 n5 E# e. F: O4 o+ w, @$ y% z7 ~ K2 Z1 v
if(continuous[id] == true)
3 v' e$ g2 s5 Z: c" ^+ [6 S! k% r/ l3 b m. f# E# F
{
" u: w- n' o' a2 x( h2 d+ D2 k# J# _2 N
document.getElementById(id).style.color = newColour[id];
7 T2 _ g; ^/ M) Z) o G
- m( J% ^% W* g' n) X k }
! L& }+ g( W; h, X
* J- s+ w/ O1 l* F; V- s# |' M& t else
2 T" O3 W2 T- |; ]1 O: H7 _
$ `1 @# Z" Y. b% r {
! [% q+ X+ y" d. I9 N/ G, k
5 Q, b L" Q8 V8 e& o3 v document.getElementById(id).style.color = hoverColour;
4 G3 c; Y ]3 Y G& {2 `" X8 M& |8 |& C
}
9 c4 J: {& Q O# G5 k! C
; {' G, k8 H* ~3 Y) a clearTimeout(tID[id]); ~; G( V2 H7 N" Z" @# z
4 Z- S. m% O: A) n6 `& `" K- B! i: z
tID[id]=setTimeout('startFade(' + id + ')', rate);
# t) G" o' c# b5 Z
9 [4 b5 g8 K2 g9 [}
' e" F/ b* X: [ y; b) ]* p. B# u* b
function continueFade(id)3 K* ] q! y9 j, Z& |% G
6 z5 x L0 `! _2 D6 R
{! q5 k1 U$ F( q1 _6 I
0 S3 b; `3 P# Z' A& l& {; O continuous[id] = true;0 h4 i, t9 N. U `: @- x
# s8 u6 |# d; A" b; c$ J
}4 h4 o2 j. |% Y
% k0 t M( p. J& ?/ X. M1 m1 k( x
function stopFade(id)# B- x2 Y* ~# v# t+ E4 S3 J
s8 |7 Y: a D' f0 ]. u
{
( \. ?( K' k; e4 ?/ ?) y, j( Z7 @) b# D. h; c+ M$ @ K2 H
continuous[id] = false;6 {) N" s5 m0 _$ y& j
7 ^# w8 e; J2 [! X8 F' {}$ Y7 i! r; W8 ?7 L" X' F
) b# i0 i% y3 L+ wfunction StartTimers()- |: Q/ x" Y- B2 n; T. N6 T7 I! i
8 B6 f8 I& u7 a) J- ?{ //set up an initial set of timers to start the shimmering effect3 c, l) t' Q+ y& R2 w% E
/ f1 N3 L0 a6 Y7 `4 d! j' `- I for(id=0; id<numLinks; id++)& N& T7 b4 S4 g: l0 ^0 ]
, y3 k! ]) g# M% E7 M. @
{
& _( I7 z6 v1 M; P, t( y0 e1 L! `7 b' P! x$ }
t=setTimeout('startFade(' + id + ')', id*100);
_0 ~1 E [+ Z2 P+ o$ W+ L7 T1 }7 j: b9 J; g S
}/ O5 l: m- t; M
% b$ O0 i" ^$ B; @+ \2 q" a) o) F
}
) L: I( u' [0 `* {. ^( y" ? _5 [8 F) D7 R! i
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- P9 Y# J1 I7 @" N4 O
, \. S1 P- j8 u" Y3 N1 h
initLinks('#FF0000', 6, '#FFCC77');* h# J4 o7 b4 i) h' T: p2 s3 w
: ^. [! }# z, r+ B# g& y//-->: T6 |. q% w3 G, O
- v; H I1 g: B0 e1 e2 J</script>
$ I' r, c1 B) a<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元! Z% Y' ~' N/ Z
</a>
0 \. E+ d; }' G' e2 |5 [<br>1 r3 K- |5 ~7 g
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
7 x8 h4 c& A% c# P<br>
# A2 P- e+ `' B<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 _. B0 M" F! Y& ~0 X! {6 g
<br>
) q4 k- \+ a- N, v L<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
A9 b4 @* t+ K3 \( R9 @3 W<br>
/ ^6 Q% d8 N9 Z5 V<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a> ~( o1 }0 m7 t4 V/ \ L
<br>
9 f; R3 C b+ G<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
2 z4 l8 Y/ ]0 i9 c3 f<script language="javascript" type="text/javascript">$ A; e: j- A Z5 N) ]. Z
<!--
+ P2 {. s) ^% x& W$ l7 HsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
X$ V& q+ h" ?* u$ B//-->
* c" J8 j- R4 y$ R! r</script> |
|