|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">+ v# U/ N% i# s0 q
<!--
E$ p( b& ?8 c: P' o2 a7 w// convert a single digit (0 - 16) into hex. {6 C. s, D' P4 O
function enHex(aDigit)0 M; l. ?: o- Z+ I( C+ m7 L( D% d
{! [$ Q8 G3 b" Z% G: X
return("0123456789ABCDEF".substring(aDigit, aDigit+1))* ~) r; w3 E0 H8 k
}) q* z9 A8 ]( A4 F0 f
// convert a hex digit into decimal
% |* T+ U) g; s. vfunction deHex(aDigit), M. M; P3 ] R3 F
{
l# [0 X( Z/ ~8 ~5 D return("0123456789ABCDEF".indexOf(aDigit))
' G) ~, ?' t3 L6 F1 x}
+ k, E' ]" F& q* i# j( Z9 k5 d% B' }( B2 J" q6 @
// Convert a 24bit number to hex
" ^: P* s! q: ]9 a9 n8 C% U7 mfunction toHex(n)! `3 ]% s# @; t7 U/ X1 v5 e
{0 k) W' W4 T) l# j1 s2 z
return (enHex((0xf00000 & n) >> 20) +
7 z7 K/ S* _( V0 H% h3 x enHex((0x0f0000 & n) >> 16) +
# M1 P6 F( H5 m4 F! S enHex((0x00f000 & n) >> 12) +
p3 S/ }( E# N) i, u# E enHex((0x000f00 & n) >> 8) +
9 A3 i% O2 x4 H6 z O; E1 ^# f. f3 n enHex((0x0000f0 & n) >> 4) +, t- V H* W+ h, e' s# H
enHex((0x00000f & n) >> 0))* q2 C' ]2 c) o
}8 A9 D, g$ k8 g* S
// Convert a six character hex to decimal
4 y+ `$ u6 K# J& Hfunction toDecimal(hexNum)
0 {, y0 p, A" |1 q& d5 t{0 q C$ ?( ~0 O& o7 [) u# A4 |
var tmp = ""+hexNum.toUpperCase()1 m7 B0 u6 p0 V- }+ Q' h. F
while (tmp.length < 6) tmp = "0"+tmp' O4 W' Q6 G6 u6 O; V: ]
return ((deHex(tmp.substring(0,1)) << 20) +- A. c$ R l2 X7 e9 |
(deHex(tmp.substring(1,2)) << 16) + 1 W* \- |$ @/ Z. v6 s. L! _
(deHex(tmp.substring(2,3)) << 12) +
# u" r" Q1 T0 ^4 A( O# s (deHex(tmp.substring(3,4)) << 8) +
# e5 }- r# o! z& O (deHex(tmp.substring(4,5)) << 4) +2 q$ C* N7 F1 |, P4 [( \
(deHex(tmp.substring(5,6))))) e! o6 r6 _. d/ \+ X9 {# M& U
}/ e9 A$ w2 K6 T- f! _
///////////////////Shimmering Links/////////////////////
" \2 A9 {) _. Y: u- s6 U9 ]//global variables
# O/ J. I: O# d h7 G6 H6 P& Lvar hoverColour
) j5 _$ z, T% t, i# Dvar numLinks;, p/ q' t+ }9 W9 y1 H! k
var rate;
* f% i$ u8 {) f& R D$ qvar numFadeLevels;* S4 Q6 I6 M# S5 y" @
var bgR;
w! g% A d( k6 T% Gvar bgG;
- P& \" F7 u# f3 {) Uvar bgB;- R# k* T# G3 | ?* l$ s4 u2 p
var currR;
1 x8 [7 H# e( s* T6 Mvar currG;
6 h& |. c+ f( U \) x U0 lvar currB;& w0 G& l( b8 O$ ^! e1 H
var count;. x4 E& W/ Z, _0 f5 R" V
var fadeOut;" k6 l( v- |; L- O
var continuous; |! t Y8 `3 V/ T3 [, W
var newColour;/ E& Z4 U Z ?/ a+ g6 w- z
var tID;" S/ r! F% U, y: h, y% ]
var redInterval;
9 c$ u2 s' {5 @8 rvar greenInterval;
7 K, i2 K: }# T& mvar blueInterval;
' v; V7 y0 d3 D0 R! l6 Wfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 d% X% s Y! I6 }9 T{# J) `# }2 i3 ~3 O/ r: Z, K
hoverColour = mouseOverColour;0 U" |9 t1 y8 y; ^1 _: ?0 ^
numLinks = numberOfLinks;
5 M6 H; _/ ~. x' U rate = 1;+ F- H* i# B: I% {, ~" s, m$ C
numFadeLevels = 30;
3 m6 F1 f% G8 o1 h, z6 J, `; y) T. m function initArray(theArray, length, val)
/ s1 J! W" W+ Y {
" g- E7 l" e9 L; {5 K8 L for(i=0;i<length;i++)
( N7 ^: z5 A0 z$ I" o {
% i q! m) y9 Q( u v1 l/ K& N- d, T theArray = val;
" y% c% U0 b. W- A4 t+ T }& g, n t: t% t7 s$ Z
}7 L0 u+ w$ [% M$ z5 H% F: A
bgR = '0000' + fadeOutColour.substring(1,3)% C4 c# s2 J$ K, H$ G, h2 n
bgG = '0000' + fadeOutColour.substring(3,5), N8 m9 {, Z5 s" \& \: U7 e" a7 @5 k
bgB = '0000' + fadeOutColour.substring(5,7)4 \% `4 L4 m3 I% z0 R% e4 E
currR = new Array(numLinks);
% G) u1 C& h% G/ n5 l6 M4 o currG = new Array(numLinks);
J( ]" d: ?; Y, @- y# f* D" y* R currB = new Array(numLinks);
( e9 A5 k" o6 s% N count = new Array(numLinks);
! }8 Y1 z7 n* ^# i# E( s fadeOut = new Array(numLinks);# N1 T7 J" K2 X/ a
continuous = new Array(numLinks);
! [0 a. ]0 F( E) k newColour = new Array(numLinks);
0 o2 T- \2 r* \8 d1 j. b tID = new Array(numLinks);+ H; I( E0 e1 m( x# @! K4 j g3 \ P
redInterval = toDecimal(bgR) / numFadeLevels;4 f8 k# B n4 T; ?2 [ A6 h1 b2 Y
greenInterval = toDecimal(bgG) / numFadeLevels;5 p5 H; H3 q0 O8 W: _8 y4 I6 k
blueInterval = toDecimal(bgB) / numFadeLevels;
7 G- ?, `) G z- D, l initArray(currR,numLinks,0);3 ^* ^6 m- b1 E& Q9 e
initArray(currG,numLinks,0);3 `% Y* c+ l @; v- d. f
initArray(currB,numLinks,0);
# O4 C% e" T- T& Z2 V initArray(count,numLinks,0);
. I" J0 ]/ g% [ initArray(fadeOut,numLinks,true);
6 c. @) V: x! s* |6 { initArray(continuous,numLinks,true);$ m8 C: t& u# `! V9 l+ b
}
( l* D/ z& U) w3 ~6 Qfunction startFade(id)
' q* q$ e" r( k( [$ U{
8 }' F, C0 q7 s I' G- z" c if(fadeOut[id] == true)3 q% [. p- ^5 ?, A# w) s' n) o
{ /*move colour towards background colour (increment)*/
7 r1 m) K6 v& V( b; P ^ currR[id] += redInterval;
, D0 P, ?: W8 L4 E W( E6 E currG[id] += greenInterval;
. K0 \+ B& `5 C/ ]6 ?# [5 ?* q5 ` currB[id] += blueInterval;
/ i G; W8 G r newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
; Y8 n2 p0 F9 x) V if(++count[id] == numFadeLevels)
3 y1 h3 \% w$ |2 l! W {
$ Z& C2 z4 o+ B8 X3 | fadeOut[id] = false;, y# k$ y$ {# Z2 u
}
# G( W: ~! d7 i& G- @( m( j }) c) X: z9 ]9 m( n6 T! O
else; O3 r$ F c; \% U
{
, c }! V% W* T! |9 X currR[id] -= redInterval;
8 H% s I1 J# \5 @& S5 Z# S* s6 j
8 H% _5 z1 |0 i! P |0 O currG[id] -= greenInterval;
2 v& T Y# N, V/ Q* z$ B0 ]7 ~
2 T/ f3 d3 A# n! V( R0 f8 M8 j1 l( N currB[id] -= blueInterval;) Y0 m/ F5 O8 G/ \2 ~+ k
5 T! |6 O8 g$ y) R, H newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- L2 M6 W6 d/ N: T( I# O
$ u n/ S4 a4 B. e: _2 G# z if(--count[id] == 0)
% _( n( a5 M* J0 P& t. m. d7 r4 Y3 G' Z
{0 C- I8 I+ X* `# S1 n' {
6 a$ Z' f& D' r, c
fadeOut[id] = true;
; x! w$ o* c* |$ y4 h# i+ o' o
& C- f) U2 d% t }# {9 Z6 T1 F1 p& J
. P& B* R$ _. X6 o& b: e A$ v }$ V( L" h9 f4 [# ]: i* j. `; p
2 Q: L; n7 m0 f. z
if(continuous[id] == true)( m: I3 G) D1 c% F/ @4 c
3 c& k) i/ \3 {2 V- f8 N2 ^
{# I8 d" q; x$ s: h5 B
7 k# M& W$ A$ x$ t
document.getElementById(id).style.color = newColour[id]; * T& k! Z9 y+ K2 A1 e
" M% ]: A7 E9 p. e }- l" z# h. m- [% n' s! a
: i7 k0 I4 J. @2 I/ j else% M! g, r, T# D2 y1 |+ b
1 M" E: d+ d( {
{1 j. z3 M i# Y
2 t) T" V; k+ o% k* S2 w; V document.getElementById(id).style.color = hoverColour;
6 k2 \& d- F. M0 u/ ~& }. @8 m* |+ v
}6 l. V( }/ e+ e( W
& w, i+ h& c: z2 Y# B9 c6 Q; I
clearTimeout(tID[id]);
8 I3 \, l. `( I2 g! s2 v6 S6 T* i# l+ e8 n
tID[id]=setTimeout('startFade(' + id + ')', rate);! x/ b" P" _4 {6 P# h" I1 u, Z
* F3 f9 d {: K# r}" k& w, i" h; B- ]: [
( L6 ~" Q2 u d# o; h5 X* B
function continueFade(id)
, q- d+ c0 S& y
3 }4 E( k6 Z: t, C{ ]0 U' [5 g. D- \# \( @% h t) A# d
9 H \+ b9 W# s# S i continuous[id] = true;
; V" y. g3 F6 N, T: E
" W8 ]4 Q- k& ]( S8 y. M}1 @1 p# d7 }: `. l0 r
2 A; |( N: y2 o6 L$ `0 r& G4 ?: o' |function stopFade(id)
& m* }% R$ T; Y/ k; ~* j2 j- U3 ^7 a) K# B1 H: w
{' F$ J- S* j; l& [* B+ u
# X& h- M1 C% o, M8 f# [/ t) \" }2 n continuous[id] = false;
& A; T& S: c& l: [ D0 ?8 U
. v. S! h7 W% S" g9 ]- c0 M) D+ H6 r}5 `) X ]) H9 X$ n7 w. t! V4 \
6 t! O# M1 ]4 Qfunction StartTimers()1 r8 l* c9 Y4 g( k/ c1 r
1 S6 @5 Y3 A2 R, S3 a4 `" [, I
{ //set up an initial set of timers to start the shimmering effect2 g- d2 F7 B0 o1 ?2 l! Z
5 N5 J0 Q: O0 b, E; u+ J
for(id=0; id<numLinks; id++)
0 |7 z8 ^4 i0 Z6 e- i, ?; h( ]; D: S# K7 _/ l& z. q9 }
{# V5 N' a0 g( p: A6 t: q
( T3 j y6 o2 K+ s t=setTimeout('startFade(' + id + ')', id*100);
?! {8 t2 O+ I* H
! x9 b0 P) `& B4 a }
( t" A6 m' t6 W" e" r$ N) n$ m7 \8 }% [" `# c- c! w
}9 E1 p. {3 p$ Z9 _! m; `
" R9 C5 A' o8 y, c2 M0 r/ ~$ P. C//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 \' |9 \2 V2 A9 y; l
7 L; c }' B* [& J" YinitLinks('#FF0000', 6, '#FFCC77');
8 u* P: A! |- s \2 X) [
8 }* m% a7 [6 @. f//-->
`; `- a6 S4 ]- L+ O% S2 @6 r
$ Q+ G5 P1 l4 r' L% i</script>2 F/ r6 I7 n3 z1 v: ~3 v# ^4 ?
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
' K2 w* w" V/ s% t+ d: [( {</a>
! w$ T" |; C' e, h<br>, H) D, @& A/ D+ I5 G1 ^
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>/ j, n/ t S9 ^6 {
<br>. Y1 W$ m% Z9 S0 h6 w
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
: P( j% G/ ~3 Y7 U' o& k<br>
; n% M9 [: [! l% g<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ \0 @. ]/ {1 I
<br>, }0 Z2 p" B* E% R% `* e
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>7 D& e0 O n+ ^7 D" j6 g
<br>
: y& H0 `/ s$ c3 C% H<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
, O$ l( f9 |, {0 y# @# F<script language="javascript" type="text/javascript">3 v/ b' U! U. Z$ L3 P
<!--
- S+ _5 P8 W+ v8 j4 ?0 }8 T1 o! ?setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering3 r' O6 E$ k& j( A' \
//-->
2 l( q7 `. q3 q* R</script> |
|
发表于 2008-1-21 20:48
|