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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
2 e1 _8 A' \: L d$ x( H<!--) O' E, A- Z: t, ^/ A7 ?
// convert a single digit (0 - 16) into hex
1 j$ H7 ?2 X5 [' Sfunction enHex(aDigit)
4 i N; `: |! R8 p- N0 }* \{8 R: p: G8 x( W8 z: _; y o
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! t% p" Z+ m& Y- ^}
1 K1 `" c+ B& N1 T$ a# V// convert a hex digit into decimal
( a. @4 o \% P+ Z! c [2 I# efunction deHex(aDigit)
: c7 E- r" p5 N. t# e) U{
3 u& |" z) M0 }; H6 \ return("0123456789ABCDEF".indexOf(aDigit))" G& \# `9 Y" F% B
}/ A# e2 ~2 C% Y7 g4 [5 g6 u, g
/ K8 J3 o0 X# _1 s// Convert a 24bit number to hex
5 h& n. |8 j. i+ Yfunction toHex(n): b- \$ W& T! g( b
{
* w' E1 N! T/ U% i/ e return (enHex((0xf00000 & n) >> 20) +# s, f& N5 ^% ^+ g- e: G9 i! M
enHex((0x0f0000 & n) >> 16) +# ?; x1 A4 q8 O! v- m
enHex((0x00f000 & n) >> 12) +3 [) x& _ F# X6 U6 E, o+ `7 L
enHex((0x000f00 & n) >> 8) +! k5 L0 H6 n Z+ Q$ t, {
enHex((0x0000f0 & n) >> 4) +
* q+ G8 z* X0 X9 X enHex((0x00000f & n) >> 0))
3 U" E! H1 s7 ]+ k3 i: c, g}! Z6 p$ b1 _, s% {# l7 m! y
// Convert a six character hex to decimal }& L7 h% L" O. Z/ V
function toDecimal(hexNum)
6 j0 a; d2 M4 p$ u @, H{$ r- Y5 x7 Z6 y
var tmp = ""+hexNum.toUpperCase()
5 F) G I8 e7 _0 v) }8 V; K6 u# U, [ while (tmp.length < 6) tmp = "0"+tmp$ P/ ~9 u0 h: L* B& q w Q
return ((deHex(tmp.substring(0,1)) << 20) +# o! m1 U' k& Y( i7 y/ g
(deHex(tmp.substring(1,2)) << 16) + 5 u% J# r$ K% V4 N7 l! X6 t% ]4 U
(deHex(tmp.substring(2,3)) << 12) +
. Z' m" b2 ~1 |9 Z. C5 A) C7 C (deHex(tmp.substring(3,4)) << 8) +: v- K; l' Q" G3 f4 k8 D8 D
(deHex(tmp.substring(4,5)) << 4) +# i4 W( k2 M, M; f
(deHex(tmp.substring(5,6))))
5 [8 G- Z0 ^" M0 [; Q5 L}, }' x7 V) |. V+ \$ L
///////////////////Shimmering Links/////////////////////2 j$ y: Y6 w1 F2 Z5 @/ k! k, o
//global variables
* c' u1 |# ?4 s! _% f1 u. wvar hoverColour" a4 J. ]6 h o2 n' J. I
var numLinks;
- L+ \7 h9 l$ f3 k1 ?var rate;
V/ v% H) R! n) N1 y) dvar numFadeLevels;
" {. M$ [- e% [" M! ^var bgR;* X2 ~& n8 ?( f7 K) A, S$ b
var bgG;
: {) N& C" i( T4 h2 I1 svar bgB;
) \. h1 I. ]0 H3 L& Q! svar currR;, q! H' b; P" q8 `: Q1 ~
var currG;( ]6 e x" m/ U! w1 `" ~
var currB;0 j4 v% O2 ?4 n" f# W
var count;1 ^# E' F# R+ O# i, r! N7 T
var fadeOut;/ r8 k# G S8 g5 d
var continuous;. @7 u7 T6 j3 ]$ T( k
var newColour;
2 J6 p _, K3 r3 ?var tID;
1 D! W+ B9 J) W' `. w; }var redInterval;% W9 t) b( b% x
var greenInterval;, K [- W/ C1 C' x- _9 c
var blueInterval;
. G( c* w* u' Q9 Q" ?; D4 f% [* C7 ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
% t8 L9 w- l5 d$ u{- o% W- T H9 Z# X
hoverColour = mouseOverColour;
2 ?+ K2 i: D- T numLinks = numberOfLinks;
% k3 j, l6 v' V1 j' m rate = 1;, }* _8 T% {' Y9 E! ^
numFadeLevels = 30;
& t& b5 i2 f% F5 M& u/ L function initArray(theArray, length, val)
2 c; n& s% G" u5 f+ t {
' H2 ]3 N2 e4 F* H/ ? for(i=0;i<length;i++)) L4 n; S: A. x U. Y! Q
{# n' @1 {, \! a) N7 k
theArray = val;$ \: @2 t: _) b; J
}
) t- ^5 D# I2 f8 \ ~9 _% J1 K }
3 L9 j) L; M- _* ^ bgR = '0000' + fadeOutColour.substring(1,3)) {# _$ l/ v/ t$ k" o& q: E7 r K
bgG = '0000' + fadeOutColour.substring(3,5)
/ M/ ^9 i! b8 b5 ]3 d; L% v5 z bgB = '0000' + fadeOutColour.substring(5,7)' I+ M7 U. A5 P8 N# d
currR = new Array(numLinks);
( z1 u) u) `/ y6 `1 \/ C currG = new Array(numLinks);
$ Q8 I# h$ A4 j' } currB = new Array(numLinks);
9 j; C1 ?5 O) `$ S count = new Array(numLinks);
& B+ z8 M0 k: j- W g fadeOut = new Array(numLinks);2 [0 Y5 z6 i: G; B; f R, `/ Z
continuous = new Array(numLinks); w% ^3 t" D6 H0 U
newColour = new Array(numLinks);
- }/ Z' r: r+ {$ }) g# S: ^! Y tID = new Array(numLinks);7 i# M P) s( N e& \
redInterval = toDecimal(bgR) / numFadeLevels;
- V7 a3 H) N+ w+ Q, H; B7 E greenInterval = toDecimal(bgG) / numFadeLevels;4 U8 y2 q' h3 b6 F7 }$ e3 r
blueInterval = toDecimal(bgB) / numFadeLevels;' J8 K4 Z# T# u
initArray(currR,numLinks,0);: M9 W, n7 M# z7 Y9 R# \
initArray(currG,numLinks,0);2 p) W- Y9 I- E8 T. R
initArray(currB,numLinks,0);: H, E' ?0 {! |) @
initArray(count,numLinks,0);
. \& b% c+ v' q7 `( u3 d0 E! ? initArray(fadeOut,numLinks,true);4 l, |0 O9 L. n. |$ j- b
initArray(continuous,numLinks,true);
3 ^3 h3 _: @- I' U; j5 s}
9 T- N# O; Q0 w$ c( c+ V/ qfunction startFade(id)
+ ~- L. H1 i" k( J{
+ y, t2 W6 A8 ^2 {" O& U if(fadeOut[id] == true)
, |" x3 D; [% c { /*move colour towards background colour (increment)*/
( z- e' S9 ]1 a. e; N currR[id] += redInterval;2 }' U; ~ J. Q' ~
currG[id] += greenInterval;
( e, F2 j. X( z( r currB[id] += blueInterval;
+ F# q4 z* v# k0 @. m1 t* P! l) e newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, W- v; W8 P0 }) Y9 ?! G8 W3 V( I
if(++count[id] == numFadeLevels)
! ~9 {" Z' h$ h& V {# y- x4 `! h1 `/ v
fadeOut[id] = false;
+ D! ~% d! d( N {( m; v }$ d m% i5 ]; }+ w0 ?) I- u
}
5 L; d( J. `8 N5 W8 T" T else
5 `! }% F3 S4 Q {: X/ @, I' I2 k3 m
currR[id] -= redInterval;' w; L- {2 _$ n: s* J1 D4 k
, h$ O K! Q5 x) U+ E
currG[id] -= greenInterval;
+ S! [: @3 p0 \0 N. b; x% n* G D9 }
currB[id] -= blueInterval;
k* o: v- `9 S1 s8 m" L
3 F* _6 w$ h' C! |7 n# h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
* m! e8 t" N- Z1 v5 f) o7 ~4 w+ s, v7 v/ @
if(--count[id] == 0). V0 w9 ^( l7 A" N- U
& Y1 E, b2 d: S- s1 ^
{( M% m T+ e$ Q, k6 j( ^0 E) ~
7 |0 c' @, G: V5 ]/ v# n2 d
fadeOut[id] = true;
7 h0 z! C" e- m% k3 [) F& t+ n" |% G O6 A+ s2 }1 s5 P9 m) v
}
! G9 U- ~# A+ ^% J' J8 {9 x1 U, x1 ?- g) j9 j4 Z2 Z( R( @& q0 m
}
5 \% Z% M3 f& ?) q4 C6 k
5 ^ G' h* S( X1 f& F if(continuous[id] == true)* t, v7 y( e# v% ]+ i" J. V
3 L; S0 {5 w/ Q# |; P/ m {
9 ^1 Q& z5 y& U2 d
" e6 C9 _7 @* B) ? l% j/ U document.getElementById(id).style.color = newColour[id];
- D( a' W4 p' ~6 E7 ?
+ x7 z; n9 G/ p& j }- [* V' ]; V; R0 Z! }; t: c
' Q+ `) N: ?2 T' C else
" `/ j6 E; K }1 ^2 E8 ^
8 t3 @/ o' W$ n/ e* W {( `: j# ?3 Z+ o4 y6 I4 _* g. L% q1 V
' x. a! k5 b1 c9 t* E# a! u0 l, r
document.getElementById(id).style.color = hoverColour;( a L0 F# f1 q
& D1 n9 o! F7 G. W( B0 k8 R( U
}& P4 f4 D' I: c$ l
, t8 x7 X! T. ^- n. K
clearTimeout(tID[id]);# W* W e h( A
7 o- U" }0 F! a4 g9 R: D: d tID[id]=setTimeout('startFade(' + id + ')', rate);
8 z2 [7 ]# H# e0 Z; p- U; f
! p$ E. y% M( C$ l7 Q; _" E% x0 l9 E}
% o. U6 h: l& o; U3 F
( ^# t) f" [7 k7 B; Y$ G" n7 h8 I( Ofunction continueFade(id)+ l! e; `6 x- m/ l
" o; M5 `% |& c. s+ K a{
1 S# b4 a2 D6 }2 X! ^& n0 \1 R1 ~+ l# n7 ?
continuous[id] = true;
) m, f- E4 U7 r9 g& o8 Z2 Z- D7 A( J" c& i; `2 ^' A
}
3 R( Z% `8 i) z, h/ e: w- \/ f( f. N# M7 \: e
function stopFade(id): Q& D9 k% A- o, b% ^
% Y; @3 I! d6 K
{$ d* B X( c0 G, q
% i1 |6 R& C ^- q4 ^
continuous[id] = false;
3 o1 I- k8 e5 B( K7 }% M7 l, I: ]! C1 I* A/ L
}0 g1 B! S5 z9 n) |
7 w4 X) G* a k6 F
function StartTimers()
4 u4 E6 n: l) a
" v3 p2 k- ~, Y! N+ j) R9 Q& N{ //set up an initial set of timers to start the shimmering effect
- v' q. j- [3 `" Y& Q9 ]- D/ y6 P0 m5 {
for(id=0; id<numLinks; id++)
2 D! r! O4 p( d$ p \8 o& s! h# p$ H) B" c; _: h+ A
{, s7 m) e3 [, Y! J+ h
$ m/ r1 v0 a7 B# o ^ t=setTimeout('startFade(' + id + ')', id*100);
| V" p; k6 f g, o7 L5 G$ C6 }4 V; K) ~7 e3 H- O
}
) U! L! I+ m0 K
0 p9 z. N" t1 y2 X+ Z}- c3 \' C) B# u3 ~# k
) I$ J3 N( ` `9 j9 b1 w
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')& y* J/ m& ]) w* H& [
8 m, t) f- ^$ R$ c7 L: T) ^
initLinks('#FF0000', 6, '#FFCC77');
! h9 g6 V% s/ \9 o9 _! d R
$ ~* b; P; Z& W p K//-->- s g5 N- r; t3 y% ?- ?/ f
- g) ?# R1 p5 [! |* ~
</script>8 J+ O( l7 ^6 T) ]( S) o
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
) ?- e! `( M& b# _</a>
2 A/ n. H9 Q# H' ], z<br>
3 `- w/ r; b4 W" C- l( h4 ?5 g<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
" D Q- G- o6 M1 l<br>& y7 o/ V# Q9 v8 H
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
- [* Q2 m8 n% d3 ?7 d1 i) z# U<br> . m1 U0 n5 j9 w
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>% b4 U4 O1 a f$ ]4 j( i* b3 W, K5 t
<br>
a+ t, A% g0 N<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>9 l! ?) P- \/ k; T T8 [. k
<br>6 D) [. N; _7 i L" y+ ~
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a># M) \2 D& V: m3 m: R. k# G
<script language="javascript" type="text/javascript">, g9 Q! x6 D( p$ e- ?
<!--
' i$ D8 h- m' {4 E! n( csetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& o% ?: S+ Q% u. p7 h
//-->
# G( ^3 C0 \- u2 J" k</script> |
|