|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">- P* o% q" B9 | _
<!--
- F/ X/ i! j& S# z: R4 \& G- c// convert a single digit (0 - 16) into hex
( U# N& P5 O1 @ w7 |1 ?function enHex(aDigit)
- M: I4 P. N) J! ~{
$ A* \3 m. I5 c. J- F* q( E return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 U$ I2 ?- ]! e; Y* Z) H; {4 H}, b9 \ G% V; r( B. F" ]2 G. }: B
// convert a hex digit into decimal
. [9 e s1 `3 m. N3 w/ f+ tfunction deHex(aDigit)3 V0 A w- r, N6 z L7 s9 h) g- v
{
5 ^* C9 F% V6 @. H return("0123456789ABCDEF".indexOf(aDigit))
2 M" Q% Q; B6 R}
4 t2 f. u" i6 }, _7 w
n( k/ G0 }- s& Q O// Convert a 24bit number to hex
$ o+ L$ w; Z$ z" f$ yfunction toHex(n)+ O C7 Q/ J' H6 I8 Z& `
{7 n6 T4 R, ^0 K3 A% {: a
return (enHex((0xf00000 & n) >> 20) +
/ l9 K- o7 y2 p5 z. B; O% [- @ enHex((0x0f0000 & n) >> 16) +! D- V: A+ S7 L$ e9 d
enHex((0x00f000 & n) >> 12) +
5 H' b( J. m# X6 x$ L enHex((0x000f00 & n) >> 8) +
" e4 O0 O7 i" z6 a G enHex((0x0000f0 & n) >> 4) +
1 _( o1 [! V& d& p. f) ? f enHex((0x00000f & n) >> 0))# S: }' Y2 _7 I7 ?5 @; T- D/ @. a
}
, I& C" g1 W7 k. O// Convert a six character hex to decimal" t; Q$ u5 Z9 f6 y
function toDecimal(hexNum)
1 y( R$ L' o9 h: ~( s{
2 T. e9 i n& q& R" X2 E: w var tmp = ""+hexNum.toUpperCase()7 V7 u3 P% @* P1 y+ l
while (tmp.length < 6) tmp = "0"+tmp; ^8 {. N' A) m: r' ^
return ((deHex(tmp.substring(0,1)) << 20) +
- F2 H) n' A+ B, F$ } (deHex(tmp.substring(1,2)) << 16) +
5 p) M, E2 i! P- e& T" x (deHex(tmp.substring(2,3)) << 12) +
5 B) p+ d' V# A) {. b1 d: Z (deHex(tmp.substring(3,4)) << 8) +6 d& E1 a$ |" i7 f. O" l
(deHex(tmp.substring(4,5)) << 4) +# p2 H7 U% o+ X* m! u4 d
(deHex(tmp.substring(5,6))))! ~2 z5 e, [8 v1 J
}
# O2 {! S& N9 M* i6 T///////////////////Shimmering Links/////////////////////
4 v0 Q' A. H, A; N8 k8 R//global variables
' n3 T8 S. R% w: T) }var hoverColour- [0 _/ p( |7 o' ~
var numLinks;" i/ C) F# L U5 Q6 _9 `0 y/ U' x, @
var rate;
2 u0 Y5 Z. O' u, [$ }var numFadeLevels;
# X9 |& a% K7 e Tvar bgR;: b! l. ^1 J4 H- h
var bgG;
- m0 D u2 ?% ~var bgB;
5 ?8 D/ h# @, R' ivar currR;( t" m, w8 T6 z
var currG;
- j" k [2 O( t! Q0 E5 j/ f3 e. R3 |var currB;6 h* X2 |( C1 l3 i; M
var count;' m) y1 Y' x1 H# e8 ^) T
var fadeOut;6 S/ s# g% \( h# S4 @
var continuous;
( V: ~: @5 |& d* B- X7 cvar newColour;' x' u, X3 Q5 C) F f$ G" J5 ~9 K
var tID;8 U& L% N: G0 @8 r4 l# E3 J' \
var redInterval;
* j" Z1 B- e l! Cvar greenInterval;1 v4 M! r8 U3 S; M
var blueInterval;
8 \' V# y) r* h$ K. i+ O/ C% Hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour); b* j! W: D9 ?8 y; B
{5 L+ r# m r8 P4 I4 M# S+ h0 E$ b8 L0 Q
hoverColour = mouseOverColour;6 L6 h* V j) V* V$ ]! d$ Z4 d5 K
numLinks = numberOfLinks;
@0 M) x* k9 X; k6 H/ x" e' d( @* c rate = 1;/ l9 H5 ~$ ?% \9 z% {, l
numFadeLevels = 30;* y5 g R s' d2 |+ g& n
function initArray(theArray, length, val)
1 Q+ b f( { S, w2 d5 h3 l& I0 ~; @ {
) ~4 W) b, n& U7 S/ h! |8 p/ o for(i=0;i<length;i++)
5 _/ O# Z1 _0 Q5 K6 l5 z {* }' f: y) n! t( a/ ~' ^
theArray = val;
8 u, {, C( N- U0 Q2 f! q8 |6 e5 y0 B }& p- ^! Y8 }9 I
}
) r% E7 j$ |6 l5 c& K. g; P) H bgR = '0000' + fadeOutColour.substring(1,3)# @& ?0 [$ F- C0 |+ Q/ u4 z
bgG = '0000' + fadeOutColour.substring(3,5) `" g8 E" o4 G, k# ?# e" c+ y
bgB = '0000' + fadeOutColour.substring(5,7)+ d: _! Z6 A! j2 K: z- H+ x
currR = new Array(numLinks);
3 h6 u$ d" W* [# p8 U9 w* Z currG = new Array(numLinks);- H0 ]) W3 J% L2 B/ V2 Q* p( u
currB = new Array(numLinks);
5 R1 ^/ ], h% [- m% V* k, V0 u% Q count = new Array(numLinks);
9 L3 @0 @0 ^6 [# _ fadeOut = new Array(numLinks);+ j: r1 ?- |' |5 K" z. j r7 C
continuous = new Array(numLinks);
5 R9 y& H* h' ?% Q' n% G4 ` newColour = new Array(numLinks);, h3 l1 k) ]# B+ @4 F$ T$ Z7 K
tID = new Array(numLinks);2 j2 j" ]5 U$ s# `( g# o+ f6 k9 `4 l
redInterval = toDecimal(bgR) / numFadeLevels;' @6 a7 d2 h8 n
greenInterval = toDecimal(bgG) / numFadeLevels;
, ~" K R/ {# ~2 n, ^0 A3 O0 a blueInterval = toDecimal(bgB) / numFadeLevels;
6 `) ?' K5 h- F/ U9 ^5 H+ a initArray(currR,numLinks,0);6 Q! y0 s, n' b. A
initArray(currG,numLinks,0);# D( [& _' Q$ w5 x5 E
initArray(currB,numLinks,0);
. A. J* N# r! [# ]9 Y initArray(count,numLinks,0);
1 N2 {5 C1 Q# x& I/ Z; ~ initArray(fadeOut,numLinks,true);
% m; K& L& m, P9 v/ X8 i; q initArray(continuous,numLinks,true);; m0 o3 q9 o/ {: d
}
, O9 k& j) B5 ofunction startFade(id)
# A8 h! y" x# I3 J' O{5 V* K! M& p# v. Y$ U
if(fadeOut[id] == true)2 I, d( b g' d
{ /*move colour towards background colour (increment)*/' |. Q7 \ @# _% m
currR[id] += redInterval;' i' h7 G9 l l8 m7 J5 A: }
currG[id] += greenInterval;
2 ^. v! x) I8 X) F currB[id] += blueInterval;
, w2 O6 a8 V0 X. h5 s2 e1 S ]3 H# ] newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 q9 R; J2 z* C! p5 r if(++count[id] == numFadeLevels)
# O! n0 C: O3 k3 Q ~7 g {$ l( b3 ~. V7 Z: v
fadeOut[id] = false;, V$ R7 m& _- A
}
5 h3 Q$ [$ S( E6 r* E* [ }
5 L6 v* x& q4 Z+ A4 j else; P# n3 u- l1 i t
{
: q* F4 z, p! E currR[id] -= redInterval;
/ f- J6 s. J+ j- Q
. j4 c+ Z# q, C- i currG[id] -= greenInterval; h9 y- R G* v0 D6 S
* @2 b9 @" X; V* p: Y
currB[id] -= blueInterval;
6 h: n# _5 |2 J. x3 i; S- y
& g% U1 r. H Q1 m; e9 K newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: i. Q. }. I5 w: R6 N: [5 J2 G1 G6 s. Q4 @ Y' @- N
if(--count[id] == 0)
9 j* N1 H, g( ], r1 R
% r' B& t/ O+ {% K6 e {
. z- y$ k% E3 ]( L& U3 M! D0 ]0 Y7 n& x
fadeOut[id] = true;: E& G! j q% ~& l" J9 ~4 w; d
; v" A' \: U8 `. d0 b; W+ c J! k
}0 v, v! R1 Q. w0 `3 B
% |6 o0 N" f8 ?. c3 R }
/ C/ _6 L7 t W8 r9 ?. N
+ W2 e. ^) i3 a$ [9 G, _, s if(continuous[id] == true)
: E: d( d6 S* G7 b! a% p* G6 r& D
+ ~$ v0 P% R. W3 d5 M4 X# h. A {
; k @$ A* f' W- }
; ~/ R+ X: O/ J( {5 q' \ document.getElementById(id).style.color = newColour[id]; 3 z- X" x! I3 z; {
V y3 E- [' E: h/ j( \0 Z; m }# ?0 R* P( [8 O: L) V4 \8 @
+ c& g! k* M1 a" H1 n; X! O. \ else
4 n9 O! f8 @# _* l, h* b# |6 c/ P, v' H" L+ T8 P/ Q1 Y
{
) Q* _6 J) j& M. f
5 N' Y8 O8 o: b) E/ o# B4 a$ Z document.getElementById(id).style.color = hoverColour;" j2 i9 L! i; r' h; {6 B. s8 F
) |8 s. O$ L6 V1 f+ K
}
- n$ Y) b. D* I0 X0 i5 J1 |! h _9 w# @" _. s- ?2 u( R4 T+ I4 i
clearTimeout(tID[id]);4 f7 J0 S" ~7 K6 C
5 F n* R% @& Y9 g
tID[id]=setTimeout('startFade(' + id + ')', rate);7 @0 M, v, L. ]
6 X& N( B3 Q0 X1 F' i
}
- y% w/ Q9 v8 b% T' f3 }1 j; b& t6 J6 V& D% g+ \) P% d
function continueFade(id)0 F5 ]. X5 h6 V0 I
Y& i. C5 q' a& s9 o
{
1 i7 G1 D. _4 q. C6 ]- N7 X. v! Y4 }% p
+ W) t; x9 D* L continuous[id] = true;6 E( N( ~/ |& L6 M& q0 r* h7 U
7 k4 j% B8 f! |2 Z$ M+ E$ j% b
}
" t6 Z/ o& [ R: S) J6 a, ~6 Q$ u: u6 A7 a9 M: b
function stopFade(id)) T% i5 U5 }1 {* g" |; c
2 q( h- |; \/ c8 x6 z. {; v
{
' q/ v- z! }9 }2 e6 ]* `. L) |, B( H/ l6 V
continuous[id] = false;
1 \( F- N4 n: E* H6 M
$ l T3 ?& w# W) b0 U7 ^. ^}
$ }# S! p5 E4 i4 x( N1 s6 o* o D; d% ]& K8 A
function StartTimers()
2 F; F: |% q! I; C/ H* \& u0 @
) l; K k" z+ ?! t8 @{ //set up an initial set of timers to start the shimmering effect
* C/ Z2 m2 Z4 V5 f4 k7 n7 C- ^4 b; K) \0 i- m8 a
for(id=0; id<numLinks; id++)# d7 u6 } B( R# S# d8 Y
% }# K4 d$ O7 D; I0 u" N# A
{( B8 e9 D Y7 n
7 K) j& {" ~5 _$ O t=setTimeout('startFade(' + id + ')', id*100);3 U: s& b2 }1 f" n1 K" ?$ |
6 c* W5 t8 w0 o F0 e) {2 f }* m, K( F7 m% p h1 {$ B
# a0 g3 k- m+ v& _" f1 U* y- g) c} l7 f( x. B# T" m4 b% Q/ q
$ u4 \" q9 Z0 ]! A4 n) f' L5 n
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')( ]& _; [* e$ [/ l" i0 c
. f8 i( g6 S ~5 ]- y' f$ U
initLinks('#FF0000', 6, '#FFCC77');3 z5 l" v* c% ^' L
$ d$ G1 I5 g. V \" i//-->* l9 j8 U5 I; B! M6 j8 Z" g
6 g) O! G, `3 p! T' Z8 W</script>3 c$ j1 M0 S0 v% H
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
) Q/ t0 R6 X/ Y, ?</a>/ h; X3 K* _# n& A0 c: Y# @
<br>0 x" g; L; v8 B F3 ]4 Y
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
, w) g+ M$ b' r% S<br>: x/ f: D. Z- {( E" z
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
3 X7 {! C! F/ x5 P" _5 i. E" V: Y<br> 8 b z) r1 i' P
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
1 O$ I* w) i4 L5 Q<br>) M' |5 x$ N5 _1 y6 ]4 m9 p
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>( X9 @: B9 ?3 g% W$ W7 j
<br> Z4 H+ i( g+ e
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
' F/ u r8 [& F; n<script language="javascript" type="text/javascript">
* w6 N# ?" ^- n# U<!--/ a/ U9 l& ]) l9 t6 T
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering7 r$ P% t9 i, g' ]) I+ M+ h
//-->5 L- I; B$ E9 x8 O4 K( A8 t
</script> |
|
发表于 2008-1-21 20:48
|