|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">) a# ]; R! U! B) Z5 Z
<!--2 Y$ f- W# P/ n" H. L
// convert a single digit (0 - 16) into hex
2 s( S' s# I- O: y% R- Afunction enHex(aDigit)7 B7 ~4 [+ N' g, g- ?
{
/ x8 a0 [. B# j( t) H. M# m, {3 L' O% P return("0123456789ABCDEF".substring(aDigit, aDigit+1))! ~ x" E8 v( |8 x: S
}
6 Q+ p( b* L& V+ w% E3 x// convert a hex digit into decimal
: y3 m1 J0 y4 d3 D4 Z, O' Jfunction deHex(aDigit)5 u" X9 q+ d* G' [0 y
{+ P# n) _9 @3 v7 }; M
return("0123456789ABCDEF".indexOf(aDigit))0 X) p: U7 @3 x5 B) D1 A
}
/ W3 A/ g0 N; N: M
& H" k, g+ X! A- W3 Z" l+ N// Convert a 24bit number to hex
% q$ \, V: L) A2 f8 Y- {4 Ffunction toHex(n)
) k" k% p7 O+ A( Q% R{/ q0 j. ^2 F0 l+ Q/ i' D( L+ v5 S
return (enHex((0xf00000 & n) >> 20) +( y2 q0 U! g( t) @; U
enHex((0x0f0000 & n) >> 16) ++ w2 Z8 _4 o2 @
enHex((0x00f000 & n) >> 12) +
2 H; p/ b/ F. z2 P, l1 B1 Z enHex((0x000f00 & n) >> 8) +
: ~) R8 Q$ i" n enHex((0x0000f0 & n) >> 4) + ]! Z% `, J* Y9 Z) p7 c* b
enHex((0x00000f & n) >> 0))
8 {: a6 B% U/ U( q# j}
2 q: n4 o/ f5 d6 v& `! R$ \, B// Convert a six character hex to decimal
. h" H' h: h# W% m; p9 @function toDecimal(hexNum)
1 g( W3 ]( `( g5 e5 l' O{; }6 b8 y$ b# n9 S/ d. }6 K
var tmp = ""+hexNum.toUpperCase()
; }( x/ U7 z# u8 n while (tmp.length < 6) tmp = "0"+tmp
& r. Y$ i! q$ i; ] return ((deHex(tmp.substring(0,1)) << 20) +
" ?0 a# @( D9 b* m (deHex(tmp.substring(1,2)) << 16) + / r! y* m5 h& s4 {
(deHex(tmp.substring(2,3)) << 12) +
7 ~( R: }7 E9 t% T7 t h5 E (deHex(tmp.substring(3,4)) << 8) + F- }) {3 p* E8 K0 ]& H
(deHex(tmp.substring(4,5)) << 4) +; L7 A& r1 w+ i! l7 u% t
(deHex(tmp.substring(5,6))))& e& D* C' B9 S! @
}8 y* f& t# ?/ z: `& ^1 ~
///////////////////Shimmering Links/////////////////////7 F9 B& c" G- I1 b+ E( V
//global variables7 h" z4 H& q8 z
var hoverColour
4 |' d; L3 p: f" Jvar numLinks;
8 Z: t# s9 _. k: Zvar rate;7 ~2 A* ~' F# D
var numFadeLevels;/ f- M# P7 \/ M* p$ r6 |, ~
var bgR;" C0 L% X. m$ m5 o j
var bgG;- C: K, H+ C% O" o" n( e, z# J
var bgB;8 w( d1 J5 L3 M; i
var currR;
& N2 K; m5 U+ r$ R Ivar currG;
2 I0 A' _! q' {8 _var currB;
; y, g' N4 L0 ^6 Z! N$ Xvar count;4 k" H# o: X" M/ }, P1 [
var fadeOut;
# H, K$ [' u" K' pvar continuous;
- I4 _' M) K/ p4 C: t/ jvar newColour;
2 l2 m; P4 u3 `+ yvar tID;8 K9 n g1 |) V2 l0 g, I& c4 l
var redInterval;
# t" X: ?0 ^7 }- y9 ivar greenInterval;) i5 L3 a- L: V- C) T' d" m
var blueInterval;
) @/ ^' ]3 F% U) X8 b# p/ s4 Bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)8 i* D7 T9 s$ z; C4 s
{' z9 o E* u' m- P
hoverColour = mouseOverColour;
" K. d4 e. t6 X' p1 Y4 @1 _" E numLinks = numberOfLinks;- d1 V; I0 q, p9 }& @
rate = 1;+ @( n: q% S- a0 O4 O
numFadeLevels = 30;7 n) `4 g( e5 Z) S0 ^; |
function initArray(theArray, length, val), Z7 B# }& ^9 |; j- c2 R
{& n1 S1 [7 |3 J& f7 y3 R
for(i=0;i<length;i++)1 F1 u; D- c) ~
{( w4 h+ Q; J) L) H% A _
theArray = val;
# ]7 n3 w* ^: Y+ b' r9 x }3 u: Y p- m( S8 Z: s. I
}
: H' J" i% x5 l. h, @ bgR = '0000' + fadeOutColour.substring(1,3)4 G! X; H# u9 P7 }
bgG = '0000' + fadeOutColour.substring(3,5)- |* _. M! m$ C& S, m
bgB = '0000' + fadeOutColour.substring(5,7)2 n. ^# E7 ] k5 w
currR = new Array(numLinks);! D0 C$ f' \' E* A# L: a
currG = new Array(numLinks);6 G9 \! T' y) j4 e( m1 ^1 m
currB = new Array(numLinks);8 r7 Q; D1 J. e; u J
count = new Array(numLinks);$ N, ]% R$ x6 P+ |: ?
fadeOut = new Array(numLinks);' r |( D/ t- ^7 W2 R* S
continuous = new Array(numLinks);
* F1 X* C L/ x; g newColour = new Array(numLinks);
3 O: {' }1 L0 t tID = new Array(numLinks);' b/ C+ L; x7 q
redInterval = toDecimal(bgR) / numFadeLevels;
7 v( e n# p6 H& P* d greenInterval = toDecimal(bgG) / numFadeLevels;# A- \( Q$ R8 P1 _) h2 ~9 a
blueInterval = toDecimal(bgB) / numFadeLevels;( ?6 w7 c* w9 @/ @4 i' t% {
initArray(currR,numLinks,0);$ U8 i( z; y* r; O5 w Z S: n
initArray(currG,numLinks,0);* T6 g# M0 _3 ?
initArray(currB,numLinks,0);
" f& v& I& G) K5 S8 g' P1 W initArray(count,numLinks,0);% t1 \; W- w' c$ _/ a
initArray(fadeOut,numLinks,true);
( m, U: P) {. G* J# B5 h0 f initArray(continuous,numLinks,true);
8 U( v1 e: Z: a4 {; M( M} ) q- S; V1 |' ]9 j& ^% q
function startFade(id)
8 J9 t- D; x2 [# O x# ]" ?. y" g{( Y g' u( U0 X
if(fadeOut[id] == true)3 g* I6 n1 @: i$ J: w
{ /*move colour towards background colour (increment)*/
& J. n, v7 o, F D3 _2 I% Z currR[id] += redInterval;
: C# z, ?; ]6 u0 g( ~" U currG[id] += greenInterval;
3 X; L, o7 [; n& z8 F2 L6 j4 ?2 e currB[id] += blueInterval;# l. M5 {* A+ R" L
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 ]3 P" I9 n% a) h5 Q- a
if(++count[id] == numFadeLevels)
% s4 H+ _6 b! m {; T l2 ^3 F/ v( f3 K. K% z) L7 {
fadeOut[id] = false;
( C9 i o6 l3 F; @6 q }
/ Z8 r# ~ i) m" S; S2 X2 Y4 a3 m }5 }1 _7 P- Z; k
else! n# x0 s7 s& W/ y5 N: S4 {
{& f, O. w/ [+ [9 Y- ?' f$ s, w9 x/ p
currR[id] -= redInterval;
6 t% E" O. j) U5 o9 I& A7 c5 T
+ \8 d0 d: {* p currG[id] -= greenInterval;
/ O) Z6 F1 b0 x% J! h7 j" \
- P; r, t2 d5 c( t# f currB[id] -= blueInterval;
6 e; g- X. q1 k; P
% c! c% ^/ R; [0 K [ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 l+ Z- _& z7 m1 U4 Z G1 P9 n
& U( S. S# a) u& L3 Q) P if(--count[id] == 0)6 N/ O$ G% E9 Y% p) r1 K) Z0 Q
5 B+ r$ Q3 _+ B$ B% O+ L- c
{
* ]: O/ L0 D/ i+ E
( z( d5 n7 W; |* t fadeOut[id] = true;
# N+ Q: o) K# A# Z& A3 C8 s) P7 }5 c- }
}
- w" ?4 ~. y F3 o6 D5 h0 q% [: H: \2 v
}6 q' x/ T% U5 `. d# ]% I" G W5 n
: R+ a+ n7 E; D1 \0 H8 B5 }% S V1 Y0 \9 `
if(continuous[id] == true): z; H+ w1 A1 S9 ^8 F4 |! A
& H# `6 d+ B- b
{/ Q2 g7 G2 T9 O/ N' v
0 c& p) m: i6 n0 A h: Q' X document.getElementById(id).style.color = newColour[id]; ; L2 O f7 F: T" ^3 \* S" ?
]0 g2 S8 _7 K. G4 f }
/ H1 W% a+ T8 \+ [- Q; K
) D/ }- Q. @, q; o- `3 \1 K else% A( t3 |2 o% R/ Y) H6 w
0 `1 q5 A0 f6 q6 p0 f
{% I# f* i3 ^ E8 C
% k1 e% R8 {% i) h+ S document.getElementById(id).style.color = hoverColour;0 h8 {# a( [1 d
. h1 [: s/ x, Y. O9 e }) n% c5 _( j; F2 `% t
; D1 u& @- m/ u+ \0 l clearTimeout(tID[id]);
" s; J% Y9 L. ]$ Z( i( M. g' i7 I; A2 I
tID[id]=setTimeout('startFade(' + id + ')', rate);, q# r0 e$ U* s" u! Z! ^$ e0 D) K
8 @3 G9 {7 Y) H. w; {}+ U$ J1 F- M Q$ J0 E2 O
2 l7 ]; v' D9 O) W$ J* j) Y5 j3 A
function continueFade(id)
# d- w2 Z8 R; R$ i% J( K4 \" _. X! U+ z4 L" `
{5 [# {4 g; R ?
3 R. H+ e) @% t" D
continuous[id] = true;
0 |# F7 g- Y; F( T$ s6 {
4 k2 x; c/ V$ l$ D; A4 p}
* m8 W# s: S& e3 g1 d" c" d: a' ~) O9 h* z7 ~1 n0 D! E% J
function stopFade(id)2 E" }3 _; M" W5 H1 n. ^& l
} G3 S% M [( B: d{
F# S; n; M! N L$ \) L! m% ?: g9 @( N" b
continuous[id] = false;* e( d1 J+ i) R+ Z8 C2 i8 e9 b
3 v& E4 X0 u) v) u) Z ]8 h
}9 R0 |8 }/ I* R/ i
. l& R9 h6 n% Z8 M$ ifunction StartTimers() b' g$ } v9 @6 d2 x0 f
( z2 t8 i& q. b8 R, C6 Y{ //set up an initial set of timers to start the shimmering effect1 e, |2 k: f. d2 n8 m/ N: y6 }1 q' h
; z/ Z/ G8 ?6 g7 w7 [, q
for(id=0; id<numLinks; id++)
4 n9 ]- R/ `8 j9 n2 X
' ^" {5 k' O. I# n" F* P6 ? { ^/ w; E1 e( t5 K5 v
/ ]; M* v$ q# o
t=setTimeout('startFade(' + id + ')', id*100);
' q% \/ p3 n# b) `5 E- W" ^4 ^7 k( g6 P* G* \" u2 `' C9 s
}% k& q9 X" X' {& m4 N' K
9 j0 m* S+ y: w}
, N# x6 ]- I5 l E9 p Z% U: y/ m1 r; @* k0 P
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ I, u y4 L3 C7 D7 B8 Z
' f! b- V; J. G& `initLinks('#FF0000', 6, '#FFCC77');" a% e0 W, A& V; Z+ C
: |; L8 c Y6 ?' ^% Y
//-->. I+ Y; e. U! x# {' y2 {2 S1 ^8 y
3 t( s$ V( q g% }5 q; N5 B; g
</script>
- o9 Y; z! ~& ~) h; p6 j2 D<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ n( W% q% Y7 K2 I+ S' ?7 s/ d5 ~</a>
+ n! \) R3 }2 v4 k0 J$ l<br>
& L+ I+ p9 v* h5 x3 s<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
@2 D7 b! I l" }& X2 \5 r<br>
5 S4 s1 V8 M1 G* B# x% x<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
& r& N/ i. q- |$ z; \/ k<br>
5 f! n# q& O( A* Y7 q2 e. y9 D2 o& G<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
# S5 ^+ G1 u7 o! @$ c<br>7 o9 M7 E1 e& X8 d
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>( i) l: \. Y; P; s, b! @
<br>. R O+ V5 Y, D) p8 A
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>9 ?( g* d; A; D8 b1 y! U: {
<script language="javascript" type="text/javascript">
( }4 B4 r' V" l {<!--
- Q) G$ c4 h7 TsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering f; }& R+ L# K) B
//-->
6 x! F, b' `( W j; w</script> |
|
发表于 2008-1-21 20:48
|