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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
; j" P+ Q( T, h1 D& R& Z<!--7 m; _! C& f4 t
// convert a single digit (0 - 16) into hex
+ U; D) d) n0 dfunction enHex(aDigit)
7 R# Q6 o' j& C" b{- ` z. P( m% n' f
return("0123456789ABCDEF".substring(aDigit, aDigit+1))1 I' \4 n ?# F" U% u9 J
}2 Z A! B- m6 d1 Y1 B& D
// convert a hex digit into decimal
j! z9 }: I# Y& ufunction deHex(aDigit)1 O+ O' A! R) p: ^2 H9 q0 a8 T7 C7 Y9 T
{( Z. [5 \+ D; H
return("0123456789ABCDEF".indexOf(aDigit))8 A: ~) N& C) `' Y' [" {3 j6 z
}
5 @# G$ @" Y+ R6 h2 K1 m4 A+ I
- p5 [9 R! T- w// Convert a 24bit number to hex
; Q/ u8 ]! @! r' Zfunction toHex(n)0 E2 J; Y4 s- _! B
{
4 c4 U2 A. \8 w E6 Y* Z return (enHex((0xf00000 & n) >> 20) +
, @8 S) o1 A u+ w/ w4 l$ l6 i enHex((0x0f0000 & n) >> 16) +
/ M: h' Z7 |6 Y5 X; z7 \ q3 K& ~ enHex((0x00f000 & n) >> 12) +
5 @7 T5 y6 v, ^. `& ~* N7 Q) {7 U# I( t2 @ enHex((0x000f00 & n) >> 8) +
2 Z. P) N; r% ?% Q% }7 [# X6 l enHex((0x0000f0 & n) >> 4) +
/ H4 C# a0 d& U# N- k enHex((0x00000f & n) >> 0))
) F$ O7 G N; \$ r- p$ H}5 R/ ?7 m, y/ x! }4 a; Z+ v. G1 P
// Convert a six character hex to decimal
- Y& {; x" F5 Yfunction toDecimal(hexNum)/ L9 V% b! L7 ]9 [+ C% u9 B: h2 O
{
/ F I& J% x2 X4 L8 o var tmp = ""+hexNum.toUpperCase()
: ?" M" ~& B( m4 i# t1 }1 {' J! M5 T* A while (tmp.length < 6) tmp = "0"+tmp& c: l6 @ j9 k0 w6 R
return ((deHex(tmp.substring(0,1)) << 20) +
$ H6 g! h6 U7 R( f- D (deHex(tmp.substring(1,2)) << 16) + 4 {" ]' w: g" X" C4 Y0 g
(deHex(tmp.substring(2,3)) << 12) +9 [2 Y' |5 a8 m7 ^) h; g; ]9 @
(deHex(tmp.substring(3,4)) << 8) +/ b6 D& ^% e% l1 W1 ?3 ~
(deHex(tmp.substring(4,5)) << 4) +9 g4 [) i) Q9 T! n- |8 ?. ?
(deHex(tmp.substring(5,6))))* `$ ^7 |& q9 S' ~- ^; E) \6 X
}
; _$ d4 K4 @- r6 K///////////////////Shimmering Links/////////////////////- H7 @2 m$ T7 g6 }5 X
//global variables l6 @/ n+ U4 j. E& z- O" E2 D
var hoverColour
- z6 @0 W% ?2 Xvar numLinks;
8 D+ U, }, l) R5 \9 Wvar rate;
* I/ e( D' |3 n: u- i r5 Fvar numFadeLevels;) x+ X* T/ w9 o8 ?
var bgR;
/ g; B, E6 K( B7 c0 q7 N4 I; Rvar bgG;& I6 ?; C8 }* `; k
var bgB;
5 T* h: M3 V+ M6 o2 T" Evar currR;
, H5 T& ?" Z2 U4 Jvar currG;. Q3 ?6 H. y% \
var currB;: D- D2 N& @. V. @
var count;
/ e' b: D9 H4 s% U. p+ l8 n8 Uvar fadeOut;
2 Z! c S# c2 P. c% O0 q! c& mvar continuous;/ g5 F5 }# s* z& S. S
var newColour;) K3 t, S) _# _# @, U( ]- B
var tID;
# [& r1 L) v/ ^6 g) ]% L( ?! Qvar redInterval;4 P6 I$ `6 V8 F
var greenInterval;/ z Q+ _( _3 _3 ?3 P/ p( [9 q
var blueInterval;$ D: j" C7 _+ s7 G6 O6 K4 g* C$ v
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
2 S% [3 @/ F: l j) I{: t: a7 b" r; ~! w I: a
hoverColour = mouseOverColour;
- d: L1 T5 u" b; A+ G% ~ numLinks = numberOfLinks;* u$ `0 G+ `" Y- C. m8 S
rate = 1;
; ]# V8 {3 @4 X: c7 u numFadeLevels = 30;4 w: w8 g. S" ?
function initArray(theArray, length, val)
) O9 | K( Q* x* a3 |: n {, }; R) r M7 c
for(i=0;i<length;i++)
2 k- z' u/ w# P! {) M {: u% ?2 B2 k( n) P
theArray = val;5 J! C2 d. c! T! J/ l
}
1 e' ^5 ?$ {, v; k5 N! F2 S }( z# |0 q6 d1 T. j9 ?2 ]# @1 q
bgR = '0000' + fadeOutColour.substring(1,3)7 x+ ?' v8 h0 j4 A6 D, `3 t1 ~
bgG = '0000' + fadeOutColour.substring(3,5)1 L2 Z8 L5 W/ T; `+ ?0 n {8 w
bgB = '0000' + fadeOutColour.substring(5,7)
+ o) @: ?$ |+ H$ b2 Y currR = new Array(numLinks);2 ?: b# ~( [# v Z0 D8 L
currG = new Array(numLinks);8 r- e$ x2 f* @0 x) _) I+ u' P" [
currB = new Array(numLinks); D. I: _ S* Q; a/ r- ]
count = new Array(numLinks);8 @$ E( M/ y& L; \8 n$ F9 k
fadeOut = new Array(numLinks);# C/ s! Y2 s) p- M1 t: I0 x% H
continuous = new Array(numLinks);
" ~6 ]) M3 F1 T# k" O newColour = new Array(numLinks);
. h0 L7 l# f9 [6 e7 i2 ~0 \" K7 Y0 H& K4 T tID = new Array(numLinks);9 y7 i# P. s: o. Q0 u4 `$ @' ]
redInterval = toDecimal(bgR) / numFadeLevels;+ k+ f4 O$ p J. A% E6 m
greenInterval = toDecimal(bgG) / numFadeLevels;) a% |- \( T6 B8 W2 K E/ K" k
blueInterval = toDecimal(bgB) / numFadeLevels;
( G! |" @" R0 L ]7 n initArray(currR,numLinks,0);
0 M8 S9 y: c3 L) G initArray(currG,numLinks,0);
# T& K" S1 T# `. O! y5 e initArray(currB,numLinks,0);1 E' e% p5 v: \3 u O; k; |
initArray(count,numLinks,0);+ G6 k7 e# J3 N* U' l% O
initArray(fadeOut,numLinks,true);5 g) Z# {, y; y6 p* S! R7 g
initArray(continuous,numLinks,true);
8 c2 G+ c v: x5 f% Y2 P}
& ~- L3 f! O) Ifunction startFade(id)
# Y! {3 n# b& a{
. w4 t- t+ S0 U2 ^4 {0 w" ^ if(fadeOut[id] == true)
( t) V; C a1 u* Q) h; r { /*move colour towards background colour (increment)*/3 J0 G6 i6 S/ t0 }! J* u
currR[id] += redInterval;
0 Z, T8 {( G/ n! `+ T- `* @& A currG[id] += greenInterval;+ y, |4 K+ Y E, u f% }
currB[id] += blueInterval;
( U; {2 C2 h3 V+ q3 B newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: l P3 a# m/ E+ y* G
if(++count[id] == numFadeLevels)
- [5 w8 L/ W, s" B0 W6 G* c {3 }7 A. v- C& O4 r
fadeOut[id] = false;
0 Y+ E" X( E) D# `5 _ }3 ]. e5 P4 ?6 p/ P
}/ Y% s& F' a5 e _1 {1 z- X
else
, t2 G% ?3 c ^0 R {6 j! [' ?# \* K4 ~
currR[id] -= redInterval;
$ ?) u6 }8 \6 w" F- O4 M+ q7 v. ]& `* }5 E9 @
currG[id] -= greenInterval;
1 _: v+ e4 H# D: B, ]7 s0 L% n, n M$ m2 Q6 R5 ~
currB[id] -= blueInterval;7 `" {) `, ~- K9 s& X
4 u/ \3 o1 W/ n( Y% ~0 F newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
' k- ~4 | Y9 P: ?1 {/ o0 P v1 ]& j- H
if(--count[id] == 0)
/ i1 M6 ]1 j8 X/ l/ V8 X% k8 C$ A! G8 B& M$ J5 @3 T0 t5 n
{
( w" B- h8 M. R0 b. Y+ D' b- P+ H* T4 W6 m* W
fadeOut[id] = true;
' q$ l6 T3 X/ e! X% K( a/ U; T' _5 F- P* G1 b
}
; n0 c. I! O5 r: B+ M8 H0 Z1 ?6 _
0 Z2 d7 \$ m1 p" @ }0 k. W# ^1 Q' _
1 K; P, M* F6 g9 a
if(continuous[id] == true)7 k. ?7 W% d% ~
N+ W# l1 M# r {' r! b: |" J0 G4 C: P* S$ x' P
9 ^) j V/ |" I' L! e document.getElementById(id).style.color = newColour[id];
5 n) k( }# M9 S* z$ x9 s
+ ]8 [3 B1 m- b1 j3 _1 F }
2 [/ L4 A; j! \& E" v. F* K* g) q0 ^% Q: g8 P; C$ k$ K
else9 b p1 I7 W, R* I+ T' K+ E
) e. Z" ^- L; s" r$ B {
$ s' V v! C6 Q& E' \
. O# [0 W: Y/ v4 w T document.getElementById(id).style.color = hoverColour;! G! O6 u2 Y5 `( r. z% Y
$ w+ E5 |' I8 m5 C/ J' [4 O$ K
}) y2 I1 } v% l& l
+ P$ ~) }# a# h: A% j+ E4 j9 ` clearTimeout(tID[id]);
! ~' D$ p2 s& B
7 s5 |, M& l; @ tID[id]=setTimeout('startFade(' + id + ')', rate);
8 g+ n Y: Q3 g7 Y6 ^- q' i& W3 s Q
0 W' k" U$ C) B! u0 P7 o* Q}
' f4 [" T+ m" w: u! T* z7 |- Z" i l# h1 e: E
function continueFade(id)
" R. N; z1 X5 b
, G) G0 I4 Z& ]! P) h) t: L5 G# g+ V{
. j! P. b8 ?3 g$ p6 k
- U# M% C1 v3 W Q continuous[id] = true;
$ n3 ?! e2 I3 V4 I1 m | v& O N
8 `$ ^- R! Y, Q$ ~( g4 Y! ^) b}! q* v9 l% @$ b
b7 ` n* L) P" A% I3 ?
function stopFade(id)1 T0 j2 Y0 _7 X" p. j3 P8 G
y# m$ p# \1 U# u
{
6 ^6 R1 p8 P1 {2 t. P. v7 v" B
7 g& }9 F/ t' ] continuous[id] = false;4 O s# x) H* J& w. k5 V+ e
@- k F: m }. k o}
- M; x* ~2 a0 H. f3 Q A2 ~: f9 V. E$ n
function StartTimers()
: A( x+ w# F! N# Q# H( E' O" G- g
: M# p3 } U$ F& Y8 O- d{ //set up an initial set of timers to start the shimmering effect
6 t# E( q$ @1 F/ u
7 y; Y4 W/ y* z8 `" _ for(id=0; id<numLinks; id++)0 p8 F$ P, ]. E( d3 J- \ |, P
" e5 ~5 Y# H' Q
{
0 X9 G+ d- g# g7 }; ^. t( T! u. |6 Y) r& z+ \' J& J
t=setTimeout('startFade(' + id + ')', id*100);+ t' c9 k+ D4 N- k; C5 S
9 G1 w1 H5 I; b }
W2 P3 P8 r5 E. d+ t3 c
7 E$ A0 ]: {# w: O; ?% |}
6 w, t" |- m6 I" C9 f A
9 Y- X) p2 m, |6 N//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')) ~9 ~+ Q' C, F9 a
( H, C$ r m' M: U' i. `initLinks('#FF0000', 6, '#FFCC77');1 o9 I# p! f) X1 k5 V( I
4 t5 d; n# u9 ?) x
//-->) G9 f. D; A I% P( c4 m, k" ]9 u
c1 I+ \. _! ^</script> e1 ^' B$ U+ Y9 ?- H$ N* M
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
% _ j3 }1 N- T5 v- C4 M! h+ p2 p: _</a>
( j( \7 m9 R9 g q<br>' `, W2 e, n3 Y
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>* i! h6 q# K P! B Y, h. H
<br>
( ~$ i/ B) l/ L+ E2 V7 E<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 k% i0 T- L6 J2 N# G<br>
4 E% m. O1 F d5 ~1 @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>: u" S9 F+ ?' C- N
<br>6 @! H+ j5 Q% @1 a# c- \
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
5 M; P& l/ C4 A. u1 _<br>7 y5 V7 O0 k) m8 \# u( ^! |
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>" _: k& b) z5 u( F# t2 f; ~
<script language="javascript" type="text/javascript">
+ k9 j: g: Q2 i<!--' J" @) o5 L8 N; h$ E0 W
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
, O) d& U% q, {$ B* g0 w//-->
( \+ ~/ J+ V. K5 P</script> |
|