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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">0 l$ [8 L& a0 F0 E9 s
<!--
) b( D- }5 e- J* ` n$ W- N// convert a single digit (0 - 16) into hex6 U0 F# a- _. ?# [# I
function enHex(aDigit)
. V9 S. L( [. j8 n{
* G5 A+ B1 j( [+ ^- \( M return("0123456789ABCDEF".substring(aDigit, aDigit+1))
) U( ^* }, p6 G}! O+ ?/ Y4 f- G) n e) k
// convert a hex digit into decimal3 f8 X! Y2 d. E) g) N! O
function deHex(aDigit)3 {" ~1 U" |, r9 N
{
2 B; g& r: ?8 ^9 t' t' m- y1 C return("0123456789ABCDEF".indexOf(aDigit))
& w2 ? s" X- B8 i0 x1 [}
/ {! x- Q$ J0 u, ?5 a3 n$ R7 G* w# N0 N
// Convert a 24bit number to hex
& k4 b' A* O5 @function toHex(n)
2 [2 r# x6 R! A{
1 U7 B+ d5 @/ V; ]5 ?/ V return (enHex((0xf00000 & n) >> 20) +
7 x6 m* }# B' D1 I0 ~, I enHex((0x0f0000 & n) >> 16) +' H+ U3 s: S" Q7 O1 F" a
enHex((0x00f000 & n) >> 12) +' E. |" q* x3 E ^! U3 \
enHex((0x000f00 & n) >> 8) +( n3 {) Q* e. b* N. o: z2 K( v
enHex((0x0000f0 & n) >> 4) +
m- k) G- G- n enHex((0x00000f & n) >> 0))' x+ _; g& x; i4 A5 c# `5 ]# j
}! D6 u6 N9 |( N+ j& S5 S
// Convert a six character hex to decimal5 A# u: o5 a2 n
function toDecimal(hexNum)3 @0 N! J& W$ z- G2 |7 ^
{
" `1 h% E" C4 l: Q var tmp = ""+hexNum.toUpperCase()) I0 A/ Q( n V8 {
while (tmp.length < 6) tmp = "0"+tmp6 h: }" e ^8 x L
return ((deHex(tmp.substring(0,1)) << 20) +
$ R2 E" J2 N. p+ [ (deHex(tmp.substring(1,2)) << 16) + 8 v, ]# I& Q& G& Q0 X# s
(deHex(tmp.substring(2,3)) << 12) +* N! W) V# B% P: y6 ?! N' @& U. [
(deHex(tmp.substring(3,4)) << 8) +
# c! ?% c+ l# ? (deHex(tmp.substring(4,5)) << 4) +
; Q/ d# A* F: p8 k# O (deHex(tmp.substring(5,6))))& K$ W2 @# x! Z; j, S8 q2 i( F1 x$ X
}6 z+ W, }* ]2 l8 E8 A t
///////////////////Shimmering Links/////////////////////
, @% ~5 W8 T5 z& q. J6 b//global variables
& ^' ]7 |! l$ }8 W/ }% vvar hoverColour
* @( _6 C# S. Z5 |+ g& ?var numLinks;
' Q7 f7 a7 q* Mvar rate; D$ x" C U2 B' u; G5 Z
var numFadeLevels;
, O- \. K3 u# \var bgR;* W9 |' H" N" q
var bgG;
# T6 y* ^, z5 Tvar bgB;
$ U4 N& t, n2 m2 w6 w* F% M% xvar currR;( I- P( ~4 G5 H; u6 O {* c
var currG;! }- m. q1 F/ ^4 F
var currB;' K# Y$ f( m: W( A" W) z) ?
var count;
6 w& b* j/ U Y/ _% U# Avar fadeOut;
/ ~$ D8 e% V7 O1 d: P* Ivar continuous;
& t& e, W" b9 evar newColour;9 l' w6 I: |+ H# \$ M
var tID;
* G1 n# d3 t7 x7 ?0 }4 A6 h9 D Fvar redInterval;6 H! `. |7 q a/ E5 N1 ~
var greenInterval;* o' e2 w1 \1 f
var blueInterval;) B$ Q' N: v2 v7 u
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
\8 V1 R% o5 b{& ~! [, A3 L$ a# L0 R& @" w. }
hoverColour = mouseOverColour;
* _! n2 k7 K# \2 ~7 o numLinks = numberOfLinks;
* g- M' m. Z; ~4 ? rate = 1;5 r. U9 S- @9 J! J
numFadeLevels = 30;( c! Q P B5 I5 f
function initArray(theArray, length, val)
) o; s2 K! c; i {
) [& Z9 a; o1 I8 C+ B% d: v for(i=0;i<length;i++)
E, U- E6 f/ O; m# Q {
0 @# P; b0 H! _7 ^% ]' U# i: N2 q theArray = val;4 s4 w8 W( _) G' f+ ]5 }; L1 P
}
3 F/ {/ R* L' O }& O/ B, a. r2 H. \
bgR = '0000' + fadeOutColour.substring(1,3)
6 g) u/ X, @' D! v; \2 g) w& l bgG = '0000' + fadeOutColour.substring(3,5)
8 s0 ^& M! I( W; U5 a& G bgB = '0000' + fadeOutColour.substring(5,7)
+ @, [8 w' V- _% u% k0 ` currR = new Array(numLinks);0 @) s* C: [$ \
currG = new Array(numLinks);
0 I/ x1 I7 o0 s0 D+ n0 U currB = new Array(numLinks);1 K, Y; H" f2 U# @! o; u
count = new Array(numLinks);
5 Q L+ K- k3 |5 ` fadeOut = new Array(numLinks);
e! s6 @- p4 S* _! F7 H( E y continuous = new Array(numLinks);5 D* S) _+ N5 x' m2 i4 a
newColour = new Array(numLinks);
. [% D& Q' n+ X; e6 ?- U tID = new Array(numLinks);) N1 G ]9 u7 y8 t2 Y4 c
redInterval = toDecimal(bgR) / numFadeLevels;" n4 ]: `% m9 z. w$ I
greenInterval = toDecimal(bgG) / numFadeLevels;
$ ~. ]1 H6 Y! E9 o& G( T& | blueInterval = toDecimal(bgB) / numFadeLevels;
( ~3 T! P7 G& ?/ U& H: v initArray(currR,numLinks,0);
! r7 X: f7 d3 h" B' J l- d initArray(currG,numLinks,0);
; d$ G, q5 w+ Q U initArray(currB,numLinks,0);
3 a& w, T( ?3 n: b% ^2 |" r3 T initArray(count,numLinks,0);' i4 S6 M% I! I! [
initArray(fadeOut,numLinks,true);2 {# y' Z# P) }6 |! D# Z
initArray(continuous,numLinks,true);
/ L) y, h2 P& b! l$ t}
! {, x, ], w, y3 l1 U' tfunction startFade(id)8 q6 C, i" d: o+ k
{7 @+ O. Z. j9 L
if(fadeOut[id] == true)
+ J0 l, }4 y* s# {$ s2 A8 G { /*move colour towards background colour (increment)*/
: w) v2 B" Z7 {. q1 v currR[id] += redInterval;
8 i1 K4 C7 u" U: k, e9 K4 Q9 i currG[id] += greenInterval;
5 J( o' W+ P/ p. j( B8 | currB[id] += blueInterval;/ A' K3 t. N; ]+ B( _8 q( ?
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);0 Z; K% q( s! k$ n3 |
if(++count[id] == numFadeLevels): Q8 @9 V; A/ D- V7 p5 W0 `
{# j0 j+ p& J6 M3 j& `
fadeOut[id] = false;* Y" f' X* p" `4 }; Q0 |% r1 R4 ?
}9 Y+ ]# W4 [+ y. n8 i& O) e f3 e
} E2 f6 i ^! T
else
6 q% f7 s, f' \' q {
+ A1 V- ?: g" Z. h+ l currR[id] -= redInterval;% J6 b- G- u8 L* I9 g/ S2 ]: o
1 e. _7 ?0 y3 _+ k1 @ currG[id] -= greenInterval;
p. v5 r D: v: K! X4 @2 Y% N0 K' [
% x3 ^# b& U. i/ c' S! u currB[id] -= blueInterval;+ p. A# X" y! m9 z6 D9 q: h+ r
! G5 J, m i/ q' Q3 J( e8 [' @ S
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ ]5 F+ v; S4 e+ P& k7 q% @9 d. w( s; a8 s' K6 I
if(--count[id] == 0)
" m& ^& v. V1 s: c" J0 ^4 O- |! e) d
{# p+ t+ P# r% T# M4 _( l
7 ^1 T# ^$ [. R fadeOut[id] = true;# r, Y, P- H& f. m
2 j1 v) @3 r; D3 _+ E: z }
( [( e; E+ H y0 w) s, N) k5 w! s3 u- O1 a
}/ e2 o' e8 K* j6 u. V
6 G1 P9 ?2 k9 S _% S6 F' ~; { if(continuous[id] == true)5 W6 R# ~$ H& P/ I4 |5 z4 Y) ]7 w7 t
7 W% h9 w: z+ n! u. E8 _4 L
{
/ ^) Q2 w4 O0 S, X' M6 e3 [! U5 z2 w+ `4 s2 c3 }
document.getElementById(id).style.color = newColour[id]; & c! Z' x/ D' h: w1 O3 x% }
" G/ Z+ P$ I7 P
}* _% m z$ L& a4 H) l: ?: u
1 f, |* n% {$ C* r- p' b- |9 m5 W
else- Q1 C. @' X; ^$ k
+ ?3 T6 g. }% w
{
1 P4 e& T: n6 s- s/ h! S: v' W3 @9 ]9 I/ W* x' Q1 }" ]+ R1 H V i
document.getElementById(id).style.color = hoverColour;: p6 p: Z5 {2 I( R1 o
! t5 c9 s" M" I }+ x- |1 a* E% w7 ?; ^2 |4 {& ~
2 v K2 p3 {1 z* H
clearTimeout(tID[id]);6 I1 y5 U9 U6 f5 w' Y0 C4 {
( Q! |, U/ W9 b tID[id]=setTimeout('startFade(' + id + ')', rate);
; r3 I. P" [& |/ Y$ w! ^1 f! a4 r' X: \, f( o/ F
} _& t( Q4 n9 l: \+ K: T9 i- _
0 J% M! k3 c/ S# h
function continueFade(id)
" _: W" [% r7 i w% N0 H) o' \3 v9 n6 P% q, E8 ?. L+ Z
{
( r7 L( w- n' |0 T, H! P' q/ i# P% G$ Z2 X- X5 r1 X! c/ W, I
continuous[id] = true;3 `1 q( |& }) P1 Q; e: U7 Y
6 W5 m" B9 k, }* g}
], R- o- u: S/ W$ j
( C8 W$ j" W1 I! Z+ ffunction stopFade(id)
/ ~( O8 @% `# V. h& ]% d
. }" P9 s+ ~8 ]! W$ q5 B{
6 b9 h! t, c0 \' r0 d+ ]2 z' u! F6 X0 T0 u3 v
continuous[id] = false;$ F- C# ^9 r- V
; V5 g1 D0 y( b" C2 b2 i8 j
}
: l N5 F( [) n2 y5 A$ ^4 \9 `0 }. \, c, T' K
function StartTimers()
% C4 x0 U" L0 h
& F; k% Z5 P% z( H9 C) }{ //set up an initial set of timers to start the shimmering effect
* y }) E% u9 P
7 h. F, ^, L% b$ d8 [5 a for(id=0; id<numLinks; id++)0 E5 `) Z l/ l3 ^1 I' l6 U
9 L/ S( S" h- I' R2 W {
4 |6 X) M4 ?( l+ v8 H' y2 V1 f- a- W# G3 C1 C
t=setTimeout('startFade(' + id + ')', id*100);
6 \9 T2 y# {: a( f9 u: s3 r) u" n$ C& {* t# ]
}
# B7 ~9 z3 _8 a: ~) D; g
* a8 N/ L4 y; H6 `* z}
" H K7 M: T3 ]( q+ }4 m" W7 G0 n- r" A' V
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
) ?, P" R: [# n( l
m2 f, B- O+ E: t y3 VinitLinks('#FF0000', 6, '#FFCC77');$ L8 h( Q/ W* ^& ~' K: _2 [8 o4 V/ K
$ g8 ~) n- x+ Y! I4 l" d
//--> t T$ i& \- ?* S( \8 X
4 Z0 p* B6 i s9 y! f$ ^; I9 }
</script>
5 c+ E) H' X, g$ J6 }8 J" z n<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
4 X. l9 a. O/ s$ x7 E4 L! P</a>; r+ B$ U5 l" i! N
<br>) J8 B# B" q( U' u) I' [; @4 N
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
5 p) D4 C1 ]; s<br>4 `' t3 a. ^0 J/ m9 N" N7 b7 B
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 }0 W, z3 ^. y- A0 b _<br> 0 T4 Z# K3 ], i5 v$ |; Z3 G
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ a6 @; Z4 v% e, |% ^( Y
<br>( C# e" G! \+ R7 V6 y E" e% u
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a># y5 h+ C6 q9 w
<br>
0 Y3 ~# V; {6 b/ m; P3 U<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( [0 T2 l9 X/ b, I
<script language="javascript" type="text/javascript">
& O- f) j- @3 l5 ]' v<!--* \% G1 S- H" x6 x+ q7 O
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering5 J* A! N4 B3 P
//-->7 j4 S: U# l9 k! i
</script> |
|