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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
( ~8 a. ~7 U! q) L; G<!--( Z$ k, ?3 y8 O
// convert a single digit (0 - 16) into hex
3 V. t2 A$ K( dfunction enHex(aDigit)' Z5 e2 Y# i: p
{
1 U* }1 y$ ?9 X5 s0 H( t; ~" V. f, e return("0123456789ABCDEF".substring(aDigit, aDigit+1))7 a) Q) }' x1 L. O' }3 P6 ~& H
}
( {' e1 x6 c& U// convert a hex digit into decimal
- ~4 ?) _' t" S ?5 ^9 z5 A2 c, pfunction deHex(aDigit)9 M. Y u6 X, d8 s
{
' J1 R4 s. N/ ?# p5 P return("0123456789ABCDEF".indexOf(aDigit))9 B. F* `1 O6 ]% k+ g- d/ ~
}8 R! P4 T7 w8 H/ S6 c* V, U
9 \) d3 d, J, H4 l2 G) L, [0 J// Convert a 24bit number to hex
* U! R+ T2 x p$ F% g Mfunction toHex(n)& H9 a( L1 i) c6 ~, m5 N i
{
6 n: M2 F' |9 y return (enHex((0xf00000 & n) >> 20) ++ X! _) S( E- \ u* n! k5 S* a. d
enHex((0x0f0000 & n) >> 16) +
5 E4 l; ~4 q: a- @ enHex((0x00f000 & n) >> 12) +
x; s3 S7 N4 c/ q enHex((0x000f00 & n) >> 8) +
0 B% P% N! w8 I enHex((0x0000f0 & n) >> 4) +' i; I/ ?) A4 U6 p- t# P+ R
enHex((0x00000f & n) >> 0))
+ w" j' Q5 N+ J5 X) X# Y}
/ h8 ~. v Z' x$ p8 ?// Convert a six character hex to decimal' f) q9 j9 S- j/ P
function toDecimal(hexNum)% O% p6 f# F7 J- L' e: x8 Z
{$ X5 F8 r7 { g+ \& J! m6 V2 C
var tmp = ""+hexNum.toUpperCase()
& s/ e0 i/ P o1 R ?* ^9 n/ { while (tmp.length < 6) tmp = "0"+tmp
9 l+ f, _; @1 u return ((deHex(tmp.substring(0,1)) << 20) +& s X* @/ X O, T) a; }$ n
(deHex(tmp.substring(1,2)) << 16) +
* J+ ?6 n' A# R" }2 G! e (deHex(tmp.substring(2,3)) << 12) + J9 x+ {- I" [( j
(deHex(tmp.substring(3,4)) << 8) +! Z7 y5 u) `0 Z' V' G$ T) g
(deHex(tmp.substring(4,5)) << 4) +7 x/ [2 A |3 w( _2 y4 o
(deHex(tmp.substring(5,6))))
% R2 c7 n' h$ K7 _) a& D}
- O, f4 T9 c" G///////////////////Shimmering Links/////////////////////
2 C) y- L0 G5 L M3 S% {" {- c//global variables2 G5 ^3 O$ p$ C( S! U% Q2 S
var hoverColour- }3 P A* T, \9 p2 l; M* ]8 |
var numLinks;
- _. L! k8 K" l0 }3 X. `( E8 C% i: i. Vvar rate;
) F# O0 a% X3 x3 Wvar numFadeLevels;
: t H/ D# o7 B: O& D8 F- S4 avar bgR;: ]- I( ^) r" Y4 q7 l4 g- ^% Z
var bgG;0 \9 l" h. Q2 h6 F4 _# D: r5 e' i
var bgB;
# ^0 u0 {- @8 c' `5 {' Vvar currR;8 ^/ \9 l% Q; x
var currG;
4 k1 g, i) `1 j, Uvar currB;
5 h- S: v8 D! k, a. r2 zvar count;- [3 B! N& N, R1 w4 o0 A* V
var fadeOut;8 R' u+ I5 v S z$ Q+ I
var continuous;8 f; l# n" ~7 g5 F: v
var newColour;
9 v7 c4 r8 d7 V# E* u9 i4 s8 L3 Vvar tID;
* q, i L T$ V7 K! dvar redInterval;
m/ t J' e3 ^. ivar greenInterval;7 S9 K6 ]1 q7 n- M: C# f9 s, ]
var blueInterval;+ }+ O# B- M+ k$ h% S3 D3 a
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, O/ d" \9 F! H1 c: o{
9 M4 ]$ F v7 ?1 C# g2 A hoverColour = mouseOverColour;! N: L2 t/ X& L; C
numLinks = numberOfLinks;% g3 `8 ?9 o+ v
rate = 1;: K$ Q6 z3 b( Y2 }
numFadeLevels = 30;. \& U9 N; { Y% I
function initArray(theArray, length, val)5 W* M1 v# o! }$ T5 U- g- y9 `* g
{# d# I. F- h* F: U7 j7 ~
for(i=0;i<length;i++)
9 c' N6 J3 G. g# ~: g {
- \7 B* K" f0 n1 H2 s theArray = val;
/ i: H: W* t( v% `! o5 f1 n }
% y$ I. m% ]! @, g( u) F- } }
; c- f. |1 L% P9 ^9 {) V7 O bgR = '0000' + fadeOutColour.substring(1,3)/ {% ?) R; X2 |
bgG = '0000' + fadeOutColour.substring(3,5)
0 [: b' |( c8 _, r bgB = '0000' + fadeOutColour.substring(5,7)
- A0 f0 G7 X5 N u currR = new Array(numLinks);
' K2 l. p' i0 ?' s, K5 ~, u currG = new Array(numLinks);
/ h! v' m% Q5 r currB = new Array(numLinks);
4 G" \" u3 P* c$ z+ P5 q; F count = new Array(numLinks);& v* C+ J8 W' z, j4 k' ~ o" c* u
fadeOut = new Array(numLinks);
% n7 K" S1 q% \9 k. K1 W continuous = new Array(numLinks);
" y# ]/ X6 u6 V C. P/ C4 @$ H newColour = new Array(numLinks);
, e0 V# _% V6 V/ | tID = new Array(numLinks);
' j# {) ?1 _! a7 W redInterval = toDecimal(bgR) / numFadeLevels;
7 n% D8 W! B" v& ^! K greenInterval = toDecimal(bgG) / numFadeLevels;
& N1 g$ o) m& a. f n blueInterval = toDecimal(bgB) / numFadeLevels;8 h# @1 [# Y k& z8 W* p+ b% K
initArray(currR,numLinks,0);
/ H5 d# u6 {' s" Z- @ initArray(currG,numLinks,0);
: x( y9 y% U* P b initArray(currB,numLinks,0);4 o8 U4 p' l: W; T; U
initArray(count,numLinks,0);- E3 z5 S! D; p
initArray(fadeOut,numLinks,true); z, R) C2 J# {
initArray(continuous,numLinks,true);
d. a( M F( {" H+ ^. W! _4 Y}
9 \' Y, J0 I Z5 k, _9 tfunction startFade(id)2 Z% V$ `4 z( @+ L; v6 }0 J
{
0 E9 q$ d! u" V" z( n! o' Z, w if(fadeOut[id] == true)% h* V+ c! z8 ?3 h, U
{ /*move colour towards background colour (increment)*/
1 l9 ^& ]7 \0 E! R) m+ l currR[id] += redInterval;) ~: C0 k; t: E. Y+ t9 S: Y
currG[id] += greenInterval;) Y7 W3 W' |6 E! |/ c8 P
currB[id] += blueInterval;
& W8 Z2 N" T* p% o2 S8 h9 F- J newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: s4 y+ q. m' J/ K3 v$ [9 v if(++count[id] == numFadeLevels)# T5 z& g0 ^( \: e7 H
{
& U6 H: L; K1 `# |9 P fadeOut[id] = false;
O$ K3 e- x9 @( O7 M. T. I& ^! n }
. j" l$ p$ ?' A) ] }
E# Z# X3 `- a/ I% ^% R) h6 }8 ] H) h' ?2 x else, i. L1 s' V4 W& p
{
) `8 Q! S/ Q8 M8 D9 l" K8 I currR[id] -= redInterval;
( s2 i* T! b0 B( Y8 m
3 H" ~. x( n; Y$ h currG[id] -= greenInterval;
( i" E3 M, ]0 X' @! T) L: J6 d( C7 ~, Z$ M0 {, C- s
currB[id] -= blueInterval;
8 R; |# Y2 _5 |. x, P, K1 W2 C; Z& G
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);( h& J, Y8 `8 J6 E( G. c
) t# n9 c2 V# e" F: C if(--count[id] == 0)9 L- x& w. B# W5 Y
$ S4 p3 x2 P; h" r' n+ H {
7 v& m+ X1 D% ^ j+ Z. q5 F) C5 Y1 f( d% F' n
fadeOut[id] = true;
! v! u+ F8 c' S4 U7 a( A6 X/ H1 T& A. f7 c( E" G
}
9 r K* D% W4 t+ n! B L& S% D
& g" J: i" A8 X0 k: L! m5 w }
) p; n; H5 z' D" F g. d6 c7 |1 Z. ?9 ?" p* z0 a1 O
if(continuous[id] == true)/ Y) E3 Z! ]3 t- T
, n' C6 x! ^5 A5 V; X {7 g& C5 p9 g7 O% A7 u# N% R
' O. f: p) f n! E3 f document.getElementById(id).style.color = newColour[id];
: U: Z7 H+ C9 N& m/ s8 @& N; D4 X( T6 z7 M) E8 l* [- N
} O Y/ V) P+ o% i* R7 Y
3 n9 X7 K, o. o3 n8 U else
0 j4 a) F ]" n- B, ~7 t3 B0 h" n
2 }) j3 K) T8 z+ z- ^7 Q( j {( N r# C& Y' g
2 T3 ^6 m' C6 ]3 D* \. o2 T+ f
document.getElementById(id).style.color = hoverColour;
: v1 F9 ^ G2 `' f( x6 J6 U- U, ^
1 s) `/ {. z9 T3 Y' X3 P4 _! Q, Y }
. _9 f! O, n% y, o" h! m+ v
p. @# W0 ]6 |3 K$ [ L clearTimeout(tID[id]);
o% d X j5 u6 h+ k0 F4 o4 x8 M- }0 |5 r" ^. y% M: X# c' L3 A, d
tID[id]=setTimeout('startFade(' + id + ')', rate);8 Y+ E: R8 J( w4 ]% n4 U/ u d$ g
5 h! s9 g, f1 G+ A8 ?}9 ]( k; E0 }6 }6 h, T2 J
7 n, q, V d/ k
function continueFade(id)0 ?7 d* J* c T
/ x4 I1 z5 n r! F) ^{$ E# G6 j, @% v1 _* P
4 C: Q6 j: I' `+ K
continuous[id] = true;
, }+ A6 a# g3 d( D6 V' N8 p
7 ~ q @; B* Y3 h, z5 q}
; c+ i& U! e( s4 t4 S, W$ a2 s# ]8 r0 e
function stopFade(id): V# {5 E Y1 d2 W' \
) T( \: w5 P7 O# Z q{5 K( ~8 B. \* Q3 u. m! t
; [! k( a# _: K continuous[id] = false;! M) {2 K8 q% z/ Q
' U8 J6 T; ]# I# i+ p% Q
}
9 B+ a9 q4 f0 G( |' M1 N4 w/ h+ H7 f/ ^8 V8 q. i4 U! d- ?/ s9 T
function StartTimers()8 O: Q2 t: ]* B
( d' w0 z5 f- C* E7 z8 m{ //set up an initial set of timers to start the shimmering effect4 q% z* M+ m' O9 U
3 U8 V8 M6 T) _& T' }/ r4 g: | for(id=0; id<numLinks; id++)
% [' q! ^, O, {- _1 H
4 m! n7 _% x' L5 t, ?. X {
4 ?4 d5 p% U* S3 C+ k0 K$ x4 @6 b* s3 G
t=setTimeout('startFade(' + id + ')', id*100);
0 `5 n/ t3 L- @0 |7 ?6 e4 t# a* f7 G
}! }+ ^* h* D5 {% F5 i" H
! p/ U m* {3 P, Y; `
}
6 h5 a0 | P8 L$ s' u9 j! _* I% Q; f0 C4 O2 H
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')0 h+ j4 N2 e" v, `) V1 H
7 L/ i. D1 Q; C; ?4 TinitLinks('#FF0000', 6, '#FFCC77');
% A$ ?$ a1 y* S
- l8 _( o2 _. p7 x//-->
1 F; q. S u* i' d& y! _1 `0 L) s3 T; r! ?: @
</script>, O b" u7 a; q+ L; `
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
) X! E1 \: I% q</a>3 {5 m0 o8 O/ v
<br>
; o: s- b) i2 H: k# t<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>9 v: N* B( e7 Y+ ]9 d6 x4 n' g
<br>) O; n) K+ h- u; x- T' h+ T
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>+ l- M8 F# L* N% j& R$ E5 Z
<br> / k1 E) `7 n6 ?
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
' `3 y0 q4 j; g# t9 J<br>8 P$ O# C" A8 _; a# P; G
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>+ n0 Q P. e) b
<br>
! ?1 [, L# N' ` L<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>1 [! B4 G+ y- Z2 k* K
<script language="javascript" type="text/javascript">
( P1 g' Z9 o. D5 p7 e* {$ F3 g9 Z% r<!--" Y7 U9 M3 P1 U6 B% s
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
9 Z: |/ b& B5 M4 @3 c//-->+ p. O9 c* a3 ^7 y& Q. _
</script> |
|