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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
7 c- ]# ]* d/ h% C<!--
/ d0 k: s. m ~3 R4 k// convert a single digit (0 - 16) into hex' f/ C! I! n; L8 |4 w) ^& Y3 L8 [/ A
function enHex(aDigit)) B& g" X: d; P$ P
{+ t$ |6 x: A1 u# `
return("0123456789ABCDEF".substring(aDigit, aDigit+1))3 V5 p8 ]0 Z, _( }" `
}
. l% l' v% U: S9 ~// convert a hex digit into decimal
9 [0 q3 w: q6 H6 }) N% u+ Wfunction deHex(aDigit)
( q0 Z8 ~( g6 T7 b+ r1 S{
7 {# i0 F; c( [# o/ ^) o return("0123456789ABCDEF".indexOf(aDigit))
9 Y2 h7 T3 T( ?}
. c0 a, |; U" z' l
$ }4 l) t& K* F2 Y0 V// Convert a 24bit number to hex
7 [' _9 b0 d, i. {4 X, M) t. rfunction toHex(n)
* H7 w9 L; \3 j& G{
1 a' Z2 h# q1 {' _4 i return (enHex((0xf00000 & n) >> 20) +
, c5 a* Q2 w, f( f' m) z enHex((0x0f0000 & n) >> 16) +/ \# @; h" p4 d, ?3 E
enHex((0x00f000 & n) >> 12) +
' d/ _8 t! { T9 g5 T' C- ~+ V2 } enHex((0x000f00 & n) >> 8) + u5 N4 d( i% ~" i% `2 j+ T5 L1 V. |
enHex((0x0000f0 & n) >> 4) +! y3 {! N5 }8 V% M& A* g! D
enHex((0x00000f & n) >> 0))* H- V0 z$ N1 y' V
}
! y) e y2 h+ A- A; s// Convert a six character hex to decimal4 P( j* J/ i# c' V
function toDecimal(hexNum)
& S% ]1 k+ S F{9 h2 t+ e* S6 j! b
var tmp = ""+hexNum.toUpperCase()9 m& n4 A2 Z, \% f6 c
while (tmp.length < 6) tmp = "0"+tmp
' A" F1 y9 v. S, g return ((deHex(tmp.substring(0,1)) << 20) +. y5 S. z2 }* P
(deHex(tmp.substring(1,2)) << 16) +
: |& P) y. K- p4 I (deHex(tmp.substring(2,3)) << 12) +8 s( s B9 K- V8 L* T
(deHex(tmp.substring(3,4)) << 8) +6 t% v9 t# V7 K' O' z9 P) e$ t
(deHex(tmp.substring(4,5)) << 4) +
2 Z" J4 G/ y, F (deHex(tmp.substring(5,6))))+ V& g& ^, a( R% F: S+ x; R: M
}
% w1 d6 T$ j3 L. }7 k4 @% x///////////////////Shimmering Links/////////////////////
) O. m& M5 l+ I5 K. t3 k' P//global variables! |! }2 p5 A1 w: Y1 k
var hoverColour
& }% f6 ~3 B3 n" Z+ d Vvar numLinks;& q {' A& n! ^9 e6 V; G
var rate;
: f1 e) k, @; V N7 X9 r: Pvar numFadeLevels;/ m: V, w* B4 g+ A3 Y& M2 M/ s( _
var bgR;
% R; n o# P+ c) m9 @var bgG;) f( J K/ b6 [ S5 `
var bgB;
- R7 U5 ?. e# |) svar currR;
" V( S6 T& N/ |var currG;5 p3 z5 v( g* _+ R( n
var currB;
7 c1 d/ R0 H5 y+ ?8 B# a3 u8 ?* Evar count;
0 g$ {. j \5 {5 \: i- Uvar fadeOut;8 Q! V& L* O9 k2 K9 t
var continuous;8 E* q9 h/ P6 a' v
var newColour;1 H6 |, w8 j! ?; {9 v) f0 ?3 a2 c! I
var tID;2 t( }1 J E9 n( y4 g+ z
var redInterval;
: K+ y( t( f* m, ^0 G; tvar greenInterval;
1 m( D/ E3 v [5 ]+ Mvar blueInterval;
5 v0 v$ j1 l) {! H- Ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 [# G6 k6 Z5 t. o{2 O/ E1 |) O& B6 `8 \" Q2 d
hoverColour = mouseOverColour;
+ B1 a/ o5 a' K. d* P& @" ? numLinks = numberOfLinks;2 k0 h& ~2 R8 i
rate = 1;$ B/ M: B2 @ r! _* A
numFadeLevels = 30;
2 U4 Q: K$ u, a7 M) D& n, m function initArray(theArray, length, val)9 z7 ]% S t; I$ I2 ~, H
{
" }; [9 r( _2 e& u, W9 x( p for(i=0;i<length;i++)7 s/ ]; C* ]8 c7 p0 o" V) n$ {
{ h# J" ^ F" V M$ p! z8 H
theArray = val;
8 M2 e) S% Y* t8 N9 n( J }* J1 Z7 G& V7 l* e% d, F7 F" ^* C$ }
}
1 ~& g J* s+ a' a5 @5 m+ L bgR = '0000' + fadeOutColour.substring(1,3). y2 _8 a" ?; [
bgG = '0000' + fadeOutColour.substring(3,5)! c( ^: s! u3 E( ?% P
bgB = '0000' + fadeOutColour.substring(5,7)- F; l, F i9 Q7 g2 B$ j& V
currR = new Array(numLinks);# z' q& c" ]+ R: ?
currG = new Array(numLinks);* o( s4 u5 r' b
currB = new Array(numLinks);" x- a0 j* w, z) Z- Q
count = new Array(numLinks);0 m- X: q8 b6 f, X! b! @
fadeOut = new Array(numLinks);# q0 J* f+ l! M% p& G8 R, l
continuous = new Array(numLinks);, e. R- T+ m5 t* r/ \
newColour = new Array(numLinks);7 O. s: |+ {! b9 }
tID = new Array(numLinks);( p$ f5 W* K5 s$ d3 v* o1 R
redInterval = toDecimal(bgR) / numFadeLevels;
4 g6 O5 |+ x0 Q+ n7 } greenInterval = toDecimal(bgG) / numFadeLevels;, o, p4 H9 L) [: O3 N! S
blueInterval = toDecimal(bgB) / numFadeLevels;
" Q: p( [) E+ `1 w initArray(currR,numLinks,0);
8 l' w! n! }1 O/ G2 W& g initArray(currG,numLinks,0);
/ l6 ?( G) f- u* R+ U3 q initArray(currB,numLinks,0);
6 | j5 Y/ o) s initArray(count,numLinks,0);, v: b3 T* l2 S! C s* t
initArray(fadeOut,numLinks,true);
0 ~& D: w: |; U+ h+ z initArray(continuous,numLinks,true);
9 q$ N' M" i' |% J1 h4 i4 P# f+ D}
- Y6 K* Z6 A: i0 q( k& Q8 Mfunction startFade(id)
- T) w; Y* ^7 p0 y2 {' l0 U% P{
0 H4 w7 P9 K: ], l2 b* C! J if(fadeOut[id] == true)
/ n6 ~2 P4 z' [ { /*move colour towards background colour (increment)*/
U3 Y) T# _7 @9 s/ P currR[id] += redInterval;! S2 E/ D1 M8 P( {( ^
currG[id] += greenInterval;6 \& v, R3 I' t3 y! W, g: h2 h1 Q1 h
currB[id] += blueInterval;8 I3 b+ I+ ~5 E" I
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 e( t. B8 q. Q% E ? if(++count[id] == numFadeLevels)
/ n( K, c% U) ^8 E {: d; P5 u [8 N
fadeOut[id] = false;
$ l( u) L8 W: J }# J) _# T' T* H+ _6 N! k
}
3 J9 ?* P* x0 Y, G5 u) \& G else9 u4 N2 l" m+ Q. Z5 G5 b
{3 u, @- u7 M4 ^7 B5 [
currR[id] -= redInterval;8 j+ _0 o \8 @$ O
' X8 B6 H$ i* }' A5 u currG[id] -= greenInterval;4 j3 i# d8 J* w9 J( Z* O. Y
7 ^. t, K& Y& B" E) q7 P currB[id] -= blueInterval;' C6 p% a) P2 ^6 _" [
; T [& q, `- X5 w newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- L, l' e! W6 y) N6 G9 v+ w
( k2 I5 J* F- m7 A9 p+ r if(--count[id] == 0)
8 _, D& ^3 [0 o% B- L* o- A
$ a3 Q: @7 q0 U {! S1 l8 M* G* g+ L( i
! I: x0 }2 s, f+ d$ b fadeOut[id] = true;
1 P5 w0 A. | [) y
0 ~2 x6 _7 x( A }$ T$ u7 G; Y3 u8 o, I9 J2 p# }5 ]
0 G8 m8 U! B, r3 W4 ^2 \% q
}9 _6 _6 F0 m6 @ W, I
2 z! d2 U9 _& i X* y if(continuous[id] == true)! h' L, W$ Z' | W( o' Q5 H
# r8 G. i) L7 `8 k
{5 ~, ~# P8 {& V* W; H* U% z
) O- C; [4 Q% n e6 @. X
document.getElementById(id).style.color = newColour[id]; ! l. ]/ T2 }4 v
& `9 T O) H1 b6 O/ ] }* Z1 e% t2 _. G, q5 `- A! Z
, T: t/ h9 k! c. H% u9 D else
3 R8 k p6 z5 K: E7 k. ~/ E0 G/ m7 V4 [
{# w: H3 o X2 ^$ Z: n4 V) ?+ x
/ R* o& N$ H4 d9 t5 Y
document.getElementById(id).style.color = hoverColour;
6 S9 N% _+ L% r# |
1 F- P( n( Y- j. P& a( J2 p! T) h* f }9 h+ l2 s. ~! Y& @% M+ k. \
4 i H/ h! c% F; p X0 D( r6 f$ k clearTimeout(tID[id]);
2 h3 Z+ l* s* o' f: Q. {" C/ c" f! e$ z- t" u0 z
tID[id]=setTimeout('startFade(' + id + ')', rate);5 b2 M2 x, Y6 z* q; X5 z
) s- M2 I& H; H* ?2 C}
, |: e* h' Q q O, n1 I( w/ C1 M P& J2 S+ {; n
function continueFade(id)! `" b. T9 M( X7 `0 \" ]
# M9 [3 d0 T* ~% l
{7 ~0 i p9 y$ c2 a/ x! L8 x R
3 ]% y. p. a+ \) B- B! {4 D { continuous[id] = true;
I0 [8 {: u0 V3 ]% P; l
# `. a! B" H- D6 t* O}
" r: W* H" x2 ]% S3 r' s j+ c2 ~$ Y$ E3 o! C% N) L
function stopFade(id)
' Z5 H8 ]' ]2 P5 M7 E d) W$ k, {( ^/ i) O
{
! R+ n; \3 H. _5 j, S6 U
: ~% f: h2 q( W1 q1 n continuous[id] = false;
2 Y, X. u- }7 {! f, Y( w7 j+ H1 u0 k# a8 x7 m4 Z G6 D. H9 K
}
6 ]4 D6 l* o& F3 O! X7 u7 D; H5 @7 \9 O5 Y
function StartTimers()
' T; G- j7 V0 J) k2 P/ s$ H+ Q- m4 H ]
{ //set up an initial set of timers to start the shimmering effect
9 W i- E/ W/ a0 X6 ]- h2 c& J w8 g0 H& g! X1 S' D
for(id=0; id<numLinks; id++)
+ E4 v& x* Q4 z* y, T
* H# P( k5 w: a( H* V9 |' H7 R {
6 O6 L" f8 f7 }/ D1 l/ `5 S; T) R# E
t=setTimeout('startFade(' + id + ')', id*100);
# t; ~3 F( a8 W: _1 K6 i6 T+ H) j5 S: i* i: p( K
}
& P- w# Y! b+ Z- ` A1 E% Z: K- O7 n
}2 B# Z( W1 d8 t2 @9 \/ X, ?( f
, s, ^, `5 l* i) | z//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
4 t% y5 o! `: @9 g
8 H9 M; {) f: o( _initLinks('#FF0000', 6, '#FFCC77');. m! S' b& W7 \& ` ?, u
5 B. {# h) f( i3 `
//-->+ j' z* Y7 b5 ]. g3 y! }* e
6 R3 J* M# l6 A8 _. O2 t# ^
</script>6 L6 E' U9 t5 d1 I
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元3 O( j9 I) G. r" q
</a>" u, V6 ]# @: f3 u, s P
<br>
& H k/ S& G) v/ p! P* Y' _<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
( v z2 s+ l( D7 H' c! s/ h<br>/ P/ O: F/ j# _ [/ l
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>0 b5 P. c5 x: B$ N
<br> 1 Z% P5 \0 |9 C( g9 V2 d) t0 ^
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>! E' F4 e9 H* {1 m2 _" f/ T2 D
<br>5 ~( _* T, `" @# x
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>0 n4 d! {" M S
<br>
7 G+ r9 \1 y% I2 }& E1 X& W<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
, @( \$ p, @7 [<script language="javascript" type="text/javascript">9 h0 f8 K3 h; k" s, W- G
<!--. z- S; G* t' O; z1 i, d
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
& }0 Y* Z8 G5 k- ?% p- c5 \' g//-->
. m9 A Y a: c( F: Q7 K</script> |
|