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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
. B5 j; x/ a+ i3 S. q4 R<!--, i6 o" I1 @2 A( H% @
// convert a single digit (0 - 16) into hex
: A1 f5 O2 t. I$ dfunction enHex(aDigit)
4 @. c' {6 F) C2 H% H" z& U7 I+ J{
# t* W# S. u( e2 j3 Q return("0123456789ABCDEF".substring(aDigit, aDigit+1))
% w! p: }1 T6 N8 I# s" ^}) w( T! h0 W' w" a/ |& J& d
// convert a hex digit into decimal
) Z3 D' w- ^% ?* B9 V! N6 ^function deHex(aDigit)& P" J8 e4 b. W
{. M# K( K7 m8 @4 i# V6 [* Q
return("0123456789ABCDEF".indexOf(aDigit))5 j# a, p7 H9 I! n5 s d
}
- Q6 Y/ I6 ]) ?6 f: c
% v2 O' h% v/ n3 ]9 Y8 [. l' |% p// Convert a 24bit number to hex& n/ U( X( [ t
function toHex(n)
# H( P; q( E5 b* s# d{9 G! w# ?0 A6 l( S$ ~! i
return (enHex((0xf00000 & n) >> 20) +
1 S, Q& d& O6 j" Z+ N/ y8 k5 o enHex((0x0f0000 & n) >> 16) +4 W4 ?' E: N! T+ I0 c# q
enHex((0x00f000 & n) >> 12) +
. ^3 d( Y) l" U6 j- t+ ~5 H enHex((0x000f00 & n) >> 8) +
! _8 {9 u9 x" e+ T enHex((0x0000f0 & n) >> 4) +
. I c* I6 K8 T! _/ ~( y) h8 C7 I enHex((0x00000f & n) >> 0))
- }; W, Y* N1 N% {1 {}
# o5 n q* R8 _// Convert a six character hex to decimal/ y; X4 h1 R3 J3 I
function toDecimal(hexNum), l' C n9 I3 p, H% | r9 k9 j% F
{
4 Q4 e8 j4 [5 R0 v' P1 |1 O# e var tmp = ""+hexNum.toUpperCase()0 M9 c; H2 a4 g( ?
while (tmp.length < 6) tmp = "0"+tmp( f+ Q8 x | K( O, J# X
return ((deHex(tmp.substring(0,1)) << 20) +0 D7 F# J2 H1 u. ^: H/ j) A. v. y" n
(deHex(tmp.substring(1,2)) << 16) + 6 D4 p6 x2 H2 j& v& p8 z1 O& X# N3 J
(deHex(tmp.substring(2,3)) << 12) +
0 [1 _9 _! v; O: U4 l3 _ (deHex(tmp.substring(3,4)) << 8) +
" i( P2 s7 D; ]& \3 j. l; n0 ` (deHex(tmp.substring(4,5)) << 4) +
$ g% N, R, W1 ?3 b# _ (deHex(tmp.substring(5,6))))
' l/ i. c; T; I! D8 c}
: D {7 ?0 M5 {/ N///////////////////Shimmering Links/////////////////////
' S; C: L2 T" \- Z ~6 M//global variables
4 s9 V4 |6 p' I3 d- xvar hoverColour7 ]% [: Z% n7 F/ S/ M
var numLinks;5 @. l1 D7 `7 k% @5 |1 Q2 O
var rate;5 [/ }& }1 _) Y/ g: o0 a) m8 n
var numFadeLevels;& ?, a5 y0 U' s
var bgR;
" O X# @0 B: c0 o0 ?var bgG;9 `2 Z9 g8 M4 C5 G
var bgB;
6 \, e6 Z& j6 c+ V0 |1 Bvar currR;
# t, d+ K4 F+ P6 X& Q1 u1 hvar currG;
$ v' c2 \4 t+ ^' C' vvar currB;; l5 N% c+ o2 V {/ L. G% q
var count;
7 P/ P5 a7 t5 R2 O% R9 z. gvar fadeOut;5 l S8 u& M" M7 g# G2 f- L
var continuous;6 ]" F6 t9 a0 q1 t% c2 C6 D
var newColour;7 _( I% r% u' @, H5 ]
var tID;7 U- e" i7 s, N4 ]) x
var redInterval;9 c! E: ~- j+ Z5 G% e9 s) ^& S
var greenInterval;
& x) Q/ h, z- ]* \8 X: D6 {var blueInterval;% b5 {7 H7 X* `) q# M1 I
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
2 [. V, M) x$ t8 _5 s6 P7 j8 i{
9 b+ b- T! ~3 m- h0 Q5 T- i9 V hoverColour = mouseOverColour;
3 @0 z6 C ^0 I; V8 `# j numLinks = numberOfLinks;
0 l1 }0 @: i# P rate = 1;7 u1 Y1 i3 \* z+ U
numFadeLevels = 30;* N; c W: l% a
function initArray(theArray, length, val)
8 P4 d! _5 y+ U( x5 f$ D# Z {) |" h s5 ~7 r
for(i=0;i<length;i++)7 j% F. p) q; U3 S3 m% r# R
{' ^& [) g0 {* L/ J- }5 k. b
theArray = val;
: T% r7 t! C% N5 r* A" p& ]3 i }
5 p3 x2 h- z! M8 g) ~ d }/ q) P+ i7 C: I# v. m2 i( m
bgR = '0000' + fadeOutColour.substring(1,3)" s1 U6 Y2 A1 C F) X0 ]
bgG = '0000' + fadeOutColour.substring(3,5)
1 k+ R6 T7 K; y bgB = '0000' + fadeOutColour.substring(5,7)
7 n9 i2 s: y# c0 f4 z currR = new Array(numLinks);
! ?" n3 D/ [3 F- `% F currG = new Array(numLinks);
7 C+ [, J7 B1 h currB = new Array(numLinks);( J0 X" k0 E4 z& G$ ` _
count = new Array(numLinks);& A: a' o6 v0 T/ S) W
fadeOut = new Array(numLinks);5 \3 E, ]. u1 z8 w Z; w( N& A
continuous = new Array(numLinks); S' C! \" U' G' [' T x# B; B
newColour = new Array(numLinks);1 ~+ d) V3 I" s6 u: \& ^& n0 z4 b1 S
tID = new Array(numLinks);# d1 U+ d! A5 L! U! x+ w. L" a$ @
redInterval = toDecimal(bgR) / numFadeLevels;
: ?( C- ^8 c/ W( `+ f/ U$ r6 Q4 n greenInterval = toDecimal(bgG) / numFadeLevels;
4 L4 Y# C$ j$ n, @ blueInterval = toDecimal(bgB) / numFadeLevels;: H1 @: X7 Y' Y) b0 I% T
initArray(currR,numLinks,0);
- q& o" o1 d% P# K: N initArray(currG,numLinks,0);$ @2 [- K) U$ T7 r8 I C
initArray(currB,numLinks,0);* u8 U6 v% [% I# s5 x
initArray(count,numLinks,0);
! c3 j0 @3 H; L! O+ Z initArray(fadeOut,numLinks,true);3 `2 k+ t+ m0 y% P) f
initArray(continuous,numLinks,true);
* j3 y3 I4 k e! W4 {2 d} + {- l9 c0 P7 f9 Z( J) z: R
function startFade(id)
9 q! C$ m) F1 c{; @. a/ O/ t) |1 D' g4 q
if(fadeOut[id] == true)
( V+ }6 K9 o3 z { /*move colour towards background colour (increment)*/! L8 O4 M5 }* P- z) m+ u
currR[id] += redInterval;
) R3 c0 d N" i# p) O/ [ currG[id] += greenInterval;& N; o( B" E: W0 |
currB[id] += blueInterval;
9 e6 W* H& Z: K. K' R& y! ]* _ newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);6 Q& ^! ^+ G8 M! O% F
if(++count[id] == numFadeLevels)
P% z0 X. I# u1 c3 J {) t9 l* K1 F- c- }/ P
fadeOut[id] = false;/ G, o3 n4 ]- j) o6 r
}2 a$ h5 x) y" G1 A- }) y) o9 ~
}
: E3 n# E; }* K+ h* y* S/ H: v9 L, D else
( D, h7 h& Q' g {; W- W* A4 I3 u5 ~8 L
currR[id] -= redInterval;# `- D/ s, u# b ]8 ` X/ H) z: e
6 B3 G/ K# r/ \+ L( }
currG[id] -= greenInterval;/ {9 f9 D( U1 C B2 y$ P' o+ Y. _
2 ^2 e) t8 G0 a: M8 Q
currB[id] -= blueInterval;! h k1 H) b2 q ]
- p( a/ A: a% q( g; D3 z
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 V- |5 ]. o( K
& w5 p$ l+ e2 e( z
if(--count[id] == 0)
9 h/ A: U% b3 `& B$ H- W
6 D8 u, P! {7 [ w# V {
8 G) T2 B- A1 j; t3 b! K% L- p7 Q& E( \% ]% S5 A! E0 n1 B
fadeOut[id] = true;
# H7 I& k, N' t6 t7 }8 c5 j `5 {) j
}
6 c& b2 r3 c( y: s1 N( l6 t3 e# M4 R0 @! k. x8 X& W* r
}( n+ K1 N" p7 I/ o) Q8 d0 _" T
# {+ s$ d% o2 S/ y
if(continuous[id] == true)- B8 d$ h) g2 N: p7 A
: Q3 @- l# T' _$ l% | {
! O7 u! y2 o7 Z, l( _; }- _# ]: n' N: B
document.getElementById(id).style.color = newColour[id];
' b3 ^6 l' @ Z6 P+ O" U8 t. @$ {, z# q9 {
}6 e8 `! @3 X0 D& ]4 W) s
8 M4 e% C: y: w- q6 J) I; U
else
. S D* h( j/ W+ w
1 R! s) p/ Q! @; X+ w2 k0 @5 S {
" Z% j& a9 L& E( x
5 }; C* u' F4 L5 s; d( `& U document.getElementById(id).style.color = hoverColour;3 P |6 {! V) \3 G- S3 c& s
: q9 g6 \. j: ?2 E8 i4 F$ ? }; w7 V' [1 V7 d- R
+ w# w8 _+ ~- x$ R6 n9 ^) X clearTimeout(tID[id]);
% ?7 p1 s8 P( I d! ~& f8 L& ?0 U6 Z- Q
tID[id]=setTimeout('startFade(' + id + ')', rate);
- C# K0 l4 l" y, v
8 @2 K$ ?* C2 {' u5 h4 r}
" d4 P& ]/ ~5 C
8 _' v1 A$ T* l6 w4 Ffunction continueFade(id)4 i7 Z, H# U# T5 }0 [
/ v ]( K1 h1 X5 B6 v. ^% q/ |{
_; K1 B& Q- w1 E0 V {
# p$ L( C% L+ ~; |6 s+ D continuous[id] = true;
' n: z+ g; h7 S! z' e: ?+ ?6 N1 m
}
" {* @8 T. i- V
* H: A$ e7 X# b* efunction stopFade(id)
1 f% I- L- O% L
. r5 N5 |. S" H; `{
# H& y/ U+ Z- E4 d$ j7 U5 Y& r, Y ~9 v5 `( f1 D9 X
continuous[id] = false;
) o! e5 G% X/ ]
8 d' }4 N, L" K; p* Z$ b. a}
$ ]% g5 g5 E9 u1 K! `' L2 l' r
; v0 l9 K5 s& cfunction StartTimers()0 L7 S" z- \! i
0 g X7 O3 l0 V5 m$ [9 |) L3 d{ //set up an initial set of timers to start the shimmering effect
$ C/ ]' W4 j9 }! ?, D; ]1 G1 M+ F* _# E8 i
for(id=0; id<numLinks; id++)" ^. `5 j9 ~2 z9 r% x/ _+ r: f
: V1 ]0 i. g& @1 J {! y2 J# f/ K5 d4 F, w
5 d& ~* R0 r3 X) D8 c: G, K( k
t=setTimeout('startFade(' + id + ')', id*100);+ M2 ^7 t1 o. M, L' g( c- c% K
/ `3 O, Q& r5 u- I8 G }4 j3 w3 s. `; |
|, Z" B6 v* N% V* e
}4 O, A! I, g4 L2 h5 J! \
2 V* P' l6 e+ w" l$ h/ l* N9 H4 _//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
$ ~+ Q5 [( ?" P
+ B2 h7 s9 Z/ @1 N% GinitLinks('#FF0000', 6, '#FFCC77');
; [$ I+ q p% U( M3 u# g' z3 N) q' t4 G" k9 _9 h5 Z$ ], `
//-->3 {7 ]/ t8 e, g3 w1 |( k, U( w
Q# d6 _# z+ @6 u</script>* _' j, Q7 \ v* j( }
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元( b) L1 ]; \+ L$ d
</a>- w t) F( g* I6 B% J9 X0 t/ O
<br>
+ X9 a! o' E$ E9 {+ n3 y% O<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>2 U, T9 I! G# h8 w: @+ z
<br>& P' ?5 m0 t0 E, |$ Z
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
, |. I, a! C. q3 B6 \6 \<br>
! ^' E( U5 c9 e3 h2 {. E- y<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
$ t" h: R5 p5 V6 j6 v8 ~1 y<br>. r7 ~0 Z3 E. j2 M8 ]5 ]* y; z. c# C
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ [+ b. {4 y7 U6 R3 L& s a0 A
<br>
+ N- h6 j; R9 A& r0 g: V<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>. C( p4 f3 @) e! t$ V
<script language="javascript" type="text/javascript">) |) i, w1 s- u/ A) V4 ^ B4 b
<!--5 }4 }* Y0 w, z9 S. L
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
; w, [" D# G* t& N" @8 V3 f& P) l//-->+ i: A! N8 q% [% _
</script> |
|