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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">+ @3 X) ?" y2 ^0 f1 T5 A
<!--
& W% T1 Q. @ N) P) m* d. b// convert a single digit (0 - 16) into hex
+ p3 Q# k5 C7 I, qfunction enHex(aDigit)* E: H; x1 ^" q+ i0 n
{
' h& _1 z# G& z8 [$ H5 A; \ return("0123456789ABCDEF".substring(aDigit, aDigit+1))* Z u3 @: |/ Q6 c) b& n) x
}1 ^! N3 v# C1 l) J
// convert a hex digit into decimal
4 t5 k, |7 ?' Tfunction deHex(aDigit)
% w! B o B$ X+ t! G; u8 q{
" a, s) i% M) h7 ] s3 | return("0123456789ABCDEF".indexOf(aDigit))9 @ a' `9 d# e$ d% F
}: Q' r4 Z- ?; D" C6 L: G* g. `) ~
7 \9 g, o5 J) h3 y, w0 U
// Convert a 24bit number to hex& {1 M" f, B# Y. a( Q7 r
function toHex(n)
* Q+ ~) _7 \5 y4 H& h- o{
" `! h+ D0 l8 A# \! h$ I' [% x5 J return (enHex((0xf00000 & n) >> 20) +
! B" A3 o4 h' F7 n enHex((0x0f0000 & n) >> 16) +
, Q: [' ~4 V/ S3 y7 A( ]- ` enHex((0x00f000 & n) >> 12) +8 x# M7 h1 O5 ~1 g4 c/ e# J
enHex((0x000f00 & n) >> 8) +3 F# |6 [% [/ e3 O, P
enHex((0x0000f0 & n) >> 4) +# Y7 |4 _4 A- O5 _
enHex((0x00000f & n) >> 0))
, c$ S1 m, } @' K; T}: u7 ]& @1 j. g: X! F! y! u- y" E
// Convert a six character hex to decimal
* P$ v, n! R1 S* c" k# @function toDecimal(hexNum)( L# p6 O) M- I5 ?9 E$ Z2 u
{
/ t9 Q" d, b! C% j8 k7 W var tmp = ""+hexNum.toUpperCase()
! @/ \7 F2 W+ V5 j8 D" p* S1 b3 z while (tmp.length < 6) tmp = "0"+tmp( F% t. k( c. {% F4 @3 K0 ]
return ((deHex(tmp.substring(0,1)) << 20) +
* @. v' z7 S- v2 a& @ (deHex(tmp.substring(1,2)) << 16) + 0 N1 z: K( l0 j
(deHex(tmp.substring(2,3)) << 12) +7 `7 m0 s5 Y& C7 n- f, K" v' W
(deHex(tmp.substring(3,4)) << 8) +
5 G T' y/ u2 N8 Q8 l% r! @ (deHex(tmp.substring(4,5)) << 4) +$ ]% F( m! M: _$ P" H3 x3 c. f
(deHex(tmp.substring(5,6))))
0 M3 a4 b- V8 z. @7 `( _}
2 H3 y: V$ g( c///////////////////Shimmering Links/////////////////////
* x( s) I' k! T& S2 L# R2 o//global variables
0 [; M$ J0 ^; c9 U ovar hoverColour
; m' e1 j; T* [$ I3 ]6 c2 `8 cvar numLinks;
' r, g7 l2 _ {9 O, x: r9 k1 J/ lvar rate;; T' D- c; e/ @% ^& X1 Z. U. ?. D
var numFadeLevels;
9 d; ^8 e& C0 Uvar bgR;
4 i D& @, w( [- t. k4 P5 u1 Ivar bgG;
) c1 y" ]* a. Q4 }& l+ C! q; z7 qvar bgB;
+ i3 b* G# r" ~& F8 `var currR;1 P% R/ I+ |" @. D3 X
var currG;
8 r& l$ d6 r$ @9 t! S+ S8 Zvar currB;
. s8 h1 o( k8 dvar count;
$ x4 ^+ @$ ]4 v q1 xvar fadeOut;# n) U4 ?% k$ `$ E5 k3 `! {- J( c
var continuous;) S$ O/ U2 ~% l% b6 d) k
var newColour;
5 t- G6 s! D6 W+ K( Vvar tID;, A0 @; M" I9 S8 ?$ K
var redInterval;3 X8 `4 |: W+ g* C" l% `, |
var greenInterval;) @( b# U8 q$ {! s V" r& d+ ~
var blueInterval;2 H$ T! k: l: O% [7 x% p; ]
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
* r: M2 v8 r$ @{8 K: H: p `' t) ]& ?
hoverColour = mouseOverColour;" A( l4 \/ G' n3 I3 X6 T/ m j
numLinks = numberOfLinks;; s3 i* n L$ ~4 g7 j
rate = 1;
( k/ S9 {- D7 X' u$ G& u3 h! r numFadeLevels = 30;
+ |( g' c& W% W) \8 h9 w function initArray(theArray, length, val): h5 B) q: y& N0 N6 `
{
0 |. U( Z' S- l) Y8 w7 k9 V: a# ^; q for(i=0;i<length;i++)+ r0 K- l3 c3 F1 s. i+ |( p0 p
{4 F' q" a* m; `9 _) _/ `
theArray = val;
! r# E" X9 K' l: ]$ q }
8 S2 G# {, b* h }( [4 F- Z8 ]& U4 [( S+ V
bgR = '0000' + fadeOutColour.substring(1,3). B* [! z- {3 x7 y9 k/ e
bgG = '0000' + fadeOutColour.substring(3,5)
1 U' w/ F5 Q M1 x# F% r7 P bgB = '0000' + fadeOutColour.substring(5,7)1 h+ F$ Z, i6 ^6 ^; x# k
currR = new Array(numLinks);& m) U2 c6 B8 q" i" |9 W2 }
currG = new Array(numLinks);# @8 \( {1 g% n2 w/ Y5 F3 ~
currB = new Array(numLinks);
% ?& k8 G4 N8 d5 ~ count = new Array(numLinks);
0 F0 O2 O" p- ^" g4 l3 A/ S fadeOut = new Array(numLinks);2 p0 C4 o8 w5 q) e3 x5 [+ F
continuous = new Array(numLinks);
; p+ S6 e' w1 H- _ newColour = new Array(numLinks);8 Y: y/ f3 v1 Y, n+ b; I
tID = new Array(numLinks);) y' l/ P9 }: m9 f; m
redInterval = toDecimal(bgR) / numFadeLevels;; G! M& O) M8 w2 T9 A8 ]# E7 B, \
greenInterval = toDecimal(bgG) / numFadeLevels;
, J" ?' a8 h1 H3 @0 N2 x blueInterval = toDecimal(bgB) / numFadeLevels;
/ L9 c8 m) ~" J initArray(currR,numLinks,0);
9 T. ]4 J$ c1 G" m initArray(currG,numLinks,0);8 i. u. j* G" b
initArray(currB,numLinks,0);* y% j4 W) m$ [
initArray(count,numLinks,0);% _# p+ c0 i% H4 l
initArray(fadeOut,numLinks,true);7 L% y) @2 u' U- A
initArray(continuous,numLinks,true);
8 \' ? ~) N1 V* H}
4 ^, Z+ l( c' ?% ~function startFade(id)
C$ r/ k4 m9 H0 u$ j- F{ l+ x+ D4 R5 U n' m/ {
if(fadeOut[id] == true)
% n$ k- m9 ?+ c2 p; t { /*move colour towards background colour (increment)*/
5 C; E K7 j5 x2 E, K4 p currR[id] += redInterval;6 ~& t) @% z3 M+ M5 j$ L3 l
currG[id] += greenInterval;# k3 e& \% v' a" G# i& B
currB[id] += blueInterval;& J0 w( Y' v4 T/ o! _- s
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 N D9 R8 x+ ^. ] }3 I
if(++count[id] == numFadeLevels)
& R8 c# y3 e4 ], C5 }! N {0 \! p. o: R7 L V: m: b2 E. a8 H
fadeOut[id] = false;" M3 t! \9 b" @) n* g2 B
}
+ d! S' g. f; I/ f& k/ S; T/ D, P# t }
- a7 g; R6 A4 \, F; R2 ?* B else* c2 I# K" p) ~: u
{
1 g7 i' P/ d3 T# e" c currR[id] -= redInterval;, K4 B8 v* d1 E/ `- q
, E( e. X& ^5 X8 g' T; d
currG[id] -= greenInterval;
7 L7 d* {: ?; B% i3 z/ \5 Y! E& J# l3 F
currB[id] -= blueInterval;
d7 y& ^' u- |8 U
, f0 O8 F, A' n6 Z2 Z7 ~ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);$ P! I4 x' c3 j0 d7 [/ k
2 V) E* K: p6 [) z
if(--count[id] == 0)- Q+ p# F S! ]) j5 o9 B( w% ~
7 p: ? ^/ ~8 I
{
8 }5 Y1 }3 h6 Y/ Y/ P* M1 m& P. A6 r
fadeOut[id] = true;
5 _2 H: L. n& Y/ u1 P
m4 k2 }% X0 I% P( R }
% Z! I0 N3 Y3 ]% F: _- l3 x, K" U2 r$ c6 L7 j1 ^
}
# o( Q' n. S g* `) d5 h) u/ \' j3 r( d4 q
if(continuous[id] == true)
+ ]6 \2 l( `5 S4 k2 u* d# G
/ X) G4 x5 `6 H4 z6 G {# s6 q; G* t2 p( K
2 y! F3 c, ~ A+ l" ? document.getElementById(id).style.color = newColour[id]; 4 L4 P- o' T0 x6 _9 @4 X
! I# g) i2 T0 e. z/ y( H }
2 \' {) _! ~/ Z, U' R9 a2 E
5 X+ {* R, I' H else
5 D; _2 ?8 t% _* K: R: T8 G" x0 O/ |7 R) ?# U
{0 D7 q# B- p. s8 L1 @4 W, ]* F3 R( [
% N0 S2 P0 D" a( m9 K; S
document.getElementById(id).style.color = hoverColour;/ g7 R' U9 [6 N. i3 G% {
* h. j/ D, [2 u1 K6 h
}
9 \7 u8 \1 P1 ^7 o1 Z# z( {' v( S9 N$ z/ U2 U( v
clearTimeout(tID[id]);
; ~) I8 j+ f5 j" z0 b0 B7 f4 F# U' g' W& u
tID[id]=setTimeout('startFade(' + id + ')', rate);! T. K) _/ l! o
& T9 l- G& _1 |3 I+ y, w
}
, b% C/ U5 X( a0 \8 H2 {
4 T5 b4 g+ E( C) ~/ Xfunction continueFade(id)
/ `8 @& N4 C7 N0 f0 d6 @9 D: C
% h- @5 i7 ^2 C{3 I9 Y' O, H+ j$ F4 R
1 R: a, z* n+ O, U0 q9 M, x4 K
continuous[id] = true;' H7 e) h3 x0 X0 _5 X
/ |6 |- `' r3 x# O$ A) p9 M}& \2 F8 I, G; Y
, i3 d8 _5 C( @function stopFade(id)
8 M" {. K% [/ E {) C
0 e( t7 G9 L. S( b7 f{
- A5 Y; P z0 v: F8 `- b0 X8 Y1 Y! ^4 {$ m0 Q" q
continuous[id] = false;/ _# y! f3 f6 x# n1 e5 S& C, w0 z
2 e% V8 A7 S; n& A/ P/ } N p
}
" b3 B( m( i- y8 }
4 E1 K4 |4 l) b2 dfunction StartTimers()
# i- a- ~; g3 c8 _! b6 U/ A+ N
, q9 S- {6 G/ V& S+ {2 a j) s' r{ //set up an initial set of timers to start the shimmering effect
: T! z. C7 \ n# C3 X8 F$ I8 T# Y) I! w* S* ?1 \! I) Q% A: z
for(id=0; id<numLinks; id++)1 O8 a2 r# g5 P3 F, X
; n9 N4 M# a s {
0 ?' q! G% Q5 \0 b- L2 u! F1 _, X3 F0 `4 b' I
t=setTimeout('startFade(' + id + ')', id*100);
) E; |0 R q# ^% f' ^) z( A; R: x4 k
}$ q: h# R# v) \: d' o
% |" J7 A% Z* \7 g) i, [}: u- A; m, o& _) f5 X
1 z& ~, |4 n4 j# k5 v" J
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
0 u9 n# w6 D& v6 V- t. k
, u( I2 @" Q( } VinitLinks('#FF0000', 6, '#FFCC77');
, v _3 V9 ^" x
# m: l' v; {+ u9 w3 B# P//-->
* E( {; o5 p+ ]& {8 B% G9 P) A1 e0 M6 k
</script>
( f* I, u' \! H, o0 |: g0 A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元1 ^; b0 d8 _( S0 q: M- X
</a>) A# s9 ~* c1 m) m( ]
<br>2 L- f: v1 @) S) m: {
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
% s: n- o0 R1 v1 i/ i) R<br>1 q& K: M4 k6 L! ]
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ I" G1 w/ E; L; A0 G( p% B<br> : @0 d9 I7 Y' _5 ^7 g) U
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
7 S5 A5 N7 I. w, N! K$ Y" k$ n<br>
, I0 C% |6 c5 i4 |! I+ ~<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>8 ^6 L& W. x: k" `- h; b; Z
<br>
% P( e! K$ A* f- @6 }0 v<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. D- d( l3 F( b: I
<script language="javascript" type="text/javascript">
4 {8 h+ X; A) Q) l<!--' b6 x2 ~2 N$ [9 a3 c/ Y9 k
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 I9 T4 ^4 l, y) N' I2 T
//-->8 @! L6 C Q7 B5 B4 Q
</script> |
|