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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
; `$ P9 g& Z* T1 O0 I* D<!--8 Q6 W4 n* _' `. X8 t. f
// convert a single digit (0 - 16) into hex8 [: Z9 ^) e) l4 I2 N7 x
function enHex(aDigit)/ U! r( @: a! A- @+ G2 q# N
{8 y& w/ S, J$ V, T/ w
return("0123456789ABCDEF".substring(aDigit, aDigit+1))* O/ b ^" q$ u1 e, u
}
7 m9 z) H+ H# `8 r; y5 I3 c// convert a hex digit into decimal' s* p2 t3 m: Q* N5 t
function deHex(aDigit)$ E5 U. H' ?# z! o2 K1 g
{0 x, i/ a- ^0 Q% ]; O3 A" P- G- _" ]
return("0123456789ABCDEF".indexOf(aDigit))
4 u. d. Q/ }0 B. g |- k6 n}; I- V+ @" b' P3 k% a
) S/ F$ J- l. N5 h& A
// Convert a 24bit number to hex
3 M+ d* w5 d% R6 ]' \9 @# r: G+ hfunction toHex(n)
5 ~- N) f [8 x+ o& A+ `( ^2 O{9 I3 w* _9 ?" \' T( ?9 ?1 N
return (enHex((0xf00000 & n) >> 20) +/ g [2 ^. u% c6 A/ Z# }. n4 e3 ~) o
enHex((0x0f0000 & n) >> 16) +
/ F' I* q9 g( w1 N enHex((0x00f000 & n) >> 12) +
$ r; P! H/ P2 w: ~0 G enHex((0x000f00 & n) >> 8) +
! B- @# W' `0 N enHex((0x0000f0 & n) >> 4) +3 Y2 C3 l: w/ s" M" ^
enHex((0x00000f & n) >> 0))
- ]7 T1 A4 J# o- H# p}" B; T6 D3 {$ a/ W+ a8 e/ I
// Convert a six character hex to decimal
/ ? l- F1 O f+ ^function toDecimal(hexNum)8 X) ~ |( {3 I: v; [+ \/ p
{
/ A) ?( ~) G! @+ g, e8 n var tmp = ""+hexNum.toUpperCase() C2 U! _# j/ j: h. y+ {9 P
while (tmp.length < 6) tmp = "0"+tmp
+ Z/ E7 F1 n8 E return ((deHex(tmp.substring(0,1)) << 20) +
* c, m% J' ]# r# H (deHex(tmp.substring(1,2)) << 16) +
5 H* ?0 W- y! O* ]) A (deHex(tmp.substring(2,3)) << 12) +
; K: ]) w; F3 z( Z* y+ r [ (deHex(tmp.substring(3,4)) << 8) +& P } E9 P% z
(deHex(tmp.substring(4,5)) << 4) +
2 P1 e$ j2 i( n: d' X (deHex(tmp.substring(5,6))))
/ \/ e0 v& L2 z$ M [1 Y7 k1 J$ ?}
0 U- Y2 Q4 h- D: `///////////////////Shimmering Links/////////////////////: ^8 o4 ~' q0 W, A
//global variables! ~- g u8 W/ w9 f' t# N
var hoverColour
5 v/ {0 V/ n, N0 f, w! Q, s4 q1 vvar numLinks;* N8 p7 g2 {2 t I6 g# @2 K* [) S
var rate;3 d) s: \8 M) d5 l" ~2 s! m$ R1 a
var numFadeLevels;
8 b+ R5 E" T' ~+ T; gvar bgR;
?# r p( S% H: w( F8 Wvar bgG;+ ~" `5 h1 \' g: h+ O! X: N
var bgB;" E3 M; `' F u+ i: q7 i
var currR;
0 `( d- ]) s! Lvar currG;6 s# i& ~, Q7 ~6 h
var currB;' V: u8 Q* O' X; N( T
var count;
}1 K: v3 w! V9 Rvar fadeOut;& J5 [) v" z; `4 |, A4 S
var continuous;: j; ]; {, y0 r
var newColour;
+ D4 ]% i8 S Hvar tID;3 y4 b- _! g O& ]! X e
var redInterval;
6 m# h5 s1 d: R/ pvar greenInterval;: ^. d6 H1 @# Q
var blueInterval;- y( ~- N7 a% l" l9 r
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour). G5 C7 q$ x+ o! ~# |- Z6 n
{
0 j$ k" k F- a* s hoverColour = mouseOverColour;
$ L4 a4 @9 T" [" S. { numLinks = numberOfLinks;
( G" o [! M% S2 @* Q/ c rate = 1;0 ~! Y! c2 A* S8 l5 @2 ^. y5 g
numFadeLevels = 30;7 R' U- V" M) t7 R# ]* ?+ V" y% s" R
function initArray(theArray, length, val)
: R" ], v4 M4 _- s) x& w2 F0 r5 { {/ C( N+ C; |3 Z# }: d) T
for(i=0;i<length;i++)1 p: E% h% _6 d" B) j Q. Z
{2 {; z7 W4 k; W8 \& |* w
theArray = val;
, O- \3 H2 B' G }
3 b* _" _' c$ T, F- p: s }8 d/ G% l; C% r5 P0 O( D
bgR = '0000' + fadeOutColour.substring(1,3)
9 z0 |7 a) S7 D4 H8 c( Z bgG = '0000' + fadeOutColour.substring(3,5)
3 r* b2 [$ n1 J0 ^4 m bgB = '0000' + fadeOutColour.substring(5,7)
8 g$ w( x3 c" N4 v% i currR = new Array(numLinks);
+ b) Q7 x' ~8 X/ A currG = new Array(numLinks);
1 I- m _+ |) G4 v currB = new Array(numLinks);
( C$ g+ U7 N! y" r" m+ n' B count = new Array(numLinks);! u% Y6 ^) R# P0 U) \. E
fadeOut = new Array(numLinks);
( [! ?8 U1 h- u$ y! d continuous = new Array(numLinks);
% Q+ C' K+ l$ @" k `" G) o* S newColour = new Array(numLinks);$ f8 U, R9 y% E, y
tID = new Array(numLinks);
! d. V4 e% j( _4 J e redInterval = toDecimal(bgR) / numFadeLevels;
) {$ ?5 s9 c& k* L1 d! i greenInterval = toDecimal(bgG) / numFadeLevels;9 ?3 B1 u1 W; z
blueInterval = toDecimal(bgB) / numFadeLevels;
/ @# ?, c2 G( q+ N initArray(currR,numLinks,0);" y' n3 S' a0 I V. M, s+ ` B4 R
initArray(currG,numLinks,0);/ U2 b# `( |# [3 h: r! y+ Z* k }
initArray(currB,numLinks,0);1 @( j; _1 o0 }$ W7 f6 B+ }
initArray(count,numLinks,0);* ]1 O+ |1 _) g/ w
initArray(fadeOut,numLinks,true);
* o8 Z x& ^2 q! J3 Y2 q2 |: d initArray(continuous,numLinks,true);9 q3 I- L0 r6 _4 K
} 7 ~ J9 T: s+ R' \
function startFade(id)4 C( P9 P% g' N9 f
{
0 Q: v% s: ^. S. r, v2 U/ Y0 Z# K6 y! u if(fadeOut[id] == true)
9 v S3 u, Q( y; I { /*move colour towards background colour (increment)*/
: x$ u* W9 ^3 Z" A currR[id] += redInterval;3 U' g# Q$ z- w# f" N# f5 ~
currG[id] += greenInterval; E4 a* s/ I# k' O- C1 ~
currB[id] += blueInterval;
1 j- d3 u8 I& U$ o5 b0 x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: F1 `" r4 Y% d5 _( h9 S6 W6 }
if(++count[id] == numFadeLevels)- Z" ~" o" T# b$ w' t; E3 B
{6 m" D) c1 x- c1 N' m
fadeOut[id] = false;
1 e" W1 E) O- A' K' P' F }0 v+ b3 _* E/ H2 l+ Z, O( d
}
7 ]* G2 Q; w: X# z$ W3 n* H4 J else
9 J/ L" ?+ W# k" k {
' V8 |( @3 `9 i* F) J currR[id] -= redInterval;9 i7 v' B4 N9 H$ q+ c7 N4 G$ N* Q
0 Z' m- v) N2 X) S7 g currG[id] -= greenInterval;2 e5 i( j% @5 N4 R8 T
, K1 P/ Q2 l6 w
currB[id] -= blueInterval;7 C8 h3 N& }9 c' R8 I- w
. Z3 }- ~" b. F0 j
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 L+ a8 [) c) V* M' P
6 X U% M1 s' {" i; O' a if(--count[id] == 0)
+ F7 I( n. B3 d, Z8 G2 j. D: Z! D# q$ }! I. p
{: s) x" ^5 M8 K' R6 N6 ^
" q5 M w$ D4 ~* d
fadeOut[id] = true;% V9 s; n1 T: T7 j/ b9 B8 s
5 m( x9 O, D5 B% @& m
}' r9 U6 Y- q9 S+ U
/ D; N$ e( N, z* E; h }5 W1 j! r* k( x) [ m" T% a
+ ^) `# I( v3 Y* e
if(continuous[id] == true)$ a) D* ~* m# m; B
8 P; ]" [9 J H% n. |
{* M- L. S6 M& X' R8 @3 x
5 V; J1 i) p9 X document.getElementById(id).style.color = newColour[id];
/ ] J; p$ C! A+ ~4 b) [0 o& u( s& i
X: k G, i, b# i- U7 v) H3 d) y4 ` }$ D! ^. K% p$ @( d5 P5 H
0 |( O- k8 l- N/ M- x
else
# r4 B$ X6 D" Q: e, I% {- M, J4 j+ j/ Q3 H9 e7 O4 [& |; |( v
{
( O/ Z. c. L4 c* p1 |) X# X1 i, K! z' w5 |" x
document.getElementById(id).style.color = hoverColour;
$ W) y5 v/ s5 v2 w2 f/ a+ D" T+ d0 x, r _) s8 g8 |
}: e- u ~( X* M( V, X( j
5 N# {* w5 [ _0 |5 t9 a
clearTimeout(tID[id]);
5 p+ h& V w' ?2 \. m" e' o. p i5 M% O; D
tID[id]=setTimeout('startFade(' + id + ')', rate);/ V0 N9 P, q5 F' j, A% g
) P3 \0 g$ s6 y7 h5 }2 ?}3 j; l: n" F# |6 D3 G1 B% H
+ }$ y6 { N! t8 M- zfunction continueFade(id)
t0 r8 P+ `$ o( V9 p
: E) x3 _( J, _, M{! e2 @; n/ o/ v, H; f
, ^; a9 u) ?1 d" q8 \4 L& i6 v
continuous[id] = true;
6 f2 C+ ^: C9 V8 o
3 E7 h. o i* K, j}
( }9 \' r' _$ x: x+ `) |, @
# M; V8 g4 {0 w1 g& p$ J* Pfunction stopFade(id)3 @/ L1 _' e, r7 U. t" S' X% n/ n7 o
1 z) y; J& r; ~
{
F! F! ]4 g& T. ]# E
) o$ r8 H* c5 m4 j, }2 b continuous[id] = false;
7 S' C* f* O* A1 |" o! e! U& r9 j8 w4 n" r, c1 X; t4 H+ @* P
}, d- q; f% t6 h" N, ^3 P! H
6 G/ M9 B! M. o2 b+ F9 W4 f5 Ffunction StartTimers()
# F3 m# I% W8 F, g. s; q; I5 s( o7 s
{ //set up an initial set of timers to start the shimmering effect6 S5 ]. [1 X! ?
: O' C$ C5 t( C; [
for(id=0; id<numLinks; id++)$ K* l8 E) Q* X6 c8 n
, S! A9 n; X4 b* G* C {) A# E9 `- ~% J( k v8 j$ P
$ h# N" h% n1 F
t=setTimeout('startFade(' + id + ')', id*100);' D; D7 V/ E$ t" y$ F
5 T6 r% a7 ?8 y, N6 f8 ~) J3 F }6 ~8 I" R k& b. \
, y4 h$ Y4 u" X2 H
}$ g5 S: ~ a/ @2 j( L6 m
- ?8 V' V4 y4 ]$ N2 k# J//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
( f$ _. S. |1 k( r7 r/ c
- |/ t: r# X: i* Y3 j5 yinitLinks('#FF0000', 6, '#FFCC77');
% W8 Y; u, s( G4 o' T3 k! m% s0 }4 }9 d+ N6 f8 o6 O+ e( Y4 {
//-->5 b2 f& B1 c) S7 u( J e0 j! F
# Z! ~9 F' S6 n6 T7 t/ a* ]( y9 ~% \
</script>- h8 k7 A' J8 d
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
8 Q' c) {* S, i) K' V/ @9 e' v</a>) k3 K* g4 C# J( a: N y) S0 X
<br>! ^& Y E' i6 K1 m& S! K$ {
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>/ `9 a/ `2 r2 D" G% x1 n ~" F5 x
<br>
5 J8 t( v6 `+ H, \+ n<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>, x$ p( T/ |% g3 u& a
<br>
$ p+ H7 f5 k/ }, h0 T<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>! c8 M$ z' F& o! d1 w
<br>: Z9 P0 e6 c% Y1 H, ^
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
- j+ q; H1 `$ N5 x* p<br>$ h- P/ _4 Q$ S* T+ g5 k
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>5 \1 {6 v- h4 k
<script language="javascript" type="text/javascript">
8 e2 Z* Q6 w" a& ~/ L$ K# U* O<!--" t, M2 S& i& {" r8 c& E
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering% f# p& A$ r# Q r$ x1 E; d( Q" @. _6 b
//-->0 y9 Z6 w E# t# F
</script> |
|