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

---

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

<script language="javascript" type="text/javascript">
4 j) m; G, I0 O; D) D<!--! s% L. V8 c0 |/ A
// convert a single digit (0 - 16) into hex
; n$ L$ D+ V' Y$ A& E& lfunction enHex(aDigit)  E6 }# s6 [1 J. r+ x' ^8 C. S
{
+ [) A& Q3 Y% |1 C    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
5 L7 I/ g. u1 a# S6 ?( o}
: S+ v% L$ a. a% }// convert a hex digit into decimal
. G- A( [( h& E; Y2 I& sfunction deHex(aDigit)
& t4 ?, p: o) b) @) g{1 ?9 q4 Q4 l, q$ @
    return("0123456789ABCDEF".indexOf(aDigit)). }9 F% m5 P/ G7 l) o7 O: f" G  G
}% i+ D) c: [$ a, W
0 M) Z2 U- \: t
// Convert a 24bit number to hex
& x  O; D! P& m& r, Rfunction toHex(n)& @5 W. I5 _+ w: D3 l
{5 k8 f/ c7 G4 N' r4 P1 m3 G
    return (enHex((0xf00000 & n) >> 20) +
; G0 }' h, W* o: I4 h            enHex((0x0f0000 & n) >> 16) +
: q7 s( S1 ~  [+ ^8 c- d            enHex((0x00f000 & n) >> 12) +! D# q; U& d1 C  X- h% F
            enHex((0x000f00 & n) >>  8) +
2 G" _/ q- L9 C2 [4 h            enHex((0x0000f0 & n) >>  4) +, P$ z+ B# C+ H$ ]. U% o  B7 z: z' V
            enHex((0x00000f & n) >>  0))9 C2 U) u' h2 f0 |# A/ c
}
( f3 O7 V6 Y, I  {" ~0 ^$ Z$ C// Convert a six character hex to decimal4 P  {/ X' |% T8 @" F/ n( T
function toDecimal(hexNum)
9 @! P8 Y- x; y1 T9 F% Q0 f{
/ c7 `7 d& o, E8 W. M: y  |           var tmp = ""+hexNum.toUpperCase()$ _! ?& J( `- h9 h) M
    while (tmp.length < 6) tmp = "0"+tmp
9 y: X# P1 L5 @( d8 o           return ((deHex(tmp.substring(0,1)) << 20) +
6 G9 a/ \& G2 k                   (deHex(tmp.substring(1,2)) << 16) +   n  q* i* B. k6 _
            (deHex(tmp.substring(2,3)) << 12) +
6 G& C- c& F% a$ M5 P$ h            (deHex(tmp.substring(3,4)) << 8) +
0 y  f$ B/ D* C) g% ^! A7 A            (deHex(tmp.substring(4,5)) << 4) +
) {4 I) q$ A8 w# i3 u# `                   (deHex(tmp.substring(5,6))))4 T# d$ l! }1 J
}$ ~1 e) K0 L4 d
///////////////////Shimmering Links/////////////////////* c0 T, A5 X. V$ W4 K- a, Q' f0 @
//global variables
1 x0 Y$ O; X$ c4 nvar hoverColour
# a8 L* Y, E* b$ ?8 _* e/ Vvar numLinks;
- D* Q4 F( |* r# nvar rate;
: Z5 n+ @3 e6 `* K+ v! Q3 X9 C$ X$ jvar numFadeLevels;
* e$ K& e/ C7 g! D! X; W7 H3 Yvar bgR;6 {. M% `7 k# d! t  {/ K* A
var bgG;7 V' J8 V# q6 |/ Z) ~: `6 C
var bgB;# F7 i3 P9 B, k
var currR;- @0 c# W6 c( O! {- m' s% m
var currG;6 B6 c* @' {; O
var currB;+ h% T, p/ Z8 S. Z% P6 z1 E% T
var count;
+ e& u  K6 H  h) z2 {& Nvar fadeOut;+ G# t7 h, ]. U  t$ G
var continuous;
) i1 k# w2 P( d0 [0 ~- Evar newColour;( ]& r6 {" R" v/ t, L. D3 X9 {. V
var tID;
% {- y0 u: n+ v4 @; L3 m- d( \6 pvar redInterval;7 Y+ H( s( `! e/ u( t
var greenInterval;
; {7 ]& j9 e, g; ]: W' {) evar blueInterval;
, Q  o  e* p9 p; {/ Cfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
3 D2 I5 y3 b4 w. V$ i6 S7 G{
/ r9 d' B5 e' |, b. p$ O        hoverColour = mouseOverColour;
' }. z" s# r" ?4 n5 L        numLinks = numberOfLinks;
4 O  K) S) l8 e3 H1 v        rate = 1;
9 @- a2 I* T( N! {  ], T6 ^% _        numFadeLevels = 30;
* d; M! N3 \6 Q3 w' {        function initArray(theArray, length, val)# m7 h4 Y) R) E# @+ ?
        {# b. S# o. r- C" D: L) g( i
                for(i=0;i<length;i++). A* \; p% G: a) ]2 p2 L# X( H9 K: W
                {
& a" F% {8 A9 h' U                        theArray = val;# Q3 n% N- N; p( L& Z% \3 O8 w
                }5 s% W8 O8 f+ o0 S0 {+ U/ b
        }
& i/ ~; ]% m  G6 o        bgR = '0000' + fadeOutColour.substring(1,3)
" N0 q9 w* G4 H- z, U$ r        bgG = '0000' + fadeOutColour.substring(3,5)
4 W: [1 B+ Q2 D& A        bgB = '0000' + fadeOutColour.substring(5,7)3 c& ~# t! Q1 v# i" L8 U
        currR = new Array(numLinks);
1 @. m' c: _' N' S        currG = new Array(numLinks);1 Q7 h3 ]) h- Z* q
        currB = new Array(numLinks);
2 b3 V( i1 {0 T+ }; K% l        count = new Array(numLinks);9 ]6 p9 B2 q/ r4 W
        fadeOut = new Array(numLinks);, F  w" g# q  d# i/ c
        continuous = new Array(numLinks);* C, \# i  G5 g: G4 ~5 ]
        newColour = new Array(numLinks);
9 ], v$ J+ v+ _- g  p1 p( w        tID = new Array(numLinks);; y0 Y. C& G, |" h$ p
        redInterval = toDecimal(bgR) / numFadeLevels;" r7 w1 T9 w, q6 G) A! g( ?/ S9 }; G
        greenInterval = toDecimal(bgG) / numFadeLevels;
  ^" f; U. b- M5 w9 [5 T        blueInterval = toDecimal(bgB) / numFadeLevels;
  A% {+ ^$ E0 \4 d& x        initArray(currR,numLinks,0);
; l! q. T. K* _. J  b- t        initArray(currG,numLinks,0);
! a7 B$ ?2 G# T! W! C5 l        initArray(currB,numLinks,0);) I( j( i- [- @
        initArray(count,numLinks,0);
3 m. @1 X* ?4 S+ p& e2 q) Q        initArray(fadeOut,numLinks,true);
1 @) F+ `; j/ I! ]- y: A        initArray(continuous,numLinks,true);: \7 {8 ]2 n6 y3 }% I
}          |2 y! V+ h% N6 p$ ]; l1 T0 o
function startFade(id)! A! M1 n1 S) G5 B( K4 K
{
, A/ G! N2 ~1 Q& B  Z        if(fadeOut[id] == true)# e; S$ I" ?1 y) J% L6 T2 @
        { /*move colour towards background colour (increment)*/; K  ?7 K; W% q( N& G
                currR[id] += redInterval;
6 T$ D  d' c1 D% Y% a                currG[id] += greenInterval;$ h8 D7 j5 d5 D& @
                currB[id] += blueInterval;/ [6 l; U# E* o9 f& O
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 W8 J# J. \9 }8 ~6 n3 E- D
                if(++count[id] == numFadeLevels)& v- y; ?1 N) S9 Y
                {% B# A! m, G+ t
                        fadeOut[id] = false;# c* O$ d5 Y$ X
                }" Q. H: G, ^( d, k0 n
        }
: p  n$ l7 m/ t" ?        else
; S0 ^' r" V4 ]4 k2 I+ F2 c( F3 p        {
" U( B% ~3 x# C+ z+ `1 Z2 R                currR[id] -= redInterval;( Z. E2 H, ^+ a% {" z8 G+ X
9 D2 r8 B" l: F" l7 O1 ~' B
                currG[id] -= greenInterval;
! m2 c+ w2 _& P) T
: ]; b4 }0 t2 }! C                currB[id] -= blueInterval;
* A: v  S2 F! S* [! ^$ r/ b0 s% D
! ~9 j; o* Y* r  [! {4 J                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& j! ?0 ?+ W$ z6 s  [: w8 u) k/ _/ `0 d* X
                if(--count[id] == 0); j6 i5 C1 L& B. y7 V

; b2 l) k+ Y# q. h8 {2 F                {7 j  [" j" T9 v# J3 [

6 ~; ?4 _. ^0 J+ h0 x  j, s                        fadeOut[id] = true;$ h; S5 t; k) W/ \3 t) z

, _$ N4 Q# I  z  N5 s6 n$ D                }+ k0 l( _. f. ^/ I) z+ a
+ [* Y" r* a% n" _
        }: ?  u% e. }% R
/ t1 @+ G, x" \: q# V9 L  ^% O
        if(continuous[id] == true)
* B- W) ]7 ^' ^: d0 b7 H! K+ V  Q; `* l1 V4 n7 @
        {
8 F0 g$ ~( @3 q- q/ |' |" C& \" X
- a8 ~. f  G0 C5 e. x                document.getElementById(id).style.color = newColour[id];                , z7 z! |0 J2 @9 J

; k. Z" @; D; W0 X        }
8 U. ?8 J  P9 D% \" z3 J
. c3 j/ ]( C% `; F        else
# [- L" P, ]2 @6 D9 [; W3 }
1 f6 K" V: e3 Y6 J, H. D0 l* l        {. ~0 e  w( A& o) o4 H( L

& ~6 o2 L+ A9 [                document.getElementById(id).style.color = hoverColour;3 G4 b% }" R# V; a( h
7 _3 _$ J( p( H; r" F/ P
        }
: S/ o9 k" g$ m$ w
  X& L: ~' t0 b% Q( O/ {, ]        clearTimeout(tID[id]);
  [9 A5 Q$ P9 e2 |! Z- C5 m5 [
7 m/ [. c  c2 R0 g* b* q        tID[id]=setTimeout('startFade(' + id + ')', rate);  v- L+ |* _7 W

8 t$ s% `) t. R$ v}
+ {! U$ x2 x0 M9 ~' f* P7 m+ C* t3 w8 m" g2 c0 P- J, n. z* b; T
function continueFade(id)4 A' P- m3 J, e8 K" O( ^' I/ P

: j% s+ F  H+ I9 f" P{
4 q: o+ \: T, l$ s; Y  P/ a
2 T9 {+ @0 X3 u2 j4 y        continuous[id] = true;
: P* B* `" S  Y! c% d+ E, `
7 u; |  F  o4 J2 v: ~2 k! [}
% w+ u1 D2 n0 @2 O. j
3 j2 R/ L) J1 I8 x& vfunction stopFade(id)
( m- J  ]* {* l) Z, M( S' d* K+ s6 S6 l" M2 ^
{
1 L5 x4 y5 b7 i# s' ^/ U! S# q$ @4 Z4 o2 f/ D3 }
        continuous[id] = false;
: K; U/ F+ I" ~8 s, T7 C* c( }" M) u- o8 v, T1 ^: Y
}
  |( D0 s0 r' N& s& S4 p, T7 k' |. w+ B7 `8 Z
function StartTimers()
) X# \$ ~" @3 K5 }& U. a% y" R& S1 }
{        //set up an initial set of timers to start the shimmering effect# \/ R0 n3 j+ z8 x" Q* p% J4 u8 \

  q. P: A* Z* A* \) w9 o        for(id=0; id<numLinks; id++)( E/ ]  ?9 Y* h9 ?4 ?" k6 |8 D

- Y4 m: K& O9 J% D( P        {
7 l& r4 x! N9 I4 g6 g: [0 {9 [  b/ K8 t! d, g5 p9 J9 d
                t=setTimeout('startFade(' + id + ')', id*100);
5 E- M: E; d5 T0 j5 q3 j4 y# D6 A
* L3 z* q" W! U        }
7 i& `  ]" f# ~" f- B0 n$ c) p) H: A& s
}! R# D' z; c+ I% L- e$ i, }  f

6 a& x4 u; c+ N' z( y//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
+ [+ i' i2 b! Y6 |# x
& m) b0 U* e1 A* x* uinitLinks('#FF0000', 6, '#FFCC77');. T; ]" s& x" d, r$ f; d! P

* R# P$ b; Y: w. }! Q) f//-->7 }3 x! b$ C8 u* n: |9 [' W% K+ P

5 {9 i/ t4 M5 ?5 R</script>6 Y+ a2 ~# o: \7 _% h. f
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
9 o' r; _! T2 y( [</a>/ h! d, d! w6 n7 R- \. x
<br>
1 N' T' |6 X2 V+ e<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
( V1 _9 u+ P2 I1 ~' w: n<br>  F9 l+ a4 g1 J0 h! V+ r! Z
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># o. J6 ^# @" S/ U# p+ l& I0 B7 D0 f
<br>       
% F4 m1 E% P* t2 f! n! f<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>/ ^1 s* A" r+ F! e; z
<br># |# ^- j0 R' W! Y9 w  X( ?/ ?
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
. B/ q% S6 s$ v: e' |; v8 a8 ^<br>6 p9 E" w5 R& Z4 N  l8 P5 g
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
; _, ?5 Z! m  X, i; h<script language="javascript" type="text/javascript">
0 ?8 q7 J  K) ?% s; E4 H3 h<!--
: C6 [) J; p% z9 X1 IsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering5 H0 G" u, Y. c5 F- o3 M- u! u
//-->1 T2 C- S7 C+ X; d" w" e
</script>

---

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

Powered by Discuz! 7.2