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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
3 U, i' K; `* [+ n& p8 V% ], J<!--
! ?0 Q7 m: o5 w! ~9 Y6 u// convert a single digit (0 - 16) into hex3 W% B3 A+ i+ R
function enHex(aDigit). o, p" j `4 h( x
{
7 s3 D( p5 l# Y2 E return("0123456789ABCDEF".substring(aDigit, aDigit+1))( z1 b8 Y' y' l9 j
}7 D! a" L6 O/ h Q$ E0 |
// convert a hex digit into decimal
$ j* c, m" \( L5 Rfunction deHex(aDigit)
( \6 R* E/ f5 U7 V) K% |5 a{$ @" r& B' r% J
return("0123456789ABCDEF".indexOf(aDigit))' ?4 u" \; W* s% d0 `
}
( k; a1 s0 R5 k ]+ i" j3 e% X5 k& P+ M- Y& r7 ~# @* ]& k! A
// Convert a 24bit number to hex
" |, j- ?5 }1 R2 t4 e lfunction toHex(n)5 T7 n; a) p" W6 o; ?0 Q0 W- v( f2 g
{
f) S" x$ }; C B: H. l7 d return (enHex((0xf00000 & n) >> 20) +: A: |- p2 M0 [% g
enHex((0x0f0000 & n) >> 16) +0 W2 P2 G/ r& e( ~0 ^; p6 L
enHex((0x00f000 & n) >> 12) +
8 c X0 _" d# L% f6 A/ b enHex((0x000f00 & n) >> 8) +
* l7 S8 y; ]* h enHex((0x0000f0 & n) >> 4) +
" J6 Y4 n' R0 u- @, Q, m( G" H enHex((0x00000f & n) >> 0))! Q5 Y7 [3 Y0 E1 N/ Q
}
( z, u4 E6 V3 W, [// Convert a six character hex to decimal
& P8 F) d4 t4 {3 I- \- [- x# j* Afunction toDecimal(hexNum)
! q0 x* Q0 ^! {/ `8 N{7 ]5 W$ p9 b2 Y# c4 C5 _( [. l
var tmp = ""+hexNum.toUpperCase()
! S" o3 D# _- F* V* _ while (tmp.length < 6) tmp = "0"+tmp" q' w' y$ R! c
return ((deHex(tmp.substring(0,1)) << 20) +
3 r+ {( s v7 ?2 j( d (deHex(tmp.substring(1,2)) << 16) + / y% W. O U7 ~4 G4 Q) i3 h& |
(deHex(tmp.substring(2,3)) << 12) +
$ l8 i- k3 q& S# q (deHex(tmp.substring(3,4)) << 8) +" f4 c; c8 E: V3 s: ]9 i5 L7 [' o1 F
(deHex(tmp.substring(4,5)) << 4) +# h1 I: F( w/ V0 q
(deHex(tmp.substring(5,6))))+ O0 L/ Y6 g: l2 N1 n/ f/ M
}
# k. Q! X& J/ {: f8 z///////////////////Shimmering Links/////////////////////
# I8 ^/ P T* O* {2 l//global variables( u- i1 k; M3 y2 ~; h
var hoverColour
& u0 i, D+ Y( i/ J" @var numLinks;
, f" W- o) H6 s9 @( F$ ovar rate;
6 q- B u7 ~7 S# }# o! D# } k# Gvar numFadeLevels;: d7 \3 a9 V5 @ L" e2 @
var bgR;
( g! w5 ?9 m2 `' `1 Bvar bgG;
& @* D9 e* P v2 H4 c+ Q O0 nvar bgB;
" ?* j/ |" Q8 A( d$ c) N4 U! zvar currR;
8 V4 B; Y& X0 o( ?var currG;# M2 A$ B+ d- B# O7 `4 X
var currB;; l+ p( w0 S- B6 ^5 X1 ~
var count; G/ S/ @- ]0 l W3 L
var fadeOut;" O9 j( A3 u3 E% M! G
var continuous;. y& E0 `' f5 A, e5 M, G# ~! s
var newColour;
6 D9 o7 t: s, pvar tID;* M1 o7 ?; C1 g% q: ~
var redInterval;6 h6 W. L* B* C$ R
var greenInterval;8 Y/ Z( `) D7 J4 X
var blueInterval;0 ^) j0 J' v) `: P2 J& `0 H
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' J3 i( N: _* Y$ @' }) o* U
{" U0 d& f& P% T
hoverColour = mouseOverColour;+ ^" _( q- G1 } x! a) v
numLinks = numberOfLinks;4 u0 q4 K) I5 W1 D; c. L
rate = 1;
9 w9 @5 M7 r# d2 u3 r numFadeLevels = 30;
; v# |4 L5 P6 u( x7 ^1 |+ d function initArray(theArray, length, val)
3 p/ f- C2 g, N& {6 \6 q& ~ {; z8 ^2 E$ z; G6 R# Q
for(i=0;i<length;i++)
4 V0 N# |4 `4 x5 M: K' P {
' x" \& D& e$ T% c- K$ ]% J theArray = val;) i1 V; b( z) [: p% H& H
}
' O9 Z& W- W% y2 r- C. V! K }" w% g7 m* Y2 v1 y7 H% _( E
bgR = '0000' + fadeOutColour.substring(1,3)
2 d" O; R) @1 d& @% Q1 P bgG = '0000' + fadeOutColour.substring(3,5)
% x' B2 i4 U5 m, r0 o% w bgB = '0000' + fadeOutColour.substring(5,7)
$ U5 I4 j/ V+ z& `9 f currR = new Array(numLinks);
: h9 ?4 R0 |. B' E, N8 c# Y currG = new Array(numLinks);
; \ f! r. I9 g currB = new Array(numLinks);
8 \+ N, S4 H) m* ?) }4 U6 D- z$ v count = new Array(numLinks);9 _8 t; \$ T% ~, C( \
fadeOut = new Array(numLinks);* T7 }1 e+ Y* }' r% D- H
continuous = new Array(numLinks);3 ~. C8 |" p7 B% n. q# `0 u
newColour = new Array(numLinks);* T( S. u5 J+ w
tID = new Array(numLinks);6 y3 w) V$ {9 d5 i
redInterval = toDecimal(bgR) / numFadeLevels;
0 d& J5 C5 p% E* d) x greenInterval = toDecimal(bgG) / numFadeLevels;
: Q/ E9 G( E& X% A2 H! K' S blueInterval = toDecimal(bgB) / numFadeLevels;
6 m4 c5 I/ [! \ @8 t% [9 w6 F initArray(currR,numLinks,0);% d1 w% N: C; d, J, o
initArray(currG,numLinks,0);# y5 p/ ^. e+ R2 \4 D. l
initArray(currB,numLinks,0);
# o9 N0 S+ H1 k6 m initArray(count,numLinks,0);5 c0 E0 i/ N' A/ }
initArray(fadeOut,numLinks,true);' |0 V9 ]; @4 S( J1 A9 ?$ }
initArray(continuous,numLinks,true);
) ?2 j: W% Q* @: F8 ~}
+ N) i4 h k+ T* @9 y, }) mfunction startFade(id)- e* I7 x4 i6 ]2 {$ c
{
) S* j- Y" {0 P3 W9 p2 R if(fadeOut[id] == true)
* N% F4 k1 i% t3 e/ l { /*move colour towards background colour (increment)*/
3 A T4 f7 \% U6 n: M currR[id] += redInterval;
, Q* \! c8 C6 G currG[id] += greenInterval;
. H- M7 z+ t; h* Z0 D/ c k! c currB[id] += blueInterval;
" o1 Q; v7 n c6 u* d newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);. `! K3 d" D4 a9 X
if(++count[id] == numFadeLevels)
n+ n6 r* `8 g& C* \! H; b {
1 A9 u) h' ]0 M6 b5 p fadeOut[id] = false;$ J4 H9 v. B, Y0 h5 f! E
}
( D, G5 W4 E$ J! N9 y }# l" t9 u# D" [% b- F% w
else
2 x" e7 _! C. [; I3 @& Y {
& @' O/ S* D6 A: O% U currR[id] -= redInterval;
- @ b5 J7 N) r0 m' D4 y! @/ D) ~( t& s" x
currG[id] -= greenInterval;4 k% E9 h1 o/ S8 k ~1 T$ Z+ {
Y6 d( c3 R) I; k
currB[id] -= blueInterval;
# G: J4 D* @% i- Y
& P% @6 y& N; u" r( t newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 T/ }7 D. s# ]5 B2 ~% ]
3 A* s! F J6 @8 e if(--count[id] == 0)! Q9 r$ U. W& j$ @0 q
0 j* @+ J( d& ^2 s
{% g4 P* V- ~( |4 h1 V" i/ z
: N5 A6 d5 B/ W
fadeOut[id] = true;8 G4 A1 Z! c/ I6 H
0 p+ q5 I f' p
}. d* c' h5 K0 h1 X1 L
* i; U4 m- z# d. T
}( [# D4 s, {0 j" f" g# n
3 s3 q D2 U2 `# S- J
if(continuous[id] == true)
7 h' i1 Z, ]1 X6 H2 d$ i; N+ e; X
# f! Z# N' p) y; e/ W {: `/ c/ U* W9 ?* m2 P3 ~& A( r' h* K
4 e5 {1 V: C W& B6 { document.getElementById(id).style.color = newColour[id]; - B+ b, c- G! ?2 b9 q
* j6 j! a+ @9 r4 }: m* N }6 E- G2 D Q2 V3 W# i
: H, @4 q$ B1 ]# l' }& R1 P k else
% A9 m5 a6 X$ r$ [! f, P. K4 I! U8 j0 }2 Z8 A) S& p5 k9 J B" `
{- _0 P5 b4 o# [9 E5 t6 k$ [% ~
7 p @1 l, }! h document.getElementById(id).style.color = hoverColour;! U' P( \! g0 [" o# \3 S
2 D9 Y- Z# h8 y8 a! ?
}% A* r7 T" X, f' R5 h) z
) L/ Y; d y2 y* w: f7 v/ w clearTimeout(tID[id]);
" K. x g/ G$ j% W* j Q1 |+ }( n
7 w( ` Q( x. _6 t5 Z( a- P4 x* _% k tID[id]=setTimeout('startFade(' + id + ')', rate);
+ O: [% \2 R# ]
! W* l0 s! M" Y0 S- z1 K' |}& c. q: P. v" A# I' B
; D; {" M) o; y$ y* K. R" J7 V
function continueFade(id)
+ |$ h. o9 d8 a* E* z4 x) L& H1 d8 x( C0 E, D
{- Z" P$ j& @ `* i6 P
5 r% q, e6 P9 \$ j
continuous[id] = true;+ A" T6 n0 S' U' Q" N7 B% [
/ d( r7 k2 J6 l2 a0 N7 w- r}9 u5 a* @! j4 q: ?% a
3 e0 ]; F P; h9 ~
function stopFade(id)
1 Y: W1 [) u2 i0 | F6 N. l! n2 b0 p! p! ?) P8 B: P# R
{
+ X+ M$ |! |5 e) D6 h! p6 \! Y8 k6 Z$ z1 h1 u& v
continuous[id] = false;
* t3 ~5 P+ V6 r& ^& A! q9 l; Z
& l4 m9 Q" V) W V}! M6 a) Z4 X. d5 X; W( M
0 o/ R- G9 N7 Q; i8 k
function StartTimers()& Y9 {+ B0 R3 I" S% U3 V* N
/ C& U; n7 g& I* ]
{ //set up an initial set of timers to start the shimmering effect, `2 B! _! N0 ?$ i
, Q) b/ f T" f! Y! z
for(id=0; id<numLinks; id++); ]% B6 a( T$ @" A9 d* A# T* ^
8 c( c& n! K3 k. v% x9 K. p7 } {* }( O3 u6 B% w& y* s; U! v' j
, W' E! G2 x5 {7 U) l, g! q t=setTimeout('startFade(' + id + ')', id*100);
% V8 D9 s, ?" I/ T6 k4 D- O9 R$ t) ` I9 Y2 H# ?) N- w& e7 c& P
}
2 ]- @1 l% c9 t# G, s
1 D% G" x+ D2 b}
0 W7 L9 W; v6 d9 ^* ^& x; H+ v. v3 C! U3 U* l
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
3 @8 I6 u7 R: d) P5 E1 h8 Y4 j
/ D: S1 ^# o" }0 @& S+ g) \6 JinitLinks('#FF0000', 6, '#FFCC77');
7 a) Y( H4 C2 d0 ^4 D, b S8 M x/ ]% _* Q- O! W( a! G
//-->
" D% m' `4 J0 |" e3 K
4 o" v+ B- u1 s+ J' o</script>
+ H$ V/ ]8 A+ \# p" k<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元! z* ~- `5 e4 U2 B
</a>' `; P. T Q' D: l
<br># e4 o) X- A" o
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>, E, _6 c# ~7 D7 @
<br>
) ?. c I; ^2 ]2 a<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
7 V8 S( u2 y& f# [( ^$ H* L<br> 1 W$ L0 i& s# x5 d w c( I# g# M
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
1 `+ |6 o( [' s<br>4 G" z7 b, { M. S6 {4 F
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>% X6 V' P2 F2 W( f' ~
<br>; r2 B- K- _5 m4 U9 C
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
, Z( F, v" z( o( f, [. c<script language="javascript" type="text/javascript">4 l. M: D7 M/ y5 J
<!--
- q$ H9 k8 H; Q. GsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
) d+ w0 b* A) F1 b% T//-->9 W c5 \: L9 X2 r: q. D/ m7 W
</script> |
|