|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( B7 u' g8 M+ @- }3 y( @( p
<!--
$ e% u" {) Z) m// convert a single digit (0 - 16) into hex& f7 X( a5 c4 q8 `8 s M6 a
function enHex(aDigit)
0 A' p- Y; ]* a. g) H5 o4 p{
( A+ ? H" ?2 w return("0123456789ABCDEF".substring(aDigit, aDigit+1))- L3 |* X. i. @- s3 y6 e4 \
}# Q* j, M, h9 D% j& j
// convert a hex digit into decimal+ a; R& M, V$ L
function deHex(aDigit)5 P4 O/ D& G8 A' j# N/ ~
{. D% i Y( e8 Y
return("0123456789ABCDEF".indexOf(aDigit))
' `& ?( ^. J( C4 u}
- s' c6 ~) l7 m0 @ P/ i# X* B* {2 Z4 D" D/ t
// Convert a 24bit number to hex
6 V7 i$ Y+ a' E) @# cfunction toHex(n)
5 c) | k7 \, _+ ?5 o$ G{
* v. e6 W: Q3 [2 t, R# X( [8 |' G return (enHex((0xf00000 & n) >> 20) +0 Z4 v2 q' m1 Q# D
enHex((0x0f0000 & n) >> 16) +
6 w A, s' I. G0 U8 d8 A; C& C enHex((0x00f000 & n) >> 12) +
! t6 f4 ^ A+ e8 V5 r9 | enHex((0x000f00 & n) >> 8) +- R' p/ Z' d- d9 Z
enHex((0x0000f0 & n) >> 4) +) R T+ r* |7 g" o
enHex((0x00000f & n) >> 0))
% F- k' l+ s( Z% Z+ d- Y' R: ~}4 i- G3 W2 c# b, z8 H
// Convert a six character hex to decimal
" [; l' E1 j5 V efunction toDecimal(hexNum)
; l* ]6 @- ^6 ?) e1 A5 L: n8 ?{
! L( ^0 n! w6 H$ O6 u& \ var tmp = ""+hexNum.toUpperCase()
5 f7 R7 U8 L- x2 ~# @ while (tmp.length < 6) tmp = "0"+tmp
) E! u6 X! y+ z return ((deHex(tmp.substring(0,1)) << 20) +! B; p' c% C- M, s! X- I8 i. J x: k& V
(deHex(tmp.substring(1,2)) << 16) +
- \7 \% N+ ]- x/ J (deHex(tmp.substring(2,3)) << 12) +; c8 i( s2 O% }3 g9 @# I; G! z$ z
(deHex(tmp.substring(3,4)) << 8) +
( Y9 Y+ s& f8 Y9 v9 f (deHex(tmp.substring(4,5)) << 4) +
' b3 `% z3 C, W9 |7 Q (deHex(tmp.substring(5,6))))
9 j* |1 ?5 {' l) _, B0 H: \}
4 U7 p# T3 y" R9 q* }2 e: A5 {///////////////////Shimmering Links/////////////////////; w0 i+ T4 Y1 E4 E9 M+ K( B
//global variables
% _( V) k8 m6 s# [3 {var hoverColour( V& A/ N1 w' N3 {" O$ }$ L" j
var numLinks;" X+ A S: d% J5 \& [
var rate;
- ^* Q% E! n; }5 y0 ]var numFadeLevels;2 r$ t) U' g1 g5 w
var bgR;8 m) L6 a0 d4 D) g8 h
var bgG;0 Z/ P5 L9 O/ u2 x* w4 n7 }( X) |. a
var bgB;& L/ z" J0 f* K
var currR;
0 g6 h' g7 a% i( ~! @% f+ Jvar currG;
3 ~3 ~6 H/ [: T! _var currB;
5 D" z& P0 K. B% X$ c" m: J& p3 L% Wvar count;
4 d* z9 j# |7 k+ u: pvar fadeOut;/ @7 ~' ~, Y0 G7 l2 e* \1 \
var continuous;
/ m- E l. i: }3 E1 _ w4 uvar newColour;; a6 A. F$ ]+ b, M, j) u6 c6 v
var tID;
& u- C( D6 d' W+ D- Q. _5 _var redInterval;( ]! @, G8 E: U, F5 U
var greenInterval;
4 y- Y0 x; M% t6 bvar blueInterval;
o: i; D1 a/ e( }8 C# dfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)1 u: I# t u4 o% ?
{4 R, o' ]$ |, l7 V7 M" q, T, M( L
hoverColour = mouseOverColour;
- X2 c- s7 i1 p numLinks = numberOfLinks;( u3 u( j* [* @) a
rate = 1;" E7 i; P5 K# j4 }
numFadeLevels = 30;& C* J7 q; T: l5 P6 G
function initArray(theArray, length, val), J. B: M4 u1 J+ `+ A9 D! b% u$ _
{
: n2 K7 L, G3 c1 }- h: o for(i=0;i<length;i++)1 k3 D! l( t e* i
{8 R8 h( M& n/ S6 L$ W$ x
theArray = val;% r8 P! S) b f; F' M- m
}
! {1 C% ^1 |. m# _, | }
1 j; C; p0 I ] bgR = '0000' + fadeOutColour.substring(1,3)
1 W! X' q; ]6 H. h bgG = '0000' + fadeOutColour.substring(3,5) K9 R6 t& V1 p/ |7 Q0 ]' {) S
bgB = '0000' + fadeOutColour.substring(5,7)
1 d7 k6 z5 k) s7 H currR = new Array(numLinks);
$ J' R: M; q! O/ ], I% ?+ c. t currG = new Array(numLinks);
+ f4 e/ ]. c+ }6 |& h$ @$ T1 d currB = new Array(numLinks);
0 V" d2 N# S' T" P) @ count = new Array(numLinks);( b2 e9 i; D X0 k: c8 \
fadeOut = new Array(numLinks);
9 t" w1 {, D, X: s( y! ~! { continuous = new Array(numLinks);1 p! a8 c" ]& g3 p# T. p" @$ ?
newColour = new Array(numLinks);9 J! J- V& |2 ]8 F0 W
tID = new Array(numLinks);$ G: j0 g% r" w/ R, R
redInterval = toDecimal(bgR) / numFadeLevels;
9 Z/ z6 K. @7 [8 V; h) r greenInterval = toDecimal(bgG) / numFadeLevels;* F! b9 m. M; \' J
blueInterval = toDecimal(bgB) / numFadeLevels;
, a6 R! l7 b) g2 L2 F initArray(currR,numLinks,0);) r5 x6 i+ u; |% V0 f
initArray(currG,numLinks,0);
' h1 t* O$ F5 H initArray(currB,numLinks,0);5 `: a+ s1 F* p+ W. G5 p2 C1 @
initArray(count,numLinks,0);3 _, ^: n/ A0 G
initArray(fadeOut,numLinks,true);! Q* p, g- _: z9 i: E% p
initArray(continuous,numLinks,true);% ]2 }) o/ y+ L( K, X, D. H
}
! u1 u. G2 a, p0 Ifunction startFade(id)
! c7 w( y) z( y5 V \{3 _1 O8 L7 K$ m+ Y/ r3 I. f2 L; N
if(fadeOut[id] == true)
! w- }. z- n/ ?4 v- l, q { /*move colour towards background colour (increment)*/
. s% x2 o8 Z9 S( Q/ s& H3 b. J currR[id] += redInterval;
% {% ^' F7 n2 n7 ]* y currG[id] += greenInterval;5 q4 {+ T7 W9 C$ Z a& {' w, J
currB[id] += blueInterval;
* D* a3 Z* Q1 _. q' C" j newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( s X7 G: z. |! ] if(++count[id] == numFadeLevels): K' A9 Z! l2 v; j% }* Q$ _
{( @ ^: b; t; z
fadeOut[id] = false;4 ^* y0 h0 @6 v9 \1 A/ y
} A7 C6 |: o1 M; I* w8 A
}
, L: i& m6 [3 ], t5 J else
2 W8 S# D; t% _6 K* F {
0 c+ C! y1 T. F* j+ L currR[id] -= redInterval;+ w/ q4 L+ m2 W/ w& z8 u& B- d3 ~
* s( r" f0 ^: w, Y @2 f; D currG[id] -= greenInterval;9 e4 w$ y4 Q9 k( ^8 c
2 K" z( j* |7 O# ^; c7 M: }* h
currB[id] -= blueInterval;7 [- z+ g: R0 `# j; c
( o6 [5 V; [7 l. }- W. W8 W
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 B4 l( F1 {+ _; ^/ m! H$ \& m0 I! r. K! T7 C1 }; k7 k: Q' S/ k; o4 b
if(--count[id] == 0)
" q& S* U5 Y2 Z3 j h( y z8 X; X$ n& ^, L, Q Y& c8 C/ D8 ]/ t
{
& a2 n6 \2 Q& ^5 S1 v1 U% x! V7 q. y, [2 u/ d
fadeOut[id] = true; E1 b' E( r+ [& Y! @0 Y
9 z/ @8 l: A2 s1 U1 w# a0 X }
" k1 X$ H* u5 m* ~) R% A/ H/ g) Q' J& N3 k! l
}
# N+ G V6 q8 x, R3 ~8 n! j- g2 h- a
if(continuous[id] == true)% ^* w9 Q" A9 ^8 @; p
! z! z( o1 a! q$ Y) _
{
7 _8 H" {& m& U7 a4 m
6 [ m3 A( o5 C+ B6 {: c document.getElementById(id).style.color = newColour[id]; 3 V5 y; A6 y/ N+ o4 @
+ {" R- ?8 H7 H$ b' J }
2 l8 I1 R/ ?/ @. j" ?. T
" ~/ {7 m; f: ]: C' Y$ G1 M0 c0 b else$ A+ {5 t& X, K6 e
% V. a8 R( g1 h: J& C* i {( L+ ~! w# X) f) ?
( q2 V# ~5 f( Y7 u* r3 W document.getElementById(id).style.color = hoverColour;
5 ]7 g; w' q; w! |% m W. g
& p) x/ ~& u; [; W }
3 B/ v0 `, d" G* ]& Q, X0 f) [1 A3 ~5 `* \( k1 I2 t7 _+ x
clearTimeout(tID[id]);
; [1 B: y$ h* y a5 f
! m, [- P/ H. N" }) P tID[id]=setTimeout('startFade(' + id + ')', rate);% o) s' I; u: f& J6 X; {' \
) q4 H# H8 l( w3 D5 e1 k}
' @. k% P/ w# T) z
D4 Y$ Q0 Q) \+ ~( S1 xfunction continueFade(id)+ m9 T. Z/ g# f) w% k$ p# v
: x1 N% A' T# y/ \+ U7 J{. x5 {" G. ?* L. }- F
* j g, ~/ J( t0 k& F/ j! d) A$ T I continuous[id] = true;' A7 T( t$ R3 U. V5 ]$ T$ ^
/ h y$ E/ o8 j5 l5 L# S}
/ O/ I/ G8 P, u {1 J5 ?
2 |$ L% M3 o6 |. H# ~function stopFade(id)* a' v+ q0 E% I* b2 O" T
+ F. o* U* Y8 J2 i- [% I
{* J9 A/ ?0 ~+ M; N" Q
1 W8 [9 y! Q! I$ s( [: Z continuous[id] = false;
8 U8 u3 t* k. ^% }6 ]0 |8 Z0 o
- C8 S% y; h# M! ^+ L7 J}
$ a8 a/ Q+ a) B) p9 A" K6 ?
4 }- e7 g1 F; B. A( nfunction StartTimers()
4 ^: v# @& D2 f B4 r# x' L, [0 M& B
{ //set up an initial set of timers to start the shimmering effect
5 c1 r! N+ ]6 \" M! S3 O& k3 |- i) e) u" k
for(id=0; id<numLinks; id++)) Q3 `! y+ k9 o: H1 Y/ \
- O' @" }9 o0 q$ v: ^ {
! i8 _8 G5 g& h+ x0 ~* A& N. G8 Q* F+ I# m- c: T
t=setTimeout('startFade(' + id + ')', id*100);+ M; Q* t. U* l
7 {& P- ^+ V% d8 P9 J. A
}% p2 G6 {( `" x. ~9 M; D
( Q2 U5 i4 W' F}$ y3 ^$ a" _* [% m* E
: s; K/ k# j) _; t
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
7 c3 }- _& @4 ?1 w. w/ r9 `8 z h# y: z: c n
initLinks('#FF0000', 6, '#FFCC77');# }" n5 H/ c' m/ R2 a
~ s8 d/ U. n! T+ C
//-->
* s$ ?8 ]7 N4 ~! |, c
" ~0 g- L5 O& v" X s</script>
% L( z0 h' A3 U2 J u7 @2 J; S+ D<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ ~" R+ u4 G- s0 r8 {</a>3 W& ]2 c5 ?: T+ g# O+ R/ {
<br>
5 J; j; @- d- ]0 v; n<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>: r$ i, R( N3 c0 {- B4 N/ m
<br>' c& u, Y% B4 N1 E2 ^
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ p: y) a& Z- N<br> 4 v: N) d, ]$ e# ?
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
- k' U8 K) X4 q) K4 N<br>, w$ H& c" r& n' Z; m3 I* B% y' ~0 g" z
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. j$ U4 d# g; k) o8 S4 x) Z' X' i
<br>
# \- @- _' O4 r5 w! L6 E; u<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
2 l1 K) z% ^8 F6 C) @0 Q. s<script language="javascript" type="text/javascript">$ K7 K. L( \$ C5 l4 v% r* p6 E
<!--
$ v% u/ a! Y2 X# s, bsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
! U" ^! N: q& \1 g7 V//-->
5 D% s! ~7 i c- N: j9 ^4 n' K</script> |
|
发表于 2008-1-21 20:48
|