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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"># j0 I" ^6 g6 u8 D6 |) S
<!--1 z' I. J. F& n! W' A3 w
// convert a single digit (0 - 16) into hex- A' y- C* W- x( d3 I5 l
function enHex(aDigit)# A' C( G# `: j9 [5 P# a7 K, B
{2 k. O( S8 j: i3 w6 M; c" F
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
" o9 b J4 e3 Z9 ^9 T0 Y9 k0 g# C}' P4 B5 }& A( G
// convert a hex digit into decimal
# s/ j1 k9 m& Hfunction deHex(aDigit)1 o7 y8 Z$ _9 d' f
{
# b R& b5 ?- J- C0 X7 d return("0123456789ABCDEF".indexOf(aDigit))+ p/ d" f e T4 D3 D! W: g( p: q
}
- z4 C) v* i1 L6 M) a$ u4 [' r' }1 l# O- O
// Convert a 24bit number to hex
; L' W8 e+ S* K% h+ ~function toHex(n)$ {% ~, m' a5 S: s# l f
{
2 V/ o' V3 t- N; p% k return (enHex((0xf00000 & n) >> 20) +
8 A; C0 x4 _# q* f3 m enHex((0x0f0000 & n) >> 16) +8 {2 i5 R* {3 Q! f" d h. s
enHex((0x00f000 & n) >> 12) +. @3 f4 X4 F1 A4 Z- X" e) g# t3 ^
enHex((0x000f00 & n) >> 8) +% s& W4 G0 B/ |% ~( r* \
enHex((0x0000f0 & n) >> 4) +% N* `4 |* B. H7 P# ^! |/ |- V
enHex((0x00000f & n) >> 0))
$ _* l9 w6 w4 O: u}5 B; N7 L$ }+ V" u; w
// Convert a six character hex to decimal6 \" G7 S1 y1 n
function toDecimal(hexNum)8 c9 t! _/ i# t1 a ?* P; z
{
/ V% {+ X s6 G! N% V var tmp = ""+hexNum.toUpperCase()" W5 N# R7 O0 h" ?
while (tmp.length < 6) tmp = "0"+tmp: E2 [! y0 p; }( d* r0 W
return ((deHex(tmp.substring(0,1)) << 20) +2 r, r7 I* H6 |1 O2 Q" A/ V+ z
(deHex(tmp.substring(1,2)) << 16) + ' u7 N+ J. |7 z! g K+ p+ }; U$ a ^1 `; L
(deHex(tmp.substring(2,3)) << 12) +
- u1 {9 ?; E! i: H& d (deHex(tmp.substring(3,4)) << 8) +# @( x4 p8 W! D2 c1 p1 R% D
(deHex(tmp.substring(4,5)) << 4) +
; ~6 H; X6 L6 z; A4 y/ \ (deHex(tmp.substring(5,6))))
! B( i+ L* z$ r% b6 A- E' C}
9 l" b# C/ ?7 B6 V7 Z///////////////////Shimmering Links/////////////////////! C4 D8 U) X6 J: V4 I
//global variables
$ \& a9 U9 c6 T5 bvar hoverColour
4 B- T9 ]% }& G0 Uvar numLinks;& C+ V) @8 p+ V
var rate;1 m1 l9 ]8 r! [7 E8 a
var numFadeLevels;$ L- y0 u6 g. K; q, o8 d0 F
var bgR;, T0 S* s& x( K, n7 m
var bgG;
4 s/ ?: D. S5 m/ Z# u3 p! p! Jvar bgB;
; ~- z3 c9 [$ P0 nvar currR;' ]% g3 C+ I! n
var currG;
- j' |0 b! @* _# C7 B5 qvar currB;
2 h. u$ t- q0 C: l4 \( \$ Dvar count;* b- n6 V" t# f6 V: n
var fadeOut;4 h, F3 H! D8 v- A( I" O( A; m7 Q
var continuous;5 i2 N, c- ~ S B& F6 q) n
var newColour;
7 R+ E1 k; X3 x. n& E( Dvar tID;
+ c% f/ ] J' d3 [8 ]* q2 {var redInterval;
; x/ D! o! H M& Y V. d! d$ O6 rvar greenInterval;
" p7 _6 [: k/ X8 G7 ?var blueInterval;
* [1 ]5 i& S7 G4 Ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour), \+ j# Y' X5 w; l* G0 {
{
$ B& |4 `& O# o/ c8 W hoverColour = mouseOverColour;" i% Z, D7 ]9 T. _6 \
numLinks = numberOfLinks;
8 `9 w8 y3 n2 ^/ G4 r- H) x rate = 1;
9 k- g( m. y5 M0 p5 \, w" M numFadeLevels = 30;
, O1 W! S* K7 {( A5 T4 a; k function initArray(theArray, length, val)
/ p" k" t% o' W1 r# k u4 K/ L$ m {
6 C! _" y$ h0 J for(i=0;i<length;i++)# M8 L5 q9 j9 I; S) p, F9 \
{
' G1 f' m! P3 z/ `) i theArray = val;
3 q8 z) }' O1 \$ @" [4 g }' d! m7 d7 b, t1 c
}
1 `4 l7 p [( c/ m5 y bgR = '0000' + fadeOutColour.substring(1,3)
& H3 C7 z A- g' b( w. h bgG = '0000' + fadeOutColour.substring(3,5)
0 a) U- E) k6 L' k! ?- Q bgB = '0000' + fadeOutColour.substring(5,7)
0 B4 m% l6 Y2 [7 }1 {: h currR = new Array(numLinks);, Q/ f" M A3 Q9 d' |0 n9 |! F" R
currG = new Array(numLinks);# t& N! Q3 r \8 t5 q4 z
currB = new Array(numLinks);
' B( p4 ~& W; Q: e" O. G8 R' @ count = new Array(numLinks);- t3 X& Z& q) S
fadeOut = new Array(numLinks);
' I5 u, c$ g" |# b continuous = new Array(numLinks);0 b+ |" M6 F- y; D* V
newColour = new Array(numLinks);
: N7 y8 o& V/ p. _5 N tID = new Array(numLinks);+ Z# z, e; F9 \. L- B. o
redInterval = toDecimal(bgR) / numFadeLevels;) W6 I& J- T( a3 @ R9 r$ Z
greenInterval = toDecimal(bgG) / numFadeLevels;
. R' Q7 t- w9 A l( S* N% I blueInterval = toDecimal(bgB) / numFadeLevels;2 ~1 `" l |+ x- [! w0 n! R& O
initArray(currR,numLinks,0);
2 ]7 V+ i4 [5 |+ o/ S3 j initArray(currG,numLinks,0);
8 m* |6 \& T6 ?1 k9 M; T initArray(currB,numLinks,0);) G7 {* \ F3 g& r; K
initArray(count,numLinks,0);
6 ^: ^; K) y4 _ initArray(fadeOut,numLinks,true);
2 y0 O+ M& H5 O( [ initArray(continuous,numLinks,true);) j p9 T7 z5 C2 d' n; T( b' |3 d
}
4 y" N- q2 E! I+ {function startFade(id)
: l: A! y# H) `1 Q2 b{
+ n, T6 S; N: W2 x; }- D; T" C if(fadeOut[id] == true)0 r# {: Q3 `/ P1 N4 p: m$ s0 f
{ /*move colour towards background colour (increment)*/
3 H, `( u5 N2 ^8 Q3 I/ g+ \ currR[id] += redInterval;
7 x+ B0 ?8 k* M; F+ @ currG[id] += greenInterval;. k6 o# E1 v0 t
currB[id] += blueInterval;% K9 }6 {- O1 V7 R8 p( r! o$ \, b: J
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);( j& p; y$ a8 Y. ^( `; b
if(++count[id] == numFadeLevels)
% i3 k& v( L8 P4 c/ H' [ {
. f/ s n( J' x* H fadeOut[id] = false;2 s3 {& S: V! b1 K9 z$ k+ S
}
3 o: e& [. k1 K' c' _ }. I# s6 z& m- g9 D5 \1 r& r8 ^+ S, J
else
( q2 X) V5 |. s9 W! I6 b2 i {. m5 k+ ]* V5 o Y2 S/ ^
currR[id] -= redInterval;
, Y S- R+ V1 ~2 J8 Z
( _' r4 w2 A+ _( d4 S3 P currG[id] -= greenInterval;
& d U6 Q# p! G2 N% r Y& s+ g& [5 F) l( x" m: d1 i
currB[id] -= blueInterval;: }' S& H8 Y) J' V0 h9 t
* | G# T" W9 h: G3 o O+ L2 h newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 X9 s9 Q( `5 [. s! R* f' a
% V+ T& n, A/ r7 F# S1 Y if(--count[id] == 0)+ _: ?. S+ {4 ?- D
4 t. b. M+ B/ D: [; i' b* `: g {
& ?* a: x, y9 a7 B* w7 {# G; a' P+ o- t$ V% S# n3 e
fadeOut[id] = true;5 r! D4 g, R/ U
8 K7 [" L) P: u* f }/ @3 q2 T |" j. i l- Z6 y2 b
# h( N+ o) M) O( Y
}. ^8 x/ P3 z" |. A& U8 c- ` m
1 F0 k; ]& G) {% e! t if(continuous[id] == true)
8 V; F+ V, F0 A
k7 F( j. b+ M, }" i {
: ^9 S+ m9 Z; K0 r8 y
; G1 A7 C8 _3 p- i# a& F document.getElementById(id).style.color = newColour[id];
3 K* D& Q u; D5 F/ x/ g1 E8 R/ Q2 H- n* \6 ] F/ W
}# S* k# U7 b; w; E+ h
8 j7 h f4 D |- X% c: R/ ?0 P else
3 S ]* f4 t7 ?* {7 d- v I4 e! M7 k, }7 Q( O3 f$ z
{
" |, j, L* V* w3 p! F- T+ a
+ l% X7 A: Y" |8 ] document.getElementById(id).style.color = hoverColour;* d# ^5 d, D( H) S( X( M
2 d+ P: M" W+ |( ]/ _5 y) \1 s
}
+ X) @8 @; [5 a& z0 U t/ }0 N% c/ ^, y2 \4 w. O/ v8 o
clearTimeout(tID[id]);
& b+ K- H6 k0 H) _1 z! s( T# h/ B9 Z- b/ y1 v5 T
tID[id]=setTimeout('startFade(' + id + ')', rate);
" t5 L# R$ c9 ~$ f1 _0 U
0 z1 A/ H- M- B}
" x) D! |+ u* T
3 P% S9 [0 ]2 w6 hfunction continueFade(id)
7 S6 R/ t' h: {3 H8 V: A* A9 ~6 O! q: b# m7 e4 g1 `
{6 r# r2 H6 q, x; \ `4 n
! }0 y# p9 X; p# A continuous[id] = true;0 k A& H4 |7 P7 {: _
* A) N2 D3 n- x: M! T}9 d6 r+ \+ \* b! J2 F7 j* y
, T& f# x8 e/ c* T6 W; D
function stopFade(id)* ]/ Q3 I( L) ~$ T* i9 h
; b S8 u L* |$ E4 x3 e2 m4 P, z{
, }5 h* t# p% k& [+ [6 `8 ~. D$ q/ q- f2 @ ?
continuous[id] = false;
5 q- M: E1 Y5 b+ r; J8 E- P5 r/ }$ {7 g+ N5 O) ?. w) W
}
) h {3 _3 Z: e: M/ i7 K/ Y$ K" O
function StartTimers()' N8 P. O8 S T" D! `4 Y
0 Y8 u$ i7 j' b/ a7 N" |, L! s
{ //set up an initial set of timers to start the shimmering effect' }1 |1 V2 [/ @' A5 K$ @
; z* j$ G. ~+ s5 C t for(id=0; id<numLinks; id++)
2 I( V4 D8 C( P9 ~! s! ~
) y2 h/ I1 T% A4 U6 h( a# I; f {
& `$ D8 Z9 h- y4 b ?: X1 o1 w$ v4 p
t=setTimeout('startFade(' + id + ')', id*100);
' _* w" Y, E e
- |# `6 h* l4 r ?0 ]3 A( |* Y }
; {- ^* C7 c1 N2 O# @7 D
* {7 P# ^: I! S0 Y! b}
. e0 P+ t# ^2 X) k4 W- u0 I! s7 p% D
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, E$ d: o- e! b6 @( T0 R6 U# B
1 E% n; W0 J7 l) _0 e! oinitLinks('#FF0000', 6, '#FFCC77');
, m$ u; z" u4 a. d$ n( f# y7 X1 b' {8 m# T) o6 z( q
//-->, H( K' u7 B, N$ [& S- ~2 W9 ]$ d
" b) L* t- c. e# \. n- k# x4 J</script>
3 ^ i. _9 t; w& R& B1 E% m<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元0 a. b- w! S/ h+ w- u
</a>/ j; L1 [" A7 n2 ]3 O3 v9 e
<br>) C/ T$ Q; l6 G' M3 Z; x* W: y
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>* @* l) h5 ~4 L8 w
<br>
! a2 G8 N! f8 ~+ d2 ?9 E<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>" E8 B* Q# u: u& ~/ \/ s
<br> : V$ B) \7 m, N/ P2 N
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>0 v9 B6 h' p$ T Q J' Y
<br>
' W+ A( r0 p; \1 Z<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
7 s4 O9 q6 N( G( H* Z. k% ]<br>8 l3 X' v# e; {. {4 ^2 D9 _
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& ^ p- y9 P, E4 K7 v) j7 N& p' _( J
<script language="javascript" type="text/javascript">9 u9 J1 c- x! W2 i
<!--6 M3 K5 q& k4 v$ ?5 d5 T9 b
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering/ l% \! r9 T% h; `: j( }
//-->8 V# v R1 S4 ^- i2 V
</script> |
|