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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">3 {# D6 O6 g& \. `9 H! w
<!--! y0 N2 I2 n6 a4 C7 E4 r8 W6 Q; y
// convert a single digit (0 - 16) into hex
) E% O, a+ D e2 z5 I& vfunction enHex(aDigit)& m: n/ U% t$ w) Y e, O
{9 \+ _) P7 f Z* S) \ k
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
+ s9 A4 Z$ M5 B! r, S+ _' C+ |+ c}+ [$ u# p, ]. R ~4 s
// convert a hex digit into decimal# Z( w) M S8 L# b
function deHex(aDigit)
: s B8 W+ g- o2 e p; U1 \# R5 V{1 k% Q9 c4 C: G% W, q9 w4 [( ~
return("0123456789ABCDEF".indexOf(aDigit))) l Z4 G. {1 z/ v
}, n; v3 U5 s% X* u& o/ p6 R
2 Y% _ L7 z* o2 j// Convert a 24bit number to hex
7 i& B2 ]2 \" J# u. w# g r0 x( T; I2 ffunction toHex(n)
- k& F( o3 ~# H/ ?0 K{
0 z1 c1 z; | f. i* q+ y2 |0 i* e return (enHex((0xf00000 & n) >> 20) +. X( K: s0 x7 @. h
enHex((0x0f0000 & n) >> 16) +
% Y* `; H6 T. X# E# t, j enHex((0x00f000 & n) >> 12) +
; l) v4 E5 r6 U/ Q enHex((0x000f00 & n) >> 8) ++ z0 B$ }4 B$ u9 D
enHex((0x0000f0 & n) >> 4) +
; V. k( I6 u v& y4 `5 p& t; w enHex((0x00000f & n) >> 0))4 ?( R& B) p& h
}
8 R" R; q+ ~9 s* a. Y// Convert a six character hex to decimal
; i) Q T( f: D7 n3 ^5 wfunction toDecimal(hexNum)2 x' |( _/ M6 w
{
' E1 _( j$ h9 a var tmp = ""+hexNum.toUpperCase()
% b5 e4 E" o. j while (tmp.length < 6) tmp = "0"+tmp0 v3 v% u$ Y1 Q3 L: z! U
return ((deHex(tmp.substring(0,1)) << 20) +
/ d% I: b/ ?$ F6 U0 S7 ?% C* V1 M (deHex(tmp.substring(1,2)) << 16) + 1 B' a# j: V1 K# f0 Y" X% `1 V: d
(deHex(tmp.substring(2,3)) << 12) +
% p( p. ^- b* z$ u (deHex(tmp.substring(3,4)) << 8) +
3 t2 U0 f* b _! d' T, a (deHex(tmp.substring(4,5)) << 4) +; n8 F- T3 l# I0 K9 v: n1 j
(deHex(tmp.substring(5,6))))6 G' {; f7 x0 U+ E, m. o9 k
}
+ D# n6 A0 D; U) A( K/ ]///////////////////Shimmering Links/////////////////////6 k1 ^' E+ _" T* r5 g" _. k
//global variables
# ]# [( R) O' l; x* P; evar hoverColour
/ A( F- m& q1 S/ |7 y! u) _5 Fvar numLinks;7 z0 I" i- Z# g7 a
var rate;9 K. w5 }, u0 L$ E2 u2 J
var numFadeLevels;' E% i& \; \4 N. Q* j: P
var bgR;* B; g* V' |) E, G- D g
var bgG;
5 W2 s: Z7 g4 W$ d0 F" l* l8 wvar bgB;
- p, _+ z8 z/ }* K" E( ?' Lvar currR;
$ \3 ^! \7 A. R, x% Q mvar currG;
8 [: w7 m! q9 N* \3 ^( Cvar currB;! ~& Y- \& F9 u5 l8 G: h% n! q
var count;, Y* Q- ]) e( l' J) M
var fadeOut;% f- }. n& l/ [5 ]
var continuous;
! {8 y6 M9 }2 H+ bvar newColour;2 f4 b! y* Y5 M* J& K2 l, Q7 R
var tID;
t- l: v* v' V1 nvar redInterval;0 V6 b/ L7 y2 z# q
var greenInterval;
% _. S' }% n, H6 i% `5 n% dvar blueInterval;" s3 w$ Z8 D2 h$ y
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
% A% f& s6 x2 Z. d{
+ x, \2 ]5 r# E6 f! F: O9 E hoverColour = mouseOverColour;
: o7 y* _+ n7 k/ N h numLinks = numberOfLinks;
- O7 j$ z& N- X6 h' V5 s rate = 1;
* i4 s2 `" V8 V0 s, p9 B3 c G numFadeLevels = 30;7 I4 R5 Q2 K7 {$ Y7 c
function initArray(theArray, length, val)" |- ^5 h( x- U6 }% l' D
{5 a5 @, S$ E! {' T
for(i=0;i<length;i++)
8 I8 c/ u, G% e9 P {
9 Z6 t1 D8 _8 x. w& C, X2 ?* d& h theArray = val;
1 l2 o K" f" F( v- v }
1 L9 \& n$ V3 p0 `" P, G' Q, h }# _! U+ ?. p" k+ D3 [5 k
bgR = '0000' + fadeOutColour.substring(1,3)
& O. S: F0 A- X! L bgG = '0000' + fadeOutColour.substring(3,5)
3 Y. S, D& b# T P8 G5 a bgB = '0000' + fadeOutColour.substring(5,7)& T7 o5 g* g0 R# j+ K4 s
currR = new Array(numLinks);
, v0 o0 C D% N+ [ j+ S1 C currG = new Array(numLinks);
/ ~8 C) J$ J6 Y& U% K" }5 h: \ currB = new Array(numLinks);
: ^, F' C$ W; W/ M) T4 R) w count = new Array(numLinks);
3 |+ v1 i* b; J( V$ M" A fadeOut = new Array(numLinks);; B/ e$ m h- w9 V% O
continuous = new Array(numLinks);7 z5 a/ U o, r8 d
newColour = new Array(numLinks);) Q( D$ P, \5 T4 t6 a9 F
tID = new Array(numLinks);
$ [/ e+ j: @$ J( H# ]3 P9 U* ] redInterval = toDecimal(bgR) / numFadeLevels;
8 \. l4 j- W) U$ \( k: t* C greenInterval = toDecimal(bgG) / numFadeLevels;
- L9 k' O) M B! h1 @) D* y$ m blueInterval = toDecimal(bgB) / numFadeLevels;' n% N0 [2 o& f8 S* k3 c2 s
initArray(currR,numLinks,0);
( F' j* L: X' B) o3 D1 r F initArray(currG,numLinks,0);
/ ~5 Q4 m3 k# ]% t initArray(currB,numLinks,0);5 y6 e+ j* K- A0 p5 C
initArray(count,numLinks,0);" n4 X& K) j! e' |* b2 F2 K
initArray(fadeOut,numLinks,true);
7 u$ j/ u: Q7 F& l) j- y3 m initArray(continuous,numLinks,true); g2 G0 ^# i, `' K2 w/ U/ S& J
} 5 A6 Q5 Q8 q# }# P
function startFade(id)( L1 r: g# \: i* y
{
S# {: G3 z8 m4 a* M! O: j( ]9 Q S if(fadeOut[id] == true)
+ s7 a; Y2 ?8 C& q% B( Z { /*move colour towards background colour (increment)*/
, }- \; V8 y" u9 Z" ^! h currR[id] += redInterval;
: o K: ^1 E [ _ currG[id] += greenInterval;/ V: ?; x5 I7 J7 u
currB[id] += blueInterval;
5 d. v! h; F+ j3 @) Y. A newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) S! O/ u7 i1 [. C4 d0 S if(++count[id] == numFadeLevels)6 R7 }( r2 B1 Q/ \) f+ D6 \3 x
{- M: }& f' g/ ?. _/ Q
fadeOut[id] = false;
3 b( h! V& B; r9 M" Q; X }! v: x, e2 n) c! Q9 W. L0 b4 l
}( \8 \4 O; ?! c1 M
else
+ S3 ]5 v7 a# S" a) J { `- L& ^( f9 W9 @% L: r
currR[id] -= redInterval;
) M8 k9 |) o# s, ]0 x3 [6 C, c& L+ ]2 z4 b2 I
currG[id] -= greenInterval;0 e: t' Q4 x# B+ q: k8 p+ F) W
& e3 \, h4 S4 T$ U currB[id] -= blueInterval;9 w) l7 D% J1 }* m8 k2 \
5 j h8 K" A% i( g/ N7 z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- Z: V. ]: X$ W9 o. h2 k4 E# k- b+ N
if(--count[id] == 0)
& j8 P' {4 G- A, b7 E( T; M; S4 ?$ N1 g; g9 T: k( k
{* \( `6 z8 |, G
5 f0 Z. B& p0 l! Y6 n( }1 n) E
fadeOut[id] = true;9 f% o+ A9 H+ m7 v. O$ k
2 B; w$ p2 l4 T4 d* Q
}9 e2 U, x1 h2 w; N# x. c
: F7 j# M1 B. A3 Y }
& S3 I7 S1 B4 ` ?7 b' c" \
( O$ l* j0 G! a+ }. @/ [' B4 ^* I if(continuous[id] == true)
) x5 r6 K/ N' }) ~+ q+ q% x7 G4 [1 R0 t
{% T( Z( [8 q1 T D, @( O
) @* i" U5 |7 ~/ u5 |. ?
document.getElementById(id).style.color = newColour[id];
) _( }3 v/ E% Z6 ]3 s" i, o" T: S( w! C: b; b8 l: Y; _/ T9 D( V
}, X; H4 Z I+ y: D
" h* a7 w0 M! M8 r! U0 l2 I
else
% C* @/ l$ Y% O* u) A. d; q0 O' Y' Y6 k5 l% ~7 \; q* C
{
z/ B/ S3 Q9 `, f! K7 x0 G1 F
! k, w- ] C5 \& R1 u! h document.getElementById(id).style.color = hoverColour;
5 N5 S$ Z2 O- Z# ?: ]! j: C8 s" q9 f% o' [4 T& R# R" i; \7 V2 Z( R3 q
}3 h* ?0 r7 C0 O+ i" r+ `4 `1 Z" x7 s
/ k# U, e" s6 d& [1 h9 L clearTimeout(tID[id]);& L8 J8 K0 ]5 G7 {+ N) J% t
* l- }! }/ S* T/ N; F tID[id]=setTimeout('startFade(' + id + ')', rate);
8 i* h5 Q8 p) D: O
9 I- N/ S4 \5 _* z}
1 P: O4 ]4 t0 [; {/ g/ g( ?/ f0 s( C! t* A2 G
function continueFade(id)
1 o' J g9 S) z% B- ~) ]; }
: Z, ?1 A* }% K/ L4 \6 E4 k, k{
6 ^3 K- [5 t T6 `, M4 ~% v. ]" z8 D0 Z( S: x: N* m
continuous[id] = true;
4 A9 y5 I: @; h6 `, X: B, U g% w L; |: M8 p
}9 `, U6 m8 `( U. o1 P5 l
/ I& J, F% i6 Rfunction stopFade(id)5 |% a1 j8 ~( t& p3 L, w* v+ ~
- ]' q. s0 O2 v/ o' V% J( ]
{: A/ R: I8 p9 D7 l) L
: {! M7 Z2 `0 j8 H
continuous[id] = false;3 m" ^) z7 l7 a y1 u3 O1 M
( ?, I; N8 ?4 J; E9 x}
2 m- V5 O' C8 ?* ^
0 Z/ Z0 |$ m# z1 y- [function StartTimers()
) D, l- b8 x/ S' ]+ B
* m, ]2 `6 S n- j{ //set up an initial set of timers to start the shimmering effect
0 e7 ~: _* P; d" E4 M6 `* _7 L1 R4 b2 J7 S; E |
for(id=0; id<numLinks; id++)7 a4 {5 e: N9 U2 T
" O0 D$ Z7 [* K0 |. M& `' ?3 ^( D
{# \0 \ G9 B8 Z; r+ P
- X9 g# v2 n- A' N t=setTimeout('startFade(' + id + ')', id*100);" w& p# ]$ W' A/ n; o
# G1 Q( P0 ?7 @
}/ ^' |! P. ?+ h H" |. N5 b. o
$ V. v3 T6 ~0 c2 q% p6 n. v
}1 j! E& T# _8 a4 v+ n |
8 o- O- J4 e! Q% ~" Q1 V! }3 }//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')( H! x) ]+ B( J; _! I8 v
+ b' f' F5 {( g6 C
initLinks('#FF0000', 6, '#FFCC77');; }: k: Y, T/ T0 {# g% o
- K% {4 B3 N9 W, ?4 f5 h
//-->' a+ D& R6 o4 ~& ^( {& X
- |+ W4 n. y c3 \% p: K% O</script>
+ N+ p6 D& M3 d' z<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
' F' [+ q% w, d8 n1 l. a</a>3 W r( C) P0 n5 F
<br> \/ c) z) p8 s) y6 }7 Q% j! n7 \
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; L1 l/ u) f% i2 B; R
<br>9 c8 B4 U+ {$ T: B2 T: {4 F4 O+ p
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>5 W* k/ |$ P e- h5 u
<br> / e' c6 o R: p: i+ x# m9 J5 L
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
5 g' S) T7 ?2 {; n) M<br>( r7 G) x8 I/ O ]
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>6 b I3 g- \% F! r0 B
<br>
: O0 P# C, B: l$ ]; c<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>! e' l T1 N- o
<script language="javascript" type="text/javascript">
' _- W3 S( c* V8 ?( e0 x5 s& Y5 l<!--
+ X' S2 t9 J5 \4 I4 n% \) m3 e8 KsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering1 W+ [2 `0 a* B6 a! m, Y
//-->
- W+ y5 M$ E T& J0 f/ U2 |</script> |
|