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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">3 f0 L# q" L0 v+ d h) R
<!--
" q& H% x) Q2 p3 z8 t9 q* q// convert a single digit (0 - 16) into hex9 A: Y: q ]. [# X
function enHex(aDigit)0 h1 j+ c$ d1 M
{
; y2 ~; p) e, a( C+ E return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ b" @, [2 c4 p; r
}
+ B$ j, x2 o" k# u2 H9 O B9 D// convert a hex digit into decimal$ Y. h( ], ]3 p0 {4 z2 Q( H3 M
function deHex(aDigit)1 K) E& `5 Z+ o# M$ l0 f' m' U( i
{- k2 `6 _7 Q: i$ v& \# m$ k
return("0123456789ABCDEF".indexOf(aDigit))! J! B, F0 W+ `9 d2 N5 {& X8 Y7 o
}* W# ?: i/ ?- _/ K( Q! s
# r7 Y5 O0 X( y3 g7 c7 t( g! n// Convert a 24bit number to hex+ g4 ~+ V. j6 f- U9 d
function toHex(n)
4 l, W6 B- W m{
+ ]" X9 A9 Y1 C return (enHex((0xf00000 & n) >> 20) +
, C! Y% }9 J2 g6 K p M enHex((0x0f0000 & n) >> 16) +
3 Q, C$ u- ?- u7 n0 j: m3 y) ^; Z; q enHex((0x00f000 & n) >> 12) +
6 Y$ _" C4 `7 u, w, Q( S' U enHex((0x000f00 & n) >> 8) +
8 D$ h( O% N% @) X6 t3 s enHex((0x0000f0 & n) >> 4) +
K+ @ S: h$ i7 k% } enHex((0x00000f & n) >> 0)): @% O0 C, r l r+ H
}
i8 @ h+ |: B& R4 V9 W// Convert a six character hex to decimal* e2 s, C! y; l
function toDecimal(hexNum)1 U- S0 C9 p, B- A3 g& ]- e
{' y: y$ \) S9 o" v
var tmp = ""+hexNum.toUpperCase()
/ ^! x" e3 Y, O) B5 _ while (tmp.length < 6) tmp = "0"+tmp0 W. @. i. L# u4 s2 E
return ((deHex(tmp.substring(0,1)) << 20) +
8 ~8 E9 Q' I% j) V# ^ (deHex(tmp.substring(1,2)) << 16) + 3 t5 Q% a/ Q6 [: ^
(deHex(tmp.substring(2,3)) << 12) +
+ ~4 \! G- M" R5 Z1 E: t: A (deHex(tmp.substring(3,4)) << 8) +
4 ~1 X$ b! }5 L o( K4 V (deHex(tmp.substring(4,5)) << 4) +5 S+ x# p, ]; P0 @! M1 ^3 w
(deHex(tmp.substring(5,6)))) }3 u1 E4 C' R% t
}
0 ^: L3 q. t+ [9 s" P. X///////////////////Shimmering Links/////////////////////
' U$ F* n, q! f6 q//global variables2 W+ g; d# Z, M
var hoverColour
4 m4 u: ^+ f5 T$ @) ^2 S+ J# Bvar numLinks;5 @" t4 [' i6 b: a6 j" e8 h& n
var rate;
/ h5 X$ `% b9 u7 d% s6 b2 Evar numFadeLevels;: _* P6 G5 U, i" o4 A
var bgR;
$ i5 r2 }/ }8 s! y$ \: Pvar bgG;
# U- d" d0 P5 P6 K$ svar bgB;3 \8 ~6 r$ X- i7 p5 k* Y
var currR;8 I, T- L' k1 H9 a3 ?! J
var currG;3 W2 l) o& K2 z
var currB;
, n- h6 b; ]: v; Zvar count;
/ Z. H5 L* D: u* G$ `) dvar fadeOut;
5 b) p0 x" e% e1 h4 J7 g0 I6 Rvar continuous;% J. H# U% W; B. m
var newColour;4 D9 _2 U) ^5 F/ ?! I7 n+ p
var tID;9 j0 w" j/ K5 B' Q% ~$ M
var redInterval;
8 c+ {! r% O Q6 `" q1 ~var greenInterval;( h3 f* Z- C! F8 R; M5 k) s- I
var blueInterval;5 D: W: I+ f/ s) G& y9 r
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)& _" A3 S; g4 x0 P2 S% r- x6 O9 V
{) p+ A; I; q* S- R: l
hoverColour = mouseOverColour;0 u6 T2 q+ q* r+ ]! P: r
numLinks = numberOfLinks;0 m$ H+ l: n" d+ @5 \( v0 q
rate = 1;$ N7 @0 i) M! S
numFadeLevels = 30;
4 \$ `5 A g% d8 X" Z1 N+ z function initArray(theArray, length, val)& w$ h3 J+ h( p3 p, ~
{ f5 o! U' J8 v
for(i=0;i<length;i++)
2 c, e% ^: e0 Z# z2 \: M9 W {
+ d: Q; Q9 Q6 u$ f theArray = val;
0 a" q6 ]) J$ Z' k# } }" i: A2 S+ q' C; w: P2 |- w" S
}& L8 L" `+ L6 i) ^" Z
bgR = '0000' + fadeOutColour.substring(1,3)! w+ c4 ?+ T+ W5 D& V
bgG = '0000' + fadeOutColour.substring(3,5)
* y; I/ \; O: G' f8 R; G' p bgB = '0000' + fadeOutColour.substring(5,7)4 S7 ^( K& x- I6 R3 G% M
currR = new Array(numLinks);
; G- s6 ^: g0 B/ \/ N currG = new Array(numLinks);0 ~1 C$ Q, v9 [2 q5 Z8 h1 [
currB = new Array(numLinks);0 F4 E( [0 a, u$ O% |& k
count = new Array(numLinks);
% [0 F4 L7 \2 t/ X fadeOut = new Array(numLinks);" w5 `1 u" G( z S" e, x) r
continuous = new Array(numLinks);/ k, k4 {; L5 u# M7 s. c b& E$ s& _3 [/ s
newColour = new Array(numLinks); k, \* g* {, i- k% `7 ]* }
tID = new Array(numLinks);
# e4 n+ A2 u% g V/ g" t redInterval = toDecimal(bgR) / numFadeLevels;( V# E& D! g4 _# K* P/ G; u
greenInterval = toDecimal(bgG) / numFadeLevels;. b0 V$ E! ]1 S; d$ ^7 W0 l
blueInterval = toDecimal(bgB) / numFadeLevels;
6 x C, a! s! ^. s9 Z initArray(currR,numLinks,0);" [+ W% T2 U! b$ |" U2 B- |4 [1 i0 s
initArray(currG,numLinks,0);9 `, \0 d$ ` u4 g& f. E6 Q
initArray(currB,numLinks,0);
; ~# L1 `/ F0 W& ~" h initArray(count,numLinks,0);; D# S! R. o8 X* K) [- D
initArray(fadeOut,numLinks,true);
5 F$ X- \$ c$ K9 @ initArray(continuous,numLinks,true);
6 { Q( j0 j; A/ O; b2 P" h% V& v3 j}
" a6 [+ Q. G4 H2 T& ofunction startFade(id)
, \$ B) t. g( @& }3 S9 P{
% L S5 G% {; e$ F if(fadeOut[id] == true)
1 h) N! o( `$ [% ~ { /*move colour towards background colour (increment)*/
( W, M q* M4 B3 l5 [& N currR[id] += redInterval;" i/ {/ _1 X g
currG[id] += greenInterval;, O& ]# N o1 Z
currB[id] += blueInterval; b/ p% X8 y* r$ A- L' P }7 |- T$ n
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 ^( z4 r; V* F4 U! c r( S. H0 i if(++count[id] == numFadeLevels) i4 s7 I* p4 @
{0 m$ D7 \! |1 o8 Y" Y, k" D) O+ K. z
fadeOut[id] = false;
9 V4 }2 I$ k2 N& _& Z: Q% a5 r- s }& y3 u. b3 d H0 P/ }; l, q
}
4 B. i' Q, q+ P9 W; Q/ ?% C else
: _3 e# J7 _" S" P {
/ {: }1 h5 M+ ~5 v currR[id] -= redInterval;
- | U! x5 H$ M8 \1 b3 Z$ Z; n/ \* Q3 X4 y# f
currG[id] -= greenInterval;. X4 X% S k" {- _, I' Q
# y Y# q+ y/ m5 c9 E: m# B- |
currB[id] -= blueInterval;
% f) ]2 D. r, X1 D0 Z( a) }" s3 ~ p8 R2 U+ t
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) I( k! ], |" }7 r
7 G# n1 v5 \# P& I& m8 T& J if(--count[id] == 0)4 u& F7 d& o9 S- `* \" j$ y3 W
4 e, Q: |( C5 u7 G3 j( ? {
* A6 E! a4 `/ i5 S5 v; F- Z; P
' r# g2 y2 d% o$ i6 [ fadeOut[id] = true;
4 W+ \; o2 y( g8 v6 J1 n: |) ?. s; r) N% ^9 e0 m
}4 n6 d8 l8 d' _+ Z! [( o
! N6 o" _% T( J7 O9 G( Z3 s }
7 `( W, z" O' j( N3 `
) L8 ~& ]( r; |: T' c' Y7 V if(continuous[id] == true): t/ g5 K; I# q) j
! H& | e: F' S2 R
{
) x' L4 \3 I1 ?2 r! I5 f4 Z Q2 R8 Q7 _/ V4 O* `
document.getElementById(id).style.color = newColour[id]; # s) n2 V+ h9 d% G6 F& H3 B2 E0 c
8 p+ d) s, e/ J& I2 n+ r }' e; Q h! U- P- p8 x
; ^8 O3 Z* J; i5 K% j else0 d, g k- P" e
2 @# p9 m. m5 T8 q" d0 e4 h
{
! \6 E; n& E H( n
& Z# N0 ?' S8 B& I% z document.getElementById(id).style.color = hoverColour;
6 U0 ^! W3 ~3 k' I
" y- O; t+ s. q6 W3 `- F& r }
$ k9 g* L/ J2 {. K( @% Z/ k( B; ^8 j$ Q! d4 K3 M) I- [
clearTimeout(tID[id]);+ |9 J1 f% \- W8 o
" x. I2 C5 ? b- ^6 P8 O
tID[id]=setTimeout('startFade(' + id + ')', rate);
* {) P) z) d7 E; Q" M
3 u# [9 Q* R5 z, X. o5 L}
6 w. B! S7 ~. B8 A5 t; }
; |/ s. C$ q( y) g2 F, Sfunction continueFade(id)
% G. d- F- q4 N1 h/ t) e% j0 t! ? y2 ^# {2 ~# o
{
' d( A& @9 \5 ]9 R5 }
y. ~3 {6 O! x8 a0 S' p: s: W continuous[id] = true;( }6 v6 h% k3 u0 k
9 [% M1 P4 m3 u
}' m6 Y( @( Z5 f Z* c
3 L3 [ D0 ]4 E9 K' Mfunction stopFade(id)
% g3 q$ t8 r. h& K! C( X: K, F/ T4 e4 n" r
{
7 g2 q% k% ^/ F7 B; ]2 K( t# Z; T7 _/ T% T) d! m$ Q, X
continuous[id] = false;
1 a% k7 ]/ N! Y2 @5 b
o. }0 K+ h+ K8 D}, W0 _- P1 s9 R' u" U1 F) \
! V' ~+ r4 ?( Z$ f7 m" y2 a; N5 {3 {function StartTimers() c* n) X; ?9 H$ _
0 f9 A. w8 c% F{ //set up an initial set of timers to start the shimmering effect
, ~' O0 h7 Y" x8 D' Y
x8 o4 q. d' Y l& V0 L" f$ N for(id=0; id<numLinks; id++)
! s) R3 i% u! s5 M6 @% \2 a) V/ |2 v& y4 i# \
{! P5 v! p6 e) y) X
, j X4 Y1 u* t+ K t=setTimeout('startFade(' + id + ')', id*100);
0 n: Q2 |0 f- U$ c# p# T1 Z3 K% m* S s: x' a
}1 c d* S }' l! r
) C$ @/ d5 j) o0 y}
/ H; R: p4 p* L3 L& Z; q2 a" Q+ S3 S% e1 N8 T
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- j& n9 `8 P- E& e" F
/ B" ^0 V: r P2 z) Y0 F( [
initLinks('#FF0000', 6, '#FFCC77');
c V5 {( s. r0 W( Z
8 ]' _. ?. U G, F9 s- K" ~$ z//-->
4 Z7 U! d( T) N- a% U/ r: V* t2 n) S! b+ d! i# r
</script>
+ B3 w; o6 D& t7 b' ~3 `$ S+ G<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
7 e% ^2 N0 |$ f$ n4 t</a>
# x, l V( s5 z) b# F! i6 R( H<br>0 A" \9 n* f- i* s
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>. x, t- ?5 [! L+ _8 Z
<br>
( @2 C4 q6 n& {9 y0 Q<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>5 c5 O# N) B. \2 F- |- Q' ]; @
<br>
; n$ o6 \! X0 j7 ]0 T<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, O; N' a, O5 |- E% o# O<br>
+ z- w# Z9 W! l0 T& x<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' Q- o u9 {. l; b. e<br>
" {' t4 w9 K/ o1 N3 _2 z) l- n<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>5 I: r z5 }8 \) r' X) ^ o
<script language="javascript" type="text/javascript">
0 q3 N9 g A5 f" F<!--7 \8 m6 S+ }0 b5 }& F" Q- i+ A
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering/ R4 H T- ^: {
//--> L" d' z, r* ^5 x- W: @# H5 Q9 B( c
</script> |
|