返回列表 发帖

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

<script language="javascript" type="text/javascript">
. N* h. k- J0 h( e' v) z; `<!--6 [5 A3 g: x0 Y6 E7 b' G1 F; l/ ~
// convert a single digit (0 - 16) into hex
) E$ K3 y9 v* x+ a7 cfunction enHex(aDigit)
, t& y6 P3 g( `; x8 q5 h{
3 d* S% a1 s9 B' V9 k# f    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 ^5 `, ^6 I5 N( t# {3 _}, x- [* ~5 O) o/ J8 u
// convert a hex digit into decimal" w. p7 s4 m  s. F+ F
function deHex(aDigit)
! ~# f' k* n$ Q3 F2 S. g4 `{
, e9 Y3 k1 G: K  l1 g! }; N    return("0123456789ABCDEF".indexOf(aDigit))1 q! g& E" s: n# f+ c, F) a
}
! n( H* I; e+ x6 O  S+ M6 p
0 }! ]& i8 r+ N) n; b// Convert a 24bit number to hex6 M2 G7 }) f$ j, `1 v4 f$ w
function toHex(n)) H! L' j3 A, q- {& X. ]2 k
{
2 d* _0 C# \1 z8 x: H    return (enHex((0xf00000 & n) >> 20) +( d, D/ W- y- K6 p5 J# r# E( c
            enHex((0x0f0000 & n) >> 16) +$ @  F- h. _% q- `; B( C
            enHex((0x00f000 & n) >> 12) +
# o" y& @& E$ P+ F            enHex((0x000f00 & n) >>  8) +& W; Q+ K8 b- b, y1 J+ v1 B- ?
            enHex((0x0000f0 & n) >>  4) +
- ?! F1 t8 |, c5 c" u4 ^; V            enHex((0x00000f & n) >>  0))
6 c7 c- Q. l5 @% O: T) g/ ~}) N4 |8 ^9 s: a# F
// Convert a six character hex to decimal, @$ ?' k6 D8 ~/ ]) b# d
function toDecimal(hexNum)
4 I& v9 K, e- d" n$ `8 E( A5 L{
! z% v4 }+ _; k$ I  B- b1 g: L, @           var tmp = ""+hexNum.toUpperCase()
6 [$ `! ~* w  v) I6 |    while (tmp.length < 6) tmp = "0"+tmp
; i4 L' Z- K: D( y4 h           return ((deHex(tmp.substring(0,1)) << 20) ++ t0 E/ z9 }, J5 _) |+ q; W
                   (deHex(tmp.substring(1,2)) << 16) +
' A  `5 ]+ N! }- g0 j- \8 C            (deHex(tmp.substring(2,3)) << 12) +
1 C( R( r  m5 E- T9 B8 _            (deHex(tmp.substring(3,4)) << 8) +
$ O3 E8 Z0 Q" I* K& Z            (deHex(tmp.substring(4,5)) << 4) +
6 x# t! v# e# d; f, ^  t2 R. |                   (deHex(tmp.substring(5,6))))
3 X; `, b: w3 N6 W4 Z}
' D1 S/ F  Y9 e* Z8 g1 [///////////////////Shimmering Links/////////////////////  }" n* y  a2 Q
//global variables
: Z/ i; v& Q  _1 {! {# k  gvar hoverColour7 {8 Q( `+ N0 q+ @4 h- B
var numLinks;2 ^8 A0 Y2 E# F' d% J/ I
var rate;
$ q# M4 Q, ^5 v% m2 Y! t* S: jvar numFadeLevels;; F4 i; W9 G" t  \3 k# u
var bgR;
# V8 T# {- X& e1 V/ rvar bgG;
  T6 C4 o& t, D- i) gvar bgB;
, I; ]* T4 `/ _9 J: {7 L5 O8 W- ^var currR;
/ a! z: O- b" ~var currG;% {% c( ^: ^3 o8 _6 w* r3 y
var currB;
) ?+ m$ l& [( K: v7 |) Xvar count;, l$ L; l# Z2 R# _
var fadeOut;3 i9 q' R/ w' L7 ^2 v
var continuous;6 Y7 ]4 C+ N" n, ^" x- z9 s
var newColour;
- `! N) T) t, T4 Q  Ovar tID;4 w5 B1 A' j$ `7 r# a7 }
var redInterval;. E) E. Q: v; D8 M) D9 v
var greenInterval;
0 g( r% D/ ?4 hvar blueInterval;. r& |& ]& O0 r2 D/ E$ M/ a- d
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)- s6 n, o( [2 H0 Y" I1 j. _
{" e: t! v: @2 d8 `) B# g& K
        hoverColour = mouseOverColour;4 i7 N% X& c0 \
        numLinks = numberOfLinks;9 m! y$ V. g' b$ C
        rate = 1;4 C' E; {$ V* D/ q
        numFadeLevels = 30;  S: [3 v0 n) \2 d8 R4 t
        function initArray(theArray, length, val)6 z3 a2 L% f3 h4 o+ E7 P3 ^
        {
$ W+ P- i0 h# G, M% D  r: D2 s/ J                for(i=0;i<length;i++): B4 q( |3 U# w9 G5 }1 i
                {& W. F/ h) P) }( G9 V
                        theArray = val;; e* C0 ^1 L! b  m5 a
                }
% X; s  v$ l) [9 E; E        }5 J* s! P. P2 x: |
        bgR = '0000' + fadeOutColour.substring(1,3)
6 Z8 S9 I9 g6 H7 m' K9 e        bgG = '0000' + fadeOutColour.substring(3,5)/ X' n0 k* \: i. e" `
        bgB = '0000' + fadeOutColour.substring(5,7)
4 m* [7 R6 A4 A# Y        currR = new Array(numLinks);
' q4 H5 n8 @% u% J' V        currG = new Array(numLinks);
$ @: a, {3 S* I/ I1 L        currB = new Array(numLinks);0 Q; K; |0 e# w
        count = new Array(numLinks);% ~: R3 h- Y9 m4 G
        fadeOut = new Array(numLinks);
" {0 S9 `7 o! o8 W) h# e, G        continuous = new Array(numLinks);
: ?. s6 c! @( R6 ^' L( n7 o        newColour = new Array(numLinks);  O7 P5 p& t! p% A% [& q6 \- ^4 C) I8 ]
        tID = new Array(numLinks);8 L5 i6 k; Z3 Q7 g
        redInterval = toDecimal(bgR) / numFadeLevels;
8 ]) _  g/ \5 h( C. K5 ~        greenInterval = toDecimal(bgG) / numFadeLevels;
; S4 E: N# Q8 p: ?0 ^        blueInterval = toDecimal(bgB) / numFadeLevels;8 Q2 s; g5 R! x
        initArray(currR,numLinks,0);, R" p; h7 K1 E! b7 c5 w
        initArray(currG,numLinks,0);
  s2 I6 k3 D; h& ^9 m        initArray(currB,numLinks,0);! |& J# P$ `5 V! n% ?$ s
        initArray(count,numLinks,0);
9 l2 j3 Y  Q) w% K' p% L8 w        initArray(fadeOut,numLinks,true);# z9 N/ n; j( @5 G- [" ~5 h9 {' E
        initArray(continuous,numLinks,true);( x2 t3 c$ f* f( G. P, n" j
}       
& _, x( w  y- A' w; Ofunction startFade(id); x+ w4 z5 n# o+ b, {
{
+ w! |; }$ R$ e* d7 Y        if(fadeOut[id] == true)
  W7 e, f, N. B1 S2 @9 o        { /*move colour towards background colour (increment)*/
" n1 s' T6 C3 v1 n% }% ]3 s                currR[id] += redInterval;
8 F% a, S+ s/ \5 V( C# ?# `                currG[id] += greenInterval;  ?( I5 p* l+ I! A
                currB[id] += blueInterval;. `1 J: e3 O! {2 X0 r+ X
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" E! a+ S2 j! r3 Z% h9 `
                if(++count[id] == numFadeLevels)# `% G$ q+ H; U/ }) l# K
                {
% @) t# |3 U; M) i# O2 ^9 K                        fadeOut[id] = false;
# j$ V: a/ i: O. i1 b" P3 U                }
! T5 W3 f( c8 p' f9 W* x        }
2 g+ x6 D% W( Y* O        else
; s: Y0 L( g( O3 k        {
% q, r* ]* a6 g0 ^6 c& O5 W8 g                currR[id] -= redInterval;
# M3 `5 S/ C  L
/ G  u) m( ?2 H, m0 i% d                currG[id] -= greenInterval;0 F4 G2 T* f* v

3 x( M$ A. c/ W: u: ]' Y1 I                currB[id] -= blueInterval;2 _5 r+ N. K: q3 o
" h9 c6 E( ^% l0 j; o0 z) l  f4 s% _
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: G4 t9 o+ Q5 z5 E; ^
* b# B7 t% v3 K2 p7 ^
                if(--count[id] == 0); z% o3 k! _( H  E6 {' _
- U2 Y/ D' ?- N
                {. d' {% L( ]$ G+ \: e$ o

* x" i6 X, w$ r% B! V0 \                        fadeOut[id] = true;$ A; E" }) n8 Y( y

0 J1 N8 n( ^; z) P  `; L                }, G5 D5 ?: e% j
7 _! v3 Z9 ?* X+ a& L1 ?& ^
        }
7 m! p) D0 l) N+ C" W9 w
- G8 ?3 H1 ?# v( E- }1 b+ p        if(continuous[id] == true)
, j; n" j: y% r+ O( l+ `+ F" |. n$ M
        {
( J5 Y' ?+ p$ U! p+ K- Q+ E1 ~( G9 z/ r) k3 g. L1 Z. {
                document.getElementById(id).style.color = newColour[id];                / ^# O  y2 T: ?  W
2 r3 E- x: _( V# m: _. I# @
        }. x* |( {8 s8 Q$ ]
' B( L5 j8 R  i# V
        else
/ A) Q8 s; B/ P4 f! [  `8 M* t$ d# y2 U- \
        {/ |* m. {+ g/ z- _1 L
$ a$ \; [! ^  S" |
                document.getElementById(id).style.color = hoverColour;
$ Z3 F+ a2 t. N" e
5 p# B" ?6 ~8 y        }- t9 e. U9 ^( |

( z4 ?4 s: G6 F# m( D& `        clearTimeout(tID[id]);9 u# C& P0 `) y# Z7 R" C. @$ E

# p4 G6 k8 w' y6 g# T) _        tID[id]=setTimeout('startFade(' + id + ')', rate);5 [, A9 t5 _( U7 e' l5 U

2 W5 S6 \: D+ `* Q1 f}1 Z2 z. M7 Y! }+ ?. R
+ X, I0 u7 q2 @2 Z3 ~  o
function continueFade(id)6 B8 O, l; r% y& j

0 b# Y9 U$ O) \: G{- S. i" A# _9 d9 I1 X4 V

( c. ^9 _9 Q# v        continuous[id] = true;
4 z% T% u4 r3 ?) D! j+ {/ D3 d7 I5 B1 m+ @  T
}) m  F/ c# l# @3 f
% W$ _' \, P( S5 g, B
function stopFade(id)' c& t: Y, r# F

/ x! y+ B2 v5 Q1 A{
5 S% H3 S# z. z1 \7 d. Q0 B0 v6 @  L+ t7 p- g
        continuous[id] = false;
% w$ B6 `  q2 M
; H4 v" w  d5 s2 G3 v}/ V" K2 x7 C; P1 M
! n5 r5 @/ J7 b. ^) W- U% }
function StartTimers()% q/ t4 Q( J  A( C6 O, M5 j  {

+ d+ ^  F9 p7 T6 A{        //set up an initial set of timers to start the shimmering effect
, j+ e9 v5 D. k5 y9 J3 [, t1 O* W8 y8 ]0 \  _- h- l% e
        for(id=0; id<numLinks; id++)( h' @4 x1 M1 h, h
# x7 Y- p. X: j9 l3 |* z
        {
' B$ p3 b4 F; `. M" W; m; S9 V# N, m$ n( _+ r: x1 \
                t=setTimeout('startFade(' + id + ')', id*100);2 |! b* U( a- M6 H0 a2 a8 i

4 H  V  ~3 Z7 }) Q        }2 W  E4 e! E' {9 n
$ X$ {; p) r2 T  |' I
}" ?; C' }' M8 [# o" Y* x" U: D5 H

# O5 h) e& x% I/ z9 a3 r# C- ?//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'). ?5 d3 e1 G( ~' y! J4 P1 p

3 u4 i7 F3 c' ^% |0 \6 qinitLinks('#FF0000', 6, '#FFCC77');6 i$ E% r6 {' W/ `+ V- B

6 q6 _' ]" `. M; D& `- I) D//-->9 z9 o0 G+ X' _% l5 H3 |

5 n' H1 E" f' [7 p. r  Z</script>2 f3 l$ Q2 \6 ~* @8 v" u+ ?
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
! Z* L' Q0 y7 _0 }( n7 C5 L</a>' z7 o. q5 @+ T8 @* |
<br>
0 h" F! f0 q% Y  \2 k2 R, f. ^<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>6 Y2 k/ c& Y% ^7 }* o
<br>
3 f, b# G& }% G2 E) z: H( U' t<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>3 b8 ^: S. `8 S) t; M6 m) X
<br>        & r8 _& l8 Z% N% }9 d# ~! F
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>( J" L+ I# S' `: F
<br>
9 S8 c! K$ f; n: m7 g<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
1 O5 s- `: _8 j: R5 x4 }$ v; F( i& n<br>
' D7 H- [0 B, E& z: S1 f<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>  M- o; Z: c  d: Q
<script language="javascript" type="text/javascript">5 m9 B6 k. [  |. p9 ?  w0 g
<!--! k. Q& ~% {6 O, h1 U! b0 t
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
$ Z' S" D5 W" N  N7 T//-->
( C0 ]2 H8 i/ U! q$ Y</script>

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