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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">0 |" l0 u% m' b: b" F# s. e3 Y
<!--: W2 K( E) \7 f/ ]6 Y- A, @9 Z: S4 z
// convert a single digit (0 - 16) into hex
) l9 t0 W! w Jfunction enHex(aDigit)) O% d/ W6 A# e' R2 x& J: R4 Z
{, m2 C# V3 F4 v% h
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
[5 z) R) Z! {% i; y}
h5 a' O& _7 w4 O// convert a hex digit into decimal% w) d* s* S8 E4 I( w' g# K
function deHex(aDigit)
* u* E% m& v3 i/ r{1 F* o0 i3 o) G% I
return("0123456789ABCDEF".indexOf(aDigit))
( C5 k2 W: Q; o0 P6 |8 U, Z}# y5 {* m3 j6 A/ J% N, k
" C9 [- V. C6 @! \" a `, J
// Convert a 24bit number to hex# x. M" e7 r; ]" {6 w2 @$ K
function toHex(n)
$ _) G: ^+ @, y4 e e m{
$ e; H7 r: i% i: _8 U+ Y return (enHex((0xf00000 & n) >> 20) +: d1 \$ B& }) `; }
enHex((0x0f0000 & n) >> 16) +0 ^; g( k/ {: |9 B; N1 c' B6 y
enHex((0x00f000 & n) >> 12) +/ b9 {: o' j2 |
enHex((0x000f00 & n) >> 8) +# G# |- g% j- p9 _4 w
enHex((0x0000f0 & n) >> 4) +* B1 ?0 ^' O7 t# C, {
enHex((0x00000f & n) >> 0))
4 d! k* G, r9 t/ P* f2 i}
b6 s c. `. v* G// Convert a six character hex to decimal& ]% ~% M% m# y- G; Q/ N
function toDecimal(hexNum)" F7 s4 x7 K2 y2 l0 x! v! {
{7 O; p6 J& O7 O! Q
var tmp = ""+hexNum.toUpperCase()
. z: s( v( T% `- V while (tmp.length < 6) tmp = "0"+tmp. Y: G1 H$ K% o. q! c3 U( U! E
return ((deHex(tmp.substring(0,1)) << 20) +" j" p {8 e+ N; z
(deHex(tmp.substring(1,2)) << 16) + + F- i# R9 J. g* V( B4 B" v# y$ o! r
(deHex(tmp.substring(2,3)) << 12) +$ N! R! h6 t6 |. _; P
(deHex(tmp.substring(3,4)) << 8) +
: f2 \& x) F, k4 {9 k (deHex(tmp.substring(4,5)) << 4) +/ Z0 s$ I) U. i; R. ?
(deHex(tmp.substring(5,6))))9 }% [; E* }1 [0 y% _
}
8 i( a) q% u9 _///////////////////Shimmering Links/////////////////////
* ]: @$ n% C2 k7 B//global variables
6 V0 l: V8 V( U) Q6 ~% Lvar hoverColour
& @. G4 r4 B, S! g* N Ovar numLinks;
A; W/ h" I9 C% u. s# B" evar rate;
! h) U! B t- z. v' }var numFadeLevels;
5 F3 ?" ?) K, ?7 q7 Y$ T8 N" Ivar bgR;
! k1 ?3 r2 e# x% J9 o* O8 }6 t/ m avar bgG;
' ^3 J* v% m: U! C% a2 }var bgB;: u% X* ^8 O) b3 D& m/ ?
var currR;" b+ [! ?% b- c: @8 s6 P/ O1 }
var currG;- A( j. n7 H% f+ d/ U5 X% S
var currB;: ^ ^: _' S0 h
var count;7 g; m7 U# z$ _" g7 |6 X; g
var fadeOut;6 _* F* `% X- @* P, r
var continuous;
; l! c% s: X6 N2 }/ t. Vvar newColour;8 I9 {3 x; \4 ]+ b- ~
var tID;
+ C/ s' C @4 v; Xvar redInterval;
/ n @9 v# z9 L4 @' w6 d# uvar greenInterval;
0 ^4 T. Q( S( G; X' ovar blueInterval;* M [. L4 D. Z* u! D' d
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)8 q4 ]$ Z& M3 x7 |+ P; V5 k
{) R0 r* q" `+ ]7 ]
hoverColour = mouseOverColour;9 N6 ]9 x" O" y7 B" C
numLinks = numberOfLinks;
+ o. @0 Y. `2 |8 V& W rate = 1;" L- l6 \8 H7 v$ M
numFadeLevels = 30;% v: x# V' k% \
function initArray(theArray, length, val)
$ a' J& j8 w+ x3 H { u. R2 n/ ] F1 C4 U h( b
for(i=0;i<length;i++)8 b$ F1 |9 B6 k% e' r4 h
{ Y0 D% Q0 f: A# y4 f( B) W9 |
theArray = val;
& C. ^/ {% |0 }& j$ ~8 ~ }
% x% ~7 k) U) t3 V0 n. B }
0 V2 Y5 s9 k( g6 v bgR = '0000' + fadeOutColour.substring(1,3); y$ A0 C! L6 G* j4 B/ ?
bgG = '0000' + fadeOutColour.substring(3,5)& V; G6 } q2 B
bgB = '0000' + fadeOutColour.substring(5,7)
$ u6 a6 \, [8 d currR = new Array(numLinks);
5 N1 ^0 V: p J) `$ Y currG = new Array(numLinks);
; _8 @2 u7 b( @4 m; N currB = new Array(numLinks);
" s* @# o+ `. F0 ^% h8 @ F count = new Array(numLinks);7 e+ j' T& u0 |" x6 w
fadeOut = new Array(numLinks);& N( M+ h- p- O
continuous = new Array(numLinks);
4 A( s, g5 W& z) K newColour = new Array(numLinks);
1 m6 I8 U1 g# a5 { tID = new Array(numLinks);
' I+ F" m+ o/ w) U% r redInterval = toDecimal(bgR) / numFadeLevels;* w, {) P! F+ z, b; _
greenInterval = toDecimal(bgG) / numFadeLevels;
3 v6 y! [! p! ]7 P, ^* L; M" ^! a3 o blueInterval = toDecimal(bgB) / numFadeLevels;6 s& |1 ? A+ o: t# Q. o" e
initArray(currR,numLinks,0);
2 T- M& q+ J9 g$ y5 S1 j initArray(currG,numLinks,0);
. q5 f# j. l3 x' E( B3 Z2 f initArray(currB,numLinks,0);' m2 i1 ] @, n3 H) v }
initArray(count,numLinks,0);
& q" C6 m# k$ O initArray(fadeOut,numLinks,true);
( S3 J @. t4 {/ S ^6 ]" N initArray(continuous,numLinks,true);7 B4 j6 W8 M4 V7 A( ^! x
}
_+ G/ D" U- \; q. ^1 e/ w1 ^function startFade(id)
/ N' V7 Q1 d" X, T$ X{% h9 ?# |- B+ F T) r
if(fadeOut[id] == true)0 ]. ?1 W6 l" Z* K: N' r$ P
{ /*move colour towards background colour (increment)*/
$ @4 l" L# b' } currR[id] += redInterval;% ^) T3 u0 t X( n2 R
currG[id] += greenInterval;
) u. I1 S* M. u5 o9 q/ n/ ~4 { currB[id] += blueInterval;: @5 V& _! w0 s* h: z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 }9 B4 _. s/ y' b) A5 E) q+ C% @ if(++count[id] == numFadeLevels)
* f6 k8 h" W+ u {
- c c4 ?! ]6 l! W2 g8 {) c fadeOut[id] = false;" q* m @' b7 T6 L: N0 N _/ n/ ]' T* w
}/ M( ~8 A2 w9 g- @, t5 X
}1 q" Y! @7 P- n& U1 D& b
else
$ c; ~1 Y; g0 b, S, e3 s {( R: C/ i7 r, I- N' t# V
currR[id] -= redInterval;
, c- B9 b6 |; X& d# _* D$ o( X c) a6 f, t& ^
currG[id] -= greenInterval;8 ?6 _3 `/ v+ ~, [, R
1 z3 J* K4 p9 [% w currB[id] -= blueInterval;. K) o% x( z, F6 {# }
1 x2 p2 e4 Z1 G9 a1 m. \) \ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);3 `* [8 ], Q8 n0 F
: ~. N5 C3 X% R$ C if(--count[id] == 0)4 s* U! [* f7 B4 c$ t+ u
5 N% k$ f+ {- g {
1 @2 Q6 f# Y; r' B: z
3 I! t- i* A! x ~, p7 V! S fadeOut[id] = true;
+ H+ F8 k! K1 x2 n9 F2 `7 ?; ` [2 o" Q
}, s6 m, n O$ V% @
( p1 T( T4 p$ u# }$ o3 m* V }
1 r3 B* v! p: a9 y% ? Z- x+ o
' C% E0 \, d$ n6 L P if(continuous[id] == true)
1 T5 n5 A/ ^; c7 A
" c# |( \/ f' n) ?* G* \1 @ {
6 F" E c: B0 K& J. R# m8 ]/ z" _' I# T% T! O
document.getElementById(id).style.color = newColour[id]; 4 x2 B" G% B6 `, ^" A
4 {; k/ @# `* u% R' ?- x
}+ p. ~! W, M% b3 |
+ v" w; S' p5 \1 R) a$ {
else8 G9 J1 _+ G$ ~% {: Q( P( n
4 \- L7 i' t1 D# Q
{5 l1 V* x R/ K' Z" c' b5 c
9 V) X! p( I% j- a. F$ _ e$ B; h
document.getElementById(id).style.color = hoverColour;
( L# L6 J" o7 q( R
3 n; F4 [" ~$ h% f }. _+ a) J- ?- o8 k- |+ O! M$ i
4 [# K" |3 D' E) n7 D) t clearTimeout(tID[id]);
- s: x/ w+ y) g* ]% i( ^, B' O( } S/ |! H- f5 D+ h
tID[id]=setTimeout('startFade(' + id + ')', rate);
l* w! D- C, N- Q; \4 i$ u7 f3 c" h* D
}
) ]. r8 h# x: f# Z# b% t
1 o; J7 a; j. L7 n3 K. Hfunction continueFade(id)( y. p/ G$ J- X
8 b8 ?/ ?' r0 S/ b, m% E+ ^
{+ _* T, V6 x) C% {/ W5 M
" C& B; a: s0 G- ~" Z2 L
continuous[id] = true;
" c" S6 n a9 K4 G" }0 v( A% Y' L* h3 j- S- L$ G, q* v
}: [$ A7 Q5 }. X. z
0 Y& _& c9 U9 _2 K- i$ L# Lfunction stopFade(id)+ L x! v+ `7 ?0 C3 U
. H# p+ k2 b; k- f& V
{
$ `( H/ s1 e+ G, V6 l1 i+ |1 o- j7 F L. Y% ]" S
continuous[id] = false;
8 p& u! o, h% o; G% [( a- a/ S* H E9 N, v% B# Q) x$ ~
}
" }7 Z. k; n7 w/ Z* G
' W. q! z1 b( h& {( H$ j& U5 O+ Hfunction StartTimers()6 B5 k; c M1 E2 ^
( ~, m5 u1 R9 P2 b, W7 k{ //set up an initial set of timers to start the shimmering effect
2 s3 M1 c& _& U! j" {: D% Q# G
; ~* [' ?& Y7 e/ C" B for(id=0; id<numLinks; id++): ^5 v. \8 W- o! H# F$ T, G
' ~& ~0 M I+ c3 w. T* K9 d {1 I% \2 J+ K4 H) i
- H% U$ b8 A% ~* k9 ? t=setTimeout('startFade(' + id + ')', id*100);* F/ C [8 r. Y. \' P
7 S6 ?, K1 Z/ d% `
}
4 ~' z2 u! c3 K
7 t# C' m6 E' I" k# J}; }# q6 P# f: g
$ H9 \ ^" D+ c9 {/ S0 k8 D//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
& O/ S. ?$ y- a4 s% l
2 {+ B4 g" _* ^3 }: ninitLinks('#FF0000', 6, '#FFCC77');
2 @7 s6 A' F9 M$ Y" E6 n; G/ A% f; c& j* a* H0 D
//-->$ s- ^$ I8 R! W$ G# n
% h/ _+ m* [; Q5 P4 _</script>& _) m0 C/ ~7 [2 w+ j& v2 Q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
# G$ g# a/ p8 c/ t* V</a>
7 V6 O$ W, M8 _9 q* V) L<br>
" H6 j8 E+ R" y! P% D# r3 y7 o<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>- ?% \& N+ L ~- k
<br>9 A* u- c! t7 c) ?4 f8 R9 p
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
$ q( p9 o. G0 m' N; E<br>
- ?+ m) T- W% B' m: r' U<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>* N* Y% x5 A& l' q+ u' n
<br>* X5 t9 ]# ]3 ~' T* E7 G
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>3 ]5 u/ R6 o. ^4 ~3 I3 Z
<br>
: }* [& q4 W- p& e$ T0 Q8 u! M<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>2 F- w {. E! n
<script language="javascript" type="text/javascript">
$ S I( d# r! g$ W8 `- C3 P2 t9 C, w: k<!--
; t" D$ `+ v$ XsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering/ J, u6 I* p/ R0 t( b
//-->! ?! u. m" ]4 S: j) S& \
</script> |
|