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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">; h/ Z/ e3 @6 J" a, m
<!--( x6 I) V3 U! W
// convert a single digit (0 - 16) into hex
7 W% n4 \' D* |0 @" F; {2 W% cfunction enHex(aDigit)
. f1 e- n6 C' [* ~{
; X8 ^7 X: d5 Z; W return("0123456789ABCDEF".substring(aDigit, aDigit+1))
/ ?* a+ r) V7 A: S' C p}' c$ C; }! w/ J; s9 j! p% j7 a( t
// convert a hex digit into decimal& D( B! B4 K" N3 e
function deHex(aDigit)
5 U% J" b/ q$ p. Y{
# }; d, J) s. z return("0123456789ABCDEF".indexOf(aDigit))
: x9 A: N$ J! y}
4 u" K8 ]$ F6 @- L6 D: Y+ h0 b" ^4 ?
// Convert a 24bit number to hex
# ` U1 @% y% k2 ^/ X. e8 B1 C- ifunction toHex(n)
' I) c- s5 q1 s) ?8 e/ M, M+ @7 j' z z{
) T4 Q2 \1 J' ~6 U% N return (enHex((0xf00000 & n) >> 20) +
$ G6 Y& r [0 n) m( k, H enHex((0x0f0000 & n) >> 16) +# g; X8 G8 m5 z- L& H
enHex((0x00f000 & n) >> 12) +
) L: X* w0 g. Y l9 y; f+ F! T enHex((0x000f00 & n) >> 8) +) G# }- H0 j) j4 g: c
enHex((0x0000f0 & n) >> 4) +" d3 F3 @- [: f/ @
enHex((0x00000f & n) >> 0))
# A! i7 Z* g0 h+ h* Q, @}
0 p0 V/ y2 o" b/ g1 j- }// Convert a six character hex to decimal
) G& E; K& D1 |4 {function toDecimal(hexNum): t) E& ^* F( ^' d7 X
{
4 ^) S5 m% A/ Z$ `4 A. q var tmp = ""+hexNum.toUpperCase()
9 A$ e* x1 z8 N% W2 P while (tmp.length < 6) tmp = "0"+tmp) Y' o! d& v; L0 _# B* c
return ((deHex(tmp.substring(0,1)) << 20) +
- c- T0 M4 u6 g' Z3 {) C7 @: L (deHex(tmp.substring(1,2)) << 16) +
( C- X, i* |5 f: f* q- m* p (deHex(tmp.substring(2,3)) << 12) ++ m+ V1 N M3 Z5 h
(deHex(tmp.substring(3,4)) << 8) +# @0 z7 w! r. b; t2 h
(deHex(tmp.substring(4,5)) << 4) +; Z' v& G8 i( B2 Q* m3 q+ c
(deHex(tmp.substring(5,6))))1 r$ Q7 H# r% i
}
" }' o0 C! {0 q) k9 T4 L///////////////////Shimmering Links/////////////////////
. u2 T# u7 }1 d* {6 M//global variables
c. ~' a, K3 [/ ]* v' ?! e( Lvar hoverColour
0 |5 [8 l, b/ v* v9 k4 n6 pvar numLinks;
( }+ H F* N) h( P: [& Mvar rate;
- {5 h/ _! I9 Y7 D0 i& Cvar numFadeLevels;
! d' _, m5 D. v( G" Q8 Vvar bgR;
% T2 _5 x3 t8 ?" Y, ?( Vvar bgG;
8 S# B* t0 T6 D2 [8 p+ mvar bgB;
+ R. R$ ?7 J$ T: ~var currR;
8 _* d8 [! Z1 M" t# jvar currG;1 n! w; L: P% ]3 b$ b( F3 w$ F0 y
var currB;! h% P4 z+ U; ^+ P" ~8 v8 C
var count;
; x8 I% L. u) o- V5 ?" Avar fadeOut;$ p0 \/ W0 n, f0 ~% c3 w; U/ g" b
var continuous;
1 {$ t! b, K! J% U8 ~; m' y" \ Vvar newColour;
+ T# m7 D0 g, J5 d4 M5 c/ ivar tID;
1 m# l1 x1 w+ }var redInterval;
3 ^$ r' G9 f$ e mvar greenInterval;
& u% C, q8 z% F8 E, x/ p) p' A6 \var blueInterval;& [( T+ E) e+ P7 Q
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
2 c6 W1 b" z6 j3 ^1 q7 U2 b{
' B* o; X: x: A9 J5 ` hoverColour = mouseOverColour;- c# E2 t: l% j
numLinks = numberOfLinks;
6 [6 a9 n) l1 K) O6 t, @9 |; T rate = 1;2 B" ]4 R4 ?2 K+ }0 B
numFadeLevels = 30;* g! [& E; `( I3 S; _* x. ?, v
function initArray(theArray, length, val)
5 T+ |& Q( u, }3 p. d0 T/ K$ B5 J {7 f, G0 \0 M9 Q: V# S6 _
for(i=0;i<length;i++)
P: l* |: L% \ T0 o3 i. m0 V. _8 e* y {
0 L$ u- G6 {% _+ W- F% d theArray = val;# a& b- h t J/ L# D
}! ^( v/ R$ f3 g( w" a
}5 _, U* Q }, B3 q* D i
bgR = '0000' + fadeOutColour.substring(1,3)8 i/ J _2 a* s& @8 c# P
bgG = '0000' + fadeOutColour.substring(3,5)! F3 Z4 \; _2 h: z8 \, I) n
bgB = '0000' + fadeOutColour.substring(5,7)' |; H" ?$ z* j( O+ A, W. ]
currR = new Array(numLinks);' \/ L }: M+ E0 D
currG = new Array(numLinks);! g* Y$ [- |6 p+ I6 e
currB = new Array(numLinks);/ f; t7 g. h/ H# y t! k9 m* M
count = new Array(numLinks);
3 [6 Y _ Y7 e5 l3 r8 L' J fadeOut = new Array(numLinks);; I0 n% z) g9 m5 g; p1 i
continuous = new Array(numLinks);
6 E4 y; O ?/ u% b newColour = new Array(numLinks);
1 n# ^6 U% Q0 S tID = new Array(numLinks);
; a3 H6 c: p; A, m. D0 \ redInterval = toDecimal(bgR) / numFadeLevels;
1 t+ ^9 K( e D$ W& f( _ greenInterval = toDecimal(bgG) / numFadeLevels;' s: Y b1 X- u; \
blueInterval = toDecimal(bgB) / numFadeLevels;1 S$ y4 `8 y, C7 W3 K
initArray(currR,numLinks,0);
- F4 u% Q! `' `$ ^' q" x initArray(currG,numLinks,0);
; ?8 T1 t( _& g: r initArray(currB,numLinks,0);
- A& m M* E+ A* G1 C& `% k8 q initArray(count,numLinks,0);
" k4 c# U* `; O. q- y* E initArray(fadeOut,numLinks,true);/ S: i3 y7 t' }& e! t
initArray(continuous,numLinks,true);
# g! k- J; P+ ^ d}
. |8 t8 C6 g6 Sfunction startFade(id)) w2 v3 J+ G. C. g
{0 ^) R7 o* ?; ?+ z
if(fadeOut[id] == true)
0 Y; n/ D: J. ^ { /*move colour towards background colour (increment)*/ V$ p7 M' q( z9 ?$ D$ A' O$ T
currR[id] += redInterval;
' Q6 ^8 \5 M; p7 Z( |, z1 s" B+ R currG[id] += greenInterval; X, c) |9 c x6 L$ x
currB[id] += blueInterval;
1 G6 m S1 v5 `- b9 Q- H newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: T# ^# w" X6 {( r
if(++count[id] == numFadeLevels)
; J) E# w, m$ W' P7 e {6 g3 w2 N, ^/ s' ~
fadeOut[id] = false;
3 h) t" {% N3 g+ _5 C }# A* d$ h1 j" L3 r) J7 o
}
; \. j E3 N& Z0 }3 ] else
( v! m6 r% f! z6 M* Z2 g6 s {
3 Y5 H, O3 [" K3 s2 n currR[id] -= redInterval;
# C( j& u3 i4 r$ e5 R% D* x5 d6 Z
& C4 \& e I: g5 h currG[id] -= greenInterval;
$ q0 X! T& G5 ~
! p3 Q+ ]$ _0 a4 c+ }; J. G currB[id] -= blueInterval;( D, N" L6 G" u; K) f2 A( ?* K9 U
% R0 ~. k( T. {: R, a9 I- x newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ y2 y/ G5 c1 O! n% k2 o/ y% c" }
if(--count[id] == 0)% A; c- V B0 s6 v, @+ h1 F
8 i) i& ]6 N# m Z, K. v+ I# d {4 | {
; d- s/ i7 a% ~, A/ c+ P. ^" s+ q% n7 Z. z5 A; l: \
fadeOut[id] = true;; q1 d* Q- `9 y$ ]( v1 }' K7 k7 @
- f+ N9 d% o6 G: L5 j' F
}) u, x1 l( L3 m3 d
+ S4 @1 f; c! M1 q }
# ~- N; j! r; Z: c. f) }- y
. _" \% U8 }6 u w4 {. O if(continuous[id] == true)
$ q9 A8 D* m s5 T7 \( M4 l: e
3 h2 Y7 O% R# D# c& b {7 C0 c: I9 D5 p0 A+ `% \& [' i
% C5 V2 {- R4 Q% u0 I
document.getElementById(id).style.color = newColour[id];
R* U5 {# o6 q: W* c0 N% v2 T2 r! x, }! H) K; A7 }1 j7 D
}( G4 F2 C- B# @* i0 y( e) S
$ ?3 r- L- V' w8 N1 b else7 \/ w, u( L6 M: |2 T. \
5 M1 k$ U; a' @0 { {
V% O k$ j9 \( j5 F) Z m1 l/ N$ T& w
document.getElementById(id).style.color = hoverColour;3 ?# J. T. ~) p2 v
3 ?3 t( |& T9 Y- O }
, O6 \( x* g6 z4 X1 q Y
- \+ Y5 ?! I& g# X4 }/ o9 l* v clearTimeout(tID[id]);: ?2 C3 f4 R1 a) F: q, g
/ H. `3 j0 U+ {0 t/ V$ G5 f
tID[id]=setTimeout('startFade(' + id + ')', rate);6 r# \. R2 U1 I* k& j/ x& r
5 Y6 h5 x* M: }* q5 |
}
/ k0 k' H7 }3 l! l; X9 W# p$ B
& N" p1 j- ^* ]+ j \function continueFade(id)' h1 {1 a4 Y$ x5 o
* u, B1 Y- G# v8 X4 g{
% n: V" B2 j2 t4 e) T" P6 T0 D& M+ b# F O
continuous[id] = true;* m8 M5 Q& Y/ w! B! H& G" Q# S
: @3 Z% V: T2 v& @}; ~ {: u! i" G8 }0 u, k
2 j$ ~! L& |' C/ k" ~ h
function stopFade(id)
W7 B) Q, b+ t1 w( u" z
$ U2 c6 F6 x# l1 e% N{
% A4 A) ?6 B* Z. t, R! ~6 o
% C% s7 k3 P! z8 Z continuous[id] = false;
# ?) `3 n& q/ G- \. I& }
2 S% l. T3 @& g7 o$ e7 |2 _}
2 e; c3 c! L o7 U, p
' \& G6 e/ b/ @' M6 [, @6 qfunction StartTimers()
+ d# \( q8 j3 Q* ~# e
. L |9 l8 j! Y) w v{ //set up an initial set of timers to start the shimmering effect9 V) f+ a) t; A& s$ o9 R
# [2 I1 X) p/ \6 S4 M, ]: { O- X
for(id=0; id<numLinks; id++)
& w; e- O$ P: ~; O4 J) d/ T5 S9 {8 x: C
{9 P" a4 ~7 N$ E9 z7 s$ w6 p
# [ h, A! b( M7 \. \$ c
t=setTimeout('startFade(' + id + ')', id*100);3 y* A! R' G* p) ~9 i0 y# N
' y& T: V% d, {7 G* R& Q3 J
}
& K0 U: a7 H) N; p4 J! G
y4 j4 M# v* l1 k9 G! y0 R}
|! B0 S1 [! y" Y4 m" D2 r! v5 F& q d+ T5 @' G. G5 k
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')' ~+ ?7 i! b3 u$ M. N6 q0 ~; D& V
2 A6 o6 I5 n( P! `- v9 N
initLinks('#FF0000', 6, '#FFCC77');! D& J& v& n& H! f* v
$ z. K) g; A( H
//-->
! Q; h# N8 h- z" t' v) X" n6 }3 ~' \0 K) r& L# A$ M% Z
</script>
" ^5 [' m! ?) n9 \<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
# h: h1 R, x% D8 X# g8 L</a>- G+ y6 N7 p9 o
<br>
2 l- i% }/ J$ \<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a># s* @5 w4 {; N2 u: n8 F" s
<br>
9 Y% C7 X. z# s6 I- a7 `4 U d4 {$ ^<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>; `( p8 G' X. O
<br>
) R" }' n" L2 L8 m) H* }<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>8 ~' v5 z) r K2 F
<br>0 b( `1 r" F/ X* {/ t9 j/ q% {) E
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. d0 _0 W* j2 t) ]1 Y. |6 K6 l
<br>& E7 ~ Y: L- d! U
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
X' r9 s; i6 M9 s- K1 r7 S" V<script language="javascript" type="text/javascript">8 I* Y" p. g' {' G
<!--
+ N: U' a$ X2 l1 X$ KsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* b/ p" x- x$ |
//--> c$ l; N1 q% b
</script> |
|