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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
0 g% I7 F% j# R* i# t<!--3 B6 y7 v$ h) N# k( }) ~- H" y0 _9 p
// convert a single digit (0 - 16) into hex/ I( ?1 q( y$ e( K' {
function enHex(aDigit)
, |' S5 g7 d5 k5 S{
4 p4 A+ {: k( h5 j, f+ y return("0123456789ABCDEF".substring(aDigit, aDigit+1))
) P* r: s3 T0 W7 I}. i' r; b$ t' n
// convert a hex digit into decimal1 r6 {- ^7 ^+ V1 x' G
function deHex(aDigit)
( R! i9 R3 E6 l1 C{
7 w2 D! r; ^6 Z8 x3 p, l+ V return("0123456789ABCDEF".indexOf(aDigit))# a) F% w' c0 d( S: O) [/ b# A
} f7 ~; K6 Z0 c$ C$ j8 G% \4 {
3 D5 A3 E/ E" B9 S
// Convert a 24bit number to hex
' H f7 L# m" Y" a. gfunction toHex(n)
. C/ e; S# k# [. P8 p5 u{; L8 b2 ~' I6 Z ?
return (enHex((0xf00000 & n) >> 20) +
/ Z! d4 @1 E& q8 P8 Z1 r enHex((0x0f0000 & n) >> 16) +
! ]+ r- n0 B/ O" L8 g enHex((0x00f000 & n) >> 12) +
" u" l! K5 a e; a% _4 R enHex((0x000f00 & n) >> 8) +
: l7 G& j6 n1 D+ h enHex((0x0000f0 & n) >> 4) +3 s [2 M5 l4 d: M2 ^
enHex((0x00000f & n) >> 0))
4 A6 q O- C% r5 L) H}2 ?* L: ?4 Q% f- U, |
// Convert a six character hex to decimal' C% `3 L4 m5 V* y! N- o
function toDecimal(hexNum); p. H/ i- {! ~
{
3 T/ r, m& g0 m var tmp = ""+hexNum.toUpperCase()
3 Z" U2 D5 B3 Q/ | f while (tmp.length < 6) tmp = "0"+tmp
, }1 L1 @- g5 y) Q! B) z4 A) z return ((deHex(tmp.substring(0,1)) << 20) +
! v0 a, `! e$ u0 H (deHex(tmp.substring(1,2)) << 16) +
6 K8 O1 u; h+ @7 m0 h! b7 N (deHex(tmp.substring(2,3)) << 12) +
' E* H& ~, y' W: `$ d (deHex(tmp.substring(3,4)) << 8) +
5 B8 k* P/ c( H- m# f1 f* f; b (deHex(tmp.substring(4,5)) << 4) +
' U+ h4 |2 A: e% V. c% P (deHex(tmp.substring(5,6)))), m2 X" J" V$ ~: M5 r8 }# V
}% k9 F6 v8 l2 l4 P3 j
///////////////////Shimmering Links/////////////////////
# r/ `9 b; V. d3 X3 X+ @2 n//global variables
1 p9 E. l! g+ x9 x! j& s5 v# nvar hoverColour6 {, a; r" A& y3 X$ @" ]
var numLinks;; F; T( A5 k5 u
var rate;
. ?& `* l. K0 ~/ yvar numFadeLevels;6 E i$ h8 b9 k. {5 m$ U
var bgR;
' `8 S0 ]' d. p" |3 J% Y: Wvar bgG;" f' x$ W, O' J
var bgB;
U! c5 [$ g. @( R3 K4 o0 Xvar currR;+ B2 o* H& S* o/ f
var currG;+ q) Y& N& J. Q( ^) W
var currB;
3 C4 N2 l# [1 N: e3 n2 F0 R% Nvar count;8 K' w E: {* [" o! b f" P
var fadeOut;
/ s, K6 B9 }0 I- d/ }* z0 dvar continuous;& z: B( J2 A! m, X
var newColour;% s9 {$ L+ B v1 x6 A
var tID;
1 a: g( k6 }5 @/ W/ W2 Q- Yvar redInterval;5 n9 j* g' m. @9 f
var greenInterval;/ L4 Y" I) U0 c- y- w
var blueInterval;
+ u2 v8 e+ p# G1 y, C$ R- `6 [0 I$ ffunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)6 v7 Z# S3 ]) O8 z" @6 o2 S
{3 W! S g: l$ ]& b. u
hoverColour = mouseOverColour;/ d% \9 _/ k8 n8 Z+ K, B
numLinks = numberOfLinks;
/ h5 T3 F: T! A! K8 [ W% i rate = 1;
' r" b9 |3 V# c$ }' S* A4 c$ y; x numFadeLevels = 30; r: O8 M6 p) V$ J3 E% D/ ?
function initArray(theArray, length, val)% u4 ?! t$ G$ v# A e) [1 [" }
{9 F7 `, w5 e# ?5 B/ @7 e7 K
for(i=0;i<length;i++)3 I* k1 ?2 Z: I; w# w4 Q/ E) \7 v
{
1 ]' n# B# ~/ w/ A# Y% I theArray = val;
$ `+ G* F, j2 G; ?- R/ a }
' c+ S5 P8 I! k4 {5 B$ ^' a }
6 o! J" f: [8 @2 U$ w, h' \7 o( e( u bgR = '0000' + fadeOutColour.substring(1,3)) `5 `- l% `, l
bgG = '0000' + fadeOutColour.substring(3,5)
6 p3 C' @0 h* h- V2 m8 ?" _ bgB = '0000' + fadeOutColour.substring(5,7)' J" U" l0 @2 H# T" A( B' @
currR = new Array(numLinks);# V0 @3 }+ H8 U- O
currG = new Array(numLinks);( m) q+ q+ M" A0 J+ h- m/ d7 k. b+ ?
currB = new Array(numLinks);; X* q7 x. j2 Z
count = new Array(numLinks);8 |8 E4 j; e d# I# G. i5 |# f
fadeOut = new Array(numLinks);
1 v4 G3 I4 a# r' V K# i. N8 {1 S continuous = new Array(numLinks);
* ~6 V( ^- p( e' g) w# i) f2 s newColour = new Array(numLinks);
) U. n# e& `( \* V0 w tID = new Array(numLinks);: W6 _6 o% c2 j6 U* M) @" V* }* U
redInterval = toDecimal(bgR) / numFadeLevels;" E' @9 C7 k0 F+ {7 v
greenInterval = toDecimal(bgG) / numFadeLevels;
) m4 \* S3 `/ W7 J& p( W blueInterval = toDecimal(bgB) / numFadeLevels;
) k7 X1 O& m) P8 r C7 O' B initArray(currR,numLinks,0);1 G& G0 ~. d$ E- x' {) [. Y! A
initArray(currG,numLinks,0);9 Y- w2 t/ r: ^5 |# I
initArray(currB,numLinks,0);
! C/ V: p4 X) v8 W! b( H2 H: X initArray(count,numLinks,0);2 _% `$ a* }9 }6 a0 L( _( A
initArray(fadeOut,numLinks,true);) a# R8 l" Q, F6 H. K9 a
initArray(continuous,numLinks,true);/ a! N! D0 G$ E$ e6 g
} $ f7 F3 g# y6 y, W" c. Q
function startFade(id)
+ a$ }- T' M$ }$ I! G! C" T. S( g{& f; S& u6 C6 L
if(fadeOut[id] == true); g5 ?1 v1 y( j4 U: f8 k
{ /*move colour towards background colour (increment)*/8 X$ G, e b8 V
currR[id] += redInterval;
! f# G/ ~$ I" c currG[id] += greenInterval;0 E" o. P% J# w- W( N: g. S% k
currB[id] += blueInterval;- x8 ~( j+ O: X \" @$ N( I3 H' R
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 V; `' {+ U+ d: s5 M, p
if(++count[id] == numFadeLevels)
! ]3 ~9 O8 U/ U2 [ {
! r) Z3 @+ S; S" L fadeOut[id] = false;
, q4 D4 N* X6 t" V! a }8 \6 w6 i; h3 \8 ]6 n- _# g
}
& |8 {* q0 j. ^& H7 C9 ]) p else
- w: v7 F6 s5 L' `8 n& O% b {4 M0 T2 D! k. W, c. _
currR[id] -= redInterval;; p$ p& S! C& d1 I1 s; T
& L* I# i. u# J' B6 B currG[id] -= greenInterval;
) l! \) |+ f/ X* {. x2 [1 ~% K' o, s& {; ]9 l
currB[id] -= blueInterval;
. ]. U* A3 x: ?! u
( T2 N& l9 U9 ?; O: O newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" T- w8 M; p, }$ Y$ M& m
9 x0 J7 v) a* @: T* N if(--count[id] == 0)
( n: }( S% \% b( T* g! K5 H8 T. X! F- z( R/ L; C. h. }1 d1 E
{
+ _! m$ P# ~/ y, X6 Q2 ~, r5 j6 ^- Q" P9 ]
fadeOut[id] = true;5 k7 `4 y. X7 q# w* k* k
- B! |" `- E3 V* P2 M5 J8 {* T }
: P" o8 ^! Z- e' k7 f7 v/ l" l
6 e. R0 N3 g, e' T5 g& K% U' W) v }2 h' T1 J4 J; S; `
3 W! N- J' H4 @5 y, V
if(continuous[id] == true)) U* P: e- i$ g, `! g; l
, e6 \( v) u" s
{3 \( t6 y8 w* g+ C
0 g$ S0 ~/ g. e2 h: C8 z% I r
document.getElementById(id).style.color = newColour[id]; 9 D! A+ ^ q! \# v* G9 q; F) x
9 T: k4 P& G+ u- B }
0 Y6 K# b2 _; t9 B( E) {2 U1 l ^! ^1 t4 M: x* g
else
7 C$ G- F& ]8 y8 U0 v( `4 {3 A8 |: q$ |' V
{5 E3 I/ N+ u3 U, S% [( L( |' c
5 g6 g: W& s8 ~/ Q document.getElementById(id).style.color = hoverColour;! _& E, z2 r: H3 l5 l' r) c3 ~" f
; z' t. r8 h* m }% N6 d7 ^, q4 S. r, X9 ^
# m% y# @; W$ V4 Q6 K clearTimeout(tID[id]);# u* u7 S* q1 C( K: b: H0 Z
B' l# l0 L0 Q. [% x: S tID[id]=setTimeout('startFade(' + id + ')', rate);& D# G) k6 _- U8 i4 _0 ~
2 A: W0 Y' @- Z: L
}
& F/ p' B) l4 ]6 _0 u1 {
6 J) N a! a Ffunction continueFade(id)" |+ H0 u9 }- T' U: P9 z( u
+ Y6 j5 X7 B7 w' M{& K `8 ]4 B5 b: g
. K8 c6 b) N, Q1 F* N continuous[id] = true;
" Y/ ^3 D" q! U
7 ~! n; C6 G6 R! M8 I( d1 d/ a}
8 A3 i# {! g& S+ Q# [' B8 P$ p5 P0 b( | O
function stopFade(id)9 w- P& W4 ~+ F, p6 x+ x0 b' U
+ ^; a% p3 t0 K% |5 `1 v7 _
{* `/ k4 ]% L3 S/ x x
+ I5 n+ Y5 a4 W
continuous[id] = false;
4 U" [4 o" _. y/ E; R6 H6 ]- k* C0 Z) V0 A1 [& t! R$ a
}. s- H% [# ]; \) f
$ G* V$ d2 r( ]0 A3 c6 ?9 tfunction StartTimers()
8 e9 X) F0 ?* J" _
- ~3 W" G& i% l8 m3 c; Y4 m4 J* p{ //set up an initial set of timers to start the shimmering effect s- j% s- z/ Q, w5 L/ P5 a
( T' [8 H$ k2 H* e* K2 E+ }- e
for(id=0; id<numLinks; id++)
" i8 R4 t, p! r y% q
# x# m" l, f+ U- k- c+ f0 [ {
) A8 y/ F8 b4 C# ]* |# `2 M1 Z' u) q( I0 t4 I5 ~# q
t=setTimeout('startFade(' + id + ')', id*100);
/ }: t2 k4 A7 D7 \9 V1 Z4 c; B- D9 n' I- R- M
}
! F* ?6 C, @% E% f: y
' e8 B8 e! `% E' L! C}6 p* u9 T6 ^; M: y7 _
5 I% P5 o" G+ {/ X
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
. p0 c- n4 y, X/ N, z6 L( G& m( y8 C1 v8 c
initLinks('#FF0000', 6, '#FFCC77');
4 j! W" E/ X& |" ?+ ], x/ s; v7 n
8 M) F; D1 Q5 j//-->
7 L4 S) ?/ L( B
8 y! G% V9 I( x d* l2 _0 x/ o</script>
* i4 C) [* f' l8 d<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
0 }1 G* M N0 ~2 R8 P</a>* n# o2 ~2 m8 W( ~- t
<br>
* ?4 s' d5 f k5 f4 k1 s& B: C<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; \9 e( D# O0 T0 q9 x
<br>
# W/ t( f! u8 V2 J6 p<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- T; l; ~: Y. C9 i) x+ f<br>
9 F! K0 ~8 s4 L) I, r<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
! u7 W2 e& R# y. K<br>
( |, l8 {6 c( G1 m$ f$ S<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
! j {9 B% w t6 R: O# ?/ A5 ?5 a+ h<br>
$ L g( U, p3 j! U<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>: q+ X2 U9 \2 |4 e) a, j+ x+ V2 O
<script language="javascript" type="text/javascript">' F5 a h, k5 _# _& Z5 ^! M/ H0 P* h7 T( }
<!--
0 Y$ I/ W0 _5 H( B( EsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering8 h4 N8 i: U4 p& F2 j T
//-->
4 `( g; u: K6 C/ N1 }+ r9 j1 V</script> |
|