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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">$ @% M% |; ^5 B( l' E& K
<!-- E& ]8 t5 T/ t) O) s- u- I, X% g/ o' t
// convert a single digit (0 - 16) into hex
) V) d5 U# X- q% {4 }6 ?function enHex(aDigit)& s! s! U+ [+ A2 [/ L
{8 j) X0 `& g6 \
return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 Z! R4 [. V* X! u, d
}
" K" |- U4 c% U; E9 Q$ C" x8 d9 F// convert a hex digit into decimal
- D* H- P3 A$ B3 m, X# Nfunction deHex(aDigit)
7 U# }! u; V6 O0 E) r* l9 J{
& l, [# n( g/ Z# C! K- ? j return("0123456789ABCDEF".indexOf(aDigit))& ]- r6 e8 U q: V1 Q
}7 ] w0 {; G4 ^+ P- ` \" X3 d" }
# T$ d0 y3 k3 r) o$ M
// Convert a 24bit number to hex; z( k4 `- p7 l1 E5 i2 ]1 y( v
function toHex(n)
8 B( |; x8 {, V7 z2 j0 ?7 z{% ~7 p) w/ y5 F# V [
return (enHex((0xf00000 & n) >> 20) +9 O( j( O( s" n: `$ y
enHex((0x0f0000 & n) >> 16) +
$ m& f7 x( ^' q0 E* V7 f enHex((0x00f000 & n) >> 12) +
0 z- a9 p7 A+ [" ` enHex((0x000f00 & n) >> 8) +
3 e% E4 `5 p8 ~ i; M enHex((0x0000f0 & n) >> 4) +$ Z6 v2 G3 G$ T" t
enHex((0x00000f & n) >> 0))
) C! y# n8 L9 H; Y2 V; K0 ] B}9 l! g: ~% V5 t4 V0 s
// Convert a six character hex to decimal
8 ` B$ a* B) ]3 M. ~, S9 cfunction toDecimal(hexNum)
0 J* ?: N( z/ n# P! m{
4 h6 r7 [! L. E; t var tmp = ""+hexNum.toUpperCase()# x1 y, D. t4 m1 \
while (tmp.length < 6) tmp = "0"+tmp
# u: K: O: E/ B8 N$ h return ((deHex(tmp.substring(0,1)) << 20) +0 K. e+ s' r3 r# I
(deHex(tmp.substring(1,2)) << 16) +
7 G4 b& Z5 s/ q, m) G W/ Y (deHex(tmp.substring(2,3)) << 12) +
- |. Q8 b: O6 P8 a9 |( x (deHex(tmp.substring(3,4)) << 8) +8 i C. l# p1 x$ S2 X5 h6 U% `" Q5 h
(deHex(tmp.substring(4,5)) << 4) +, V8 s4 W7 @5 e' k1 I
(deHex(tmp.substring(5,6))))
+ M* K) G$ C6 z$ f& p d}5 @$ J- D8 g; }1 `5 \8 U
///////////////////Shimmering Links/////////////////////6 t) J8 C) Z, L" u
//global variables# p" a1 M% f+ f3 ^
var hoverColour! d, ~3 k! S/ s6 p, q% O- y* t
var numLinks;
`# ~+ o9 b) i9 y$ h) ^: Wvar rate;
2 n3 v4 H. N0 M, s4 b" R$ Fvar numFadeLevels;
. q. ?0 h( S5 t( d0 U! Kvar bgR;
! N5 a3 j5 f* N/ n4 \var bgG;8 ]. p J! L2 s2 D. _9 v/ _; T3 ~/ S
var bgB;
/ H9 ?: ?1 i0 p) o/ X# E" m. lvar currR;& b8 @* ^+ r: H) ]9 w
var currG;) i% {$ i7 a3 R- f- Y
var currB;
1 ?5 U' H( N2 t$ avar count;
/ T i/ s3 B' s5 rvar fadeOut;5 A- p( G2 [+ S0 ~$ F. B& x6 G5 j
var continuous;5 T% p6 c) [2 K* G1 z2 i
var newColour;
5 s* g- J2 e. b8 J) Vvar tID;
: i0 Q; O2 Q3 L' u8 L/ Avar redInterval;- T$ _" S3 y. w& |2 f6 S
var greenInterval;
# T3 Z% W7 M4 Z' {4 dvar blueInterval;
5 i) l2 r% L$ Z5 m' h8 S- {function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)' O+ u* T% F1 s3 t
{' o2 F$ T" S, j* R
hoverColour = mouseOverColour;9 T7 v* c5 j/ S$ ]0 f
numLinks = numberOfLinks;
' w9 m+ w5 D# L7 |: X3 l! I rate = 1;; E- d, f3 W4 Q2 C2 Z
numFadeLevels = 30;2 x% ?: e1 B* n1 @! W
function initArray(theArray, length, val)- L% p Y! w+ f0 D
{
$ d8 B3 u* p& R$ O2 N for(i=0;i<length;i++)
. P# m2 j# W! @9 f! v {# g1 l+ r3 Q- Q, b& _
theArray = val;
: |0 e( C7 }4 j" u; i }
- L K* k9 ]- X/ h$ x }
) x: s; F* _- y N- |5 @ bgR = '0000' + fadeOutColour.substring(1,3)
$ r& \5 V: Z3 M0 W, y0 \$ D bgG = '0000' + fadeOutColour.substring(3,5)
: o" G* `$ q. b9 q$ r0 R bgB = '0000' + fadeOutColour.substring(5,7)
0 Z y% g- u" ~3 s- K currR = new Array(numLinks);
/ O( ]$ m1 H% X! Z5 h8 e/ i3 J# \ currG = new Array(numLinks);4 F, t( T& q( C: S2 C
currB = new Array(numLinks);
' `- u# D: R5 l/ y, m$ | M/ `! P count = new Array(numLinks);
' h1 K6 v1 L/ G) I, d# l+ | fadeOut = new Array(numLinks);
7 z- ?) f! a3 e" n7 Z* T! x0 G continuous = new Array(numLinks);
& L0 L- w# G% D" @5 B1 I newColour = new Array(numLinks);3 x* m: Z( M* ]/ ~) x3 m8 K4 _2 ~
tID = new Array(numLinks);
, C6 X! J5 G! I1 V9 Q redInterval = toDecimal(bgR) / numFadeLevels;. u2 l9 z9 C7 J
greenInterval = toDecimal(bgG) / numFadeLevels;% _5 |# J9 z5 Q- Q8 ~2 i/ B; Q: z
blueInterval = toDecimal(bgB) / numFadeLevels;! B b+ F/ g3 W( u: D
initArray(currR,numLinks,0);
1 w) S) ~! a! D initArray(currG,numLinks,0);
. \3 J5 W( M$ T: e3 I# `5 x initArray(currB,numLinks,0);; Y2 S1 _( F0 `" v2 k
initArray(count,numLinks,0);# c( t2 q4 C0 g$ s8 R% E \
initArray(fadeOut,numLinks,true); y2 e* u; _; k5 K4 ^' ^
initArray(continuous,numLinks,true);
# X! u* }3 B) Y9 C% L}
! y: B# s; ]8 ]3 ?# n0 Q8 c" \function startFade(id) j7 i9 \. e" P; V
{
3 \& o% L# \2 h Y3 r5 w if(fadeOut[id] == true)
( l2 ~( c8 d; U* V) b { /*move colour towards background colour (increment)*/
6 E1 P* @ y! j! |8 V3 p currR[id] += redInterval;
6 B) b( d9 R! [ currG[id] += greenInterval;
% ~% p- }) e! i" P" S currB[id] += blueInterval;4 Y: z. R9 B" x2 j& G% _5 ~8 C8 m
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& }( g) d; M6 R$ ]) G! G if(++count[id] == numFadeLevels)
9 s/ D" u6 N5 I$ H1 V* t8 N4 ]& H {
k, d9 q1 U) o4 _: k: h2 @ fadeOut[id] = false;
+ r6 B( }$ X! [. C. Z+ a J9 f j0 q }4 p$ a' K& ^ l( Z E" r! j, ? ?
}
$ k+ l! w5 @3 T* ` |' C else
/ m; v% p& ]+ l& A {. I$ _. Q" ?; }3 W# C5 v7 ~
currR[id] -= redInterval;
% j' Z E- d, p. |" p
' P; L; \8 [) l" d/ Y w; l: U currG[id] -= greenInterval;
' n9 A6 T( Z( o7 K. \6 c0 x2 L8 [/ T
currB[id] -= blueInterval;# C& l# _; e4 ]8 y) P2 p
0 v+ ?8 b* V; O3 \) K! u8 O6 Z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
. s, ^& W ]# l+ \" w+ x" c2 s! N# g4 `( ^7 O+ v/ h$ K
if(--count[id] == 0)
& H6 M5 u1 a- g
. [1 I) m5 Q& \- p1 e, Z {
! t/ r1 t6 x# K# p$ f: r( n% r2 i: U9 Q, T
fadeOut[id] = true;
& f6 Z+ n& s+ M7 |& ~ L! K& P+ e+ |) W" e# Z' D+ j
}9 b* T" O+ P+ Q8 }
6 V6 x% Q% S/ Q: Z
}6 [, ~3 |- \0 N" q
6 B1 s7 F# s, h9 F, a
if(continuous[id] == true)
3 l8 N( O+ {- u( E% d% \" `& A
5 e* [: M$ \# y7 J8 K {: H {% _8 v; V7 l$ a& x
5 w7 A( W- x6 s U |3 H document.getElementById(id).style.color = newColour[id]; 3 l. E$ i' P5 d2 {- J. J
5 ~* A+ C, ?& p" _. w
}
4 s$ W9 l# j- C/ Z. Z S& R) ?3 g3 J) I7 A6 B
else0 A# Y& u6 n0 S
3 D9 E, o+ u+ q! L# l: E {. a" x8 ?: X) U: @( B6 B
! A9 i/ `$ T6 k document.getElementById(id).style.color = hoverColour;
; Q7 s: @* |; Z8 K3 l$ z+ L
' P$ G( u( v& ] ^5 C9 t* p }4 R# n- {( i+ p: X m9 g3 E
# {; E0 q, k' g3 o3 m
clearTimeout(tID[id]);
# @' N* Y$ W. m: g" T4 q
2 R$ v& ]' R3 Y, ~+ q tID[id]=setTimeout('startFade(' + id + ')', rate);& W. H: i: _. B1 o( s) P
/ A3 |2 m- S2 M1 c7 i. _, Q
} @- q9 _9 z2 W/ q
6 n3 P9 i! E8 O7 W5 Z
function continueFade(id)
. r8 s+ w- l) u4 v/ P) D, g, W5 x2 ^* L8 E
{3 U0 A9 y; |# P' ~
: i* i( S, c. n4 Y
continuous[id] = true;
$ l" W- ], i$ [! H6 k. @" Q1 z4 b) Z- h" A2 k, r, r
}! _4 _" ~; a: P7 q# [, d
$ v2 W" K* }, l
function stopFade(id): z) s! d8 B- M- V) R5 T' p: {
3 }. w Y4 T: Q: _
{( W$ t3 l3 f D! w
1 T. J% G" U+ l$ E5 B4 [' A' p continuous[id] = false;% g2 I( M) p3 w# ]6 w
4 O1 h9 i6 n+ N9 E
}3 r* r) ~, M% J$ d5 }1 V0 b- Z
2 t1 ^! }' j3 ~) W% ufunction StartTimers()- j& {9 G" ^% W
2 D, n# {8 j% l D; y% V N) o; Z
{ //set up an initial set of timers to start the shimmering effect* ~. {: D+ ]* {: z
T1 k# j/ W' b. G- m1 ^, |0 S
for(id=0; id<numLinks; id++)1 T) u% b3 ]5 R2 ~" O# f4 B
8 U6 H0 w, b$ M' Y3 \ {. t5 i+ B, A* O- ]+ T! {( W$ `; j
6 b, O1 @5 G# L: ^ t=setTimeout('startFade(' + id + ')', id*100);1 a/ d. g' Y2 a. N5 }
. o4 C" u- {/ ~; F1 E6 W/ k& t3 T
}- U$ l$ u4 A! o" m
, @7 g* _2 `/ E4 G! M} R+ v# X% t( i* W& S7 o
0 [) g( v+ T( |, t W//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
( w* i+ N( \6 Z3 {( f4 i/ n* O* k: R9 W- `' ]7 [" D
initLinks('#FF0000', 6, '#FFCC77');
, B O) K+ ?3 q y7 g# x% V- l2 I( T* `% @7 d- d
//-->7 w, G9 l2 g y1 ^
3 i1 b% J8 S3 L$ [. f/ B% Z</script>
( O: `2 w% p4 s- W<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元; _. N+ [2 r! Y2 d. }+ S) o
</a>% k' o L/ C' f
<br>5 C- H6 x1 G/ [- j7 d9 a& d
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>5 i# C4 k$ i% ?4 L; \- U
<br> C$ Y* q9 }; T
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* g; U) t% I3 a% b7 z<br>
& I9 F5 d; i/ A }! T4 ^8 w<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, D6 L0 j8 v- ^2 n2 M$ ]<br>
4 l D. a/ e$ ]: a2 ?! w<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>& B6 J: m. Z. T) S |. l& s8 O
<br>
T- }# w; @6 W; M" |0 O<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
# {$ |' ~" r& d% {9 t+ X- b* J<script language="javascript" type="text/javascript">
3 h0 h9 \3 `: @8 F: l<!--. M2 A% s/ Y& W( C5 C( `9 y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
' W: O x) t7 M G2 `) c- i//-->
! H0 v8 V! Q$ d# V4 z! |: N</script> |
|