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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
8 B P. Q2 k! j. _# T<!--
5 `. |" O c4 b% P6 j9 q1 q// convert a single digit (0 - 16) into hex7 v2 |) F1 N+ `1 P- q g
function enHex(aDigit)
5 S+ \# Z" f: \' T1 J6 C* T{- u; n0 s& ~1 U% l& p. r
return("0123456789ABCDEF".substring(aDigit, aDigit+1))& E# c/ L z7 W4 P9 H) m7 J
}
& I; ?. X; c9 N9 W8 j% Q7 x// convert a hex digit into decimal1 E' T0 }7 W6 ]: p' l# q; J& h
function deHex(aDigit)
+ a5 T" H% k. q& P) j& J! S2 f# w{# s& b5 \7 }" z. A" L* R* Q
return("0123456789ABCDEF".indexOf(aDigit))
. e: ^+ u2 ?/ S}$ x$ i$ b" J7 |
8 F/ G8 G% P' l$ _// Convert a 24bit number to hex3 k; {0 d7 n3 l1 T+ h8 @9 r8 R3 P
function toHex(n)
& m8 F& T* V& v{. p! D7 S$ v+ l. P& ]
return (enHex((0xf00000 & n) >> 20) +
9 S0 ?5 B8 }) B/ B- R& ?) n/ _ E0 [4 U enHex((0x0f0000 & n) >> 16) +
" c9 n3 v4 L1 ?0 r6 f enHex((0x00f000 & n) >> 12) +
6 [/ G# y4 S; E enHex((0x000f00 & n) >> 8) +; V" {0 d: q0 v* A) M$ l
enHex((0x0000f0 & n) >> 4) +
4 ?/ [( K6 Q8 I" G enHex((0x00000f & n) >> 0))$ Z' \; b% C/ F3 ? _" [/ s( u
}
. |5 p. ]4 V5 N* B* A// Convert a six character hex to decimal! f6 C8 }1 r7 ?6 _! u
function toDecimal(hexNum)
. Y5 p& e3 x" h" F% y' ^6 y{0 ]' u1 a- W. e8 Z0 x0 r
var tmp = ""+hexNum.toUpperCase(); {+ E$ ?' A/ {& x! E" w1 X& ^8 z
while (tmp.length < 6) tmp = "0"+tmp
. x& q$ a2 \0 _# n( S; H2 V9 T return ((deHex(tmp.substring(0,1)) << 20) +
# W- a3 N# l" R' x7 f0 D9 `% Z (deHex(tmp.substring(1,2)) << 16) + ; B# [8 L' V1 w, p9 d6 n
(deHex(tmp.substring(2,3)) << 12) +9 O, X) _$ v% Z, I2 Q
(deHex(tmp.substring(3,4)) << 8) +
, j a b& v! L# {. n6 J (deHex(tmp.substring(4,5)) << 4) +8 m% r5 }$ d; d
(deHex(tmp.substring(5,6))))& M' N3 ?# ?9 x
}
( V2 k& J/ A2 q. w1 r$ [6 l* W///////////////////Shimmering Links/////////////////////
0 p* R/ q% Y0 n3 f$ p3 l. v- C//global variables3 A: _* g2 }6 z' ]
var hoverColour1 G# C) O$ T* U1 P
var numLinks;# B: T6 b) X% y
var rate;
( y6 d; ?8 p$ q E6 J/ @. Kvar numFadeLevels;8 V( l% p2 {$ {( z+ |0 L( j
var bgR;1 W9 |7 I% |2 ^5 n$ L
var bgG;
! O1 h' b l( B+ p) }6 N4 jvar bgB;
) T/ A9 J8 L1 _& |& G6 Evar currR;- Q7 n$ A( L0 i
var currG;
: G5 [! s! }. L$ tvar currB;0 [' h+ u }6 w% B
var count;
; q4 l8 Q7 @% a6 [5 E6 h ~7 Uvar fadeOut;2 T; e/ x' r Q x3 ]# D3 u9 Z
var continuous;
1 M/ W/ {9 @3 h* @: ivar newColour;# R+ s/ D# n7 r7 l5 X* c/ a
var tID;
- z9 e7 P% x# S& `4 n( tvar redInterval;, ]- j/ ^, |8 O2 L4 C- ^( ~2 m
var greenInterval;
4 i( Q3 R7 M' G8 D& [4 c# uvar blueInterval;
- W" N% X6 P7 d4 y: `7 h, Wfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour) r8 U1 v$ E' ?5 q3 j y
{, O S4 D- w# E8 P3 ?2 U
hoverColour = mouseOverColour;
& h1 n0 s! F' p$ y% Y# o numLinks = numberOfLinks;5 d% N6 t1 S7 N" G w. Q
rate = 1;
8 T) p- h: v1 [# @ numFadeLevels = 30;
0 ^. X/ L& B9 Z0 V s9 z1 z# O function initArray(theArray, length, val)
% g% t8 w0 u& j; H- a {
' [1 Q r% m; G4 c4 Z for(i=0;i<length;i++)
S* K9 n+ f8 c5 [: s4 d6 K/ O {
5 P `) \( N% g theArray = val;
" o6 i+ D+ `' F4 r# U1 @* v4 m }
3 n: @) v$ X9 ~$ l5 ^5 @: @ }4 B8 m+ k, v1 v8 ]3 Z& g% L
bgR = '0000' + fadeOutColour.substring(1,3)
+ g7 M- v& Z1 c2 u4 K k+ {# t: V. a bgG = '0000' + fadeOutColour.substring(3,5)$ \' V0 A# z5 d9 v U
bgB = '0000' + fadeOutColour.substring(5,7); }7 ~9 c3 f5 [
currR = new Array(numLinks);) P, Y- P& n$ u- z/ E! d
currG = new Array(numLinks);
! K3 O5 k" W0 t5 G currB = new Array(numLinks);
f1 ]/ [+ `. }& x& B count = new Array(numLinks);
$ @1 c0 A0 i2 v; V! ~' K) s fadeOut = new Array(numLinks);
5 E% w0 N" ?& R9 b! q8 w continuous = new Array(numLinks);
4 s! w8 b- r p newColour = new Array(numLinks);
6 I: L' a& r" Y0 ]4 x tID = new Array(numLinks);! m9 R1 ` ^) L& A
redInterval = toDecimal(bgR) / numFadeLevels;" L8 I9 E! P' o4 e1 U& ~
greenInterval = toDecimal(bgG) / numFadeLevels;
9 G. U$ G2 R# ]5 i% N blueInterval = toDecimal(bgB) / numFadeLevels;
* t7 s) r7 x) w0 f& E: e9 R6 p initArray(currR,numLinks,0);+ d7 h2 I- g4 E" P; Z8 a
initArray(currG,numLinks,0);6 Z7 g7 Z5 o5 b4 Q8 S. O! |1 c
initArray(currB,numLinks,0);' @# D* i0 v- N! @& o4 S' `9 e5 `
initArray(count,numLinks,0);
) Q: z8 A! L& o( n: @* t+ H initArray(fadeOut,numLinks,true);
9 I) ~& o3 O( p! l8 W initArray(continuous,numLinks,true);7 u: ?4 _/ ?- F; l. J. I& a
} $ ?: ~3 ~; E2 }) X4 l- B$ j* c' p
function startFade(id)
& t W# |& T# y# o9 w, I{; A5 o B, s7 M3 [ Z W
if(fadeOut[id] == true)! C5 z; @ k. }% J4 J
{ /*move colour towards background colour (increment)*/
% H8 o; ?5 D3 z" {2 G9 m t9 l! ~, U currR[id] += redInterval;2 a4 z% Z% f1 Z/ _, ]
currG[id] += greenInterval;
; L# N5 ^5 l. M% z+ L currB[id] += blueInterval;
3 Y/ a; u# N& I; f( a9 F newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* M2 [2 n ]7 A. h) |" |
if(++count[id] == numFadeLevels)
! S7 V- H' Q) u( \ {
, O8 V9 a1 G, b; N fadeOut[id] = false;( C- A; i2 A; b3 k7 Z4 ^, `8 ^
}
- R8 G! ?% @6 N9 z+ | }2 E) x6 ]& }% i# w; A u
else
8 A' k) t# z- Y/ S' ~ {; d. F2 l0 P8 k4 O( e
currR[id] -= redInterval;
, `2 [8 a% q9 F. @* d
4 w6 m" T4 m0 |2 W) x5 h, I# l currG[id] -= greenInterval;
4 h) p; @: i' h3 ?# k. W8 ?) q6 l/ d9 B' S6 p' X* ~1 W
currB[id] -= blueInterval;
' J( l9 @0 j( W2 H/ s2 Z
) Y: B4 o# t8 a5 z/ b* O A3 ?; z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' q O, v6 b1 @. ]9 ]
5 h* i, o" n/ q4 J p: D if(--count[id] == 0)
7 u( C1 L8 P" h: q: M6 @3 X6 K4 H! _9 `( z$ c3 `' U
{' P3 |1 t/ V4 e2 C
& v2 o; P( o P- r# L
fadeOut[id] = true;7 J" y" @" ]/ t& b
+ M, Y7 R! t& G, H3 z* M) \ }
$ r8 X5 ~7 f! y1 M' p% W
, b/ z8 F, ^, h2 j7 X, ^ }
3 d( Z* Y U1 ^8 w; m8 b4 v2 q, A" ~
if(continuous[id] == true)
) X7 v, ~1 Q R4 X/ S! e
9 b1 ]' n [0 q# | {1 I" b( p, \% u9 D5 Q
]5 f- K) J* A5 }9 f3 ^" H
document.getElementById(id).style.color = newColour[id]; 2 q2 ?2 R: {# F8 e
0 l; n) u$ |- T. M8 p
}8 c. K, ?: l8 ~) R5 o; H+ j, {) o0 N
# m2 K0 n" o& \8 M; C/ G else' e8 o0 x* }. ~( |3 C; ]
6 X( P( R2 Z& t9 T {
0 H+ b; N! w) U& @: C4 R+ F7 l( J, q Z* M
document.getElementById(id).style.color = hoverColour;
; o! A2 S1 {; Y/ I. z9 a3 I, z! e, s
}
Z- p+ m5 ?: ^7 T5 O8 ?! E; C0 g( r- z
clearTimeout(tID[id]);3 N: [7 F0 i+ b7 p# J; U
5 v( ]; u3 J, F# T
tID[id]=setTimeout('startFade(' + id + ')', rate);* d+ K6 }, s2 q9 Z5 f6 k0 |( E
m# \9 W* p% s% ] w6 P' z; ^2 W: V4 j
} R/ i. ?/ q4 \) d6 l' ~2 i) }
5 }& o. I- w% K# I1 h# G6 {function continueFade(id)( y& t- A* N6 d. M- e# G
) X- `6 ?! k3 o& `3 n; \
{ W& Q; f8 Z3 {4 `% S' `1 h6 Q2 z) _
' r3 ]2 `2 z- x) W2 j& s continuous[id] = true;+ s* s: P& J! l! h9 X' X _
4 \! Y7 m, H6 T, p4 d}: W" y% s6 Z+ l
$ O- a J' a, d$ Z
function stopFade(id)
; u4 {& r6 N! [, _1 a8 V
( f! L' X$ O3 K8 h{
" H/ S/ n# u8 I# N+ {
( e) H8 h" Z- z. z continuous[id] = false;9 ^8 \7 k/ G3 J
' S: [- H; u% k}
0 {& Y+ \0 d* S: W! s0 F6 k) F
) u9 O7 R+ d! G; H3 [' {" rfunction StartTimers(), d0 z2 a8 ?& E3 C
. d) e0 I7 S: e: S* Z4 p{ //set up an initial set of timers to start the shimmering effect$ d7 e, @% U. a( z `( E7 g. a
- H- B+ U3 o9 ]9 {: D" R N
for(id=0; id<numLinks; id++)
0 K. d" ~8 Z3 R4 c: v# S! W+ ]; L# b8 I- b' n: X
{( M" {. R# v$ ]$ ^% t# z: y, A+ p* f; V
2 f: f0 ~( v" B8 d- U1 I- E t=setTimeout('startFade(' + id + ')', id*100);
& _6 b# h; c1 @; M7 h
9 z7 X6 o% F5 m, f0 w9 b }
c1 R* ~! N2 b0 K, \4 w* i4 U( [6 M! W: t6 a
}/ D* b( p; j1 V& |" v
9 Z: l8 T( l1 E) Y//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, [+ h: g# [; h4 f( {' }: [0 v& C3 Q/ c1 J7 o& \
initLinks('#FF0000', 6, '#FFCC77');% m. C0 [/ \5 K, s/ u0 k( @. D* k
4 k, g, Y( e( Y( q5 ]
//-->
! `& U& c- a X3 E- |6 o+ T
% R. i7 L) ]) l0 S1 Q- u</script>
) g0 W. b3 S2 d& M7 S/ j0 c<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元1 G7 A& _6 h% Y% i j9 m
</a>
9 L& A9 x3 F& p6 M<br>) n0 N; Q$ d" e( b( B& y) }
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
, R0 c9 O. j; x' W7 J<br>2 c; S/ N- v3 K( M
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- k. Q& O" x S+ G<br>
4 ~ j& {& P( N" ^& ~# N. ?5 \" S<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>, b5 G& r: q+ |& K/ I2 r3 D5 l* L
<br>
$ Y+ `0 b5 i9 L5 E<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a># u7 H+ _; Y6 Z9 H; ?/ S8 W
<br>' W0 X5 {& C7 u, i
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
# N+ V2 u- f9 |4 g; @8 a6 i<script language="javascript" type="text/javascript">
; I$ l2 M& w J2 |, g<!--) M' J6 M' x5 W
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
9 [! u" Q" a* K+ r/ K. W//-->
3 A) D+ `% X0 |; ]</script> |
|