返回列表 发帖

网页之文字的循环闪动特效

<script language="javascript" type="text/javascript">! ^- q% `$ W2 A) w3 Q. w5 T! D+ s
<!--
. b; }% A" R3 F, T// convert a single digit (0 - 16) into hex
0 B+ q- V1 `) L7 }# Ufunction enHex(aDigit)7 R2 A4 D' a5 |' P$ D' |" @
{
" z. n5 r' l% C  I    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
; g) w8 p" t) V( G& ?( u+ x0 D}
( [- o4 T8 X, e5 K// convert a hex digit into decimal% A6 C3 T9 {$ p6 P! Y
function deHex(aDigit)* K# K* g- H8 v; J5 l& B% `
{* U( J6 T4 o- y- `4 I- D) ^
    return("0123456789ABCDEF".indexOf(aDigit))
  y0 d3 P  _+ R9 ?}* q9 f! u& N/ B  Z' t
) }/ z) j" I6 w0 A% d- i
// Convert a 24bit number to hex
' S8 V' a4 q' i* |, ?4 hfunction toHex(n)
+ Y) S0 T7 H3 V3 {{) v, _. Q/ W# y' S
    return (enHex((0xf00000 & n) >> 20) +
3 l5 [' C" g' e4 A, B. `            enHex((0x0f0000 & n) >> 16) +1 o" Z6 v, r: \: D6 }
            enHex((0x00f000 & n) >> 12) +
# x5 B8 @3 u  b1 ]& T: Z; X            enHex((0x000f00 & n) >>  8) +
6 n& O  A6 h1 r& q            enHex((0x0000f0 & n) >>  4) +
) X) |9 D/ J3 B5 m* w4 f* o" @: ]            enHex((0x00000f & n) >>  0))
$ V' {" y. J% v" ]1 l}5 g9 _; `6 U, ^+ n
// Convert a six character hex to decimal# Q1 {( y8 L; x3 S+ l
function toDecimal(hexNum)
- Z- n* s% v6 I9 m' `7 f$ t4 t8 P{; W: k9 b: M8 Q: a" |; E
           var tmp = ""+hexNum.toUpperCase()
, _: m  a) l& W/ z" K    while (tmp.length < 6) tmp = "0"+tmp
8 @6 P/ F1 T8 }, ^           return ((deHex(tmp.substring(0,1)) << 20) +1 O6 O8 ~; ?& D9 |. m& x5 n3 o
                   (deHex(tmp.substring(1,2)) << 16) + : \/ X! ]. e$ S1 S3 x  i2 J
            (deHex(tmp.substring(2,3)) << 12) +4 S+ x' Z: l5 W7 e
            (deHex(tmp.substring(3,4)) << 8) +
8 T/ e1 z( g) f; g( S! P  I& Q            (deHex(tmp.substring(4,5)) << 4) +
8 o/ \  ?7 y* ~$ ^( `3 h3 w6 J                   (deHex(tmp.substring(5,6))))8 S1 x( X' f1 U; O3 z! A7 I
}
: b4 [6 a9 J/ @0 x/ ^4 w  j" v///////////////////Shimmering Links/////////////////////* y1 v$ M$ x# v5 I$ `
//global variables
0 ~1 |. o) v1 x% h( N9 Dvar hoverColour# ~) }. M4 L; \9 X- K" t
var numLinks;% _1 l) ~0 M$ y3 K0 Q
var rate;
' G& F! b; _3 W/ A% T! Nvar numFadeLevels;4 L6 {3 L4 O! U
var bgR;& ?; P  d  h6 D* ?" R) f' H
var bgG;
0 |1 }0 ?! Z/ g3 A" Z3 h+ s" rvar bgB;
# N3 p5 j: k2 C9 A3 qvar currR;
. U  H! L- G) b1 bvar currG;
# d% Q# Q/ f+ C/ v" ^& Rvar currB;
& l& F8 u+ n. k; c) \( rvar count;0 B' w3 z  H" g6 C+ Y6 C
var fadeOut;
3 d- j) n3 D7 ^; S' ~7 Mvar continuous;
* V' ?  r3 G% g. _$ k  Rvar newColour;
1 R- E1 b: i" o- J) K9 a  gvar tID;
7 r4 E$ c2 f! Z$ Rvar redInterval;) E8 h$ ]  s* a9 K$ C# z5 I
var greenInterval;
/ [) O9 y8 a0 L6 A  j8 r# gvar blueInterval;
; @: J# a& M5 k; V  Vfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 q5 l6 |* T* z% b" b{* y) |+ w# s- Z, B- T5 _; x
        hoverColour = mouseOverColour;" e! O/ S7 o6 u1 V. u: C* p
        numLinks = numberOfLinks;  ^& a0 i; t+ W
        rate = 1;) J. f- l) y8 [: z7 z- _) n) _
        numFadeLevels = 30;
5 c# d3 w2 N4 ]& n        function initArray(theArray, length, val)) P$ [, K' I$ u3 _" e1 `
        {( V4 c+ T# r' H6 L2 ~
                for(i=0;i<length;i++). ]# l: g( j, m/ M) n
                {
& \& U1 P# u, h; `% P/ G                        theArray = val;* @/ A: D3 T  k" b
                }0 D7 ?& B- U- {# L  s
        }. Q6 f1 z, P4 m9 z
        bgR = '0000' + fadeOutColour.substring(1,3)
$ b, n5 V' c3 J# B7 x. o8 U        bgG = '0000' + fadeOutColour.substring(3,5)
6 y% u% y. |9 {1 L- Z0 O, S  _; V        bgB = '0000' + fadeOutColour.substring(5,7)
1 n# i) v0 w$ M# d/ K* O        currR = new Array(numLinks);& J( n! A, k3 j8 i0 b
        currG = new Array(numLinks);
4 @  s" E2 ?. ?& b* w. g        currB = new Array(numLinks);7 A8 Y7 n, I+ A, _* `8 l$ {0 a& U
        count = new Array(numLinks);
2 c/ k6 R0 X. n) _' U+ j3 W6 v6 F) t2 R        fadeOut = new Array(numLinks);
6 k' x( {8 l) M1 G# o$ W; E        continuous = new Array(numLinks);$ I( G$ |! f" k. `/ b2 ~5 W) N
        newColour = new Array(numLinks);( U! B' N; v: V+ \' c/ B$ h: c
        tID = new Array(numLinks);
7 h6 d+ A- y5 U/ i3 o. Q' E        redInterval = toDecimal(bgR) / numFadeLevels;
2 I3 V( |% G0 ~$ T" C        greenInterval = toDecimal(bgG) / numFadeLevels;" D2 V" T) P, z3 `" o
        blueInterval = toDecimal(bgB) / numFadeLevels;
! v4 O: W# H. Q        initArray(currR,numLinks,0);1 W% J1 }( u% g; B7 W+ ^
        initArray(currG,numLinks,0);. l- Q0 T& ]; u' c
        initArray(currB,numLinks,0);
- a7 g  ?$ o0 g( `( ?9 L6 u* C( D        initArray(count,numLinks,0);
9 A* U, t* n: L/ ~8 C2 N$ _        initArray(fadeOut,numLinks,true);
, X8 j" G/ `& {4 H        initArray(continuous,numLinks,true);8 U8 t/ u6 X* z: }, z% W" e3 t; W: ^
}        . s) ^$ F& O" v% B- Y/ Z6 t
function startFade(id)
, V( m  G8 R# {: q{) l8 Q9 H- q1 J4 i# {/ |6 ^- z& t0 u
        if(fadeOut[id] == true)6 X4 p# E0 a' I! F/ y1 r) Y
        { /*move colour towards background colour (increment)*/, z9 z! ?- g+ Y& c& O! x' b
                currR[id] += redInterval;6 v* x& ^; C. L# Y. z
                currG[id] += greenInterval;
4 u& e4 U5 {4 U" O# @                currB[id] += blueInterval;* K1 P3 k- }; N, Q% U
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
# ]* l, U0 @- \6 ^" }                if(++count[id] == numFadeLevels)
$ ~2 ^: r1 ^* ^, R7 _- e* e# M7 l5 Z5 d                {
# z3 B% \$ O! C                        fadeOut[id] = false;
  p' F3 ^- T* A* g; ?                }* Q+ s. I" l6 o" Z5 I/ @; r
        }
2 j: u5 y/ G- B        else
4 _7 P$ @6 x% C7 X" M        {8 f2 ^# R) i3 j" W% Z% S# L
                currR[id] -= redInterval;( _' h% v8 m$ j. |/ T3 m' Y/ j& N

) n$ _9 k: D3 v2 f6 d4 T                currG[id] -= greenInterval;
2 v0 @2 ~/ |. L/ F: _  i$ X7 D0 i: r/ s% i* g
                currB[id] -= blueInterval;
: B! S* f* c, u5 r
3 y7 X. m; p/ D& H) x* k1 |* H                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- ?5 V6 _$ A" ^, l  R" \( c# J! H# l1 h
                if(--count[id] == 0)( Y: U4 Z: B' l) {, G( D3 Z
6 Y# H7 z% H1 R) a
                {
2 B8 q+ p  ^; K+ _( \. Q/ n" N7 P2 Y! Q0 V
                        fadeOut[id] = true;3 f  v" n" M* _4 @9 [$ b1 R
" F* K4 y1 i7 h
                }
: B4 g: ~' V$ J) J/ N+ s- S7 U9 w; }( y. C9 y! d! T( B
        }# h, o* N, F% ?# f. A

6 R9 P$ n$ B$ Z# n; Y        if(continuous[id] == true)
0 g2 _! g% X6 ?, E- J
0 N; o- Q& n* A$ o        {; A3 L* f0 d, q& s0 s. @

! E' f! Y; _% W7 s3 h8 q2 M                document.getElementById(id).style.color = newColour[id];               
3 j- m7 p' v% w  y
) Z9 s% S' _% A0 ~5 ]& T- y        }- Z0 k" n" S% S, u6 `

, l0 u  n3 d1 K1 J4 V, }        else& p5 n5 S; G, B- k) f3 u8 D4 C
7 f8 J* \, r$ [! C
        {
9 J0 @. f5 Y9 `! I) ], {
4 p  E! l5 P6 _2 n& c: [/ \                document.getElementById(id).style.color = hoverColour;. A  _; E7 f& e

4 h/ Z3 C8 J# x* r9 N        }. i5 q7 {9 h) z- e2 R; S
6 b0 }& r- e, J; O  s
        clearTimeout(tID[id]);
# U9 t% f0 c- i+ s* a" w% e
; O# F: {  \5 x: `$ V! o" p1 V        tID[id]=setTimeout('startFade(' + id + ')', rate);
+ W& R1 H: j: J0 K  M8 h# Q+ p3 {& c( h& N7 L4 M" K4 t% S3 }
}
; [9 E* [1 T( ~1 ^' H
. |8 Q$ l7 v& w$ [function continueFade(id)' g( U$ w  @% y
4 F% Q; i7 p% N" x
{
" y. ]3 ^( E7 S  S2 i" D3 A
* N, ^  i, `( D0 \" l7 W+ {& L        continuous[id] = true;
( Z+ r. q5 y. M0 \- }/ G* f5 Q9 p; E* H0 K6 a
}
. H5 |0 c( b* W* h: _; m
0 @3 d4 G0 V  ^8 s6 H; rfunction stopFade(id)& }: M; c. ?( E5 ?$ ^) K

2 E4 z; B, t! D1 b{7 P$ D  q, K) t. i; `
+ F+ T2 W' s4 y5 E8 Q. D+ R% f* L
        continuous[id] = false;
' q. o# m1 i+ D- S) K
6 D2 o& w, S2 Q" x}
( D$ W7 y- F! ^! p) C- L$ ~
: I0 ~- A7 J7 r- L  e& [function StartTimers()
; h# ?4 l* i3 q1 \) D2 l5 ~% B, g+ }8 \- K/ p( G
{        //set up an initial set of timers to start the shimmering effect; Y2 o# H3 ?, E, {8 q
8 i7 M: A7 f: [( n) E& x8 i
        for(id=0; id<numLinks; id++)4 C, O$ k0 O% ^: \

) @1 u0 o: i3 ?3 P% ]' x) v2 F' X        {  d0 t1 S, T" y# J
/ c7 J" l: e/ ~: Y! ]! v
                t=setTimeout('startFade(' + id + ')', id*100);6 L3 l! w+ J7 U) S: q5 z) I5 u1 G

' b- E) C8 j2 R+ M. o        }
9 Z/ z) @3 A- @
: y! T! f6 d1 f8 F6 O6 G}8 v5 g+ X$ u+ }0 S* G" O
& \0 t3 R8 C3 E7 P  L- M
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 L2 R! b1 e& p; Y3 M! s2 ?. Q8 i0 r
initLinks('#FF0000', 6, '#FFCC77');6 ?' x( N" w# i4 R

7 x5 ^; o" G7 A5 J* f3 K  N//-->1 k  e+ ?' ]4 c; F( P

3 Z- [' R, F- U9 R1 {2 P7 }: c4 k</script>
" m/ H' E- R2 p# F<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- o1 H3 W" b. {
</a>
" C/ N! W, C0 I0 d<br>6 Q" E' T, w4 C: T8 R
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>- B+ e' p3 b' I8 L* m
<br>( D. d% i2 C0 ?: Q) C7 f
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>/ `5 S0 O/ A5 a
<br>        . w. e; F$ ~- j9 b6 g5 i& [
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
8 d7 j0 P( P" @6 _/ f<br>7 _! W& z% J  ^- v. \0 ]
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ T9 W" Y# o) S' V( U<br>0 b& s- K6 h" z
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
" E  P0 ]; H# i( ^) T, A<script language="javascript" type="text/javascript">/ u! E* s" e, X9 P6 l
<!--
8 C6 S' b  S2 w, @+ SsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
4 A3 h% d2 \' A8 V3 k- v//-->0 q+ Q7 Y7 X% ~; E
</script>

返回列表
【捌玖网络】已经运行: