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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
! z4 P) H: l: _) U4 i. ^<!--3 \1 K& `0 P7 t7 L; w
// convert a single digit (0 - 16) into hex
. E6 h7 |! J* ?9 [2 r: u: u, Y( Wfunction enHex(aDigit)8 S0 G8 Z9 |, N9 u- Y4 p
{
* G" r, f0 n. E# d' f/ I return("0123456789ABCDEF".substring(aDigit, aDigit+1))
$ u/ Q, y+ V2 h7 J5 j( q}; [& o4 A% x) P( b5 a) _3 A6 T Z
// convert a hex digit into decimal
* { b' c9 e0 v; L9 Xfunction deHex(aDigit)
0 j% O: X* R1 L* d% S& u{5 c0 v0 W9 K) c
return("0123456789ABCDEF".indexOf(aDigit))/ E; p* p, Q2 Y. w2 c6 R* K8 [. r
}
$ J' z/ s' N M9 `9 }
6 L; b/ H; ?5 b- M/ _8 t// Convert a 24bit number to hex
& D( ^8 U% [; A1 M: {function toHex(n)- E: c1 S: S7 L) x5 e( X1 b
{- w. [6 j8 g7 l: M: D: R
return (enHex((0xf00000 & n) >> 20) +) b; m. p. T# R! w* D% P
enHex((0x0f0000 & n) >> 16) +
9 q" \6 \" U" C: A' {: F enHex((0x00f000 & n) >> 12) +( M; n9 z1 @! g' W" q- d9 x
enHex((0x000f00 & n) >> 8) +
6 ]% x( S5 A7 M7 D1 { ]; h6 S enHex((0x0000f0 & n) >> 4) +
1 Z, k D: C9 [0 M7 ^ enHex((0x00000f & n) >> 0))9 B, H' t( Z/ I% I; }% f
}' U% R0 ~; F* z
// Convert a six character hex to decimal- r6 j6 |: o2 ?$ }9 l
function toDecimal(hexNum)7 h7 Q5 N3 E6 p, D8 I9 @
{5 E" u% C! u1 B4 |7 k- a! C( B% S
var tmp = ""+hexNum.toUpperCase()
9 z; T; M! Q( Y6 }( @/ _5 U while (tmp.length < 6) tmp = "0"+tmp2 y1 r: p0 W, w' U
return ((deHex(tmp.substring(0,1)) << 20) +- J7 _4 }/ O8 f z0 G$ G$ e
(deHex(tmp.substring(1,2)) << 16) + 8 u* I5 o; x- _
(deHex(tmp.substring(2,3)) << 12) +
2 T& \! x: u$ o" x: G (deHex(tmp.substring(3,4)) << 8) +
& F# _+ [1 N7 N& O/ E (deHex(tmp.substring(4,5)) << 4) +" Q2 o6 i K3 m9 P/ ]2 U
(deHex(tmp.substring(5,6))))
+ \' ]$ a3 t6 g2 B}
" s* {* b" D5 Z( u. e( ^% V- o///////////////////Shimmering Links/////////////////////6 Z/ {2 J5 \7 g3 [9 {
//global variables
' l9 }" N* s5 i4 [3 V; nvar hoverColour
. j( y# s/ ]! m" f* X6 mvar numLinks;
2 d q y+ A( ^$ Bvar rate;5 b# l6 m* C4 s ~* }
var numFadeLevels;
+ k7 T! k9 I# X, Gvar bgR;
0 u) u0 S7 Z/ evar bgG;( ~ u8 ^# ]3 t* y! m, A1 O
var bgB;) A: m, t" L7 ^. [; l2 ^& p. o
var currR;- [' H0 V" R" S8 ?* L; V- }
var currG;/ w, D2 R3 \2 n; `0 ?2 P+ U
var currB;: |# Y' C) Q/ v/ x) v( i+ r
var count;/ c, o9 `, E* L- v$ S
var fadeOut;3 F! M0 G5 D; @) p
var continuous;
4 ~ Z" `+ d6 fvar newColour;
U1 O1 X5 h7 }9 a3 M* `4 I5 uvar tID;/ e$ Z2 h& }" d: [0 f5 n" a- d1 Z
var redInterval;
. `& H* A1 x3 O. e3 t0 Hvar greenInterval;- p( r ?. C' e$ \
var blueInterval;2 P; C* S+ ^, s0 p: j. N
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
. U A; E3 c% K; V{
9 |9 ~# _0 X2 l7 I% I# M hoverColour = mouseOverColour;
* `) S# q( r( s+ r numLinks = numberOfLinks;
2 U, n7 k& t; h5 ]. r& E4 x rate = 1;
$ c3 a( J% h5 \ H, a numFadeLevels = 30;# d: [+ E/ h6 U0 Q S4 _
function initArray(theArray, length, val)
3 P9 D/ n- m2 g {2 X9 ^& m" K9 l3 W
for(i=0;i<length;i++), p5 Q$ B9 c' Q% t$ K
{5 }0 W7 Z# K' o/ v) i9 G
theArray = val;+ s- N o8 @ R% ?
}
, ^$ o* Z8 a3 j( P }% Q* [0 r# O2 }* d$ x
bgR = '0000' + fadeOutColour.substring(1,3)
/ A# [2 a; s; S$ {! g2 @* @ bgG = '0000' + fadeOutColour.substring(3,5)# ^4 J. [7 u. k4 u5 q
bgB = '0000' + fadeOutColour.substring(5,7)
" j: S: v: T8 i currR = new Array(numLinks);# x( C& o. P; P' q& e. y
currG = new Array(numLinks);
- p% t% b2 X3 V( y4 P& }* i currB = new Array(numLinks);
7 c+ i- F) a- g* s# j count = new Array(numLinks);
0 ?% F# g) _6 x2 x* f, h. Z fadeOut = new Array(numLinks);
9 J$ C5 E& ?" w- r- J' z |; e& ~ continuous = new Array(numLinks);4 j: u( L7 _' S. p
newColour = new Array(numLinks);
1 i4 K" F# ^4 y3 y8 j tID = new Array(numLinks);( Q; A9 [. ]9 I' d) M) ~+ v
redInterval = toDecimal(bgR) / numFadeLevels;3 Y2 Y# l4 u' @' t/ M) F6 d
greenInterval = toDecimal(bgG) / numFadeLevels;
+ W9 _+ q1 j; A& m+ |; \$ i! O# @ blueInterval = toDecimal(bgB) / numFadeLevels;+ g9 O1 [ s4 x
initArray(currR,numLinks,0);+ R/ q; S' p, F3 p3 r
initArray(currG,numLinks,0);8 _2 D, f* K! b9 g
initArray(currB,numLinks,0);
) _4 k; e9 w' h s9 ^3 b1 M. B initArray(count,numLinks,0);. H' _( Q$ }0 }4 _8 g: \
initArray(fadeOut,numLinks,true);8 q/ m8 y" G X7 V5 x
initArray(continuous,numLinks,true);: k; I& ~3 m/ F1 h/ h
}
% w6 G; b% x; E5 Gfunction startFade(id): y8 j8 k9 `: _1 A& @$ G$ @
{/ t) i( A; A, }& P3 H2 }# P
if(fadeOut[id] == true)2 q# b% N/ T' f7 g
{ /*move colour towards background colour (increment)*/" o- y$ b5 [7 `0 F# S
currR[id] += redInterval;; [, P2 {0 {! W1 s/ Y* ~, h# T* u
currG[id] += greenInterval;
5 ^0 n, i- u" |) Z3 ^. F% m% i currB[id] += blueInterval;
. ^2 x1 I1 ? w( R3 S8 _& U: X1 j6 n newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" d9 O. z8 V3 U( k" u) f
if(++count[id] == numFadeLevels)8 }) O8 t# f" W# y; S3 I+ Z
{' A. w# b( q" K4 X7 Z |
fadeOut[id] = false;) D4 f* h8 N# a. \: M- K& \
}2 ?- B# C5 K8 y) s4 w
}+ E# W, A( O- W
else
( h4 j! ~ g5 i3 ] {0 i7 q9 ]% f4 O+ B4 J
currR[id] -= redInterval;& a4 ]9 _& n& ?( m. P
' E) B7 u, K1 v: A" A currG[id] -= greenInterval;& X l$ U+ F6 ~
. q% b+ f# L$ ~5 ^5 C. Y currB[id] -= blueInterval;+ N: U0 _9 Z! y3 V V
2 Q. s7 n9 o6 {) c4 \ T1 V, Y newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! D2 H/ @/ S% N$ _1 O# \- L' I% W& ^) W; U
if(--count[id] == 0)
0 [0 E2 I, x# h) J. L4 `! _
* U; U7 y4 x& S$ O6 x {
) a4 L( ?/ w8 S1 \
# C9 Y1 J7 c4 \5 B& y- \ fadeOut[id] = true;: m" a# x$ h! h! a, f
$ o, q+ A m4 y9 h- e
}( x( o$ H4 D# P
( N9 v+ W! r% w( Y% Q }$ K, I+ f9 s3 L8 O; n
; K4 B2 [' l: ?, V2 b- @0 O1 X
if(continuous[id] == true), D5 j( v" O# I
( e! `1 @( T+ x. q6 I
{7 x+ d+ Y4 ]! P
! _) Q& `8 J( h document.getElementById(id).style.color = newColour[id]; 1 _; n1 H2 @9 ?5 L W7 |
* w( k- C$ r# A) W, }1 U8 a
}: m% m" e" A S
$ L+ A5 c" l& D/ s6 [ O' h% [
else
8 e/ [" b4 Y$ s
* C4 J H) A/ T6 ? {
4 e+ G, d# W7 w F! C5 Z" Q" o
! P0 V3 o( ?4 D* y) C; f' P1 _ document.getElementById(id).style.color = hoverColour;
; P* e& g- \+ q: L2 |# `2 t4 Z' d1 Q2 O( {: w6 T
}( p2 @. |6 `. F* P4 V: k0 A6 A
" D; x! p1 G" ?0 w
clearTimeout(tID[id]);
$ K# F$ {# d! r7 ?
. ^; {# \4 e. G( N8 A tID[id]=setTimeout('startFade(' + id + ')', rate);. N8 y) W' B& n9 C, G a! [3 w
5 K* j) b" P& {8 U* J7 I: |: k0 e% G
}& y3 k$ K5 B* F* ?/ H9 g+ |/ G, j
, _9 _0 c( n% v j+ xfunction continueFade(id) G, G1 i4 [" B% m7 r" P) ]
8 y: X/ D4 a& z+ ?' U{- _# T3 b7 c# ^4 `& f7 B
5 [) s/ ~. v! L( h
continuous[id] = true;* r. m; X7 P7 \, F" C
. n" c) }" I, m( Q8 M0 ^}, H2 n3 l2 M2 V) O# U2 L
* y* A) W% ~ f5 Q7 F+ b# _( sfunction stopFade(id)$ R: S h4 P8 |2 R! z) Z: l
5 D* f' r: ^, S9 T6 `# I e{
9 ]) a2 S/ [+ I9 ?7 ~; d9 C5 ]! S8 @* {( k% _: H% v5 }
continuous[id] = false;: V0 j- p& s8 v- m& m t" [2 k
( n- i9 X9 ~* u8 w6 }}
* |' {2 O: H+ c. t% P) ]5 }
/ ]# w8 n6 v Ifunction StartTimers()
8 h3 m a7 L- f7 r1 @- k: ?
' a5 R) l. l( ]9 k; {/ `1 O. a6 R{ //set up an initial set of timers to start the shimmering effect; ~1 M# x( B$ n- s
% U8 ^% I" g8 g% J2 V! [. ]
for(id=0; id<numLinks; id++)' A/ B4 a) I, g# h
% T0 s, N/ C! X1 B! [9 _ {
, _4 m% @+ D' G( K J6 ^
" J9 j% i/ r/ y0 B; O3 M3 Z2 J t=setTimeout('startFade(' + id + ')', id*100);
0 w" J" k- \6 U6 ^9 Y% s$ K
7 ]: i0 r4 T+ g }
: t- l3 L- }! A& {7 p8 o* U
- ^" K- G0 W4 [8 b) T4 G}( ]2 g: P7 Z* M9 Q6 F
, O7 B: E: Z( h0 E
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 n. s; h- r/ R: C7 _ X
+ N% ^$ ~/ l Q4 ninitLinks('#FF0000', 6, '#FFCC77');4 ]7 a7 |) t' r+ r, j$ c# c8 h; I
1 D% U/ j& R3 W//-->! f; Z" |! r# Z% e+ q7 r
5 W, m& Q: q0 Y p3 F
</script>& B5 x% T! {3 k7 ^
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
) G; o% y( j* {! R% _, D</a>; p. ]* I* S7 c t# c
<br>
, }& b3 g0 M$ b$ C. J% L: m: i<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
s: q7 n6 i2 f1 k, `<br>- E) B5 w$ z2 M1 m+ l
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># }9 E I" V) ~' l; ]
<br> 9 f6 q; v5 R. B$ i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>% Q* @. k' Q3 Y A
<br>
. p/ B/ r' V5 Y& E$ i3 q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>4 k/ L, V$ |, ?6 F
<br>/ v: B' ?+ ] J' f
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- T* [8 p, N K+ \<script language="javascript" type="text/javascript">' L# ~- Z5 G% i2 l! R5 k( w
<!--
( {; _ I3 Y/ V- R8 RsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# k s2 G% H5 G7 j ?
//-->
" G9 x, Y, ?; N! S* h6 T) T</script> |
|