返回列表 发帖

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

<script language="javascript" type="text/javascript">
+ _; j' _/ x& d<!--
' l# f! g1 n( e! `// convert a single digit (0 - 16) into hex
+ n$ G+ J7 Q+ E: n% H8 }function enHex(aDigit)
1 i0 m$ T2 }: _. y5 x) D{
$ S7 W/ l- m) n    return("0123456789ABCDEF".substring(aDigit, aDigit+1))( P5 q  T( k2 b0 Y+ V$ N" m
}
" A. h: H+ E3 U( Z  N8 X// convert a hex digit into decimal4 d* n3 }/ ~2 m# W8 |3 E) g7 f' V
function deHex(aDigit)
" ~. |) K/ B/ N/ k{
5 @7 a+ o0 w" g    return("0123456789ABCDEF".indexOf(aDigit))
1 w4 ^( C4 S9 }+ @- R}
6 Y) X) o7 ?% K) r% x- R; N$ M1 s2 V/ }
// Convert a 24bit number to hex
  Z% l0 _: L1 |- ofunction toHex(n)0 g$ {# j7 N5 p* g: Z
{
$ h( N! _0 t  j- j    return (enHex((0xf00000 & n) >> 20) +3 {9 `. R3 v7 l0 K
            enHex((0x0f0000 & n) >> 16) +
+ K- @: Y) I8 D2 O) D            enHex((0x00f000 & n) >> 12) +
) a/ L# D# }. @( H8 x9 h) z' R            enHex((0x000f00 & n) >>  8) +
& c: U. @% M! h+ _            enHex((0x0000f0 & n) >>  4) +
  M, u8 B) [5 O! L            enHex((0x00000f & n) >>  0))  `! ?, c4 Q$ p0 a% ^
}
- f' c/ D* Q9 s/ d6 A7 Z5 I, V# H; X// Convert a six character hex to decimal1 _$ r- \8 M! q3 B9 j
function toDecimal(hexNum)  u8 M8 w5 w) J$ c5 b' g8 F
{
2 M4 x) I% P" i! C6 i6 e           var tmp = ""+hexNum.toUpperCase()
( |3 j* A6 m* Y$ a* Y    while (tmp.length < 6) tmp = "0"+tmp4 g& S7 f9 v. k- M% p5 f
           return ((deHex(tmp.substring(0,1)) << 20) +
  D7 [/ Q& t) `( Q! V% z5 R                   (deHex(tmp.substring(1,2)) << 16) + / O' Q* T& W1 X* d
            (deHex(tmp.substring(2,3)) << 12) +
. l1 M( G( k0 o) Y" ]            (deHex(tmp.substring(3,4)) << 8) +7 w5 f, x0 X3 F$ L  m: i* I
            (deHex(tmp.substring(4,5)) << 4) +& F1 }, Y' j, X1 }
                   (deHex(tmp.substring(5,6))))% K  [/ K- _: e' v3 P, E
}
6 x* L1 x# l( |; ~, W/ a( t) a; t///////////////////Shimmering Links/////////////////////3 ?4 R0 ^1 u9 r2 w" A
//global variables
# d* k1 Y; Q) W) _. Qvar hoverColour
$ C" F( ?' [0 b! I  }% H  Y7 Ovar numLinks;5 q" S# h! i+ f) Q, Q0 @+ ~+ m. v
var rate;0 d# Z, D- d" |: l5 j- b0 z
var numFadeLevels;
$ h& a0 E5 l4 j  Z3 Svar bgR;
+ h1 K$ z9 _! s& r2 Lvar bgG;* H, [" _7 C2 _0 w% X5 b
var bgB;
, [5 K7 ^' I5 m3 ]: ^" cvar currR;
! ^( Q; _) p- R* ivar currG;# L9 z6 g" f! X! a  B" @
var currB;9 v: x6 e# J( T. Z+ C# N- u8 Z+ Z
var count;+ p1 j  S7 E. k7 J% z& [8 s5 ~; q
var fadeOut;/ f" q7 H) |2 p5 z" w- R7 y
var continuous;
5 V! ~" u  Q, Q9 n9 E, ], [var newColour;; Y& U# V, x3 E: X
var tID;
; T6 g3 \, M/ A% g0 t9 m1 K! X( Wvar redInterval;6 [# O$ a& o+ s
var greenInterval;# L. x2 o- A6 B3 G" H
var blueInterval;
& p# q* ]1 u8 O2 g3 U; ifunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 i9 S' Y& T5 d1 c{: x; h0 o, H% J0 Y
        hoverColour = mouseOverColour;, ]8 l# G4 o5 y. Z( R* x
        numLinks = numberOfLinks;4 J" A+ k( o' ^* b% s; C
        rate = 1;
2 T# h" @/ s) E7 |8 l9 Z+ p+ i" V        numFadeLevels = 30;
9 s3 v5 C3 b" W' ~3 G        function initArray(theArray, length, val)- F' ~! S( `$ q, K2 \4 U9 S7 v
        {
/ O" c5 C/ i( n- A1 d+ P& O                for(i=0;i<length;i++)
9 a  }2 n2 d3 W! E5 g" j                {+ f: A' q  [; R+ _( c: Q7 m
                        theArray = val;1 Y" `$ X, s" j5 o& T. X/ Q
                }0 n  s6 p' n' l! E
        }
, |1 M' x3 h2 v- M$ [# c# L- w        bgR = '0000' + fadeOutColour.substring(1,3)0 g- p; a$ k  C" f0 ]
        bgG = '0000' + fadeOutColour.substring(3,5)
/ O1 `: n0 y) P9 t; e        bgB = '0000' + fadeOutColour.substring(5,7)
. a% h0 i' R% p: c- m! u1 i( G        currR = new Array(numLinks);  m5 p; d+ A; w5 }! W5 c
        currG = new Array(numLinks);
! a6 Y( q# }5 ]# t; P        currB = new Array(numLinks);) E2 X5 S! o9 A3 [, {" e" A
        count = new Array(numLinks);6 M" l0 F/ h$ F; _' D7 f+ p* F; y
        fadeOut = new Array(numLinks);
+ H8 o6 D! ~! V# R        continuous = new Array(numLinks);
) Z  r$ ~9 G3 c' j2 {        newColour = new Array(numLinks);$ g9 K  W7 E8 \+ n" R; U
        tID = new Array(numLinks);
5 Q& |, y2 r: X7 r% c2 i; p2 n) R, Y        redInterval = toDecimal(bgR) / numFadeLevels;
5 l8 ?  p) |$ h, O$ g/ |        greenInterval = toDecimal(bgG) / numFadeLevels;
# b2 A6 r9 i$ ?( R! |        blueInterval = toDecimal(bgB) / numFadeLevels;
- I( ~7 ~  t6 E" }& s8 B        initArray(currR,numLinks,0);
! c3 @5 w( ~! c' W( ]        initArray(currG,numLinks,0);& s- X% g# l+ D* C2 q2 d( a) R# U
        initArray(currB,numLinks,0);
5 [2 U9 b& G; `% L: ^        initArray(count,numLinks,0);
- h8 e6 j9 ^8 g! D! y% Z2 f' @        initArray(fadeOut,numLinks,true);# @8 g) N4 }; w2 b, ~7 F
        initArray(continuous,numLinks,true);$ [# g1 M6 \+ a5 M1 \9 }( l! x
}       
; O' C% [6 {- Z+ |function startFade(id)
: J+ m( [6 ?) f' V{
2 e+ V1 [/ F$ r8 d( f# `, M# l& K: m2 m        if(fadeOut[id] == true)0 U  q7 v9 A0 l* v! L; `4 g8 j
        { /*move colour towards background colour (increment)*/
  m( T) m' D+ H- G" R                currR[id] += redInterval;
" M8 b! C9 p+ d2 X# _. ^                currG[id] += greenInterval;4 t2 t9 ]' m6 ?0 d
                currB[id] += blueInterval;) }" ]% t, L. d; j( F
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, j3 `9 z: m% S" ^7 H
                if(++count[id] == numFadeLevels)
, P4 R( a0 |/ G% H                {2 O) C0 @. V+ U: P
                        fadeOut[id] = false;
  V; T& P/ O1 M                }5 `$ u# d/ E5 f- w; X+ S4 Z) Y
        }
% u; @$ b! }8 H3 p        else; |, Y% h) E# _4 ^+ W
        {
$ ]; |2 z' a8 k+ i% J( g                currR[id] -= redInterval;
' z+ L0 b# Q2 u  |1 M2 \# H4 g& L" W4 r+ d. A1 k5 v% m0 U
                currG[id] -= greenInterval;$ S5 @+ J' i! I% L3 j- v
; B; f7 b) y2 l/ k9 u; G8 f
                currB[id] -= blueInterval;( V: _- O3 D) u- R( e. C" J4 E0 }

" Z0 L, P0 ^4 T9 X& c5 f6 A3 Y+ `7 u                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: u2 V1 V& j3 c3 u& K% d- C: {4 W! I6 `  F- ^. w
                if(--count[id] == 0)' P2 S! f0 g( e- J

# V- _9 L9 q$ p# S3 b                {
( ?4 J  m: C! ^) e7 O" f( t6 _
- T' p: C5 m! {8 e* m                        fadeOut[id] = true;6 g. ~8 _; ^4 e& M2 b
/ {, F) n$ i( T9 c7 u
                }* s- ]' H. K/ l" w" b5 f

/ t" A1 B! t4 a4 m; c8 y        }6 A: ?7 V) E1 U3 y
- ]2 F) l. l& |' o3 [
        if(continuous[id] == true)+ y7 N2 ?9 D! M! Y2 v" `
' q% v( G% ?- U' i% }5 W# W! G/ m
        {
/ O$ t8 d1 U9 {. r' I$ v# u8 J9 Q1 U4 `3 \
                document.getElementById(id).style.color = newColour[id];               
8 w' h4 B; |% U5 l1 E% Z' I5 }" I: p' g7 q7 ]
        }
! |6 r/ ]( ~0 T9 X7 a: G0 U8 c* j0 b+ o0 ~5 z/ ?# u& E
        else
4 ]$ F3 f9 p" v1 s* |8 f. |2 J, i
" q8 h9 f* q2 X, ]- A, K        {: u2 W, U) O- D3 n5 d
! y# k! @9 C% y  q" t
                document.getElementById(id).style.color = hoverColour;' A6 Y6 C7 Q) H* C1 z

* f! e& W5 _- l' _) z: i! e        }
/ c( m9 d0 W, H0 l, ^- K
& F/ |& r# a8 k; J* H1 J! D+ Q        clearTimeout(tID[id]);1 w$ _+ D# ^2 o. @- q9 K( e
& ~7 n& X7 T) A% s) O
        tID[id]=setTimeout('startFade(' + id + ')', rate);* Y4 A. K$ f$ l1 h- U6 f% c

' Q+ L4 y9 t2 H4 F7 ]}
6 X$ j- }2 z, N- f# Z+ h
9 _) g" [4 R3 s. E" mfunction continueFade(id). S( U& i0 _6 P- X1 _8 m. X0 y5 ~5 L

- W0 M# J, q! K+ Z8 V+ H4 [9 N! F{
* D4 r' |% z" l2 I9 H' }- T% r
: L$ E2 ]7 T  g7 |$ M        continuous[id] = true;
6 N$ k, g& B) F& S2 `0 p' X; D& A3 W: f; D6 m  r
}9 E. a# ~% h& m8 _( o
/ {5 ^* i0 h. r1 R) ]
function stopFade(id)2 M+ d0 y' R6 Z1 K! L# Q: r( s

) @# {0 F. d0 b  t% j5 i4 z{. b/ N& ^0 I! D
: a( T+ y. W1 _
        continuous[id] = false;
  _2 }  p3 |5 c0 g1 r: I: ^+ d/ l0 g3 p
}1 m; I( i' O; X$ S' {

) d1 ~7 D  {; u) ?( m5 F- ~. ffunction StartTimers()
% b1 l% O  C1 `% S( s& y5 |6 @; E% h3 V3 S/ \2 b
{        //set up an initial set of timers to start the shimmering effect2 E+ q3 x5 @+ ]) _

* N: J  E" G" y& O' W        for(id=0; id<numLinks; id++)& _0 I! a6 l& }6 _/ T! b! F
6 ~4 b1 o' J9 `# U
        {+ r9 ]  F6 m2 t8 i& x0 j

. a, I7 c' }2 G# F8 _" ~                t=setTimeout('startFade(' + id + ')', id*100);
! H8 C0 J( Q3 n) P! N" `, Z% C, N' \) M, p+ |7 a
        }( Y, @6 m& w- k1 m! Z5 c

+ s4 X$ m* o; ?. n5 P4 r, q}0 i* F  h% @6 q$ @/ E' }
) L* g) A! t: }
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; Z: i# K0 d8 x& A' p" U) J5 K2 H# \; t% L; ^
initLinks('#FF0000', 6, '#FFCC77');% F$ Q8 E1 w" |$ _7 I1 u  L9 X

. ^' _9 g& ^9 [5 v: \+ |7 K//-->$ a8 E, v! b! S. W2 A0 f
' f0 ^" C1 d  _# j; t# y, I" G( J
</script>
5 {( u% l9 `3 f& L+ z4 T/ V<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元& }# R' x; P3 K, h9 y
</a>% s! |0 B5 @( \% f
<br>' v* z: L0 q1 V4 Z
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
6 \! T1 A7 h' E( U<br>
- [! r! w3 @) g. z* h7 T5 |$ v<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
/ y6 b7 s3 a/ d8 l' M- K<br>        0 S1 K, }5 g) E+ C7 m' J% B
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" d9 W# b& g  N# ~
<br>
8 g2 G9 r6 @, z4 x<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
' [" N9 O/ [- R- |( E% b, W<br>
7 K. Q, T  s; z! A( u" p$ o1 S<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>& s& M3 e/ U1 Y: ?$ N
<script language="javascript" type="text/javascript">
7 g, Z" c2 T8 B7 b  x  P<!--& V4 ~- I8 P3 [* W0 {  u8 E- H5 i1 f3 m
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
: x2 r! e+ t  g! o//-->+ g, ~$ X; E- A" e5 f
</script>

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