返回列表 发帖

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

<script language="javascript" type="text/javascript">
3 U0 ~' E  u8 H( x( @: S<!--
' v* C, Z; w- r) l" s7 N7 [// convert a single digit (0 - 16) into hex
8 H0 X% x8 y- ^+ J6 m; p! ffunction enHex(aDigit)) E% ]2 R! [* W( R$ V
{
4 T% I  `1 m, g9 D8 u# @    return("0123456789ABCDEF".substring(aDigit, aDigit+1))* s; i' z! ~! Z0 T& t
}* m/ V; {" _) S0 @5 [+ a* P
// convert a hex digit into decimal+ }2 W3 ^! E" _8 f. H
function deHex(aDigit)
' {8 I$ M* u" x! T{- a  I( y' m6 c+ C5 o7 y
    return("0123456789ABCDEF".indexOf(aDigit))
, U$ W$ t9 Q  k* x. \/ i}
6 I6 N8 ]2 t8 _+ h
0 {* F) Z4 I  d: ~6 s// Convert a 24bit number to hex
" c$ e4 k6 s4 P5 O& @function toHex(n)* W/ v* L  k# H0 K6 a9 @
{
9 F5 r& ?. i: |6 B) t' ]    return (enHex((0xf00000 & n) >> 20) +( m0 ^) |# I7 b0 L, h
            enHex((0x0f0000 & n) >> 16) +; G8 o3 V/ X( ], [" c% [- I
            enHex((0x00f000 & n) >> 12) +0 E2 I* e1 d: }' `' o1 M; [: \
            enHex((0x000f00 & n) >>  8) +3 K6 x5 y* G9 X
            enHex((0x0000f0 & n) >>  4) ++ \0 d( Q8 R1 {" I# }! V
            enHex((0x00000f & n) >>  0))5 m0 ?. s6 t' u* G/ R( Z+ A  F
}
5 |+ l: U" ~6 f. r( \. h// Convert a six character hex to decimal: H+ Y2 g8 [! S) H5 `  S6 K
function toDecimal(hexNum)
1 T. i) i: f& z; r% d{2 z& D: N  V0 J* G* \2 Z3 a+ E
           var tmp = ""+hexNum.toUpperCase(). M/ p; `% _% Z. D$ ?
    while (tmp.length < 6) tmp = "0"+tmp* }# I, k5 k! c8 r5 x8 x7 ]# S# |
           return ((deHex(tmp.substring(0,1)) << 20) +
7 o. M/ u5 P; X! \) K) v                   (deHex(tmp.substring(1,2)) << 16) + ' \5 x. l6 [3 H0 t3 h3 s
            (deHex(tmp.substring(2,3)) << 12) +
( T: X# \' [: @4 q1 [* Q3 N# O( S            (deHex(tmp.substring(3,4)) << 8) +. h& c% C) p6 F/ g1 d
            (deHex(tmp.substring(4,5)) << 4) +7 P. r! ]0 ?4 b9 S) P% W" S
                   (deHex(tmp.substring(5,6))))  Q) Z$ d  X  m' F* M
}
' _9 z# z9 U0 Y, x8 F7 G///////////////////Shimmering Links/////////////////////+ x8 o, c$ T/ L4 u9 M6 {* u8 O: ]
//global variables
. q& u. m8 y; Y4 w! T0 A+ svar hoverColour
) t7 f8 l/ R4 T4 x" b: W! W( w6 {var numLinks;/ v6 F% c& z2 K0 Z
var rate;
8 w( ?" I, L" m+ P2 r# z1 a% cvar numFadeLevels;$ z7 j+ R3 R- x4 y! O4 H* S# X
var bgR;" f3 w8 w& F7 G
var bgG;
+ V8 i, ~) b: e2 yvar bgB;
! g* S: F3 h' Q. Z  |/ k+ Avar currR;
3 |0 {9 ]4 Y+ ?5 xvar currG;4 K9 j& t& h/ z, t
var currB;) v$ F$ t' H2 u3 R3 c& |
var count;- n" o4 z- z# }! l/ H# J' e
var fadeOut;7 C& s7 k8 h! U
var continuous;; S1 `5 m% b7 \: i7 T1 i
var newColour;
& Z8 `- a) d6 a9 I5 Rvar tID;
- D2 e1 m7 ?$ Z8 A  A  F9 Evar redInterval;0 w' K) d, x/ Q  F& i0 {
var greenInterval;( q- I3 G5 I" f9 Q9 }6 h
var blueInterval;
0 B/ L) `) o$ p0 [) Bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# w9 S  H; A8 a: e1 y1 b5 s{# K8 E# s$ w* b* G. H" m$ l+ n
        hoverColour = mouseOverColour;
8 p" Z8 ?; M& R9 m        numLinks = numberOfLinks;
. y6 j! t# j; t# P        rate = 1;3 {  B* C$ y: {# H1 S0 F
        numFadeLevels = 30;& s* C# }) `* p# g4 ?3 w
        function initArray(theArray, length, val)
8 p- G4 T  ^- G0 Q8 L        {
3 x) n+ W& x  Y: `4 v; t3 q                for(i=0;i<length;i++)* F& U- Y. |; S4 ?4 K! W, }3 n
                {
) T- n9 \# W8 C0 y0 R, S4 r4 s& }- @1 H                        theArray = val;) G3 Z( n4 U' o* g5 H% C' g; s2 z
                }( @2 l( Q3 @: y8 |) A
        }7 `9 c: e( Q0 e% m
        bgR = '0000' + fadeOutColour.substring(1,3)
$ N  u' s8 U3 v3 K) i; J0 _2 p        bgG = '0000' + fadeOutColour.substring(3,5)+ H/ m/ j5 {8 G: A; A7 X4 f- X6 T( z
        bgB = '0000' + fadeOutColour.substring(5,7)
! `& r  c+ Z" V; v        currR = new Array(numLinks);
/ x4 e# @9 F3 r3 ?  J        currG = new Array(numLinks);" K) ?6 e6 V, B' V
        currB = new Array(numLinks);
2 o) _$ `+ [+ j9 l8 s        count = new Array(numLinks);
: m# o9 A6 b2 m, G1 B8 V        fadeOut = new Array(numLinks);& N) l5 A5 n1 ]; u" {3 `1 [: M% z
        continuous = new Array(numLinks);
! ]' y1 ]( h, K  B        newColour = new Array(numLinks);9 n% j5 W3 j) q2 V. R2 V
        tID = new Array(numLinks);
6 i9 x& n- t" H: q! O: I) c        redInterval = toDecimal(bgR) / numFadeLevels;2 r% t3 o& k' s( @% R/ U5 C1 }
        greenInterval = toDecimal(bgG) / numFadeLevels;
- {& r4 I( J2 v: ~        blueInterval = toDecimal(bgB) / numFadeLevels;+ D" a' G) X1 e; U; k% e6 V* |
        initArray(currR,numLinks,0);
1 |( S' ]( x: x* Z% ?5 r/ X3 Q        initArray(currG,numLinks,0);5 Y7 Z+ O: T- w" W8 M6 \
        initArray(currB,numLinks,0);: B" v. u  H* W: b% Z8 ?+ b
        initArray(count,numLinks,0);( P1 F7 z  R8 W# M! ~# P
        initArray(fadeOut,numLinks,true);
: X" A0 y' J9 j: s2 s- ~* s7 Z        initArray(continuous,numLinks,true);# C  K$ P- V; b
}        ; Y5 L, _4 C  L, J6 U
function startFade(id)
- q/ ]* ]( N, `/ @6 M& N{2 v' j3 n) \* ?; E0 d6 s
        if(fadeOut[id] == true)
. w7 C: f# O, q6 `/ B" z# X        { /*move colour towards background colour (increment)*/( @7 r4 d. z3 \, G
                currR[id] += redInterval;
( k9 L' n! x9 Z' [2 o  N                currG[id] += greenInterval;
" o5 K8 C0 @& o( D  V% p, I$ T; b9 c                currB[id] += blueInterval;5 t* r8 p7 p+ i* J
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 G3 ?0 t0 Y+ t$ ^9 X+ M' u
                if(++count[id] == numFadeLevels)
6 v) B" ?& ~- g& M, i8 `                {
7 l- b' ]9 G2 r( v3 [: F7 n                        fadeOut[id] = false;3 f: Y  ~0 g' r+ }" M7 }8 l. v5 A/ y
                }  C' T' c) O+ x, z
        }1 U! I: B( E  X6 D8 Z3 e, c
        else- ~7 E/ C1 O7 l+ L) e+ k9 r
        {1 c/ t5 O" l% ~6 S& z+ F2 B
                currR[id] -= redInterval;
2 w8 h8 ~1 h1 p, d
; h$ |: Q! f& L$ H                currG[id] -= greenInterval;& k6 |0 v1 Q7 E( f4 @
; {/ J, M4 R) p8 t4 F3 I; y6 K' l7 S
                currB[id] -= blueInterval;' x( U& V3 ^- n7 A4 O( G
6 x9 r& `$ {/ B! e8 |
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! t; n8 \# s/ K7 S2 g0 }

7 J9 W" \/ S9 n& j                if(--count[id] == 0)% g9 r/ L$ m& \' F* m5 Q& L, s1 w

0 R6 P) e2 J) I& d                {+ l& x4 W$ e/ `5 Y  J
! n" c1 q1 z  o7 X9 U% u9 ~
                        fadeOut[id] = true;
( E' ]! o: _& V4 v9 v& A1 x& F  V' p. D8 a/ v, {3 k
                }3 Q1 g/ N2 H" I$ y  [
% W( U' [1 c6 Q4 Z
        }
  H, Y. f) K) i. C5 f4 E' B- T3 ^) Y9 f* P/ |+ l8 P  r5 ^8 a
        if(continuous[id] == true)# l  V! A- r" d8 K
& k1 z: D5 G7 r# Z
        {& g5 A9 g0 p# |  h+ i

  g% H" ], g" R- z                document.getElementById(id).style.color = newColour[id];                / p! `- V5 K/ n3 O2 M) `  E. l

& L8 h! m- B. U  |        }; k" l) x7 B) g; H) M
1 B" _5 \0 g: k8 m2 p
        else$ U3 E' h, J$ j

" e; L' P2 C5 T+ u' D) D  \8 }9 r        {9 l2 |4 m% ?; X: e

" }6 ?8 }3 v* {* z& f: L& u, T                document.getElementById(id).style.color = hoverColour;$ h' W' ^. L! z- A; E* J

9 u/ O: g( l0 D8 \; s+ O        }
( Z/ ], }( j, z- _, j6 G% k5 H) P/ i; X8 n
        clearTimeout(tID[id]);
/ E( V5 r* p: {7 s+ c( G4 I2 S/ H+ z. L. Y9 G4 \
        tID[id]=setTimeout('startFade(' + id + ')', rate);& u: R- U: ]; `
- \3 J0 K3 ~& E( ^: w* v+ J
}7 ]6 G. Y7 F8 m) U

( }0 Q8 n6 m+ ~* Z3 hfunction continueFade(id)8 V3 t1 X) V) _0 }

2 d+ H1 g# I. \8 S$ @{
" x; r) e( s: t7 C$ a* T+ I) G. A) X8 X7 S
        continuous[id] = true;
4 D6 H5 e" q, R
6 G, o; T& A' G( e}
+ G: X  u  [# A1 b1 B4 H, d6 `: e$ Y+ e
function stopFade(id)
' }9 ~" R9 u- U' K# H" x/ ?9 z( H5 u2 f" k1 v9 h* D
{5 e  d5 }* t7 w" Z3 u% u# E3 @5 t
! U+ {( P. `7 k. F0 P& M
        continuous[id] = false;
0 Z2 V5 M& g& ~- n  p3 `" J1 J) u& ^7 E: \0 j
}
) V$ D$ N3 Y1 p$ |( T) }7 }8 F
1 \, l* {5 u# q8 hfunction StartTimers()
6 S4 x! O; e0 {% t9 P3 W( g- w2 Q1 w: [& R
{        //set up an initial set of timers to start the shimmering effect* e. K! `6 N; t+ L

% I: K0 ~  ~) a8 ~( i        for(id=0; id<numLinks; id++)
8 l. _( K' i  f2 E7 y0 D  P2 E& p9 U7 S& z$ c* E
        {
( ?& W9 Y8 Q9 C- _2 x
8 [$ b& {) R- E                t=setTimeout('startFade(' + id + ')', id*100);# D( E+ p: D9 q9 x- c
, c4 ?8 H; _& ?# L4 A: }: I
        }
6 h# G# k  y( q) q: z1 |- m0 n% _! n/ }9 s+ D5 n! d4 ?8 U3 Q4 [, R+ \
}$ H4 A6 s" |% ^, B' f& h, N, U
$ H% q9 Z. _' z6 p6 h6 @
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
' h1 K% y! e% I8 M7 U9 z+ K% C. g! E" D, H% Q  a9 Q' I' T* B7 i/ [
initLinks('#FF0000', 6, '#FFCC77');2 b: P/ F6 f( m" @
: {$ l0 ]9 G& l) Y5 v
//-->
2 ~% C; j5 g2 G6 A8 i5 ^1 |: N2 l* f0 Q) `5 R5 F
</script>
' E0 |% o- n$ b3 [6 `( m- n<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元- q& a' Q( c  y) {/ a- y
</a>, x* J3 E9 f) i5 c8 f1 W7 h7 B" J
<br>) v: @$ O( c6 g7 J+ o! Y! N1 O, |
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>; M, Q& \; c. u" A; T
<br>
5 i! ^+ S; i8 S<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
9 c0 q' y" o2 q( V<br>       
2 }& j% E6 ?5 k<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
+ c& R( H% ^- E  e5 Y<br>
0 [8 p/ V, U5 Q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
  r* K# v! L% h- x0 h6 D<br>
' _. p7 f; [0 S6 o# k( N/ [7 [<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
7 @5 \3 F: u+ E9 j/ N! z( T<script language="javascript" type="text/javascript">+ R7 s' _( T. k& [% q: ?/ H, }
<!--4 y9 }* Z; D2 t" c6 a
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
9 P  u7 |$ V% f% [' W, t% a; r//-->
" ]$ e4 F6 I9 J# g</script>

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