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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">/ R* \7 Y1 J" c& @
<!--4 ?! r8 H n' c8 m4 W w+ p
// convert a single digit (0 - 16) into hex% I! e% L; v7 J1 E- `: m7 f3 [$ a
function enHex(aDigit)4 ]: M! X' @ m9 C- `
{7 P, i6 [' C' D6 x
return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ @0 {6 ?& }2 r6 E7 |0 x
} O5 ]' k7 K3 y; @+ l: D
// convert a hex digit into decimal
. U# h% L1 b0 s: K3 \function deHex(aDigit)
: X7 z/ |3 z' z- E{
0 |4 M! b: K4 o4 f return("0123456789ABCDEF".indexOf(aDigit))
I" t: ]3 s* J: C S3 z* Q}, J; l# C0 ]9 f7 }
# U, l- d i. b1 H// Convert a 24bit number to hex
/ R; e# F. M6 Q- t5 Efunction toHex(n). z; w/ {; z" E0 b! u( t+ f0 S
{" H& X' S9 Z; w- p: J- B# H9 y
return (enHex((0xf00000 & n) >> 20) +
8 x. l! {3 ~4 h/ @0 q: n. W4 i enHex((0x0f0000 & n) >> 16) +* v1 K r0 `& i2 W- A& h8 V! m% H5 P
enHex((0x00f000 & n) >> 12) +
( z) J: B- x/ ? enHex((0x000f00 & n) >> 8) +2 k: w3 T& d2 x
enHex((0x0000f0 & n) >> 4) +
9 e* A& N" y, m! L8 `3 ?) I enHex((0x00000f & n) >> 0))
# n$ S2 L: o4 z! O' w9 _; u; G( V}
7 g) p& B' U* p% m9 C+ W0 V$ @// Convert a six character hex to decimal4 S5 c- W& G+ ^6 Q6 A5 g
function toDecimal(hexNum)
0 v* U' `# I' n- L+ V{
. [9 g& O: b' z% r! f var tmp = ""+hexNum.toUpperCase()
3 u! h/ k2 h M, k- N D$ f v while (tmp.length < 6) tmp = "0"+tmp
9 J3 g- E5 q* F9 e return ((deHex(tmp.substring(0,1)) << 20) +5 I! G- `+ q; f' {0 K7 V! j+ F
(deHex(tmp.substring(1,2)) << 16) +
- T& A3 ~, J7 g( Q4 b (deHex(tmp.substring(2,3)) << 12) +
; W. v" n3 G) ~$ | (deHex(tmp.substring(3,4)) << 8) +1 W; K* M* `9 G0 Z Q
(deHex(tmp.substring(4,5)) << 4) +9 G5 ?3 N; y$ l9 f
(deHex(tmp.substring(5,6))))
: n/ w+ A. a( W" l1 P}
$ G% Y1 Y/ |( k- ?# F0 M, u///////////////////Shimmering Links/////////////////////7 A8 ?, F; c: b/ t) X- l" P+ v3 D
//global variables9 @2 k+ ^2 M l0 W1 L
var hoverColour
; @5 w$ u' x/ r0 H4 ivar numLinks;& \) H3 L+ T* G" @2 ^5 k
var rate;( _4 s) I5 H) t/ q% u9 D+ f9 P
var numFadeLevels;
9 [4 q. z9 f, t* H8 _& v0 Uvar bgR;7 L' W4 m7 Q! ]; l+ D- W
var bgG;! W- i& K+ L' h/ Q4 m8 t. F7 W
var bgB;
' a/ M& o' I+ O3 D) I9 f( O. pvar currR;* J |' K( y+ F
var currG;! e9 K6 r7 f3 W
var currB;& `1 x T+ F6 A2 E, v ~7 ^- }
var count;5 U1 C" ~/ M4 ~, S. s q$ |# W
var fadeOut;- L% S1 E" y; U: l- t. q5 f1 b
var continuous;- r3 G% P' ?- h" A
var newColour;
6 y6 B, L0 r, X, gvar tID;% T b6 I7 s/ G5 f0 B
var redInterval;. L7 Y6 ?$ Z6 Y+ d$ t0 h
var greenInterval;4 l* V9 ?) M4 E- m
var blueInterval;- c' g: K" h% w& n& O4 z- k" d
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour); {4 b/ f% O/ w ?; \, U0 n
{
7 w( q! X1 x: Q8 l hoverColour = mouseOverColour;
1 E0 m8 k0 E& N* g numLinks = numberOfLinks; {) J$ {4 V) k# A) `6 T
rate = 1;
5 [! k% q6 l% w0 k" [, c2 _/ m0 u numFadeLevels = 30;
1 l. K" S( p* z0 t5 q% H1 u function initArray(theArray, length, val)
/ n8 p9 o$ G# n+ W" \ {
0 M! r+ M; d$ \6 | for(i=0;i<length;i++)1 d J# y0 D! j0 i6 I/ w
{
( a( d |2 @4 d% E! b: W/ O y% L theArray = val;
7 T! x: n+ k- R) z8 v; ]( G: W' n9 E }
/ b0 C; Y; v' H7 n0 `7 u+ a }: G) F, ]2 s! ?* ?. `% B
bgR = '0000' + fadeOutColour.substring(1,3)
$ ~9 d: d+ p4 x: F. U* E7 P bgG = '0000' + fadeOutColour.substring(3,5)7 g7 B) D; y0 q# F/ A. }
bgB = '0000' + fadeOutColour.substring(5,7)
$ N# U2 L% C9 H& A. D* H7 a currR = new Array(numLinks);* g* Y0 l8 m3 r5 o
currG = new Array(numLinks);+ V; Z5 u9 g2 g5 |
currB = new Array(numLinks);
9 |- T6 i8 q1 O& R% y count = new Array(numLinks);
( X2 @1 Q! t, P fadeOut = new Array(numLinks);
- R/ K) C U' ~ continuous = new Array(numLinks);% ?/ d1 `9 }2 z8 }$ R
newColour = new Array(numLinks);
6 o4 r% |1 ~$ b9 s/ Y$ K6 h tID = new Array(numLinks); O i! Y! C. Z0 y/ k4 G$ r: S7 p
redInterval = toDecimal(bgR) / numFadeLevels;
" T3 Y: k- X0 \1 x+ H$ }* O5 c# _ greenInterval = toDecimal(bgG) / numFadeLevels;
2 I5 u( @ H8 ~& X# W* \" @: Z blueInterval = toDecimal(bgB) / numFadeLevels;
. G5 ^% q( E& y initArray(currR,numLinks,0);
. [$ v* U) I4 r initArray(currG,numLinks,0);
* s4 G: v3 s0 s initArray(currB,numLinks,0);& n$ X7 R6 d: H/ s$ C
initArray(count,numLinks,0);8 y3 r6 d0 h' E3 `. c
initArray(fadeOut,numLinks,true);
+ }% u1 J1 Y% M1 m initArray(continuous,numLinks,true);
! q, Y A; f ^; i3 N}
8 g, D- k* D7 p6 X7 M: y) }2 ffunction startFade(id)+ e/ e) i O& Y: {% R$ P+ H) s
{2 Z3 e) A' W" x# G7 I
if(fadeOut[id] == true)2 ]0 V$ c. `8 @
{ /*move colour towards background colour (increment)*/) S6 A: L, a2 x( H* @1 j* C
currR[id] += redInterval;. f' j/ N; G* A2 Y6 \7 K: z5 \. ?; s
currG[id] += greenInterval;
; p: t3 |7 e2 M currB[id] += blueInterval;
' u# G D& F. g% d$ x# V newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 n) {! I) `- O& ^: @- q& E
if(++count[id] == numFadeLevels)
d/ a0 P7 f+ A {* x5 n$ P! t' U6 {8 m+ [7 _
fadeOut[id] = false;
' v4 n) i/ z; A1 V: ]4 p }$ F! U6 \7 _" Z" {# D
}
) q, F- ?4 k7 u3 |% }, }6 B' ] else( R5 I6 M; m2 `" m* ^
{6 y, j* W6 b# z4 H0 r C8 P c( m
currR[id] -= redInterval;% s b) q& \: z1 n
' T; o( G, U, c" P8 y2 o. t- i currG[id] -= greenInterval;
* e4 l2 M8 Q4 t$ |
- _) Q( e! x* m$ K currB[id] -= blueInterval;+ I4 Z" U! r) t& E& V
# @' E: m: j7 u$ h$ j/ l
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* I. y+ u9 m9 N& C
$ L5 S( Q/ S7 h
if(--count[id] == 0): V$ w: A; p2 A# ?6 U
" G& S5 A+ r! A o3 F" H {) c# |; S4 a+ S) s5 g# p* V4 r7 N
6 ?4 D, E/ Y+ U2 \( L
fadeOut[id] = true;/ P L6 l! S0 u( N6 g' p% M) }. O
. g! ^% ?( L* ?) {! |8 u: B }: S; N% e2 X/ z/ V/ \. I7 Y9 P
: L6 T; }" ? m% a+ E" \ }
8 z, T# d; e; k3 q0 z. B/ p8 |2 Z2 |/ o, A
if(continuous[id] == true)
- C F8 t3 f$ r
! O! E0 @* x5 i8 ^$ r {
/ ]; w4 J( }8 M. ^+ j' L8 s
$ J% O+ F6 W( b6 r document.getElementById(id).style.color = newColour[id];
* ]/ a; t% G' Q) O2 m+ r, x( g' {9 Q' v
}9 i7 J( X- }+ F8 J' F/ r N1 h! m
: k0 L, |# w( W2 x% E5 A! I) S else
$ q1 G) D Q+ z$ x2 j
1 ?3 }) G- r- n; \! K {" N, T6 K' G; T& ]
3 \/ E& A8 y7 \' a
document.getElementById(id).style.color = hoverColour;0 {% E9 b4 q; \4 W, q W2 [: i
6 ]' H" Y# V' M/ L0 x* v/ \
}2 U f# ~6 t0 k8 k( l. `; d
+ a$ C( G* t: f g, `3 C
clearTimeout(tID[id]);
0 o1 t% i* B" k# ~0 Q7 v ?5 O; A, K& a/ a8 _& J
tID[id]=setTimeout('startFade(' + id + ')', rate);
. Y9 d _! p! M: R \7 V1 E8 m9 ~ q4 P: q
}
$ F& I3 e' r/ G& b
. P6 w$ y5 [7 I& mfunction continueFade(id)3 ?! ^! O% P+ x/ @9 Z9 e- X3 b
$ c* |4 |9 k+ z3 N+ R+ L
{
# V8 o: u v" ^5 P& n7 _1 U* U9 ]" b0 n! C6 `
continuous[id] = true;
+ h/ E* Q$ W7 P: i( m! ?9 |
) x4 k+ @) X- C$ O* t- t( ?: F}
! E4 t' p% f* q7 K6 p/ k& f
- {6 b0 ]& [. m7 f: Yfunction stopFade(id)
, P# n" k6 g5 A# n0 V1 U
% T5 \# K; d. q8 o8 B/ F" m{& N' ^# _- v$ X5 Y
6 p: {4 G- c5 b1 O& ]! `$ V continuous[id] = false;" u: v8 U' @+ s' W7 d
9 g% e) a% v7 F2 ~: s}, _: ]! H$ J! v. g. ^
* \+ | i* K9 D4 n: V! z5 k3 k# p
function StartTimers()* _, u$ p+ |' B y& b6 Q. [ z
* w' ~, E( J, s! x' @
{ //set up an initial set of timers to start the shimmering effect
( u6 S. @1 J: L/ F9 x0 n& N: o T& L3 v5 s
for(id=0; id<numLinks; id++)! e7 _, R( x. X' y' Z0 L( q) f
% b2 S1 o. v8 u; |$ j
{9 o3 Y3 L: R. _' d: r
5 ]: a; f# N1 {! u( b1 J2 c* u t=setTimeout('startFade(' + id + ')', id*100);
* Q% L( P* }% h1 O1 u7 V4 T
7 T1 P% }+ }; b( G* G! e1 j }6 m% U" Z! O/ A8 J. \: x+ i
8 \( U1 T% e* G( ~ w3 P) I9 l. m}
) B! @9 t9 q0 S. G' X j. }' ^
+ E# P' P: C* p0 [2 m: `//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')0 B1 r: @" S9 W. X5 g2 g
* Y0 _$ T2 J" q( C1 L
initLinks('#FF0000', 6, '#FFCC77');
: C+ Z, ~% b$ m0 u* Z+ v. l8 J# f+ s, I) Z- V7 X3 h0 H( G9 U8 V
//-->
& B' G/ O7 X- T u+ e$ S, l9 ]' |% ~( j
</script>, r3 Q! A- _ m+ |# z7 F
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
8 }$ M9 d6 M. \; Y& s% A' G</a>- g- D+ \' e. x8 ` j0 d& @+ X" d8 g
<br>
8 u' e7 D# i' R<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# l; b" h+ _( D1 B# j<br>
7 ^# q4 c$ [% w( |<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
( X# g* {5 ~" _2 O' W [3 i/ b3 @<br>
; |5 |1 Z+ s5 t# w$ b" u; c<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
$ D0 B$ ?" n l8 K) r w<br>5 o+ ^7 v- j3 F* X5 C
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
& _3 t+ T+ k7 i0 t0 z7 q/ c<br>
2 |% J$ [+ v" R6 w/ T3 L<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>9 v8 u% n+ a U* j
<script language="javascript" type="text/javascript">: n( m2 z9 n# T, Q
<!--
# K; @5 W$ f8 d3 H- m5 OsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
* }, b ?$ r" ^0 V0 U/ B//-->. r( D# D$ Y6 @7 N( \2 M2 u7 |/ e4 x P
</script> |
|