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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
' A! Z3 G1 {; O6 D( ]% O<!--7 [: \3 M. D' F$ [) f, U2 L; }
// convert a single digit (0 - 16) into hex2 C8 I/ `) @0 {7 q
function enHex(aDigit)
! q) v# Z8 M. W& F{
, }' G) b4 A- X3 J& x return("0123456789ABCDEF".substring(aDigit, aDigit+1))
- u# c! i3 M- W/ H- }, d}6 Q* ?% H# f$ `; V
// convert a hex digit into decimal/ Y4 ]! x3 H6 Z" z
function deHex(aDigit)
0 _$ I, L) f4 }( N4 K3 Z6 w; q/ @{
9 T: Z3 Y$ q; s# R* i3 t7 F return("0123456789ABCDEF".indexOf(aDigit)). n" N! l% A1 g3 u- }$ Q$ m% v
}
9 r1 P% ~5 @& K4 X) I9 x# V
2 o; d, v- W' o* Z9 N// Convert a 24bit number to hex: ?4 s4 B8 t, X0 o
function toHex(n): q6 J* A* F- w1 @2 z* R
{% I: b* `5 q5 Y8 B; T7 p% A
return (enHex((0xf00000 & n) >> 20) +
* C) w6 c" _, \+ U0 b; a( b/ F$ R enHex((0x0f0000 & n) >> 16) +2 a. @9 L: Z: p4 `7 y% k' @
enHex((0x00f000 & n) >> 12) +3 V2 ]! r' s! `; j; g1 k
enHex((0x000f00 & n) >> 8) +8 o: ~* }/ T% u# Y
enHex((0x0000f0 & n) >> 4) +9 z& E! d* t, m* ~
enHex((0x00000f & n) >> 0))- k8 Z1 ^8 D1 D) Q! }+ d0 ^2 [
}
) I5 }) L/ W. L) j// Convert a six character hex to decimal$ z# L" R& M( y( O3 E
function toDecimal(hexNum) Z; M3 `# S$ V1 I8 I* G$ y3 h
{- Q& M M; Z) V0 W# n7 z4 b2 n4 C& s
var tmp = ""+hexNum.toUpperCase()# l4 M9 M* n/ o
while (tmp.length < 6) tmp = "0"+tmp
4 `+ _' E. I$ }+ }, P return ((deHex(tmp.substring(0,1)) << 20) +5 a7 t. a$ `3 w" w
(deHex(tmp.substring(1,2)) << 16) + ) e" N% k3 ~) M2 M A
(deHex(tmp.substring(2,3)) << 12) +8 _; _1 j# {- T0 G
(deHex(tmp.substring(3,4)) << 8) +( }1 r8 A( ^2 @- \2 ^0 Y( D3 Q
(deHex(tmp.substring(4,5)) << 4) +
: O7 w) ^; L5 ?2 T% @ (deHex(tmp.substring(5,6))))
" H. C0 l! h/ Z$ A+ x$ r}
. V P' s0 O& c4 |& D: v* \3 ]6 }///////////////////Shimmering Links/////////////////////
+ R4 c1 C9 E8 O$ G& v( V" f0 q3 ~//global variables
' x3 x9 S/ y a; { `5 I% Z8 O; t' Avar hoverColour
6 y2 U+ ?2 w. C6 u _$ K5 z+ z1 Ovar numLinks;- }! C! k+ j2 r7 ~6 ]+ |
var rate;0 c" y) V# W- a
var numFadeLevels;; J! u8 e- j( l5 ]! ]
var bgR;
% m' v. z; v: evar bgG;
+ ~# k( |. q: z3 X1 evar bgB;
8 L7 \& w9 T7 P+ Kvar currR;$ b9 f0 [# N7 N
var currG;
B5 W% h9 E3 t, n8 Hvar currB;
% z. r4 m1 G8 N7 ~9 S3 Y& o/ ]: Nvar count;
9 S' M0 V g2 C0 t' u7 fvar fadeOut;
3 Y5 h* \% C9 l# |8 svar continuous;) u( J0 f- K g2 v+ y/ L& J* @% G. G
var newColour;( g; i# |9 a5 Q5 T5 B) b B R
var tID;+ D3 x1 S! e$ E1 w
var redInterval;
! d' n2 R4 i* R5 Vvar greenInterval;
7 K; u# ~$ T6 R; T! A# Jvar blueInterval;% {* K K( q7 w8 s7 w/ C2 j
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)0 K: t; b: N; l$ ?- I* r# S& h
{
+ c9 g. u4 j! r* _2 W V hoverColour = mouseOverColour;
3 E7 |3 R/ H# l2 t0 n numLinks = numberOfLinks;+ a, X% a: S. V: W! V
rate = 1;
$ u2 L3 G) j- V7 W( E9 h% R, T numFadeLevels = 30;
+ t$ @3 z, f/ g. d5 Z: c; y7 \ function initArray(theArray, length, val)
3 y! c" Z" ?: q' @ {
1 C3 X: l7 b/ V3 I for(i=0;i<length;i++)& w- m4 ~, D* E, F
{$ P& A1 N( V L, c8 L
theArray = val;
9 N6 R' n+ ~- k# f }
4 u# q0 {; Y) B; f0 y9 y# ?) n8 k2 ` }6 ~1 }) q1 p8 S$ U& k( L$ A
bgR = '0000' + fadeOutColour.substring(1,3)' x5 C/ ~' ~( d
bgG = '0000' + fadeOutColour.substring(3,5)
9 z+ }( L6 j O& A bgB = '0000' + fadeOutColour.substring(5,7)
) i* k {; S- j0 L$ _ currR = new Array(numLinks);# d* g0 Q+ T" w3 T; I! i$ n
currG = new Array(numLinks);4 `8 O, G$ U* B( t( Q& E
currB = new Array(numLinks);
1 T9 k# |# L( G/ [4 u8 f N count = new Array(numLinks);
c# W; T- |0 s# a6 m( M" j fadeOut = new Array(numLinks);1 X( Q9 h5 Y. [7 i- _
continuous = new Array(numLinks);
2 n1 K6 F$ N& A o, J newColour = new Array(numLinks);
: }) B( i) M5 n4 f1 M1 H$ j8 x tID = new Array(numLinks);9 {. b- Q' ?% `0 R
redInterval = toDecimal(bgR) / numFadeLevels;
/ w5 e' Y s4 J* `; a greenInterval = toDecimal(bgG) / numFadeLevels;
u7 \) \$ ]6 Y9 t: [ blueInterval = toDecimal(bgB) / numFadeLevels;
( F+ b4 W$ S. o% _4 v* B: x) _6 G' H initArray(currR,numLinks,0);
# D, G& r3 f/ G5 G: A n5 [- s initArray(currG,numLinks,0);
4 e4 w& n* ~2 i" F# r( i initArray(currB,numLinks,0);
0 W: t4 D- h L initArray(count,numLinks,0);
, a6 F( [4 R" t' @5 U initArray(fadeOut,numLinks,true);( q- Z5 X, M! u; k
initArray(continuous,numLinks,true);7 m. l8 c9 }2 ?
} ( N( G1 Q2 E- g! p9 t( T! w
function startFade(id)
% h3 Z8 ^. A k0 b: @- M{
1 |2 y- `5 E# G# J if(fadeOut[id] == true)
4 Q9 U( C! m' e { /*move colour towards background colour (increment)*/
- }4 a/ j! `( F1 m currR[id] += redInterval;
. m! H2 q6 M4 D; W currG[id] += greenInterval;
! [4 [, K6 @9 M9 k# ^ currB[id] += blueInterval;
1 a" V+ z3 a5 K9 r d' D+ ?1 S newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);% y& A- J }, K9 n6 m7 u8 [
if(++count[id] == numFadeLevels)
) E$ I& F' F6 n+ U8 w; N/ F" S+ W {
4 Q9 R) T1 Q: L% M, f1 e9 {; r/ n fadeOut[id] = false;
9 p7 v+ E; q( m* V. _ }: ~9 x5 X D7 y8 I
}0 y# [) s1 R f3 Z
else5 F1 A6 ?) T! K7 L% B1 s; E
{* X }+ w! ^( v1 O6 s, W6 ^8 b2 |
currR[id] -= redInterval;
. h1 m! P5 F+ c3 s* g" s. X. u# ~" f: j
currG[id] -= greenInterval;
7 o) {5 [% m# t! U, n0 l4 b6 ?; l w! r! n) o, R+ o
currB[id] -= blueInterval;3 P5 }) N9 Z% x+ j
7 c1 f p9 O9 v4 J newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4 e* [* E( z7 b, [6 T4 \
$ ]* ^) ]2 m/ |+ K0 k
if(--count[id] == 0)" q* o( Q8 `" R0 e
- r" n, M, ?& T: g' R {
7 F1 I9 o; Y4 u7 G- F e4 K, F2 ?% [: h! E6 N9 X: k
fadeOut[id] = true;
! y, W3 F: d- d, Q4 I% S9 E' w7 D2 H; C" A
}1 A, a* x* Y/ p5 u! Q* z
& A" ^$ f! g* v/ y' q2 N }- P, U! q! N' z6 `$ A' h
' ]% v& L8 W4 r# i, o: p, Z T; U
if(continuous[id] == true)$ O( o% i2 b' x7 s2 k6 e% @
% I; b/ U1 d# _) J: S
{. \) p; O L, w
& ^# }. @' S7 T! s+ [% v7 f1 R. j0 K# R document.getElementById(id).style.color = newColour[id];
8 z. }; m& D) f0 Q. A( V4 V) a9 @8 W9 ~
}) g% N6 q& Q) G5 x8 j
) v, p' d) K! h/ G! s$ k: `) H else7 B: j# n* m3 [0 Z. U# H) G! d
5 N% J$ p' _, n9 N% Y# ] {5 G9 ?7 O5 s4 z4 { o, S1 Z
6 ^( J* N- }! i- @2 s( v) K document.getElementById(id).style.color = hoverColour;3 p* e2 j' S& h# m4 `
5 q! n- q- B% u1 n- m
}
; }, R8 f$ {) ], _6 Q% X& ~
0 W9 O# A W" z9 h% m" M: I clearTimeout(tID[id]);
! H% l$ t! E( b! p9 ^0 _
, @( h" z2 ~0 F: e% }7 d' y tID[id]=setTimeout('startFade(' + id + ')', rate);
0 ?# d) ?- a; T) y$ R
. h( x. V8 b. r}- L" Y% r8 c4 y0 J
' N8 T( u4 {+ M# P0 T" Rfunction continueFade(id)
( i% y! W+ V6 n; g: i8 q- }! s3 K) F( c/ `& b9 r' l
{
0 D; v5 q/ w, d" S4 T5 t$ D+ D2 X7 d* @) X
continuous[id] = true;0 _' M1 m1 g3 }: ]* v# S: u4 s
* ?, r3 S( T5 R# Q* [2 s/ M
}
2 w0 y' G/ }* U/ ~$ p& [6 Z
! i) s) O: T: t) v' e) G* Hfunction stopFade(id)
. Q, v8 U% P. j6 \: _( P+ } I# Z! N: b. x! C
{
) c+ B' o! N5 s7 C1 K' I5 ?' e7 H' ], B% w8 W: Z ?+ n
continuous[id] = false;; a/ w" P$ @: T; m* F5 Y6 V
) S; h! B4 L: C* E- s5 e}
8 p' V0 g7 T- c0 j; r1 ?, Z* b% Q# y) b; R/ O) k6 b' G. L3 W1 D9 w
function StartTimers()
c! \+ {8 |7 Q. b2 u; ]1 M; d8 w2 E. e) q
{ //set up an initial set of timers to start the shimmering effect. t2 H; W( c! J# e( F0 {+ U7 f
$ A9 A# v6 ~/ s( F, E$ a4 @/ S
for(id=0; id<numLinks; id++)
5 }2 u& z% B$ n" B' v1 d" u( S8 N7 H. t& c# Q
{
3 z9 E' |9 J5 W) s9 Q. F
+ }; K) s: \* \& W% V I t=setTimeout('startFade(' + id + ')', id*100);9 c9 D6 m9 a9 r5 b( u6 j3 |
( T- d1 m. I3 `7 K3 n: ~7 q
}6 U5 M3 g9 @4 t3 B7 f
0 j4 d4 M6 n6 _; z$ I+ L* M}+ N1 @9 ^1 i3 n5 B) V* Q5 R: n: D' O
4 c {6 o4 l* q8 T//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')# b/ |9 W, N6 f2 R$ ~
' T# \8 X1 b* _3 l
initLinks('#FF0000', 6, '#FFCC77');& Y6 b7 M2 y' E; ?, q
- [( B7 l) E/ p0 [+ F
//-->8 p* W- P7 ` H- G9 N
( ~. w( q7 ~: r+ @# z. H
</script>* q- Y3 X( n6 x. {4 o
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元) j1 E, d: H5 C" f! z: P/ V
</a>5 h( R5 b( }3 B1 Y' K. `, M
<br>
: |& |0 a6 |" v! z<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
- W" U3 B7 C% h1 _8 d( X) k6 E8 r7 c<br>( v+ n2 w" o$ k( w
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 \1 d: S R y) {" k' N: |- z- ~<br>
; m7 J, g: _% N4 h<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>4 D8 E: P% r1 O! e
<br>
: G4 E8 `% @" _( k% M4 E) R M<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>6 U5 q w5 D: J: ~( s3 \
<br>
& O, o$ W' e0 |9 [ m x8 k P6 Q+ B<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( }, u" P" F4 g# D' r
<script language="javascript" type="text/javascript">
6 f5 c8 C0 {% d<!--
j/ t3 ]0 B) k' U" E6 D. KsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
5 ^8 Z4 o1 Q- I- D' x4 L F5 S6 x) K//-->
# u/ q+ d9 N/ ^</script> |
|