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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">" K& H# |) S; \: D* _6 ?) l
<!--
2 o9 m7 \, n$ Z3 i x: M7 Z& u// convert a single digit (0 - 16) into hex
6 _# Z; p* c2 Z4 `/ @ X" ffunction enHex(aDigit)
( _8 j- ~$ t& D5 x6 [7 q{1 P' Y+ A: T: N! I1 c' d: w
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
* T" Y1 ?. c# J1 Q}
$ D# s# `# j8 s+ L+ J9 @// convert a hex digit into decimal6 d9 o) a% O, x3 p* y' G! U9 J: M
function deHex(aDigit): {1 b1 J( e1 c
{
2 g: t4 _7 t8 R% r4 D return("0123456789ABCDEF".indexOf(aDigit))4 e0 H9 q& {6 v4 J! k! D
}; l I( r# f' x2 a* J
5 U) h/ b+ l, B
// Convert a 24bit number to hex/ R/ }: n8 _1 G2 g9 J& @
function toHex(n)8 l, g" C! e3 c/ x% O& q
{
5 Z. O; ^' D' M6 b/ c' b return (enHex((0xf00000 & n) >> 20) +
* ~9 p G: _! t6 c enHex((0x0f0000 & n) >> 16) +, P0 k0 X" l2 B8 ~3 A
enHex((0x00f000 & n) >> 12) +
: i9 k4 e( q7 z enHex((0x000f00 & n) >> 8) +
0 ^3 k+ J, q- l8 q8 K enHex((0x0000f0 & n) >> 4) +* t2 s# Z; Y6 l4 |* H9 t/ K
enHex((0x00000f & n) >> 0))
- H% P" R2 f5 f) |1 T( L5 J}
+ l5 `, _0 T ?9 |; W) z$ z// Convert a six character hex to decimal6 j8 e8 N6 c( e5 ]+ h) [
function toDecimal(hexNum)
) d x# `3 D, c! y9 D{" ~4 K( L- c0 Q+ _( S4 p A* Q% I
var tmp = ""+hexNum.toUpperCase()4 V3 H8 |& @4 u8 |9 o
while (tmp.length < 6) tmp = "0"+tmp
" @7 y3 V1 U2 G3 Y return ((deHex(tmp.substring(0,1)) << 20) +: |; r9 b0 Y3 L: G' k. S8 Y; l
(deHex(tmp.substring(1,2)) << 16) + 3 G% T: }: e7 c) ?+ V0 U7 q( A
(deHex(tmp.substring(2,3)) << 12) +
5 M, v+ M' q" x+ V6 a; z& N3 @( S (deHex(tmp.substring(3,4)) << 8) +
0 B. u6 k* Y/ a: c- i" @ ?0 r (deHex(tmp.substring(4,5)) << 4) +8 U. i0 u! Z$ n5 o4 k0 \9 p
(deHex(tmp.substring(5,6))))
% l6 }3 H$ M. F! E1 y}
2 F2 l% Q* q% r4 Q& L$ U4 U3 o///////////////////Shimmering Links/////////////////////- D" F7 F( m" T1 G' E7 \
//global variables
4 |- d6 @4 J4 Rvar hoverColour% l; T+ Z' `0 |
var numLinks;
}+ W, {9 N8 O+ V b- O) bvar rate;( X/ g& ?, C: [0 |
var numFadeLevels;; ]2 j& D8 X% ]& M) ^# }5 R# D
var bgR;6 m9 O A7 \. u4 O( Q! B/ J
var bgG;
& b5 N4 P+ H7 r6 Jvar bgB;! b# q7 x6 H4 J. a
var currR;; @, Z. p- n; n3 g- R
var currG;/ i& x" m0 }; K! s" Y6 M
var currB;* R+ F2 s& l6 v7 C7 Y# S7 E) X
var count;; |8 D+ P$ D( R" x
var fadeOut;
; i0 W7 x/ `8 m, {0 N% Z% F, qvar continuous;
9 a3 G+ s) X Z z- e8 f: ?var newColour;
1 e( Y9 x$ G7 f O: svar tID;
! _& U# U- H' F$ v3 v4 f) Wvar redInterval;) b+ i0 P" }4 V4 _+ |6 `
var greenInterval;% \/ k! x1 I0 z+ T# q K: z" x! ]
var blueInterval;
8 O3 a) A1 l/ t4 Ffunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
+ k g4 x; D8 V" ^{
" O6 V8 L5 M. E( T, ~ hoverColour = mouseOverColour;4 o: a! c* s Y i
numLinks = numberOfLinks;4 q. Y. G+ z# q# W7 W8 `0 C
rate = 1;0 A- _* Q3 e8 O" a
numFadeLevels = 30;9 _0 r# H2 B' J4 U8 V
function initArray(theArray, length, val)
# H7 s- C& A' i- n1 u" p {5 h2 C W; y' w1 u; f s# U: n' q
for(i=0;i<length;i++)4 }! {/ X5 O& f1 ?
{& b+ F, b: r4 A0 T5 N6 G. b. [3 m
theArray = val;
3 w3 @2 j" p' r; L7 k/ V }+ Q6 ?& J5 P$ P* w! I
}
3 k# K/ B: A( b8 ^! B- H bgR = '0000' + fadeOutColour.substring(1,3)1 {5 w- n* Q1 S) J* H( f
bgG = '0000' + fadeOutColour.substring(3,5)
# V7 H$ X( w# [/ o; h7 c7 Z7 e bgB = '0000' + fadeOutColour.substring(5,7)( Q: s4 R4 {2 ]7 s% c, V
currR = new Array(numLinks);3 u! Q+ Q# B& ~2 d6 A
currG = new Array(numLinks);
/ o- w$ @/ W: z4 i) G; n/ @ currB = new Array(numLinks);
. s4 v% t0 f3 |; l9 k count = new Array(numLinks);1 S w5 C) J Q
fadeOut = new Array(numLinks);, M: q5 _- n o
continuous = new Array(numLinks);' N9 U6 ?5 w, H' y9 T! o: P
newColour = new Array(numLinks);4 F0 o: S% ~' o* |4 E. v& O8 E
tID = new Array(numLinks);+ f7 C: f: x% X ^( [8 I0 @
redInterval = toDecimal(bgR) / numFadeLevels;
, B5 ^# y, g- |! B! o3 g2 a greenInterval = toDecimal(bgG) / numFadeLevels;2 a+ }* ?5 i ~$ ]' ^
blueInterval = toDecimal(bgB) / numFadeLevels;
3 y+ A! K2 i5 k6 Q( l initArray(currR,numLinks,0);8 }& M: m, y; J/ u9 }
initArray(currG,numLinks,0);2 d! a" M* q3 I, f, S3 i# x4 J
initArray(currB,numLinks,0);
! n' \" r& u1 j0 `% S; s initArray(count,numLinks,0);
) Y9 E" \$ o1 W# i' x+ |$ V; w initArray(fadeOut,numLinks,true);
) K3 Q( Y: q9 X: L* K9 F, u initArray(continuous,numLinks,true);3 p$ g& z9 ]+ O! _, M4 o# U! L
}
7 j: G8 o! @6 k4 _% r3 o7 cfunction startFade(id)
& F C {% p5 F# e- M{
5 k" B6 m/ {. z. T if(fadeOut[id] == true)
. J E8 x& {/ b6 v" M0 ?* S5 y$ v { /*move colour towards background colour (increment)*/
& f6 q1 ]6 ]. D( Q' F' x% b currR[id] += redInterval;
% G* r, j$ A* f" I) d currG[id] += greenInterval;
$ c; `' ^2 T: ^* f+ ^8 p' B: L- y currB[id] += blueInterval;. ^% m! V* i) `4 K
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 J" W% n0 C) \5 @4 E
if(++count[id] == numFadeLevels)0 m; t7 O- J" i/ ]6 s- G! V
{
, _2 C4 Z, K' K fadeOut[id] = false; r% ^% W8 X# a3 [! U, Y' D e' R' n
}4 V5 _4 M! X, G
}
' K% v3 d! f9 I7 g/ i; i, x$ ]6 ] else
' U2 |1 j- N- m: \: e {. m6 J' W3 k. C, b+ _& U; @
currR[id] -= redInterval;
& Y# B5 Q9 M2 h7 X! N/ B6 n
5 H7 r' F9 c9 ] currG[id] -= greenInterval;) x% Q: m5 D' I! Z- B
) w; q( {! C6 _8 e. L
currB[id] -= blueInterval;( ], C$ X1 o+ H. j. o, u# T. A- S" w$ z
/ i5 ~+ @/ p' [8 t+ ?6 R+ Y newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) J+ M# W. V6 d) O- a) @4 s
6 ]% q& r4 d) ?6 M9 i- P4 Z9 H if(--count[id] == 0)
: g, b" x/ r7 U: I( n0 H
/ u; |) c- F+ d' ?0 | {0 l/ o7 K" |* X+ b! u1 d& j. z' g
9 [2 W8 H, N5 c, b2 ^+ }& M
fadeOut[id] = true;3 E% m' j/ C# P4 I s: {
% n) }- t# Q2 r! `1 k }
: j6 a! o U ? j8 ]7 ^
* g7 t. A1 v' n$ p }0 u' s p0 U1 M! @4 v$ F: g: c n
7 }. d3 a& r& K' ~
if(continuous[id] == true), Z, H% W% M5 D3 b7 V
) L; h2 l& r- N7 O
{' k* U. G1 S3 x w. t4 X. f
( X' p( K3 ^1 m: W$ z5 b9 A document.getElementById(id).style.color = newColour[id];
5 w: E( }! x: Z. E' K/ y! n7 t& e1 |; a
}5 ?' j; J3 ~2 K2 p
4 N5 H O& W6 {+ G/ v! R else* z7 r3 y* q" {! r( V$ @
, K& W# t& }) Y& Z) @ {
$ L( x7 ~3 N7 |. w! w8 b# {
8 W( q3 l* M% o) r1 ? document.getElementById(id).style.color = hoverColour;! w6 m3 _; B4 J
3 A1 P4 t5 R/ j- x& g
}
4 V+ m- G# R$ M s9 V, Q- ]5 N, L
" A+ r' D c+ c9 p e0 i4 m& I clearTimeout(tID[id]); C; N0 f: ]1 H1 k
6 T& J5 \) {) B3 P& b" _; J2 T% r
tID[id]=setTimeout('startFade(' + id + ')', rate);
% d5 [% s7 M* I1 \+ U
& h4 K* d7 k2 |4 m& |4 _}' P; o5 ~# l) W) H. D
) G! o4 x0 p8 N3 U3 M# p
function continueFade(id)
8 U1 ]7 V# b! U) |
) C E! v- ?0 N8 [$ Y# K{
1 s* l. {; Z# F2 |# }$ N+ d( J5 b: f, I% {
continuous[id] = true;% Y0 s- {' E( s0 v/ H* s
2 K5 J3 t3 K4 S( v
}
6 S1 B1 `# E3 W( E8 N- P% R# j% ^' B" E( ?0 q# O# ?% b+ D j$ F2 V5 i
function stopFade(id)5 @4 c# d4 i: f$ U Q
+ a$ ~$ \9 A7 ^& L6 X& @3 f: T{
( N% ?9 o* h4 q( G* f/ |
1 D% I9 l2 j8 l5 Z continuous[id] = false;
& X6 T. f4 `1 t2 J9 \8 E& b' B
3 @/ Y$ `3 S" F: W0 S! T% s8 `}2 W( y( M7 e8 u7 i. D' |- t0 w2 J
; Z4 G/ {/ w4 e! K6 Wfunction StartTimers()+ |0 G, w1 c9 E, ?0 b& T
+ S/ T$ D- Q/ M( A! |& B2 C
{ //set up an initial set of timers to start the shimmering effect: `+ X2 b6 p5 P+ u& \
. e5 c2 _- w- i& M. B
for(id=0; id<numLinks; id++)
8 n3 f8 K- W* {2 R8 O6 Z6 Y( y/ _2 N/ j
{
, ]$ J9 t5 J# O2 t! _* j& @! N. o" \
t=setTimeout('startFade(' + id + ')', id*100);
, D" s3 _- \ ^( u2 |; S5 C' u9 j) M' W: Z! a5 @- O
}
, V; N. j" Q ]: Y7 w
9 N, y9 T, k! F, F( i}
5 I( ~& Q% o) s% b5 @. W* |) g4 N, ^5 P
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
8 J) k8 H; |) N4 m6 D3 q9 }. i( l( e/ p* s
initLinks('#FF0000', 6, '#FFCC77');
2 j1 Z0 V3 o7 p* f! x% z2 \+ S" H; s1 }
//-->) b$ M; }$ U0 o2 U. ?0 R
# O3 v% v( P: U
</script>
+ w9 k; I6 T+ x/ }# d& @<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
) I ~; O9 m+ L</a>
& o8 e7 ~% r- c y<br>1 m' @* v& c l6 p
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>0 @ ^" r( c Y% I' ]# C5 L
<br>" V- f$ P' z5 @ n: k! V
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 q" f J% ^: k* s3 ?2 g<br> ^/ G1 z( v2 S1 |' Z3 E5 m& i/ ^
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
3 J& x% l) B5 D0 }1 B9 @. s+ {( Q<br>
0 D, J1 m+ A/ n1 }0 \* i<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
: \7 f% R+ T3 _8 x6 r! f<br>
: k' x3 X4 P% Q6 k, P Z+ B<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>+ X' K' a. E- o4 } c# k
<script language="javascript" type="text/javascript">) }; G% |; n$ q% t: T, x* d4 k
<!--
' ^+ a+ o6 ]: m" @& a+ l" asetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering- W6 O, u& W% T i
//--># F7 O: [/ s+ w
</script> |
|