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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
6 x- L/ R; N0 K" i0 i<!--
- [# d' G0 ^! U* f( [9 W; c5 g// convert a single digit (0 - 16) into hex8 ?0 X9 Q# t. S
function enHex(aDigit)8 Z6 t" {" m- k. S8 j+ T* \* D4 v
{' L, d+ t2 l' n& |# r
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 J g7 X# s5 v9 `9 B}
# W4 [* b; u$ f// convert a hex digit into decimal
# H: p" t# V, ] U) ~! ?# qfunction deHex(aDigit)/ m1 Z) ~) z9 H* s9 h
{
3 \' a: s u$ s6 j( i return("0123456789ABCDEF".indexOf(aDigit))6 ?0 l# F" @7 m. u
}9 N: I2 \# X6 y
' S* \9 T( s. B( Z! a
// Convert a 24bit number to hex6 P, {% C& {, e; t$ k+ V+ R& U
function toHex(n)
' s7 S) o# _4 v) J& _5 e4 U{* ?& E0 q% N! O9 N- R7 I* ?* J7 \0 E
return (enHex((0xf00000 & n) >> 20) +6 k0 ~7 l, Q: a$ T6 p7 _: i$ R
enHex((0x0f0000 & n) >> 16) +; Z; g+ s, R! }7 F& {
enHex((0x00f000 & n) >> 12) +( X: H" @/ m6 z$ [
enHex((0x000f00 & n) >> 8) +: T& m4 Q; m2 n1 f4 D0 m9 o# Z& n2 I
enHex((0x0000f0 & n) >> 4) +% O+ m. ?! [ P J
enHex((0x00000f & n) >> 0))
# f( |" {1 ?; H; P1 s}; |& m3 b) g# I+ W' Z# P7 K
// Convert a six character hex to decimal" m$ ~4 v6 \- y4 A4 W& R/ R
function toDecimal(hexNum)
2 N. U4 K9 |3 L$ l) }{6 U. E5 o* ?; ~3 W; N W+ f
var tmp = ""+hexNum.toUpperCase()* x! d9 {0 [$ `0 P, A2 }
while (tmp.length < 6) tmp = "0"+tmp/ t3 ~8 l' v3 k
return ((deHex(tmp.substring(0,1)) << 20) +
& ]; e- H9 Z' f6 C8 ` (deHex(tmp.substring(1,2)) << 16) + 0 A( M& d, g( {/ H1 v$ z* `+ s
(deHex(tmp.substring(2,3)) << 12) +
; J& g' D; Y; n3 s (deHex(tmp.substring(3,4)) << 8) + n* x4 `; q; p3 j0 l# E i# |
(deHex(tmp.substring(4,5)) << 4) +" i9 Z' P4 ?" j, ]3 D
(deHex(tmp.substring(5,6))))% o0 A3 E; }+ Q* X b2 K
}
7 A6 I" J: C7 k. Y, X k///////////////////Shimmering Links/////////////////////
. Y: g: z: i# c9 c) l6 D$ A# X//global variables' H( C ^$ l. b6 h; M2 \
var hoverColour
2 @" N1 V, P2 e; j) Tvar numLinks;! c+ Z, z6 P2 ^
var rate;
, s! W S# ]; j& S( Yvar numFadeLevels;
; Q! q n7 ^+ T! Ovar bgR;
4 H$ j0 k s1 m! G5 @8 evar bgG;
5 C; f+ m, t1 }: j+ svar bgB;
$ l- L& I+ c' d6 T& x/ j/ Z& B$ rvar currR;
. v# x' k3 v2 F8 J) cvar currG;
5 h; j3 k, x9 i) }' L8 @! _1 nvar currB;
) S6 l( B2 l; K+ s9 b- Tvar count;
; o4 M: X6 g2 b/ q+ X, g2 Ovar fadeOut;
3 F% s6 w! t9 b/ K3 O# b, Jvar continuous;
" n2 p7 ~% T) q' mvar newColour;
9 s' g H& v+ s" i, I' u! u+ Kvar tID;2 k& W1 E, v' [ `* w" h0 s
var redInterval;# r- |! j' A3 M0 [
var greenInterval;
6 b4 E- |0 z$ e/ k4 y6 h" a$ fvar blueInterval;( A! T4 W/ H s# \# ~
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
; L6 d; d( {0 Z @7 \6 u2 {{
% v9 v( X5 R" W3 j$ @; e hoverColour = mouseOverColour;
9 K9 l$ n7 s7 t( b- E7 b1 M numLinks = numberOfLinks;/ B. K0 Q. n& B. n8 g$ o- ~! I# a
rate = 1;
8 W2 e/ Q9 g2 J5 f6 l0 C; K( W numFadeLevels = 30;( T6 g9 o9 q. u3 @- H( Q
function initArray(theArray, length, val)! Y* u2 d4 V2 ~- @! ^0 t3 a# i: X
{
/ b% y$ a( I* d for(i=0;i<length;i++)7 Y \' `( F! v/ C2 }, [' V
{
2 Y% z$ `! ~$ S/ ~/ w( k theArray = val;" E1 w$ M3 p) ?
}
+ d4 m9 b4 { v3 |% S ^: e }
& N$ ~4 V w% i* F bgR = '0000' + fadeOutColour.substring(1,3)( n. B5 V$ O& X5 h- W8 |
bgG = '0000' + fadeOutColour.substring(3,5)* ^+ W' ~ [' y! x8 @- J
bgB = '0000' + fadeOutColour.substring(5,7)2 \8 a. v, _& P! L' F; p
currR = new Array(numLinks);
1 d+ i: H& Y( I+ `5 {. y currG = new Array(numLinks);
, ^+ Y4 r5 I+ d3 r" Z) M currB = new Array(numLinks);
& H: w- M5 j2 ~1 M; _; S count = new Array(numLinks);5 Q# K! g; K; O
fadeOut = new Array(numLinks);
8 S$ F) a' f7 W* c continuous = new Array(numLinks);+ z( G9 W9 Y# q r0 O/ u
newColour = new Array(numLinks);4 m# m7 S* D! d, D& |; d: w$ d
tID = new Array(numLinks); D& D3 }$ R7 _8 x0 v( _; a
redInterval = toDecimal(bgR) / numFadeLevels;
$ ^! Y& u7 a) c9 G3 a1 I& ~, Y. |# i greenInterval = toDecimal(bgG) / numFadeLevels;/ `: o( A' G2 b& J" E K- z
blueInterval = toDecimal(bgB) / numFadeLevels;; C$ J2 Y" e" e2 P2 V( W% |! w; b O
initArray(currR,numLinks,0);* C7 a3 V9 m0 S$ H) }7 W7 z) k0 i
initArray(currG,numLinks,0);* W+ e, g4 Y0 T' T% f; ^; ]
initArray(currB,numLinks,0); \8 z8 g+ b ^) k% q
initArray(count,numLinks,0);! v0 X% T( \7 `" E9 t |
initArray(fadeOut,numLinks,true);
9 c. [2 U( U$ G+ M8 O% f initArray(continuous,numLinks,true);
) o8 H8 V7 f4 y, z) Z/ G}
( P- I7 z8 o$ ]3 @. a. F& H' gfunction startFade(id)
0 |' x9 O4 g% c$ C! O1 y2 ~; P{$ V2 X" q& s5 a% E6 \- G
if(fadeOut[id] == true)
" d* \) L8 ?& a9 b+ B { /*move colour towards background colour (increment)*/' ~3 w) c6 Y( a2 C% J
currR[id] += redInterval;1 Q: I1 f+ `6 a* J/ B* d# s
currG[id] += greenInterval;2 J) I+ J: V Q7 E
currB[id] += blueInterval;4 e B3 S Q1 @8 `& A
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
4 S, i7 z/ j& }& x; S& W1 x" A if(++count[id] == numFadeLevels)
" } L" A/ l0 W/ D' H+ C. n {
( \2 i6 {& R+ i* R) g fadeOut[id] = false;0 j" n s/ H- v7 d
}+ R* e8 m, ^: |- Z
}
3 G9 y7 e2 m: _) W ?; H! { else
9 ?2 d( }! s6 n# O {
% X& z! o7 D4 g currR[id] -= redInterval;7 _: F8 H5 _5 Z/ H
T% f, U6 N @% C1 a* H
currG[id] -= greenInterval;
5 |$ {1 _3 d+ u* k4 b1 H8 y9 D, l6 L" _: w
currB[id] -= blueInterval;/ `* S1 q- `1 L$ b5 `1 `( R
U0 W) @* w/ F# [& r newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 a) b4 A9 J( D* X
5 x% y4 t w7 N' V2 U) }6 C: h if(--count[id] == 0)
* L, H3 _/ i+ h+ j' e% v0 u3 u" y/ m' u7 y1 Y( N/ L
{! C; N# m' F! _9 t/ N
( u% J) t. C7 l9 K) O9 ?) H
fadeOut[id] = true;- \8 {4 P* `8 F: c# I
9 {' I. s8 C( [# ]: T
} ]5 ?- l# M# Y3 X1 J
" [5 `8 M, u2 G% p3 r9 g
}
: Z2 ^3 c5 c# ?7 x( Y4 e+ Y
, l- O; E( U" q if(continuous[id] == true)
2 ~; p" ~6 Y6 J4 ^& c: e, v. V- r" c) n/ f2 H& t
{
- |- b }0 Y7 S2 [1 Q) e6 D
; a3 |1 u: D. d; F* c* }; K) I2 p document.getElementById(id).style.color = newColour[id];
3 L) b4 D: d" \5 e. c+ C- j/ j9 ~, F2 F- f' C5 a" b) b. b
}& e9 X3 U, ?6 p3 f2 x: u4 F3 V
7 a( d1 _9 c7 m$ x3 E @7 R else) G3 m- ]$ S; |; o' a1 x
- A5 `5 b$ L7 B) O3 d& Z
{
+ J; i+ M" ^# s) l
; O" f! W a8 c" S) p! i document.getElementById(id).style.color = hoverColour;! W f4 |5 z, G& p- O/ h. g
% X# L5 M: ~8 H- A6 A) v* @. N
}3 Y4 F. S% S. }3 y( u
6 ]; y4 l$ W3 B7 A' n/ b
clearTimeout(tID[id]);/ B1 r$ k8 h0 ]/ O# e+ ]- A
. a, F+ Y S$ U( d" e5 n tID[id]=setTimeout('startFade(' + id + ')', rate);, A% q1 x" o) V# B% Q" K
5 H' Z' ]8 D; h- w7 S3 t
}( Z3 K$ `" @2 p1 _0 A! A
6 ~& F& |3 O' m) {& G
function continueFade(id)
! _( @( Q6 D2 q2 b9 m8 Z3 [+ |
/ ~6 Q: I$ s7 E- G6 ?: _{
" M" _& f: K1 _( ~3 _' \$ Y5 u
& H. T' u! M- A1 } continuous[id] = true;8 u. y- c" F, h3 K
+ n( S/ k- c6 q/ b}* G/ @! O$ v3 s! h+ W, N
/ S* w" W7 @$ r" A* Z
function stopFade(id)
$ @# E% T, U6 Y6 e$ ?8 N! e1 ^: y: c& z9 Q7 o
{
& e9 R9 F4 Z- l6 t0 p2 H
% k- ?' ^7 L# W3 K0 V. u continuous[id] = false;" R% K0 b. M9 [+ H& e. F
0 f0 s% a( e- o5 f7 \7 N/ T}
7 o& D7 ], N3 v# W8 l
$ ~- V: i$ |% X" S0 Ufunction StartTimers()% \) W8 z# Q$ m
7 Q2 O. K5 _, C1 k- M{ //set up an initial set of timers to start the shimmering effect
8 ^; Z+ l, t/ w* _" w( P
2 F7 ]1 v; ?1 c3 Z- ]. m for(id=0; id<numLinks; id++)) s( Z6 K3 Y, k, }5 f8 U1 u
7 \* f$ ~( q& y8 }; y' ?
{
" L; o: B, }; D9 h9 _% O' e5 b
+ U+ W6 K p% v$ X) O3 Z4 C t=setTimeout('startFade(' + id + ')', id*100);
6 ^8 n* ~, A3 N- W/ b- v1 Q
7 z# ]4 S0 M% ~( r, V( m9 u# w }
6 z* P6 @6 c! |" c& j& U
2 {( t! d; h6 I}. ~" J1 R8 `/ p3 p$ `) X. \
3 }& t0 d0 [) i3 U
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')5 | e1 j: \0 B7 ~- D
% x n A7 M+ `+ x4 W( d7 V" g! K# einitLinks('#FF0000', 6, '#FFCC77');7 w+ I& f, `. o; g! F0 f8 G
" P; C+ J& Y) R4 L: ~
//-->
1 ~1 [0 C* B7 H% P: |$ K+ x3 x
: L5 K* g9 h$ D6 V</script>
; K3 B; {, r U+ o3 }8 g<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元: X7 ~$ Z3 S. b$ B
</a>& [4 I2 @0 o& N9 ^* D2 j( H
<br>
; t Y) F' A l2 X5 d<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>0 g) b# j J- L, u
<br>) h) }5 w4 h6 w
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>1 y8 c6 P9 n* K, X2 S
<br> + q* J& ]; Z/ C2 A! s, C# r
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
' K7 m5 K. ~7 m+ Y* w<br>
! [6 j& W$ g# r<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
( g: i. J8 j0 ]0 ^, h$ Y0 ]- v<br>$ W d* x8 b6 P4 h6 O( N2 S' E
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>; u! k5 N1 S3 _5 E/ N/ `9 o! C& G
<script language="javascript" type="text/javascript">6 O# S* b- B) Y) r: ?6 l, R
<!--
' l N3 @$ ?/ S6 f( ksetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 |5 s7 E F9 X//-->( {) D% t1 O( R2 J/ V$ s% H
</script> |
|