标题: 网页之文字的循环闪动特效 [打印本页]

---

作者: zw2004    时间: 2008-1-21 20:48     标题: 网页之文字的循环闪动特效

<script language="javascript" type="text/javascript">  S* M$ t' S/ t" C, E
<!--3 A( k6 l/ Y$ ^9 p3 P+ b8 l
// convert a single digit (0 - 16) into hex& R. S3 c# P* r  ~
function enHex(aDigit)
; w! P- m8 s, V/ g{8 O5 [( [" |/ ^% R. }
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))' H7 P. A2 T) S+ E: r8 z
}
8 D! U/ r3 o' w. m) f5 P) w// convert a hex digit into decimal
/ x: ]4 D0 ^, @function deHex(aDigit); l* [' @1 f  d& L" B7 Z$ x0 O. h7 g* L
{" T! g$ R& r0 {% K: k" c" n$ c  L% l
    return("0123456789ABCDEF".indexOf(aDigit))/ X8 c5 n/ C8 B% Z- {" F
}) j; g8 k! q3 |9 \

0 R/ A1 E# T  w. x( [) D// Convert a 24bit number to hex
, O( N" x5 W( |& }6 Z- Dfunction toHex(n)
$ x! s8 Y' j- b* o; M% \5 `3 X{
8 [1 ]4 _2 D, g, h    return (enHex((0xf00000 & n) >> 20) +
8 X/ L7 d# N8 g8 O( X            enHex((0x0f0000 & n) >> 16) +
* h: k/ e) @' I! ]0 d            enHex((0x00f000 & n) >> 12) +
4 n0 H- a0 Y+ C$ D& k6 h0 M            enHex((0x000f00 & n) >>  8) +$ t1 w; G% G2 k7 i8 p" }
            enHex((0x0000f0 & n) >>  4) +
/ B! M7 M! P4 ^, M  P            enHex((0x00000f & n) >>  0))' d- `' G6 D! z( E; v% Q
}+ _: P: f' s/ n7 T
// Convert a six character hex to decimal
) I7 B4 b3 ^# T8 J8 R- j; }4 Q/ Yfunction toDecimal(hexNum)
5 {: V# v0 c( z# n& @{
" g% Y* l# ~0 ]1 u/ Y           var tmp = ""+hexNum.toUpperCase()  a& ^: f6 K4 ]3 v' `. B; U
    while (tmp.length < 6) tmp = "0"+tmp
% m) H# b0 I& a7 H8 W0 t           return ((deHex(tmp.substring(0,1)) << 20) +
2 ~* Q, l! ?: B, z& q# ?2 V                   (deHex(tmp.substring(1,2)) << 16) +
* c+ m9 N% E7 S& i) K: \& \            (deHex(tmp.substring(2,3)) << 12) +
3 [- Q" u6 M5 p0 }. w0 `8 Y            (deHex(tmp.substring(3,4)) << 8) +
0 \2 r) k3 `8 S. r8 T# f            (deHex(tmp.substring(4,5)) << 4) +2 l3 m6 n' O  r7 {0 _
                   (deHex(tmp.substring(5,6))))
; N+ _5 t8 i# \" `- x" M}
5 H9 \0 j1 J) P6 T* U% D///////////////////Shimmering Links/////////////////////& a  q! o5 ~  ~# q8 v% Z% l$ ~
//global variables0 l6 n1 G* C& {
var hoverColour. N) D% ^! ^( v0 v9 y. ?# f0 _
var numLinks;0 Z0 c* g$ Z9 T* K8 H8 K
var rate;
1 o1 X! b; k7 m, o1 v0 o! ovar numFadeLevels;6 v, E+ r# F+ q6 g  w
var bgR;
8 C. J% p6 N" g% s' B0 I4 f2 Yvar bgG;
! M" C! [, T+ p! w# Mvar bgB;5 P0 k! s6 R! A2 h* V  m
var currR;
: l6 C4 `- o3 K% B) mvar currG;/ }; x) f; Y7 K# J& C
var currB;
3 n+ c. e5 a" N5 _var count;* [% K$ h6 u5 R) t
var fadeOut;
0 U; t2 H& a. `, h- Gvar continuous;
# o5 J, r/ B. G/ Y3 y& l0 q4 x. ivar newColour;
! E3 D" w: N, L/ W# yvar tID;
& N: _5 d) E6 }3 L3 Kvar redInterval;) X7 J7 ]$ P, G) z( B% H
var greenInterval;
! H3 M# l5 R" r! `var blueInterval;
+ W# B( b: P# B7 Y5 E- Sfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
5 g" v* N2 X! B1 C( n5 s{
  S' |+ \! H; `) R( N0 Z0 O5 v$ S$ ?        hoverColour = mouseOverColour;
6 _& v. t  N. @" h" a- U        numLinks = numberOfLinks;  Z# d* m$ q1 d& B8 @! w. f: @! U
        rate = 1;' Q* m9 `0 `8 T6 G4 k  M
        numFadeLevels = 30;1 x# j/ X- h* @9 I3 F! }/ T# x
        function initArray(theArray, length, val)
9 ~9 S5 F1 P3 c$ Q2 C! X0 i( `& }        {4 A/ {) o- m/ p9 @/ Y7 l
                for(i=0;i<length;i++)
8 P" o3 V7 b5 Y+ `' S% F                {
! u, n6 }# A0 X* L                        theArray = val;5 {. [& ~; ^$ X
                }
  ?$ r) M# G& j" i        }  m, ^8 ~) ~3 d
        bgR = '0000' + fadeOutColour.substring(1,3)" ~" H; p4 w: t$ l
        bgG = '0000' + fadeOutColour.substring(3,5)
1 q5 j2 a$ w0 _9 Y/ ~/ d4 ^        bgB = '0000' + fadeOutColour.substring(5,7)  C; a# g+ @: Y
        currR = new Array(numLinks);) ~" k. `2 R4 H0 P2 N: x. C
        currG = new Array(numLinks);1 ?' I' n4 ^5 D8 o
        currB = new Array(numLinks);
9 W' E  |" v5 {        count = new Array(numLinks);3 _8 u( J/ G. [  e4 O* l; ]: u7 y
        fadeOut = new Array(numLinks);
0 T- P0 K  U8 U+ I6 b4 w        continuous = new Array(numLinks);3 F% A3 a' X  R# {
        newColour = new Array(numLinks);' j% t7 L" {/ b+ y: a
        tID = new Array(numLinks);
; i! |3 T' Y& \+ ~" ^  x        redInterval = toDecimal(bgR) / numFadeLevels;9 o" c' g7 Y4 l' K& k) N  a
        greenInterval = toDecimal(bgG) / numFadeLevels;3 p( c. ^+ T7 N6 D3 U
        blueInterval = toDecimal(bgB) / numFadeLevels;
* n  D' n) F- G4 o- @. e6 m        initArray(currR,numLinks,0);2 X& S! l& c; B) [
        initArray(currG,numLinks,0);+ l5 G* V4 s6 o1 P
        initArray(currB,numLinks,0);
' v4 }9 r# F; a" I; r. x- l! e2 A        initArray(count,numLinks,0);  O9 W$ D- {6 m6 {
        initArray(fadeOut,numLinks,true);
: P" E: F0 Y, [7 l* ?9 O3 e+ D5 b* T        initArray(continuous,numLinks,true);
  g4 s8 k  \" U& O+ e* v& {7 ^; e1 T}        ( L" H1 Q7 s& L
function startFade(id)
3 B8 n% _5 X' ~; ^* {{
! Z0 F( b: D: Q2 v) d% V/ e& O        if(fadeOut[id] == true)+ @4 R: A; F3 G! @. E
        { /*move colour towards background colour (increment)*/* ~7 A, N- T/ A6 H/ O
                currR[id] += redInterval;
1 N+ I) t, i, Y8 ?, r+ A% T' O, g                currG[id] += greenInterval;$ r+ T# c. K, ]/ {, S% h
                currB[id] += blueInterval;
* U& ?1 [. G( p% L                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
. a4 A1 A0 L% Z8 H+ A& s                if(++count[id] == numFadeLevels)
0 C# }- q# L3 Y( |2 D# ?# Z                {
- Z) N8 t; r5 n: A) _                        fadeOut[id] = false;
/ i7 }* x, n1 Z! s8 H: K                }
0 T0 O& w# E' _3 [3 U0 N        }
3 Y9 i8 z: F% r3 n$ a; q        else
) q' U( b( F: E' M- J        {' F4 p. c: {+ z' C
                currR[id] -= redInterval;
2 S1 W/ b3 B& ], z8 D8 W
) W, }$ U3 V  v+ h: @$ i4 E9 P, c                currG[id] -= greenInterval;7 o6 q) N, k: k6 n7 r& j, Q7 K/ F

7 G3 Y& d  J' C5 }: z' L) A+ L0 ~                currB[id] -= blueInterval;* Y; h9 P& e2 r
% E( }! W; t9 `" f# @
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' o/ D" e) k$ A% K) j3 X  a  [

# X0 |& z4 P. H# h5 G) |4 k! w                if(--count[id] == 0)+ ^, o/ M+ F. Q1 N6 N5 M

; K. W' K( O3 R) W& Y  N# [7 {                {
# T# X# u5 a* W" a9 }
" s4 H2 x% s6 R! c7 Z# w                        fadeOut[id] = true;9 U6 t7 L+ n; F* M; i( B2 q  e

8 \5 Q0 ]* M5 Z5 A( P9 j                }
% }% s1 ]* O. o3 {6 n. P. s) ?$ y! E9 n) F5 C* o& I) A8 @) i
        }
3 y! `: w* @+ Y5 Y! d
0 |! K& W) v4 ^! }        if(continuous[id] == true)
# e* B' s# h$ d. b* u  `( }/ ?  X! p4 l- H! L( Y
        {
9 x: L/ B! w4 Y' @7 u7 k- o( m1 C# q  l+ r- T
                document.getElementById(id).style.color = newColour[id];                3 I* R# O0 h, c

" |6 A( F$ ^6 D& m7 I        }' b1 `; c+ [* b/ i
* x0 o  q; Y7 w1 r
        else9 [3 X, F0 y5 b' a

: T, A6 F* T0 ~8 |        {
  [7 o. i0 _- d
" d2 j% j  h7 v                document.getElementById(id).style.color = hoverColour;+ `8 E- y, L6 U& i' \

7 b( a* Z3 |! W/ ~! F& t3 A& e        }
& q3 F9 Y3 O6 M8 ~8 q
- P8 q  x5 M5 U2 `+ Y        clearTimeout(tID[id]);+ l7 B2 p; e/ P/ O$ I

& Q- d' V% ~! }+ H4 [" N1 g        tID[id]=setTimeout('startFade(' + id + ')', rate);; t; C! T# D4 n6 M$ B( O" L& a

+ Q4 d& [& ]/ L0 l& ~4 `" W}
8 Q  v9 G3 H: C( p; y
! n+ q1 @( o) _' @9 H6 Sfunction continueFade(id)
9 f3 o7 K; t% l( ~6 Q% y1 S* A. \- m" |3 |$ W( [+ J! A1 Y
{
( b/ X- X7 [6 ]2 C
1 W: f2 b) |! n+ D: M/ Z        continuous[id] = true;
  J5 h7 w9 A- ~; ^
1 A- \' I% T% T  i0 Z}
' [7 ]5 X* s% l% \8 h. a& d
5 n2 D. B% R! G" q, X2 {; L& Tfunction stopFade(id)
+ g% v9 f  L0 L& |4 H& b% f$ ^1 k" \) Z9 g$ B  k$ a0 i7 S
{8 j! O. U1 X$ \% \5 n

9 F2 r5 l  F$ T1 j) R+ y        continuous[id] = false;
! N" q; k9 m4 T. r4 u8 q& u1 q! J  W/ [  q$ g- k- }
}
3 S8 C8 u' e4 f, b& A
4 F1 Y( ?+ E  ^' Z" g( W- Ffunction StartTimers()
& S+ @2 e% ?" Y, k* B- t8 r: y4 M2 m! \! z; n% \3 L8 b4 f) ?  U# M
{        //set up an initial set of timers to start the shimmering effect: W( l) C* H5 g! J! \+ f" I

& s, U# X: h4 O5 @5 P8 T- k        for(id=0; id<numLinks; id++)/ v3 W7 K4 v# A3 X( {7 m! I

# N1 u5 D) Y4 t* y+ |        {! ~7 k& [: W: W4 O6 C# P

6 {$ G' W* {- e8 `1 x3 x                t=setTimeout('startFade(' + id + ')', id*100);8 B$ x' w% x1 z/ r  n8 M; W3 t

/ V( r2 P1 }  W- p# r) v# K9 n3 T        }
/ z  q8 W0 [2 v: k0 ]  F
2 g2 w, H6 {" `, M, H" L: I3 ~}
, A; ]% @5 e1 H( E* V9 v
) i- u+ Y- M( G3 \6 ]//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')/ U$ X: p& S9 R$ y+ a
8 Q6 i, l! W4 Q4 F% i
initLinks('#FF0000', 6, '#FFCC77');. I. H% J6 ^, Z' C" o5 u

3 d6 H( f  P( n, ^//-->
5 \+ m6 k; S6 Q4 K- G
. {9 N" W% Z) I$ v1 [, X: `4 {</script>
" f5 U/ m8 ^8 D8 L  j- P5 p) a<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
; B; y0 I8 b2 Q- n6 i. `</a># }  x  Z: W2 X% O8 `
<br>- Y1 v4 n# i. P6 Q8 l! V
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>* c2 M8 M# H% J. n" W
<br>9 J' X5 M2 n( y/ i0 k! S6 A
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
+ c. b# V4 t, g. ~' ?<br>        ( K6 j2 K8 J; l" G3 {- e
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
; Y+ v8 M. m6 w8 _4 j, B( Z5 n2 Z<br>. Z1 n2 G+ h  P+ S: o) s, O9 M
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>, r. r; G* F( A$ q8 M. y: v
<br>
/ z* }/ e5 T* f1 M& B6 g* W2 O<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
) J- o& a8 v1 a! g2 b# v% Z9 F/ p- f<script language="javascript" type="text/javascript">0 E' r* k# V7 O
<!--: }. w! s$ ?8 ?. P! @4 g4 Z9 b# M
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
7 T9 x$ h# }1 P1 F6 d( B$ _$ B. P//-->0 {; l6 k" D5 P; \0 D- o
</script>

---

欢迎光临 捌玖网络工作室 (http://www.89w.org/)

Powered by Discuz! 7.2