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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">/ _( E& F# r' g2 X" M
<!--
' d- n: f8 x7 O- A8 l, ]// convert a single digit (0 - 16) into hex3 h& @7 U* @0 p C! ?
function enHex(aDigit)/ g5 s6 J) ~) Z1 w
{3 \2 v# f9 B' A0 I- f3 u
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
, [, J. u, w' J1 r}4 l' s0 ~: @/ F
// convert a hex digit into decimal5 _ V. ~7 c8 w6 X" Y
function deHex(aDigit) e% ~! ~' R0 g& x" L" ]! x
{
+ R+ A/ |( C4 b( E) S9 {9 d* y& {8 b return("0123456789ABCDEF".indexOf(aDigit))' ~; I" H+ z1 }- G
}
0 C% f. I* E' s6 g& Q
) W% } w0 y; i: p# `4 T7 d- S// Convert a 24bit number to hex
/ O, k& x" Q; z6 bfunction toHex(n)
" ]4 _, V7 _: S{
/ \* R) r* R+ L: T6 S return (enHex((0xf00000 & n) >> 20) +( W5 F& O& c) j) |4 n% l7 D
enHex((0x0f0000 & n) >> 16) +
" S: c, b" b3 O# K) q+ D# u enHex((0x00f000 & n) >> 12) +( ?) z1 A+ H& \
enHex((0x000f00 & n) >> 8) +
* k/ ]0 }( D, L0 ?( j3 N enHex((0x0000f0 & n) >> 4) +# L" j. |' A! A$ Y) U. Y$ x% g# Z
enHex((0x00000f & n) >> 0))! A4 T; f( n# m
}
! A& E5 ~. l* A6 A; t% y, L// Convert a six character hex to decimal
; ^# U. N) D: V& Pfunction toDecimal(hexNum)5 O t7 o7 C" M, F% O
{/ M9 x5 u. ]9 |
var tmp = ""+hexNum.toUpperCase()
( I1 T. u6 U- z) f+ x# q# H; J while (tmp.length < 6) tmp = "0"+tmp
4 |5 D/ g0 X2 b- |- [% x return ((deHex(tmp.substring(0,1)) << 20) +
: F2 Z" _+ H' e& q (deHex(tmp.substring(1,2)) << 16) + ' }- K% z: Q; w I
(deHex(tmp.substring(2,3)) << 12) +
4 i9 ?/ L; \6 B& f, U" b (deHex(tmp.substring(3,4)) << 8) +$ Y9 |5 n/ @( H" {8 t& w* ~" f$ C
(deHex(tmp.substring(4,5)) << 4) +3 f; g6 B" P9 K8 u
(deHex(tmp.substring(5,6)))); Y3 ^ l# p8 ^& k! \) A3 {
}. [+ X2 Y& @! V, U0 `
///////////////////Shimmering Links/////////////////////% d" h7 j+ `# ?- g$ n# v; Z
//global variables9 n5 ]9 ] Q# H p: j, K8 e7 n9 o: L+ p( }
var hoverColour
! N$ q" E, |$ D2 w1 \var numLinks;
. U" i$ t X! J$ i9 Vvar rate;7 ?7 J$ b% w2 a8 I- l+ C, ~$ e
var numFadeLevels;
: ?* c7 M/ }# \; `9 mvar bgR;
* c% }' x/ J. l8 K B" p; E! hvar bgG;# ?9 a, \9 ]; t/ f5 i! Y+ U
var bgB;
9 |8 j' i1 X. V9 @var currR;4 f; F. g! u% C$ L2 t
var currG;
8 u* s- n5 x' } u, {$ v; Q0 @$ lvar currB;
+ b+ @2 O- P R/ ]var count;
: V8 i2 P8 V# O1 k# W1 Ivar fadeOut;
, E" c' |9 U& v/ Uvar continuous;
& q Z* [& {2 N e3 N/ _var newColour;! G1 E3 g% X. T
var tID;& S2 p9 T7 O5 R# ~0 i! d8 s4 K9 H
var redInterval;
: _: I& W( X' D$ |3 q* d3 `var greenInterval;. h9 @3 f6 R7 Y/ u5 a0 k' ^
var blueInterval;0 U `0 [* [+ U+ X/ u
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
+ m$ r& u- I' W, c{8 A' s1 s( S- J+ d( ] k8 \ {
hoverColour = mouseOverColour; n) U9 H& Z# }) S- Q9 X5 x% }0 @
numLinks = numberOfLinks;
: W- q% x# Q5 L rate = 1;
6 p/ C; y9 `# p numFadeLevels = 30;2 }4 L: i; }. Y5 ~
function initArray(theArray, length, val)
9 ~& `; k$ }6 r% B, T6 F {
/ v/ z! _8 h2 A5 {- g for(i=0;i<length;i++)
- ^' X! f- W2 N+ ~5 `* A {
# W" T& S, u1 S- h$ ]8 g4 L theArray = val;% o% b# F' j, _! u) b m7 \. v
}
& D2 y0 c5 a8 L' y/ p }6 {4 \; E- F5 Q% K3 T; b
bgR = '0000' + fadeOutColour.substring(1,3): R* Q2 C8 H. y& K0 \
bgG = '0000' + fadeOutColour.substring(3,5); ?0 c" g2 [2 k/ l7 g
bgB = '0000' + fadeOutColour.substring(5,7)
. r5 P5 w4 ^, } x! i, D# F currR = new Array(numLinks);3 v4 j& V7 l9 b8 T; U
currG = new Array(numLinks);
! \' g8 s+ Q$ E0 G) l currB = new Array(numLinks);# J$ Q% h6 m$ B! m
count = new Array(numLinks);, |" {- L5 W9 z K
fadeOut = new Array(numLinks);
" x, l- C$ W1 R P' l1 K+ o9 | continuous = new Array(numLinks);3 |9 _2 Z4 b3 X! _/ u9 }
newColour = new Array(numLinks);9 C7 L2 H% @# O+ P3 R. H
tID = new Array(numLinks);4 T z9 h4 `& S3 w" X
redInterval = toDecimal(bgR) / numFadeLevels;$ V# ^% o K3 ?. X2 b" D: R
greenInterval = toDecimal(bgG) / numFadeLevels;
! G5 j) {; N5 }% J; `5 _9 K6 J blueInterval = toDecimal(bgB) / numFadeLevels;
2 A* Y+ u2 h' [ initArray(currR,numLinks,0); z) f) T I' ?3 m% n
initArray(currG,numLinks,0);. l' d: J0 L2 y( D- d# ?
initArray(currB,numLinks,0);
9 d! ^# b% Z$ q% P initArray(count,numLinks,0);; Y: d) B0 J# @: t
initArray(fadeOut,numLinks,true);
3 @8 }2 }2 H! z4 W6 w4 X initArray(continuous,numLinks,true);
: b: ~) u `$ I2 f1 N/ L}
& b; S q# q% _1 r8 j$ v- Ifunction startFade(id)
& x! A# j, n/ a{1 |$ } i9 k$ _
if(fadeOut[id] == true)5 x2 o0 [' q8 o1 }* V/ M# B* `+ D9 [
{ /*move colour towards background colour (increment)*/
5 \ [7 R7 s% }6 u% p# u2 R+ V! j currR[id] += redInterval;( Q" r; k8 O5 Q# W9 U D
currG[id] += greenInterval;3 ^" B$ u% F1 e: A8 M: U4 V. V; R
currB[id] += blueInterval;
, b ^. G% z+ e% q1 E# ] newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ y. h# a+ o$ ?; ]4 e
if(++count[id] == numFadeLevels)0 _; Z \; { J! I; E( `
{
1 B# }" e' o3 L8 }' i7 i: P* s fadeOut[id] = false;5 \4 n1 G% C" x" Q' I* L3 [4 h
}
, Z) m! O7 x6 F9 g1 Z% Z }
2 k9 y( o2 g2 n4 s. }1 n/ E+ ? else: A/ k* C |- P1 q' s
{
0 p/ P5 J% h1 R# K- k currR[id] -= redInterval;" F/ Y0 i" q, @- w1 O0 \6 `6 T$ t
/ U# ?; c; R& q0 `2 E1 [. z* [ currG[id] -= greenInterval;
3 r: w- G( R) d9 Z' q( c/ v' `6 I- C6 }# ?" o) L2 B: i
currB[id] -= blueInterval;. y9 G- ]7 G: z W- B
1 |/ }# h) a3 [1 B% U: z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: i: p* p, \/ H' z/ X; T1 a+ [, [3 L- s" f
if(--count[id] == 0)6 R8 b0 k E$ E: D4 c6 f
# r/ c& \/ l& g8 d' Z
{& I% O2 b# a0 d% y2 { o4 u
5 B e5 V* i7 E. B. Z fadeOut[id] = true;
* p- U- V, ? Y3 x& O" t
1 d8 {9 z+ n( w v6 S7 w/ t$ } }
, K: K8 l3 @2 T/ X& d% y0 _3 x2 L- T* ?' h' C3 O# }2 h
}
- H4 m3 z2 H) T5 I" S8 u2 o5 t
# e# ^% \' \( B if(continuous[id] == true)% p* h( H0 O/ p/ ~' I
3 J; n" c1 |; \ {( W5 ?7 l/ M g
8 e+ ]3 g$ Q7 L: A4 Z5 R* z- l
document.getElementById(id).style.color = newColour[id]; % A; ?" j' ` ?9 ?" Z& Y
6 R* B. ^, F. }* N- t: U }2 y+ B% s/ L2 D( C0 ^* G2 }
) w! d1 ^2 h' s& F- P. }; `( s0 k
else% F/ N9 p+ B0 `) n8 C
( S, v% y. Y) C; E
{: B+ m* s) y I( F; m0 G$ ~
4 n: S/ S8 g$ `3 o# ~ document.getElementById(id).style.color = hoverColour;
. O8 j3 ^3 P" i; u# g. Z: G" j3 Y9 e6 `& i
}- Z' ], X) T+ T
6 u- M: |- p/ k
clearTimeout(tID[id]);8 [9 @( x% U5 f) ~: g b% ^2 Q
- a, X0 ]% Z0 T i: j5 ] tID[id]=setTimeout('startFade(' + id + ')', rate);9 T1 N5 C- r9 u& u& E: z/ L8 e
% ]5 Y( Q8 F i: D: U: m
}1 G1 u' ~! f9 |2 F+ {5 U) g# Y( W# ~
7 l3 X, \7 Q1 s5 a
function continueFade(id)0 U5 ]% ^) }; D% y
* Z5 ~3 m: e3 U; X{$ u% W+ R, m# r/ O% p
) ?1 Q+ o# w3 W$ e6 {1 _, j" A% A
continuous[id] = true;
+ ?) X d: @" m& _3 }
o" o0 G7 z W}. v2 j; V, }! y' s
7 p: X" j4 h. L* W8 P! m8 s7 @+ wfunction stopFade(id)" S8 w6 C* }' L1 o
- a5 L- L* y- z{' Y) u! Z1 Q: r# f! V+ R3 G, [# m+ ^
1 o/ @# {. y d* Q2 F6 e7 m continuous[id] = false;
: `( b4 Y: n, T
1 L3 m% m9 b1 Y$ j* K4 {}! U: t0 O+ y& i% y, |) j3 s9 e
2 W0 d1 X. ^- ofunction StartTimers()
7 R2 c" }, p' a/ V; |7 l% e6 G3 a9 @0 O% u( X+ q
{ //set up an initial set of timers to start the shimmering effect
9 K9 s) ] i/ O0 j# Y7 V# X& q1 S/ d# M/ ~; v/ D0 ?
for(id=0; id<numLinks; id++)' o. I# u0 s' h u' T
+ x# {5 D8 [! ^( x% h
{1 [5 W# y; L' b3 u4 N5 x
0 x: Y: R$ @7 h! O; T+ _2 ~% G3 T
t=setTimeout('startFade(' + id + ')', id*100);: U2 j0 m7 F: O
6 f# J! J: q7 J1 ]" T @+ _
}
T7 I* p' w2 k9 u5 H3 s5 |
% [; }6 L5 K- b7 u/ U& h; h& f5 j}) _$ P, a4 O9 J
: E% x8 F6 w% Q8 w( H5 s4 R
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
+ ]9 l3 O) M/ u! }& k8 j: w/ |! @
% v3 }- f! ] B9 XinitLinks('#FF0000', 6, '#FFCC77');
# X" B' y" f# M* g. i7 {* f/ q9 V& C* w+ b2 o& ]
//-->+ F3 z5 g5 q1 ]
1 L' E5 L4 |% ~6 @' c2 \9 x4 g5 P6 u! s
</script>
+ f6 G, q, {! l4 J$ i1 s<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元' K3 j2 m; p1 f# U! W3 z9 x: y
</a>2 m3 c4 \3 L7 }7 ^4 G
<br>/ [: |2 h) Q. ?9 T3 C
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
# b; t$ K. e7 S- m<br>
# `% o0 S2 w9 H<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
: Y8 ?/ z! y) v5 ?" |<br>
' C$ W% ]3 o. t$ V4 w<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
' k% S7 {9 Y& Z/ P% r5 U<br>8 q. T/ t9 ^6 G; X6 |7 n$ _
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
! h* v. f( ~6 x<br>
2 r8 c; K6 @1 B0 N: U8 ?<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>; Z2 z% ]& N4 w- @& ?
<script language="javascript" type="text/javascript">
0 g! f: V1 n! I<!--9 I" G: s( J" [7 l
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
: `8 M5 r" i- j//-->
3 i/ {1 z9 d/ a6 h) V: o" ?</script> |
|