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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
) o6 @5 d% ]) l: X6 R2 H6 Z<!--$ X' ]6 b7 `& ~! _. Q3 [
// convert a single digit (0 - 16) into hex" Q8 Y1 T& [- V6 {. I1 T4 r
function enHex(aDigit)" u0 ]5 B3 X9 I9 k
{
) o/ a# O- E1 n* \ return("0123456789ABCDEF".substring(aDigit, aDigit+1))# X. \! o( t/ f! D% [, ]8 E
}+ C6 K1 A. [1 j: O1 |
// convert a hex digit into decimal
6 g& w: p9 ]0 efunction deHex(aDigit)2 l" w0 N$ _! D' O, ]0 g) K
{) ]2 w" C' \7 Y: m5 v! O5 ]
return("0123456789ABCDEF".indexOf(aDigit))
/ H. ]7 X8 c, q: S}
1 |: f5 H- \/ }1 c$ V, c
& @) I7 G+ C1 t+ t8 A7 ]6 i% m// Convert a 24bit number to hex3 V2 ?. R" ~. y" v" K/ o
function toHex(n)
# _: a& q5 u5 m, g9 V- ?{" F4 o# ?3 @. i( R
return (enHex((0xf00000 & n) >> 20) +
+ e- [$ y3 ~/ w, G enHex((0x0f0000 & n) >> 16) +9 U" |2 M) O' T; u" s' h3 f% a
enHex((0x00f000 & n) >> 12) +
( r% ]+ A7 }, K$ U3 a enHex((0x000f00 & n) >> 8) +
' i) `1 c t* ]9 | enHex((0x0000f0 & n) >> 4) +* l/ ]2 f [3 y
enHex((0x00000f & n) >> 0))( U! E3 J9 @. g u+ @5 \) T
}$ d8 C/ }) [. V* f3 @4 I) A# |" J
// Convert a six character hex to decimal
* P6 O4 M0 n s9 G4 Afunction toDecimal(hexNum)
1 B: m0 Q, N: j7 z, g{
: I( j* O: |; \ var tmp = ""+hexNum.toUpperCase()
5 a' R$ X5 g. G. I+ N0 w( y while (tmp.length < 6) tmp = "0"+tmp5 m n, {/ }# x; z6 V: e% f
return ((deHex(tmp.substring(0,1)) << 20) +! `! t7 [( N" @" e/ A: V3 c/ d& c. Z
(deHex(tmp.substring(1,2)) << 16) +
& p! h: R' W% s/ r$ o2 R (deHex(tmp.substring(2,3)) << 12) +" L* ~+ M/ H/ @. {, I
(deHex(tmp.substring(3,4)) << 8) +
8 c7 X! ^ b6 x& S6 f8 x. x (deHex(tmp.substring(4,5)) << 4) +
0 p" X3 l1 _: N ]+ } (deHex(tmp.substring(5,6))))
, P, o2 T5 A/ a0 P}
/ v1 X% p9 h7 q2 K" P- I5 d///////////////////Shimmering Links/////////////////////
6 N" s2 U' L7 W! L2 X//global variables
- }* r: ^2 E- Jvar hoverColour. x4 s, j; s; i4 R( N: t
var numLinks;
0 ]+ A6 h1 G- z3 u' pvar rate;
5 u8 m$ N& S- O, |* Ivar numFadeLevels;% \' M. j8 L1 N, x6 Z
var bgR;( {- z+ t1 ^ F/ T* }9 [+ b
var bgG;1 Q& q$ M t0 @: c. ^$ t
var bgB;8 ]7 f& l5 N* P) Z8 s: Y- [7 k& u
var currR;
, i1 l! ?# y5 a8 }3 k. Evar currG;, w, H4 w, A4 l: O5 I) f
var currB;/ }) ~6 Y6 Q2 s$ `
var count;
8 _& D1 T5 t* \* `2 u; z3 d$ vvar fadeOut;
% Q5 h2 Z! a4 v0 C: t; Q; r7 Lvar continuous;- \) [' f1 `6 ?7 C- w
var newColour;
& r9 P% Z4 c1 q) J" \0 |/ jvar tID;
0 U( O0 N' R# qvar redInterval;
y: {+ P2 K+ D3 b+ A: R* X8 W- s' Yvar greenInterval;
4 Q% z. l! s* s+ |var blueInterval;
( A! N$ g, y& q1 Z2 u6 Zfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)+ x" z, A. \9 m& n! W: q
{2 [$ M2 i- m) v# u/ D
hoverColour = mouseOverColour;. v( W# F3 `* s' o
numLinks = numberOfLinks;
" h W! E5 | L: C0 f e6 P. V rate = 1;
* ?& R0 Z+ D# K# l( a' C) C numFadeLevels = 30;! Q9 ?5 g# n- u0 D* ], V
function initArray(theArray, length, val)
9 u- K2 A( v) @' Q9 K5 ]: | {) I" z. t4 o. D u p$ ^ w
for(i=0;i<length;i++)
$ N) H& G1 V$ t- J* d2 g; @ {. [1 R: M' r4 R- B
theArray = val;
1 v, G% B% @- O. h }# m, g- t8 Z2 ?* y1 \8 Y% V. W! I
}! C+ s1 i4 d% M' J9 | m2 q
bgR = '0000' + fadeOutColour.substring(1,3)# D7 o" S# ~, j+ f
bgG = '0000' + fadeOutColour.substring(3,5)! z8 x- b9 _6 i! L6 Y* a8 {0 _1 O
bgB = '0000' + fadeOutColour.substring(5,7): ~; [8 ]* r/ J5 X6 k# O
currR = new Array(numLinks);1 e& r- { ^ l4 N% Q; D% t U
currG = new Array(numLinks);- a! w+ `0 n0 c' r/ f5 T7 v
currB = new Array(numLinks);8 e4 @/ C" Q$ E5 C* W
count = new Array(numLinks);, c! s- w+ {" ] [! g4 y/ d' P
fadeOut = new Array(numLinks);# r2 u2 r; `. _9 z
continuous = new Array(numLinks);8 h( \4 Z/ y r- e: z
newColour = new Array(numLinks);
; ~+ B0 E+ a$ a( v! E: E- y tID = new Array(numLinks); u5 t+ ~6 g$ i
redInterval = toDecimal(bgR) / numFadeLevels;) C) W! _; N/ _( m8 t
greenInterval = toDecimal(bgG) / numFadeLevels;: u! y9 Q+ z5 @7 ?" Z. Q" U8 ]2 _
blueInterval = toDecimal(bgB) / numFadeLevels;: S- d/ I- J5 }
initArray(currR,numLinks,0);
" }" i- g8 o1 |' f: i. T) a1 l initArray(currG,numLinks,0);
) X2 V' G* C6 A* ~" c9 a* S% Z initArray(currB,numLinks,0);' E- Y# B: Y$ D" p; C
initArray(count,numLinks,0);
. L z }6 }* J2 a& i initArray(fadeOut,numLinks,true);
?5 v0 I8 Q1 T# q8 e6 k initArray(continuous,numLinks,true);% t$ b( f1 j; |/ s
} d+ H( G2 k4 z
function startFade(id)
$ N& K8 j* W4 V' x$ ]) \5 f. N{5 @* G) l& k2 b
if(fadeOut[id] == true)
0 M. R+ C1 w. ^7 _- E0 K* N) G6 z { /*move colour towards background colour (increment)*/
3 c6 a4 q& d0 \ currR[id] += redInterval;
4 F- L4 F/ ?1 F8 \, K9 N currG[id] += greenInterval;1 g: b0 A' n% l% j# c2 l
currB[id] += blueInterval;
5 q! [7 O. Z% H# Q newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 v' u4 [0 p5 D+ \2 B/ v
if(++count[id] == numFadeLevels); Y, l8 n' t& D, T0 q* F( b
{6 G# N- K+ @4 p ~3 v6 r0 ^- i
fadeOut[id] = false;* u3 q1 _3 E# O8 Y
}
$ X. Z, J0 ~5 {! B- i! v. u1 p }
! z }7 e0 ?9 w) L else4 Q2 v, Y" L9 Y+ S0 R
{
/ P( ~ T# M: O2 d7 Y currR[id] -= redInterval;2 U* B9 D/ k' [8 ?# r- I0 i
; j8 R' e# L" d( e- C& |$ ^ currG[id] -= greenInterval;0 t4 S" T: b0 |; v
7 x5 p) t6 i8 t X7 N9 W currB[id] -= blueInterval;
8 F- }/ T: n- Q- {" _% R: M8 N+ ~
* p9 f* K& q( d; ?' Y& I newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- |( Q2 n Q0 q, o% j1 o
% j D, [% h1 B! v$ J! C if(--count[id] == 0)) b. H/ ?& I& P7 Q, R5 S
! Z5 N x6 i! o
{) R7 V+ @2 x$ r* T+ |
/ ?5 Y, `' N; M5 v! j3 k fadeOut[id] = true;
- ], i% N% S. z; N/ |' m# C$ B- i2 l. ~7 k" Q J2 h$ ]+ m' V0 O
}
, Q3 F' L, q0 L2 U T' Y- o" i( N2 \
}
- S: U6 r( p- A y; V k' r+ l, j d$ N7 h
if(continuous[id] == true)
2 F D& P0 I- x8 b
4 D. `( T: }; ~8 y7 P" k2 } {
! T" @7 m! {5 s6 [: F# l2 E- ^2 c4 \3 P. V8 V+ v) D' @+ y+ G: U0 u
document.getElementById(id).style.color = newColour[id]; $ o( P8 [2 m5 C, M. \
/ F" W: F( c& b4 P! t }& `, }5 P* g4 f+ W" D3 I
( h- Z+ o! x# A) O) [ Q
else: ^9 q' r0 c/ S$ |
' B/ {8 d, X) a! Q {4 L- D2 S/ m8 P: V
8 `0 _# f* C8 X4 c' e5 J1 I( T document.getElementById(id).style.color = hoverColour;
7 J+ f( ?; ?. b u0 j. m, d+ p+ i& r+ d; u
}: |9 W2 @! b5 L D
8 M7 x, b8 A" V, i }
clearTimeout(tID[id]);
8 k/ _* ^6 S6 l
0 Y j }! l4 [) D( K: x% ~ tID[id]=setTimeout('startFade(' + id + ')', rate);
5 y8 j0 U+ i/ W# l
, r8 [" e% R: Z+ e) H}
1 n O( g2 Y$ Z$ i5 I, u; m/ [2 O# ]8 ^; h3 J% y( t
function continueFade(id)
% a" N! G/ \3 G: v: O' D6 @ Y2 \/ C" O
{! x' q/ J6 z9 L% j0 c
0 E4 g' a0 N% C% m* D
continuous[id] = true;
+ |6 ]. ^6 z6 d% y1 T& P9 E. D- X/ L( u# n9 u4 W* c' R1 U
}
% k" W u& s& h( X$ `, [) i" J+ }" K: g4 u5 U
function stopFade(id)
6 d8 O0 G# t5 i* E/ N
9 U7 s# J* P+ g' m{
% t, K- N$ W/ v3 n" X- Y- ^0 Z/ L. b! A8 }0 @: \
continuous[id] = false;6 _" \1 l9 S* R) [
. H0 ~9 r* w1 q2 _
} Q7 X6 }$ p0 M$ C7 a3 m$ A
9 z( P& Z8 w- i& c5 G6 @6 } J
function StartTimers()
1 T% C/ `; g n9 C
7 i' _1 o" P& m6 g; l1 Q9 f{ //set up an initial set of timers to start the shimmering effect ]( F$ t. R' ^" x
; V- f9 R, B9 J! D8 H
for(id=0; id<numLinks; id++)4 }* [7 l& K6 O: s0 c
* q* S x' u# ]) x1 l" q {& ~' b# @- y3 ^( }! h
- i& r2 q2 Y: I
t=setTimeout('startFade(' + id + ')', id*100);) {5 P5 J! g& O9 h. \5 p: i
2 l* i5 E& R) @
}+ p3 m, v6 M% O; y t7 N- j( g
, ~- Q' f8 x+ |2 x% w( ]
}
( U0 P7 r# B$ G7 U: V2 e& e: B }) C+ {- g. x4 m
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')4 }$ l$ }, @' S. r [2 e
! C8 e$ @7 K6 MinitLinks('#FF0000', 6, '#FFCC77');2 L" C. J( l# q$ x* X
$ y3 W( x7 z' C- ]//-->
7 b, G8 U. A% |( N0 \: Q' ^! Q$ v7 D+ h
</script>
: X+ D/ X; h" C9 E6 D' G3 K<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
2 `* l5 v: Q- I! k. Q</a>, f# f0 E' K7 Q0 h1 U l
<br>$ A4 ?9 ]# g/ m7 j D" ^
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
$ {. I3 @9 z" l$ J4 G+ ~<br>
/ R; k- k* v; h# T' c) [: x( v<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
% I) }# {- f7 _3 @- v# w( \8 z' o<br> ( X# t* {) m- q! A! _% |
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
" o! A" ]3 M# Y. i1 \4 i; a<br># F5 n8 c# g# I' W" S" J
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
% t- m5 Y6 l! m! b7 y4 ]+ u8 g<br>
, f5 N/ B9 L! d8 \6 O# b% _, v9 S<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
7 X- P, `: k, T5 s2 e<script language="javascript" type="text/javascript">& V4 ]5 {! e' G' r
<!--
D) _* b& E4 _setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering1 i& v6 u# P% o! E
//-->0 D ^4 O L2 U3 Q
</script> |
|