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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">3 r A9 s2 O+ A; w# P
<!--" s/ V9 w E3 ]1 M6 U; `' M
// convert a single digit (0 - 16) into hex
4 Y8 L9 a5 k" n/ u' Wfunction enHex(aDigit)
, C! g7 M5 ?1 E/ ^% ^{3 n3 r, `; r! _7 @/ [
return("0123456789ABCDEF".substring(aDigit, aDigit+1))( _0 {+ a- b' p8 D! |9 k2 ]
}
' I' @2 J5 h! E& k9 P// convert a hex digit into decimal
0 R+ ]4 F" |+ h* g) D( i0 Ufunction deHex(aDigit)* ?6 _- d, N% Q; s/ {; G" l
{
* X8 b7 {# ]0 g6 M return("0123456789ABCDEF".indexOf(aDigit))
3 X0 [* ?( i/ D4 P3 j& R( K}
! j, c3 \/ z1 z2 M+ A1 u. M+ j: n. R/ B5 w8 i
// Convert a 24bit number to hex& y! O) S* c2 r
function toHex(n)
( P. `# V9 K( h& e0 Q v{" B# A$ N5 c2 c$ Q" h& h( q% ` n
return (enHex((0xf00000 & n) >> 20) +
4 o8 N1 i3 n3 l; U/ ?. B enHex((0x0f0000 & n) >> 16) +
/ C9 v5 `; l, U3 Q5 M1 @6 f: p+ T5 Q' m enHex((0x00f000 & n) >> 12) +7 b" j, N* P+ `1 L
enHex((0x000f00 & n) >> 8) + `' D& y6 s b2 i
enHex((0x0000f0 & n) >> 4) +
0 A2 e. y3 n: l+ e$ B6 d& P enHex((0x00000f & n) >> 0))+ g: [/ W }' f/ l- H
}
; @6 o( a6 g8 f, ]" h// Convert a six character hex to decimal) T$ v7 Q+ w1 Y/ ~
function toDecimal(hexNum)
2 m4 p4 g) z* ]- A$ V3 A' t5 e{
! W: a! i3 W) f+ O$ J var tmp = ""+hexNum.toUpperCase()2 P. l4 W! c0 @& ^& n/ [$ L6 f
while (tmp.length < 6) tmp = "0"+tmp$ ^' |, l f1 L' Y0 X
return ((deHex(tmp.substring(0,1)) << 20) +. c$ H% u* z% |' p, X" J' U1 v; I
(deHex(tmp.substring(1,2)) << 16) + ( k7 F3 b% w$ I5 R
(deHex(tmp.substring(2,3)) << 12) +2 ?5 |) F+ t7 V* z, m! ~, v/ K% B
(deHex(tmp.substring(3,4)) << 8) +
& q/ P3 r, i K( Y1 o# K, t (deHex(tmp.substring(4,5)) << 4) +2 k7 I& i/ K+ O
(deHex(tmp.substring(5,6))))" ~+ m) V/ h' G. Z
}% S) F i1 j( m g6 ?
///////////////////Shimmering Links/////////////////////# z! m1 t4 _, x& D
//global variables
$ ?. H9 [4 q' o4 m V% o/ Zvar hoverColour
^% s% N* m' `5 t: Mvar numLinks;
. ?( ^* ^7 y: O( P0 ovar rate;
0 h6 B: h9 C* J0 H3 b2 Ivar numFadeLevels;9 D4 b. D! B/ i# i5 s
var bgR;# f, V9 _2 C I
var bgG;+ x ?( O H+ w6 x- O
var bgB;" j4 ^ A+ {6 @: P. l. u
var currR;
, l( _' R8 j# q9 svar currG; k3 \% C; D2 y4 b- |3 z
var currB;
: ]8 ~: s7 o' F: _% ^) h' `: Z+ lvar count;# v& A1 }3 {; V: D( X
var fadeOut;
1 ~ \+ F& p0 T1 @( pvar continuous;/ ?4 Z% e6 t* j5 F2 c$ f7 P
var newColour;) i4 ]& e; M+ O0 Z- T+ P! a% s2 W# e
var tID;' C8 k! @# K- O/ }6 h
var redInterval;
2 m. B! b( H; X1 D" ?: E5 lvar greenInterval;
7 j4 x4 d) ?. V$ {var blueInterval;; O. U$ S# Z" N* E- s) J c: B
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
3 x; K5 n6 [ x( S7 `% q7 m# c. K{
: P1 q9 O- s( E* \! n/ w% u ` hoverColour = mouseOverColour;
1 U$ m' K" P# j; |/ {: A$ u1 b numLinks = numberOfLinks;
- e! C# V5 X$ ^3 ]. O rate = 1;
8 m, o3 U+ f7 d" s numFadeLevels = 30;9 U/ r4 y9 I( L7 y
function initArray(theArray, length, val)
! X1 ]' M" q2 N3 J {
- w, H' G8 ]9 N* N- J$ k for(i=0;i<length;i++)
+ X* h! t! ?0 M9 N% o {
7 k* Y7 v$ N- Y p theArray = val;1 A6 L& _$ q* M% c* Q& {# f
}$ j( O8 Y' C, r) v' L
}
0 |8 p( u) {. P9 |6 q bgR = '0000' + fadeOutColour.substring(1,3)
4 a: L" \8 p; K3 x O6 ? bgG = '0000' + fadeOutColour.substring(3,5)
2 b* f; `1 j: @0 X! Q' n bgB = '0000' + fadeOutColour.substring(5,7). t6 V% L6 ]4 {0 _3 @; j) }
currR = new Array(numLinks);
6 D) r- w" ?" u6 D3 c currG = new Array(numLinks);% x# f% P" L) ]( ]" p
currB = new Array(numLinks);
, k" s; l- E- X7 a& |0 k count = new Array(numLinks);
0 d9 v! ]7 `6 b' A+ x! Q fadeOut = new Array(numLinks);# v6 D- X# S4 l5 j: r: c6 S$ y1 r* O
continuous = new Array(numLinks);: z5 Z2 }7 ?9 i$ ^
newColour = new Array(numLinks);
- G! h; V' i9 G% v8 Y( I tID = new Array(numLinks);
+ d& x1 F) v( b$ @; X redInterval = toDecimal(bgR) / numFadeLevels;& M; C$ M8 e( {$ j
greenInterval = toDecimal(bgG) / numFadeLevels;, @- g$ O& @: T- W0 T
blueInterval = toDecimal(bgB) / numFadeLevels;3 {' a) k# f4 [
initArray(currR,numLinks,0);' ?) B- g) B; ^) D2 ]7 Y3 ^
initArray(currG,numLinks,0);9 S# N9 F# G# T* c$ J u1 L8 h
initArray(currB,numLinks,0);
" ^4 H( X l2 ?. d) |/ c initArray(count,numLinks,0);
$ I' ~, j% K4 J3 Y3 S p3 n0 t+ F initArray(fadeOut,numLinks,true);
! ^7 u2 h! X0 F1 O initArray(continuous,numLinks,true);
/ [2 G/ L& u1 P" `0 V4 A}
9 V5 p0 q# y( t% T) p# k( ^0 [function startFade(id)
+ T# |+ d5 E6 f- @ k' m( Q{
$ z" b9 @4 ^) M1 [. y2 R2 d3 }5 { if(fadeOut[id] == true)
/ R( F9 Q4 G$ b7 i/ d' |0 k r+ Y- J { /*move colour towards background colour (increment)*/ c1 x, e( ]7 ^0 V
currR[id] += redInterval; ]7 V+ `8 ^, z- ^- e$ r
currG[id] += greenInterval;
$ x6 j8 G' X* L& m currB[id] += blueInterval;
5 B8 b }3 m1 ?' R newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 U2 \+ g6 i5 E6 L6 p1 s5 \$ R
if(++count[id] == numFadeLevels)
' G# t, C; \/ t+ I {: j: }, E; Y. i; H* X" u; N
fadeOut[id] = false;$ G- a: G0 f5 K ~" m2 R5 F4 y: M
}9 g& U' R& ~# N y/ {
}
6 g' X+ G4 q8 G0 ^ else
, G+ z) ?0 ^9 |4 m. y {7 \! a" [2 J: ^
currR[id] -= redInterval;
9 ?4 Y4 _/ v& V, o: {+ c3 {! g1 y3 ]6 ?" O7 V7 w) ~
currG[id] -= greenInterval;
1 Y* z8 y# f# t4 _" P) J+ d9 K* E0 D: @7 X, H8 C5 B& m
currB[id] -= blueInterval;6 G0 M; q3 R7 d6 g% q
' i8 m9 m) {- M; c9 {* R# u7 _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 R2 u4 L5 M% [& s8 X% s6 k0 z: E) c5 S" c
if(--count[id] == 0)
) a L, R2 e/ o3 R' C
( N. d! V) h. t5 h4 g {
7 o$ N2 G3 e5 i5 G' E# R$ x. N# g7 @& D2 F; q
fadeOut[id] = true;9 ^- F! X) h8 Q d7 L. G' m8 ?
* U4 B; ^- _$ E% `, ~/ u1 v3 _* X9 m }5 E+ G0 X4 W1 C+ M6 L S: a/ ~; G
: r5 c. o7 b# T, r$ I! u2 }
}/ W- S8 a f& W& C1 {/ ]+ t
8 O' g% M) m2 w; M$ n$ F if(continuous[id] == true)# i3 |8 s. T C- t8 R+ u( [
|4 ~! t- W8 m r {
; ~3 H2 @% S" m! k% M. a+ j' z. R" K# G9 s: q7 o3 v
document.getElementById(id).style.color = newColour[id]; 2 D! u, m. G! V
: `8 N0 i8 o& s) O5 e9 S1 ` }* l3 N0 T/ i9 C" F; X
- x& S- A* L- p- K' V else
/ Y" | s, x7 C* }( `7 q9 G7 Z+ |' B2 ~
. ]1 r+ k5 ~! d2 }* b; ?* R2 o. R {6 F) {7 k w0 T, k) a/ i
( X% c' u% Q: T2 F1 n4 m document.getElementById(id).style.color = hoverColour;. c }: S4 |! E5 R
/ y l* D! \; O2 z4 J$ h( _
}
% o1 X1 w$ K' d' L# V' D& b' B3 a# t) y- B5 y
clearTimeout(tID[id]);
* Z' L# E2 R( x! Q; z
! o4 A. ~5 M8 W. J tID[id]=setTimeout('startFade(' + id + ')', rate);/ y& c" ?! u! c/ m
( @/ X0 B1 @" w7 i( b5 P}5 m4 q+ {, ^6 o
t2 P) F! |. m* F0 a! b# Ofunction continueFade(id)
- N( Z6 s0 R$ ]; x6 C7 Y5 l9 L3 S" d% }3 X
{
. k! M6 P2 ]7 F: z6 p1 j/ X: _9 G" ]& g& O' t. s
continuous[id] = true;8 d6 b( i/ _# \5 s
4 M, u6 l0 X& z7 o8 V
}' l( I5 Z, n5 o1 a \
2 Q( _$ q. V9 d& Ofunction stopFade(id)
; T( m- A- S$ N
" q+ c$ a9 h4 N+ @* _ J o{- ^; Y1 h6 }# R3 S9 V& r$ S1 L
" a. P/ J" E o( N: c. Z0 r+ T continuous[id] = false;
9 |. l+ L; s* y+ R2 A* M" t
. P; {& {# _/ ?* c- k! R}
# [ q5 {/ ]9 R6 L' d" E
5 Q" w1 k; a4 ? u7 ~2 Vfunction StartTimers()
$ q# `5 c7 M# l) {$ n8 e8 y, l+ |8 U: u9 V6 g D2 L$ \
{ //set up an initial set of timers to start the shimmering effect
1 p& { p: A0 }( \4 ]- `
$ l# u" y' G% I' V0 s5 I2 g/ O for(id=0; id<numLinks; id++)+ \5 b1 `8 u8 R7 @/ ^. J
, D- s" ?2 }% h K0 L6 w: K {
~+ E9 q- k% b9 N7 k: M- v4 d
J' A. h v4 D# D& x) \* Q. ^5 q t=setTimeout('startFade(' + id + ')', id*100);
( q4 J* K) _5 P$ D, k) c+ T6 Y, G6 Q
- L$ K6 r. g! C% t# L. d9 S7 K7 C }
J1 R, R9 ]; j. s; \/ {3 |9 S# d8 i
}
! O. c) G8 q: s [) R" I2 W0 T
: p4 m/ I; N3 a! \& v7 O//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour') P/ S, @- u, ]" o* P9 e
8 l/ u% |/ z' u; U4 \$ x: [initLinks('#FF0000', 6, '#FFCC77');$ {( a f# [" F6 c( L9 O2 G
2 o1 ?9 t( S; c, o' J& J: H: [
//-->
# T, ^0 w `& \/ f
8 u" S/ C# s: a$ S$ ^$ P' A2 b+ R</script>
) g. E7 Q" v: s/ A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
! @6 s+ h+ p( K: i" [</a>
) K5 o' r8 ?" Y( r6 y( Y<br>% B) {: O3 K2 C5 v5 b
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
" g! H7 R r9 i# y, a+ Z<br>
/ s. c, N' m( ~9 I; J<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>4 l( ~- x3 |8 N
<br>
) u4 y$ {& ]- J' h- C, @<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>0 Q" D1 L0 R9 V0 t
<br>( h* c! k+ p* q H
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>. I/ x& N# N: g4 q
<br>
a0 ~$ f @% c' o x1 ~) \<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 O0 m/ Q8 w5 n
<script language="javascript" type="text/javascript">
) ^/ w6 W$ p* v' N& \- a<!--( g3 t5 l' N/ l I
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering& L# {% q$ v6 l* z; m8 u% s# ~
//-->
. I& ~! ?8 U4 i! m2 m</script> |
|