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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
/ B6 F7 ~2 }4 j2 G: f. [) H<!--
( R5 i6 t% [/ `6 J. w: ]9 f: X- R# G// convert a single digit (0 - 16) into hex' m, ~7 h; a" \* _# O& r
function enHex(aDigit)
B7 w, v6 E1 E4 K{
$ d5 s; D( K. E) B7 B return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ H( t; Y. N) `/ s7 B) ]' L
}. ?( {: s' A: ]' P B( c' L/ k9 S# m4 I
// convert a hex digit into decimal6 a& o- Q: e# s
function deHex(aDigit)* k( q# `6 T9 M- @3 `# W
{
3 M3 X- X8 x5 N% ^1 I5 b* H( a return("0123456789ABCDEF".indexOf(aDigit))
! [- v' e) T" I' \/ y4 z# ~5 ~9 \: G}+ r; X5 i& K9 e% Q3 Y" _+ h
- F# C i( N. q0 J8 W
// Convert a 24bit number to hex
4 I4 m, _1 S) f( ifunction toHex(n)
% d9 s. p. K5 [- p{3 C! h$ k- W _2 o# k
return (enHex((0xf00000 & n) >> 20) +. G( Q5 O9 ?8 A% ?! R. X$ j
enHex((0x0f0000 & n) >> 16) +: d; A+ Z) _6 k3 a/ Y! b2 }
enHex((0x00f000 & n) >> 12) +
( K8 J5 q% H' x enHex((0x000f00 & n) >> 8) +
6 P6 X) D: @; O4 K1 b$ I5 a$ E enHex((0x0000f0 & n) >> 4) +
$ H. |: g5 F2 J0 g enHex((0x00000f & n) >> 0))6 I( k5 F! h$ m Z" Z1 _, U
}
4 r2 J; Y, {3 b c O9 B) ^// Convert a six character hex to decimal
7 d _, B9 ^7 Y4 D; i; |7 \function toDecimal(hexNum)- N, d2 {4 ^8 O0 v/ e# ?$ P7 T
{
% T6 U+ F/ J" I0 E var tmp = ""+hexNum.toUpperCase()9 b5 K2 ~# C$ D' o1 w* r& ^8 c
while (tmp.length < 6) tmp = "0"+tmp
. y# @! U( n/ |0 Q* m( g/ d5 G return ((deHex(tmp.substring(0,1)) << 20) +2 f' ]3 Z. _6 @' m$ C
(deHex(tmp.substring(1,2)) << 16) + - A' V. X' D) }/ M3 G
(deHex(tmp.substring(2,3)) << 12) +
g8 c- |2 P6 W4 S# G (deHex(tmp.substring(3,4)) << 8) +. ?, `5 b$ @" s" p+ H) A
(deHex(tmp.substring(4,5)) << 4) +1 j! i! Y2 F7 M& z( P
(deHex(tmp.substring(5,6))))4 f- k0 D# \* Y1 J8 ?. E
}
& `+ @' h# W7 J: ], Q9 |3 r' {///////////////////Shimmering Links/////////////////////, L, L# B b* k+ @$ }% G
//global variables7 D( a/ Z* B0 ~; V3 X& F
var hoverColour
5 L, l2 |. X! p" e) Pvar numLinks;( u" }& j% c' @! S& P* K
var rate;
3 U! n6 s9 ^& v. d2 E9 p$ a8 kvar numFadeLevels;. I4 P' M: |1 n' k9 ^9 @7 v8 W4 c' o
var bgR;
0 b6 ~ f) X9 Jvar bgG;- @- q8 u& ^- z* C0 A! u
var bgB;0 f8 T, ` _1 h; C& p2 @8 E) H
var currR;
; N, l# G+ @6 F. G; ovar currG;5 x# o) d; G I- F2 G' |
var currB;
% H7 ^8 j1 p) ]3 X. Xvar count;( l7 R9 G) K) A
var fadeOut;4 ]4 I1 Z( l p8 {' n% _. r
var continuous;
/ d% [+ I$ E' {8 z+ l4 Jvar newColour;4 r- E! _; B3 Q0 G. x
var tID;+ d4 b6 z5 k0 p3 k4 k
var redInterval;- a8 _/ @$ ^* f1 t }
var greenInterval;
7 _* Y5 r- w3 Y) r! zvar blueInterval;, k3 t( ?: D) j+ {$ S4 A$ T
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour), E; X8 X! [. G$ H
{
& P+ Y0 \8 _0 L5 O) z hoverColour = mouseOverColour;
6 O% M y) k7 K* S5 k numLinks = numberOfLinks;
) V8 E, v- f/ T% {+ q. J9 k0 X rate = 1;
3 u5 D/ g4 S' ~% U. i( Z numFadeLevels = 30;% y- I9 z G, H- Q, Y9 [! M1 A
function initArray(theArray, length, val)
9 y2 k+ `5 A3 }" v2 A/ O. E {
' P4 h2 g9 J6 P. ^ for(i=0;i<length;i++)
! P7 g! N6 r, R {
8 L2 b: j! I2 Y3 b; f$ F theArray = val;) D9 E1 m; W# V4 _$ [3 _6 u
}- g' a5 W3 B/ |% k% `" ?
}
: M2 S5 z" |. U- ? bgR = '0000' + fadeOutColour.substring(1,3)
2 t& I8 N+ ^, k& h' s( D bgG = '0000' + fadeOutColour.substring(3,5)8 |- O, y. L2 K$ D& j; f
bgB = '0000' + fadeOutColour.substring(5,7)
8 `" T. R- O3 J currR = new Array(numLinks);
2 x0 g* |5 n2 Q* o currG = new Array(numLinks);
4 x) w9 f; x8 O2 _, D( E6 }9 B currB = new Array(numLinks);
$ C0 z8 n3 c* r7 S1 p4 g X/ c count = new Array(numLinks);1 w4 K4 Z% n+ ^" W
fadeOut = new Array(numLinks);: H- l) ~3 ]2 b8 C/ Q& O
continuous = new Array(numLinks);
# Y4 l6 u; g0 M3 A" `9 S& c newColour = new Array(numLinks);, p) B4 M- o" k" A
tID = new Array(numLinks);
' w- b! N' J% A. v redInterval = toDecimal(bgR) / numFadeLevels;4 s+ h8 m( y7 s5 `- M" Z
greenInterval = toDecimal(bgG) / numFadeLevels;
" w, E2 M- S& }( _9 l2 S7 r blueInterval = toDecimal(bgB) / numFadeLevels;0 B ?2 T2 k3 [7 |2 y/ y
initArray(currR,numLinks,0);+ @( ~, T. d, b
initArray(currG,numLinks,0);0 S, j% {, W! ?: j- ]/ Z6 ^
initArray(currB,numLinks,0);
4 h- x4 o0 w( t* A1 g initArray(count,numLinks,0);
6 \5 }$ m H( N7 s) _ initArray(fadeOut,numLinks,true);% M3 M5 H' g) H6 x4 T
initArray(continuous,numLinks,true);
$ {. [* z) z# v! U0 A3 B/ V}
! V# g2 s! O+ m# L" Jfunction startFade(id), F( r+ g$ G" g. }6 i! G7 s' s7 \
{
: l1 a0 _7 a- v/ E8 B if(fadeOut[id] == true)
, j8 ]' c$ A# i- R' U6 h' c: g { /*move colour towards background colour (increment)*/$ J& F$ K6 I) T) Q" ?
currR[id] += redInterval;
+ ]' o h2 y0 M currG[id] += greenInterval;
1 f/ L2 a1 n+ u/ R1 _+ l currB[id] += blueInterval;
* Y* T8 m, w* ~ G0 o newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: r$ H8 ^$ G) q7 Q; {3 u# n
if(++count[id] == numFadeLevels)* I0 Q2 ^/ |9 { ?3 y/ u# H
{+ K# f; i \: y& g% `$ Y" s- c
fadeOut[id] = false;
9 y; c; B9 W0 [. W, W" d }2 l! D6 ~* P" c$ K5 a
}
9 K# Z. n7 \5 f5 a' t5 I! C7 a else. V' Y6 \$ I/ L% @% u' H
{
5 {) g E' _2 S- y, {0 E$ ?( f currR[id] -= redInterval;% E( c2 D g7 C, e3 \
* Z0 t8 t9 B0 t& q
currG[id] -= greenInterval;0 e. Z! @: m: }. ]' J% @+ o0 G! ?
- s8 K& C" r3 k6 F- p, e4 a currB[id] -= blueInterval;) F" C \9 U& l8 i' P2 e# U# l) W
$ \6 O5 q- W& n8 D. }% v& d* ` newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);; n' B# O/ \, U# S2 K& s# y% ~
6 ?$ y! ?" P' [9 Z: j if(--count[id] == 0)
9 w$ s: ?7 X# p) [% k8 c
/ ^ C6 V E; w& ?- m {
6 w" _+ r6 C/ W% x1 D. Z2 v8 k7 E- W3 M. n/ T9 K
fadeOut[id] = true;
3 O5 x6 ]. q& v' v6 N; A+ B" ]3 ]; {+ `) c5 R1 m; N$ e
}
" w4 k' s$ q4 M9 U- b* ]5 j+ l0 e/ j* h6 N( o E
}. B* L, [* n( g" v# ~* k
# q. m* C4 K2 w ]% | if(continuous[id] == true)) l c. I( W4 i' g2 Z; X9 j
% d3 u0 o! Q4 _8 j5 o% ? {
; |& M, P8 C- @* Z W* B2 g% [4 ?. b0 X& j1 i( B% }; }( m
document.getElementById(id).style.color = newColour[id]; @7 x& O4 ]: @; J
0 x7 a. B1 j/ V }
- B* i, }& d Z+ J0 B
: j* _" j q4 h! k3 ^% S else
5 O' v3 ~6 D5 |9 I9 N% c" C4 [, i$ j8 K* R5 ~ L2 u
{' O/ P8 ], T' ]
! r% E7 b1 \' x" X I document.getElementById(id).style.color = hoverColour;( k( O9 v/ v3 X; F
) T/ A$ k& V( B4 d2 p a- H }( u& L0 E6 O7 C K" [* [8 U
4 c) `# O6 h1 t clearTimeout(tID[id]);
+ I) K3 J% H7 T5 l& w
# G% G! m/ v5 O0 d tID[id]=setTimeout('startFade(' + id + ')', rate);
, W: u: G* l7 S7 s4 p" ^6 T0 h
) C4 i7 ~/ Q9 A( e% b' S}
; u8 m2 q: W! h4 W0 d4 `2 t% a& }
7 n. n$ X6 V& D1 s% w* m9 a: X/ }2 p, Hfunction continueFade(id)
* p6 O G6 p& ]; G* r: y% g, B& i& ~
& J- R1 j. a, A3 b{% w, o `* A8 m7 S$ R1 c
# P# X' R. @5 n3 R i" ], J continuous[id] = true;
- M7 j8 V: `/ j0 o6 [3 s( I0 [& \3 _) ?
}- X8 ]0 d" I6 j0 A
( t3 {, h7 o$ E1 ^- B2 r
function stopFade(id)
+ X0 {3 j: H' l1 P" ^7 o+ f& Z+ D! o8 l4 s
{1 @. j3 x! o2 S- v( j8 s
* J% m; b0 d9 K% d% w4 C. ]3 F, R6 N continuous[id] = false;
) h0 ^# \; l+ d8 ]4 d% r# x2 h' l1 R
2 Z, p* D. \2 C5 {3 Y}7 r# Y$ U+ \" @0 [$ D7 `) x
- B5 J' v5 {) a1 D7 P9 o- ~
function StartTimers()* {) _% h# o6 t8 S' _
$ s" I1 B. g% s: v
{ //set up an initial set of timers to start the shimmering effect* H5 J! j2 w8 @* v% I: Q
7 U: Y# U% j6 E for(id=0; id<numLinks; id++)
$ d+ r6 b' Z3 p& R- M f* C
/ [) |0 j6 ~; p, K, l) d; N+ r: A; ` {0 J8 b- V* e% K4 ^3 P5 }! O2 B3 v/ C
6 D0 e" V: p$ |, _: z t=setTimeout('startFade(' + id + ')', id*100);
1 j" w( M j4 @7 {3 f+ z3 L& Q# D0 {9 H) P* E! T7 C
} n1 H C, a. \4 _0 G
+ i1 U4 p( s! }+ o}- |6 M/ X6 ~1 c% E: X! d) q6 Q
; u" e2 k6 O9 Y- \( G//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')# g/ W4 l( n6 X! m8 |( R+ R
$ g' n+ O$ y- K; t# `$ BinitLinks('#FF0000', 6, '#FFCC77');; l" L1 B; M$ f: `9 f7 E
+ o; n m9 c1 H: ^' a//-->% k" Y" K1 j1 I. w
( y) a8 R; A) d( e9 ? \4 s</script>
: Y" p: d( y+ G4 Z W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- E- Y6 w4 L+ x o2 o, E
</a>( C5 Z' r/ D, U$ O7 P
<br>
1 O8 L# k" D- B3 q- L5 A<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; [/ Q) ^. h- Z ]9 q" p
<br>" q" j1 K& y! b
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>9 A1 {. K3 A2 U8 D# h3 L; w, O
<br> - X3 E: {( [4 i3 q/ B8 O; Z
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
3 g8 q" |* Y+ v: k<br>
$ u7 ]9 [. |7 _/ B3 p<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>! q# t* i: A7 q6 G x2 f) L
<br>4 l2 O( @( ^7 G. t( f. |, Q0 B$ c+ a
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
+ s% ]; @% x/ K8 Z- i; p<script language="javascript" type="text/javascript"># n. Z( ~5 X n; q2 R
<!--& c+ ~- ?. h* h8 E. u9 @( v* }' p
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering, b8 w$ y" r9 c# `
//-->! T O6 h9 n) n/ E
</script> |
|