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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
6 F$ z2 I1 }1 K( T" {. \<!--
5 U- d! e1 O% U: [1 M8 J7 v( M// convert a single digit (0 - 16) into hex9 ~6 H6 t6 G# Y- H
function enHex(aDigit)
6 C; U! _* Y7 B. s9 C% S{
1 J4 P! E/ \- r" \ return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 X& \( _: ~1 ?
}: e) g" v6 ~ K& N0 z
// convert a hex digit into decimal" i1 Q, L% g+ i9 p# Y5 c# G
function deHex(aDigit)
# g+ V4 j: H3 n6 L6 C8 F{7 c2 T* y: ?0 Y! p1 g V
return("0123456789ABCDEF".indexOf(aDigit))0 \: n% C( H a" o" C6 n- l' B' X
}
: T4 t. ^3 f+ [7 C" j
& X: ~! R! P3 t: t7 a5 l, m; f. d" b" T: F// Convert a 24bit number to hex5 O- a8 d3 o$ C, g* n2 @( L
function toHex(n)( W, \8 L4 \5 ^
{& f7 y5 ?) b6 }) b, m
return (enHex((0xf00000 & n) >> 20) +# x2 I6 H3 y0 h U, k
enHex((0x0f0000 & n) >> 16) +5 S9 u1 h0 [% }6 h& x! I2 Y2 V
enHex((0x00f000 & n) >> 12) +
* z: J+ T, s; e/ g0 w5 [ enHex((0x000f00 & n) >> 8) +; T0 i% K! B- z& Y2 m2 Q
enHex((0x0000f0 & n) >> 4) +
2 n# h+ |8 m( h enHex((0x00000f & n) >> 0))8 K4 v, b ~( L1 K$ L. j; [# Y3 w' [
}
1 r" J8 a! k! y0 K// Convert a six character hex to decimal, V! o2 q4 H7 Q# Z# }3 ]1 B
function toDecimal(hexNum)4 b, H; A5 R8 T- O
{
7 D+ h$ _+ ~7 c6 | var tmp = ""+hexNum.toUpperCase(), F i, B& |, A0 F2 Y* F0 R. J" M$ `. S
while (tmp.length < 6) tmp = "0"+tmp% n4 _3 _9 v1 t0 F9 A4 X- U
return ((deHex(tmp.substring(0,1)) << 20) +8 {& M4 w& L( e/ r) U% l- u" I$ i& ?' M
(deHex(tmp.substring(1,2)) << 16) +
- V% v) z- d0 N% l& i- K (deHex(tmp.substring(2,3)) << 12) +. T* L1 C9 Z2 I4 d8 U; G2 M
(deHex(tmp.substring(3,4)) << 8) +
7 a. x1 q) `0 y" | (deHex(tmp.substring(4,5)) << 4) +7 p2 e( |% q; l. p! q; Z R( Z
(deHex(tmp.substring(5,6))))
! R6 n( \0 S7 N0 I}2 W1 Y; r7 R/ E
///////////////////Shimmering Links/////////////////////
- K/ W. w K. x- s$ C0 a6 o//global variables, x! F1 H1 Q. a0 p
var hoverColour
8 i) f" x/ H. z$ k7 l3 F" Gvar numLinks;
9 I. x: P/ K/ L+ X$ ovar rate;% u8 K- c+ q6 y0 X, C
var numFadeLevels;
3 W: ~$ b! N+ l" B' Z( evar bgR;
- W: N. r/ }( A7 Q$ G8 \var bgG;0 ?, y0 E% N. N6 w0 H' m7 ^
var bgB;
/ Q4 \' A5 A* `& L- Y8 ^4 mvar currR;
4 l) V V7 V6 g9 @) H% ^- \+ Jvar currG;
' a) V' z6 ~7 b. _; F: K5 o% |% Rvar currB;
9 |; Y% C5 Z$ J+ o- Svar count;& r* M+ n, B+ f3 J8 G
var fadeOut;1 R$ l8 t5 F, L( f8 J% e3 |8 T. e' C
var continuous;! j6 h' S B4 C' _% {
var newColour;2 k* q, E2 {' J) H
var tID;
5 C: C8 E1 \8 @; | n3 A3 \var redInterval;
7 m" M Y! B2 V$ L5 o% C' jvar greenInterval;( S) z/ v. i8 ^+ N8 a% N3 F
var blueInterval;
5 c* P( A; @) M( Efunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)7 [% w2 R* Q2 A
{: o. c6 y% C; t9 C* H8 ^! M5 S
hoverColour = mouseOverColour;
! ?% m3 \. M: b1 i9 J0 o; R" P# h numLinks = numberOfLinks;/ x1 M& r. t4 ~: `1 C* r y0 r, L
rate = 1;
" r- `( z1 O( e) ? numFadeLevels = 30;7 Q, O* ~+ \7 v5 U5 d/ ~( F3 R
function initArray(theArray, length, val)+ k6 X" P5 Y `- u% R
{
" e" U# |6 o' s% ~5 X# k for(i=0;i<length;i++)) ^1 m' c* Y5 ?4 g
{
+ e6 M; b) u0 m8 e1 {" Q2 R theArray = val;5 y) Y9 v4 U6 R/ V
}
$ u# `9 N/ I% o0 s }0 W* O' ~7 }4 B# o; C8 A
bgR = '0000' + fadeOutColour.substring(1,3)8 I3 }/ x* M/ ]- [7 |
bgG = '0000' + fadeOutColour.substring(3,5)
! r$ U' [% n' Y0 y# O% z bgB = '0000' + fadeOutColour.substring(5,7)
' t0 w1 m, ], H1 w# k currR = new Array(numLinks);
$ ?! f, M! [2 m: o0 E currG = new Array(numLinks);. J- s: S# p( a1 \# T
currB = new Array(numLinks);
6 @# v; `. a# h8 d count = new Array(numLinks);
; h# _+ _5 C3 P* ^6 v# n fadeOut = new Array(numLinks);
* F! E, r/ k& c# }* o continuous = new Array(numLinks);! B$ T9 @$ j* x2 H, {' d( u' V
newColour = new Array(numLinks);. G7 e3 f( l C5 ~8 U/ E( B
tID = new Array(numLinks);: u. \2 i: r# k8 S0 S+ u0 k9 o
redInterval = toDecimal(bgR) / numFadeLevels;
8 y: v) }- R' J greenInterval = toDecimal(bgG) / numFadeLevels;
, S& B( I l/ o2 l: b* h: ? blueInterval = toDecimal(bgB) / numFadeLevels;
! j3 \8 W: E0 n initArray(currR,numLinks,0);: h6 C2 b; t% l8 T* `4 N
initArray(currG,numLinks,0);- O5 r7 T) R2 \) ?/ H
initArray(currB,numLinks,0);
: j4 A/ J1 L# c! O* m: u' p; I initArray(count,numLinks,0);7 s1 X- @& k, i( a9 h
initArray(fadeOut,numLinks,true);
, a) ~3 r, o6 V1 _ s$ z initArray(continuous,numLinks,true);
, O* J: K& `* S3 b8 K5 P5 ]6 ~}
7 L" `/ F$ X: N9 C, q" Ifunction startFade(id)
3 i" w/ v. y8 E' t, C2 b& t. A) |{
, s3 C* j8 P2 M if(fadeOut[id] == true)) T' m: v9 ?- A$ S- V: @: Y" a
{ /*move colour towards background colour (increment)*/1 R' P" F7 n' `5 }
currR[id] += redInterval;0 P& B3 V' l* H" v& j0 y) _
currG[id] += greenInterval;* z+ |6 K! M/ L+ \ A
currB[id] += blueInterval;
+ w# L. q3 U1 A! Q% Y. E1 ^ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 r5 }! @' g$ Q% Q
if(++count[id] == numFadeLevels)
: A% U8 x% N" D& ?3 v/ ]. r2 {4 g {; [- C8 }6 h/ K, V* r5 A& _
fadeOut[id] = false;
! l' d P- |2 ] }
4 W, D8 _' t3 z8 R }! _: S' z: Y+ \, e( K
else
: w; C* l- M- J {
; V+ {2 g5 @9 l currR[id] -= redInterval;1 y( ~/ j; i0 s& _/ @, b9 W9 A6 w
# i2 U6 g) g& z1 b4 k
currG[id] -= greenInterval;% |2 N2 u9 L/ E0 N X4 ^# X
. S: Z5 ?1 v7 Y: n B" U7 s
currB[id] -= blueInterval;
+ B8 F/ g3 i0 D+ H3 {2 O' X' m& r( D U8 i8 M( |
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6); g: D3 L" a4 t& p& y
8 ^ p7 N) p. ^" @
if(--count[id] == 0)/ g3 G8 q; h) j+ y
: {! J% Y, g$ d/ [3 k( ?- Q {. s# v" e4 `" e3 |5 ?: y
! p1 x1 k- M4 S* z) o% D' U
fadeOut[id] = true;
1 r- O; T' `" h; M3 }: ]3 C* u6 g# I
}
' i* L0 q- g( T) b
: s" \8 f2 d6 I }, Q: B) Z E- n9 _7 O
% U; Y- g/ S0 P: L5 c! k1 d
if(continuous[id] == true)
6 n# }0 g! u# J/ z7 {1 _
; Y/ ^9 V4 y# O. ~& R {# V' Q4 m, y. K) E. m
4 x7 e) r) a2 }* u/ B document.getElementById(id).style.color = newColour[id];
' U- A$ Q' G% n; n' ^; i4 J1 Q1 X4 M( n) U) Y& j, a
}
4 V, x" b8 P$ W8 \
! r) R: R8 V+ \/ ^1 D else2 N. A4 [% E6 [) R& A6 ]8 c
5 J( |) w3 R m {' K0 u- L7 g7 u! t* N8 O' k9 V
- q* T# ^2 @- f. M w+ `
document.getElementById(id).style.color = hoverColour;, G0 ]$ t' x8 ]- s
6 O2 \9 \; h9 O8 m/ U# y
}
# a$ a' K5 Z& J1 D' K6 W; d$ W; ?7 e
5 w1 ~: ~2 K# K# E8 D clearTimeout(tID[id]);4 X& l" ?( N! N# M+ \- ^9 a
7 | b$ j3 J# E$ Q/ d6 o: } tID[id]=setTimeout('startFade(' + id + ')', rate);1 ?2 a$ a. G# o P
) b* ?4 l# P, K- R0 U9 P; @. [}! Q1 D I. T+ G: h
" c% n# W+ T0 z/ e% I7 i/ F& l( d9 i
function continueFade(id)+ f( S3 |9 u& y. H+ e" M3 R4 Y9 J
" R6 \+ U/ Y' ] d{
; r6 Z! o1 h- z& V" N) c, q
3 }/ m4 S2 B: g( w7 w& \0 a continuous[id] = true;' D$ q0 X4 ^6 s5 f f, E9 a$ r
7 P0 G8 ^& v; v" m4 ^
}' Z0 o/ O% g: r4 V: Y/ d. P
5 N0 Z I' @& r) [ g/ i
function stopFade(id)
; A5 }/ R, K0 o& n0 {. n
0 }! J2 |& s9 [& ?$ v" N; L1 E{
# Q8 \5 [" h* o" b- `
- B- `7 i7 t( f" q. t/ q* R continuous[id] = false;4 ]" R' f) O' y1 X
* x" }6 }: ?! Q& j}$ Z$ A+ N/ w8 R, [% J5 f4 |* L& V8 o
. M- _6 m' {* [/ K# s9 Hfunction StartTimers()
- g Z6 v0 l5 u( s/ o8 Y1 F5 L5 P0 r1 Z$ X! I8 ~
{ //set up an initial set of timers to start the shimmering effect% w$ l5 X& [9 S J/ `; N' x1 F! Z
w3 c; s+ T$ v
for(id=0; id<numLinks; id++)/ z- J8 P& B8 f$ d
3 k7 Y" E+ L8 Z5 n: Z- J. |, O {
; }! w. v/ D* Q9 ]2 k( Y& d# r( d$ K" i2 h& ~9 _& v3 u
t=setTimeout('startFade(' + id + ')', id*100);
) W4 l ^5 G, W7 s/ a/ ~$ h) F( M; y3 ]! g7 P g: g, E
}
}. S6 T1 {/ S2 f/ Z. k, w0 v9 |0 V, r
}
2 A4 P7 j. h5 K, l9 b) l
, q; z ]6 c; u6 F//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, T$ u' t9 [ L. Y8 D. [
* g( E3 [) {& @: O7 l1 x) SinitLinks('#FF0000', 6, '#FFCC77');
5 T# P( Q8 ?0 Q6 z8 q9 V& H( B9 Q6 Y4 K
//-->
/ X: I6 D+ ?) Q: A) f& U0 h
! z$ Y; N: Y* M* O! i5 S9 y7 N</script>
G1 w$ M# g$ R* z8 G: U5 `<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
- t/ ?, P3 B1 q/ U3 t</a>
- d! u o# |! ^# G& ~; o: ?, V, M6 Q<br>
2 ]' q/ { C: ^7 Z6 I<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
& Q0 X. e$ x0 x \. b' ^9 {5 V, T<br>
g/ s" E5 o" Y; d' [" D<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ |! r) T& ? m$ }, m( g& c% J1 E<br>
6 M7 Z2 t5 j0 X5 ^$ M" v' t<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>0 H6 U6 J" E0 t- |2 p8 a
<br>6 f- s3 T( V5 \. \: n& e9 Z" E
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>- M) [, x! X4 h7 o
<br>
9 h4 a2 \. m9 u) q. @4 ~<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 Y O. h! z, \' t7 X( f; Q<script language="javascript" type="text/javascript">
! u8 |- O% P1 D' C( o, ^! {- n$ C<!--
' i$ J7 ]2 J5 d5 I+ V- _- E: |# gsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
$ p b/ u# m4 R6 N# k. r/ X//-->$ b& w/ _1 S: @- W3 D5 ^
</script> |
|