标题:
网页之文字的循环闪动特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:48
标题:
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
$ N3 E$ b% r. J4 m3 [
<!--
1 U, d R8 {! Q( x5 t/ X
// convert a single digit (0 - 16) into hex
. y; V- `8 j+ ?0 ?1 H. l
function enHex(aDigit)
$ f3 G" K5 g& \# k% `6 U7 k6 G! y
{
1 j7 \9 ~1 `- g) a2 N! [
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
1 |. j7 d2 m3 |- ^
}
% u, {" {1 ^8 ]" k$ s
// convert a hex digit into decimal
9 @: L0 G7 N( S4 u
function deHex(aDigit)
' T- W7 M* E( o9 k( w/ K, p7 P
{
4 u; d, A% ~# J3 i: G) y) G
return("0123456789ABCDEF".indexOf(aDigit))
1 I0 f) e. s" ^3 t$ d
}
$ E4 o8 c6 W# P% @# l1 x" l+ l
, N) @7 K0 f5 m8 M! Q
// Convert a 24bit number to hex
* v2 c2 o+ Q2 n
function toHex(n)
# R+ Y. [1 V1 M" u- `" W
{
e* W! H: q/ z0 e) ?3 Q
return (enHex((0xf00000 & n) >> 20) +
$ h5 j! T6 \, B# D" F
enHex((0x0f0000 & n) >> 16) +
4 ~7 {" p* S0 _2 F7 ~3 L
enHex((0x00f000 & n) >> 12) +
- M% R; y: Q! O
enHex((0x000f00 & n) >> 8) +
4 i: [2 R: N$ z4 c9 u1 E
enHex((0x0000f0 & n) >> 4) +
) l) s3 `3 ?! F( T0 p# ]- e; F
enHex((0x00000f & n) >> 0))
% ]; J$ D+ T* b9 h) L8 U$ b/ V8 a$ \
}
* Z3 _/ N4 B* c
// Convert a six character hex to decimal
. G9 p1 ]+ f' e [# y% W
function toDecimal(hexNum)
, a, o/ o! E7 {1 r
{
- ^% ?7 v7 ]0 K# L
var tmp = ""+hexNum.toUpperCase()
( \" Z( j0 e8 [% M+ [8 ^
while (tmp.length < 6) tmp = "0"+tmp
, |" Y8 U7 I" }3 N. S0 ^
return ((deHex(tmp.substring(0,1)) << 20) +
* [- S; x) S% i3 S7 B: J+ ?2 N
(deHex(tmp.substring(1,2)) << 16) +
' _# U- V1 D$ ^/ L5 V
(deHex(tmp.substring(2,3)) << 12) +
8 ]0 b' G& S5 R& _
(deHex(tmp.substring(3,4)) << 8) +
8 t& d# Y, \2 Y! n( @( n8 I1 k
(deHex(tmp.substring(4,5)) << 4) +
& w" C; U( K4 H. W
(deHex(tmp.substring(5,6))))
# B# F$ _3 J5 O! _) _
}
) z. e2 n4 a6 J5 Q* _3 C9 n
///////////////////Shimmering Links/////////////////////
+ x6 u1 V2 }& C# J. H) c0 \ k2 e; [
//global variables
% s. n$ U& I& b+ N" b
var hoverColour
" P8 Z& k$ z# S4 A# |- b
var numLinks;
3 z8 b! j3 @5 ^ U
var rate;
: a3 @' T3 c- k' E9 k
var numFadeLevels;
% ~. i. b5 s: A- x; e9 K; D
var bgR;
3 Z. ~) V n; C" e4 Z8 S. m4 W- m
var bgG;
" S" u f/ q& Z5 u2 ]! [/ {; e
var bgB;
& M2 y2 M4 r0 ` D/ V: v: x
var currR;
6 l5 n" ?" `* [8 D! G" J3 E n
var currG;
5 I0 o1 l* F. D0 f n0 D
var currB;
: b% g8 J& u4 K8 C& y
var count;
* G N& `* h9 W9 p
var fadeOut;
* | E( Y. Y8 {0 I' P
var continuous;
G: P! H0 l% U2 p( H5 t4 d
var newColour;
0 D( }/ \/ ?& h( B( e X
var tID;
3 w8 S8 j. @4 e# Z3 m. I$ f
var redInterval;
) V# s0 L* S* ]4 a, {) }
var greenInterval;
7 s/ h1 n) J- `3 ^* R% u( Z; g' {; t. ^# T
var blueInterval;
, z# [1 Z& W0 ^6 M e d, ^
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
! G _* E- M2 g& D" K$ [5 P
{
; S# I% m% ]0 @9 T
hoverColour = mouseOverColour;
* ]( z( m5 l% n% z3 H+ _, A
numLinks = numberOfLinks;
+ y: z& X3 }+ U/ W+ r3 C9 k6 G3 @
rate = 1;
7 G; h9 R6 T" O& H4 @- V
numFadeLevels = 30;
1 x, _7 l# b. N! I
function initArray(theArray, length, val)
. i! X/ Y: t w2 C9 ~
{
" G: O* A c3 J5 L0 |
for(i=0;i<length;i++)
/ V' Y: b+ b) Z! ?
{
$ E0 v6 [4 A+ Z T
theArray
= val;
* [ q' y# z' m6 ~5 t
}
- u5 v% |4 t: l+ J0 G
}
6 n5 g3 A& z9 M. a
bgR = '0000' + fadeOutColour.substring(1,3)
. w" f3 A( m. J
bgG = '0000' + fadeOutColour.substring(3,5)
2 ^- B: {* ~9 }; V* {$ f
bgB = '0000' + fadeOutColour.substring(5,7)
6 K: w; U/ r( n: E" C' E
currR = new Array(numLinks);
# f, A; g; ~( M. C U. j. q8 r
currG = new Array(numLinks);
# b" n3 r( h H6 m/ J0 k8 l1 B" s
currB = new Array(numLinks);
9 ?5 b1 p* B3 S6 B
count = new Array(numLinks);
" z7 N( F& ] ]& a3 ?# P" c" Y2 L
fadeOut = new Array(numLinks);
9 x* B+ `! M$ L5 j
continuous = new Array(numLinks);
! T" q* B% n M$ e8 t8 Q! v) Q, |: D
newColour = new Array(numLinks);
) H6 H9 R! G% v; n; f: p
tID = new Array(numLinks);
- ^" F% D+ O* f; M2 R$ l j8 e
redInterval = toDecimal(bgR) / numFadeLevels;
: ]0 z8 y; F/ Z: G$ Q
greenInterval = toDecimal(bgG) / numFadeLevels;
0 O$ [: {# D( l% N6 G
blueInterval = toDecimal(bgB) / numFadeLevels;
! G O$ _& k9 E
initArray(currR,numLinks,0);
! y- B/ |* T8 u" `- @. W5 B" E
initArray(currG,numLinks,0);
6 v5 D$ \1 M$ T8 `3 V
initArray(currB,numLinks,0);
" e" @! c L/ d2 x5 w1 W
initArray(count,numLinks,0);
; s3 D5 q2 s& E% j: W4 \7 t6 I/ K# s- C6 w
initArray(fadeOut,numLinks,true);
+ ?* f$ D. k" E" j: m! P K% e
initArray(continuous,numLinks,true);
8 D- {( A$ C" ]9 J6 u- d
}
" T( b. X' Z* q- C
function startFade(id)
+ M1 b9 A! F: l& S, L( t4 \
{
+ c( g' W6 d& v/ ^) T
if(fadeOut[id] == true)
" I" r( T5 g$ ^9 a4 m4 }$ v
{ /*move colour towards background colour (increment)*/
8 h& h# A! C' G( u+ N
currR[id] += redInterval;
+ A$ P6 o& Y6 Y( d1 w( i
currG[id] += greenInterval;
0 s8 A2 b; ~8 [5 H/ E" I' y
currB[id] += blueInterval;
0 |& b; v L, J/ A1 Y L
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
/ f( c3 @3 J/ U. I4 U
if(++count[id] == numFadeLevels)
; i2 P0 U2 N7 M8 c: [
{
0 C+ e( Q. j6 a5 m& n
fadeOut[id] = false;
- g0 C5 k7 ~8 q" e$ l5 T
}
$ f. ^* K2 G* t+ o+ m
}
$ K" a8 {6 J; p( Z* M% @( c
else
1 {8 q$ i' v: h1 L/ I
{
6 I3 r4 I, U* a6 S
currR[id] -= redInterval;
3 W2 H j) z7 F- g8 X' z
8 g+ D: _0 G" c6 V4 Q
currG[id] -= greenInterval;
2 f5 j( B1 P9 b8 l2 F; ^
! g; a' B/ i) G6 D1 z( r- [) P
currB[id] -= blueInterval;
# ^1 H" c6 j& N; {
7 F4 d* Z3 |/ q9 k S
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 m6 U$ l0 @2 Z- i
d8 \$ `% N4 d" X
if(--count[id] == 0)
4 C3 U; R: _( x4 ?6 z
" l( z) B. r- H9 }3 N+ v
{
8 N* O6 j" _! p6 U0 I4 y
8 J6 x3 i: Z/ _- z
fadeOut[id] = true;
7 [+ s# M% [# A3 K) r3 E- j
4 P% D; b+ s y, J4 A8 O0 c. E
}
g" G0 c/ K/ d& \! \, e
7 d" _) m* s1 k1 o3 D! H
}
$ B4 G5 l% u% m6 x% r
/ a% E( C9 j \5 Z1 s/ q% J" S
if(continuous[id] == true)
/ U8 j; n% i% f4 I
: r+ O2 X2 ~7 V" D; G( T
{
- b# W) a- f) F& M0 U+ J& C
; r! U ]4 v" S- R" m8 r; U9 ^
document.getElementById(id).style.color = newColour[id];
M0 X) z1 ?6 f: ^
; U, Z! S3 g4 K" S' x0 T+ m/ ]4 |. H9 S
}
" d' Y4 u' X( X" f# R, z; y
E' o) I* L/ \! y* h* y" U
else
2 x# J2 U3 L6 }
* e* R. e% O; w& G7 ]& x+ h6 _
{
( T9 {- e) ^ l* x% s6 F- Y1 C( M2 Q
/ u5 O9 C8 W6 D' I! b8 h
document.getElementById(id).style.color = hoverColour;
6 u; d8 l0 K2 [' A3 L( Q
3 p! h" m) F0 E2 s/ y! p0 R
}
- R4 a( a( z& o3 J0 d
; w2 e% [" ^0 b1 ?2 p
clearTimeout(tID[id]);
; p0 M U- x i6 L) _0 O
- L- f4 {& z: t" j7 X5 F
tID[id]=setTimeout('startFade(' + id + ')', rate);
H( P! ?( `0 {4 B- N5 e7 c
S; I) _3 ^4 a4 D
}
' x& C } M+ c
* R( G0 g- }; V
function continueFade(id)
8 z. }6 T& B3 P+ e2 @! m
; U% i: J4 |/ t T+ [# T9 w5 i
{
' v& P+ V; x8 `4 ?; f# H
8 o8 W1 K2 y0 ?) G( t1 Y
continuous[id] = true;
4 c' q7 _2 k! Y# y: D
$ U5 ^7 _! ]/ K- x$ d" d
}
% B1 b! V) P4 `. j1 I5 x% F
+ D3 C0 \( I$ k k4 b
function stopFade(id)
( O2 L* M6 u* r8 K" L
9 r+ }' `, W* c' L( Q9 g
{
4 i; T1 N. I* y+ Z8 V0 u
, h& G# m5 M1 x
continuous[id] = false;
! Z7 z# ^3 s4 ?0 e$ K9 _- o/ z# j
8 L- D8 [; E$ G) v
}
$ X( \ X/ M. [
9 d; ?* v: o# C6 o
function StartTimers()
( A) I m) ?6 t) o. `) t3 h
. W6 A! C$ O" | w: e
{ //set up an initial set of timers to start the shimmering effect
! m7 i6 p( r6 ^8 d7 u' q
0 x" h- K( B( X/ w
for(id=0; id<numLinks; id++)
" ]- [/ Q& M T8 ^
0 i; q. T# g7 I8 J4 `) \8 p, a6 T, n
{
& G6 _# N8 O( [. D9 j- G) i6 d0 X
2 s0 T. d8 r& g B5 J
t=setTimeout('startFade(' + id + ')', id*100);
( R9 U# l7 {* A
- s8 O. p! L1 c7 ?
}
; x5 D: F% V3 r( u' f' G
$ [& b% n, O) w1 E- |
}
' K7 T" ~# U2 O4 {+ ]" v' A7 n" J
* Q3 A; T, B$ U$ D4 F6 i2 d: ~! [
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
% B7 s$ [5 \* r
: N$ Y0 T* c& v& Y9 X+ t! _
initLinks('#FF0000', 6, '#FFCC77');
9 c+ A/ S4 ^/ C9 H0 y
" m, e% _: Q% w5 E, |; c, Z
//-->
+ u* Y5 H1 T# l/ N
8 [' K- F8 v% c! M! J+ V
</script>
. P1 i- J& R4 w& Z
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
! [' q5 A1 L8 Z, l5 y0 b. c A
</a>
) _3 g- F$ l7 `* s
<br>
! a- u; ~; B8 ?5 p( E% t, U
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
5 ~1 E* L, N8 Y7 E( d4 m+ r& w2 K
<br>
1 Q/ L! ^- @3 d1 Z2 d
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* |0 X! f3 v" f/ ~5 L
<br>
! D: d+ r/ L2 i$ R/ p
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
) S+ [, u5 X$ R3 c9 I/ w$ I* Y' i
<br>
9 r; v- f+ [ f' Q) i' l
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' |9 G) ?: b1 ^- a! w3 m1 P
<br>
$ `+ m( ^8 z) n& ]9 S, C+ j
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- z: s. ?) H0 h0 f
<script language="javascript" type="text/javascript">
) ~2 N5 A; S/ Z) ~ r
<!--
& S J/ E0 N0 t9 A: d$ r0 {
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
6 }. a5 P. i& g. z% O1 O
//-->
" ?! |6 ^5 X2 W9 d/ i( V9 Z
</script>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
