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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">' q1 e( F" g: ?# p) j
<!-- M6 b( {; |6 O; v I# c
// convert a single digit (0 - 16) into hex
0 e5 t* d3 E4 X6 D" rfunction enHex(aDigit)
- o1 b; p/ e) P& q{! c7 d$ E' {% s$ v) m* d; P1 l# Q
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
2 d$ R0 b- e! F9 E2 O- Q}
& `1 R( l1 g% k: O7 s, O% e8 Y3 Y// convert a hex digit into decimal
1 C4 v/ a8 t9 b4 o) f+ U$ ~( [( rfunction deHex(aDigit)6 v. V/ s" l! |" ^+ u5 @
{
$ S |* |3 }: ]$ U# N; l3 `1 y6 w+ { return("0123456789ABCDEF".indexOf(aDigit))
8 W5 d2 O w0 a2 G0 g}
! I* c0 k# |5 ]8 O8 {9 L" c$ t9 H5 s0 K, v6 G
// Convert a 24bit number to hex
- ?; V# }5 t7 Y# _% q7 M2 u% R0 zfunction toHex(n)# q7 o3 U# }8 a; `
{
" @3 M6 f/ a$ k/ ^, X; { return (enHex((0xf00000 & n) >> 20) +7 F* j( B4 t3 k3 X& h
enHex((0x0f0000 & n) >> 16) +
& S1 A1 |+ y% c' V# Q enHex((0x00f000 & n) >> 12) +6 X; }0 M; B+ D! W7 c( C, V( R
enHex((0x000f00 & n) >> 8) +, p( V+ R! O# _5 I6 a, n- [
enHex((0x0000f0 & n) >> 4) +3 F' S' X) }8 g" U$ D
enHex((0x00000f & n) >> 0))
# J8 w( l$ I7 }, Y7 N' [2 O}; M# m1 t1 g! ^; c: r9 G. k6 N
// Convert a six character hex to decimal
& e4 C/ ]* ^- vfunction toDecimal(hexNum)
* e: U5 M9 G0 P{& C2 s2 d* l; W4 |* F9 v
var tmp = ""+hexNum.toUpperCase()
S# q+ R0 S9 k1 ~! A" l W: B while (tmp.length < 6) tmp = "0"+tmp/ v; K: b, S! X) h+ ^6 |0 ~
return ((deHex(tmp.substring(0,1)) << 20) +8 ?* j7 s3 G1 k( N8 [/ w j7 ~
(deHex(tmp.substring(1,2)) << 16) + ! I# f! s* X* X
(deHex(tmp.substring(2,3)) << 12) +
* ~( b. {7 k+ M: I9 A (deHex(tmp.substring(3,4)) << 8) +" b4 o) k. O9 x! r0 G A7 _; {
(deHex(tmp.substring(4,5)) << 4) +
# Z9 C2 O+ e; q. W (deHex(tmp.substring(5,6))))
8 l) K8 d P% ~. c$ X}
$ C5 A2 q/ f! o) I///////////////////Shimmering Links/////////////////////
( \5 \" L: w$ ? T+ Y//global variables3 F I; o4 ^3 o9 b0 z @* g: Y
var hoverColour) A$ a! L, f& y' a5 M( B K
var numLinks;
9 l0 f' X; N0 c) Q( Bvar rate;6 t3 o- e, m* F1 B
var numFadeLevels;* m9 @( y* J% {! h: q$ e
var bgR;
0 X$ T; R$ a& Dvar bgG;) {" J+ D/ E9 R( n6 @: z0 M J
var bgB;
. {9 z; \) x2 n' o# ivar currR;8 i: o4 c* D7 A+ h( ^" d
var currG;! K5 R$ o. x4 t; t3 l4 c" p. A
var currB;
6 |& V0 | `# Q( c% R$ Lvar count;
$ C) J9 }! J8 T3 G5 v. Vvar fadeOut;# @" e" ?4 x4 }3 n" n7 _
var continuous;
4 B" |' i' N* Y0 Pvar newColour;
0 B0 U Y. ]# f2 yvar tID;, l4 { C& C6 t: T
var redInterval;% Y; C) ? u! a& o" f% V. c
var greenInterval;
$ W; ~1 s' U* a/ E8 fvar blueInterval;
; W. P- ^+ t0 G! ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)$ x, F* B* r# o( z! i* z; S E
{
1 P8 j+ F4 h5 }8 f$ a) z- [ hoverColour = mouseOverColour;
: h2 F" A/ J% h3 s' Y numLinks = numberOfLinks;/ ~& @# |0 [) S M) `- f
rate = 1;
5 E$ [1 z! D5 \2 M numFadeLevels = 30;4 f# J8 Q0 Z0 q% P8 p
function initArray(theArray, length, val)
3 | X" d5 T6 J W1 q% o) u1 x5 L3 ] {; l/ I! N* f6 t7 V
for(i=0;i<length;i++)
/ ~) v' b& u; z1 q {/ u) y4 P6 P! }$ B5 V8 @5 u6 H
theArray = val;
. ~# H" t: ?8 a/ Q5 j }7 a0 @5 Y6 c' ~* O* W6 r- g7 E" f- s
}
- e: d$ \1 v& C( Q bgR = '0000' + fadeOutColour.substring(1,3)
0 K) N1 d" A3 d& ?$ _ K9 { bgG = '0000' + fadeOutColour.substring(3,5)
; T' n8 Y3 ?6 [ bgB = '0000' + fadeOutColour.substring(5,7)
3 f6 v& {! P7 ?2 q4 p currR = new Array(numLinks);
- y) ?# [+ I! E; l! i" `& a( s currG = new Array(numLinks);& C1 W) Y% e; w1 X, q& x
currB = new Array(numLinks);* Q. p# j" M; d" H% E5 R
count = new Array(numLinks);
4 t8 U) m3 h( R3 q+ ]4 N2 c8 _ fadeOut = new Array(numLinks);
- I- Q7 d l- P5 K* t/ j continuous = new Array(numLinks);
% \! |2 n$ m& S9 { newColour = new Array(numLinks);- s7 x% F4 ? C5 Q- @* M4 x7 I- I* q
tID = new Array(numLinks);0 K; I- C- }! d. l5 C1 |
redInterval = toDecimal(bgR) / numFadeLevels;6 l6 H4 g- I/ l, U
greenInterval = toDecimal(bgG) / numFadeLevels;1 ^& L& h- r- g2 ^
blueInterval = toDecimal(bgB) / numFadeLevels;
4 z. f r: C; s" {* ]$ V+ I( H initArray(currR,numLinks,0);" O5 J2 g6 \! C( V+ d
initArray(currG,numLinks,0);
+ c0 s- w$ k8 s9 j/ M2 [ initArray(currB,numLinks,0); T: v. T) _ U8 s5 R" F5 O: m/ s
initArray(count,numLinks,0);
7 Q7 @, p( \8 y1 o) I; s% R initArray(fadeOut,numLinks,true);8 X. B7 H- i* |. F& H, R. }
initArray(continuous,numLinks,true);2 ?9 @3 P2 w% E; r" E) M! p/ n
} 1 l# T! E5 C. @1 ~6 Q+ j: Z
function startFade(id)
& W8 u, H+ {0 Y1 N0 D2 z- |{# K' p0 m' C& r* t
if(fadeOut[id] == true)4 D% C) C/ W% S; s S
{ /*move colour towards background colour (increment)*/
W7 p" g$ Z0 r: X1 H/ k% [+ A currR[id] += redInterval;$ y" H+ s' B/ t; J4 \( I2 s
currG[id] += greenInterval;
. F7 w" b J$ B( J. N currB[id] += blueInterval;
* a- w/ `! ]# }8 j newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);6 w: b$ |& b X/ d* Q
if(++count[id] == numFadeLevels)
& r0 ~" F- @6 W3 T {
# n& \5 u7 {3 Y0 G* B9 x3 r# X fadeOut[id] = false;
- a: K, {. l! O/ u0 G; u4 u, A }
' e. T. `& j1 t' r' w5 B+ p5 f+ q }
0 V: r0 H4 f0 `8 C% g- z else: ]5 _+ O9 d0 G6 s" T; X
{0 ^- b0 G( f8 b! ?" b6 F; U
currR[id] -= redInterval;
& y! [& D: X2 }: N3 P- u3 r
# t/ K) p$ Y3 t+ S currG[id] -= greenInterval;
( L$ }6 R }% r) {
9 f/ x- ?: }+ H9 ] currB[id] -= blueInterval;/ |( V. d; d9 L: Q& O" Y1 T
/ ]& F, y$ R# O" f1 I* m newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' z# L7 U1 x# ^1 t, n5 l
$ I3 \- N3 B7 Z% p/ ] if(--count[id] == 0)7 @4 @: l9 E. F1 o" }+ M6 {- T
$ s, V6 _; w' ?$ z x# a: d) r/ _
{4 w0 s& g; Z( `4 B; h/ q4 P
1 O9 P+ `- [$ ]; E% b0 u( m fadeOut[id] = true;
- e/ Z* Y" Y5 J; l& a
, F7 Y! o6 z* m8 T9 p }- N6 A; }. N2 g, z! o1 I
8 q7 R+ k6 O" P( `) @ }
$ D3 o+ [, U. @' L' j" x2 }3 S6 l4 J/ b9 r+ `
if(continuous[id] == true), } t4 ?* C* m9 \, R2 p
( Q) j9 h% i- s) [. ~9 M {* e- B) t0 e% E! }
% z3 H8 \8 l$ K+ S0 @5 D" u* e. _ document.getElementById(id).style.color = newColour[id];
+ U" P) t: \8 w# r1 J1 x, Q0 S
; a8 [! I8 I1 W. s/ Y }
) s! A W7 w# W. @! [/ ]* i. p4 c% X g$ t2 v
else, W, {" h4 c* p6 Y2 c( @$ O
0 g/ t5 N: T3 q' r! r) i
{
x5 `/ j* @" l& j5 Y1 r3 g8 y, D, @; T3 h1 U4 [
document.getElementById(id).style.color = hoverColour;
8 R' s6 B" w! G
4 H, C/ _1 A; P9 f( U# N }0 {9 p- k, F7 g1 }8 r* u& l
, d- E; Y6 p ?6 T4 [. T; E$ k0 I; F clearTimeout(tID[id]);% H, H# N* S( b' n: B6 V
- H, Q! u* `8 r3 o
tID[id]=setTimeout('startFade(' + id + ')', rate);
3 `/ F8 F( p7 Q
1 I3 O# U; x: I! Q/ e( B}% W* x5 y! Y r0 R1 L5 a# i5 S
# l7 a& g3 b4 K* d$ V; Rfunction continueFade(id)7 B! F; Z/ |. _
* s' A1 D: V7 K8 p
{) `- L6 K3 `9 w- T, t
' T) s& J' G. S% t: q5 n% f continuous[id] = true;/ c7 F* L& x8 F$ v9 v ^0 B
+ S7 A! f2 S; ~7 O}
$ p0 ]. i; y. A2 Y
' x, w/ T9 B% p$ y" B. U* Jfunction stopFade(id)
) u7 v! a; Q7 p8 y% R& h
+ A0 b Q6 M5 o" R4 g5 C' N+ E{
. y D: X+ Y* I' q/ ?: I' x4 P3 x; A3 V5 r0 v- k* K l5 r! P+ \
continuous[id] = false;
) d) M1 X! k2 u: V( n; [: W# p
) a, y. A8 ^% \$ ^) Z, [}
$ i5 W. |& z# H' K% L/ N' a) Z& ~$ \; f) u S
function StartTimers()% }! f. i& \0 M0 z$ \7 I5 K
7 C3 A7 E: y+ q" L' g& M& u{ //set up an initial set of timers to start the shimmering effect
0 \+ l* b- }$ b0 _4 \
4 T4 S/ O! {/ _' c for(id=0; id<numLinks; id++)
$ k- r. q3 i. }" I. |! V( \6 x& F4 A4 Y* t1 ?% f. q8 g
{
* F4 r' } C1 P9 s& x% ]9 y G5 ~; B {1 w
t=setTimeout('startFade(' + id + ')', id*100);& L' P" u) Y1 {2 S6 C! \7 C8 ]' T. V
3 r: u: h. j9 }) `1 i# f1 f ]
}& e, M5 L- ]$ z; ?; f7 b. \8 Y' s x
* o" D, P% c2 O, T, c4 ^1 h}8 n" E. z5 z$ \+ {3 G8 e7 q! \! e
" G: O( r/ O" `6 \: J+ W
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
* P& h' Q! v+ I$ f9 D) j' G6 }3 P. j. Y8 r( A% O2 G0 s
initLinks('#FF0000', 6, '#FFCC77');
{4 w. Y1 P$ m8 F* N- [3 {& V
8 p/ V% f6 V# M8 Y4 K//-->: X& N% \" v7 {; B1 w
A% E. @% S: f& p1 j6 Q' w/ Q</script>. R( S8 \3 F+ x I A
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元" u) Q. Z4 u3 ?' @+ R- F
</a>
( l- d; Y5 J3 i6 h1 h3 ^; R4 K<br>
" |+ k& @/ c9 G6 Z4 X( V$ S<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
9 c; w7 i9 X5 K, I0 d4 |<br>
( j. z! _- ^9 S. B! T<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ j, Y6 J: v4 s7 I0 N* g2 J<br>
* [$ e6 m2 ]% L3 l<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
2 ^1 s: e* `8 v5 b2 w<br>! g1 m1 `( z4 m: _, ?) c
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
2 y1 G9 B2 Z1 d1 u3 y1 v<br>+ |8 T; z* O% C/ U; }5 j
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 W7 E$ R& ~6 [" H1 `% u<script language="javascript" type="text/javascript">
, B4 g# B" d( N$ V/ k5 O7 C9 Q<!--
& l, [8 {/ S4 {0 F0 \, l& msetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering2 f F! l* W' l
//--># P- r- p2 z O; D6 Y9 O
</script> |
|