返回列表 发帖

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

<script language="javascript" type="text/javascript">
! m( K1 B. r& d$ D: I<!--
" j+ ?9 X3 W- X  I. V// convert a single digit (0 - 16) into hex
6 k/ y9 `' O4 h: z' S7 Jfunction enHex(aDigit)$ G; O; U$ t4 B. H3 F8 d$ g
{
* c7 v6 E9 Q) J; _    return("0123456789ABCDEF".substring(aDigit, aDigit+1))0 g$ I1 p" `/ l( t2 O
}
8 v/ R" n+ K/ N% c/ i' ?- c// convert a hex digit into decimal8 c* h- @9 q/ e
function deHex(aDigit)- u1 b2 ]  r2 n6 u; Y3 O
{. a3 _, `" Z- }6 _8 \/ Z
    return("0123456789ABCDEF".indexOf(aDigit))
& w/ G. ]. o' F9 i: W}
( n) \& ~) {! C7 }( r4 G
& j9 }5 w; J. w$ t' ^5 s( S- [// Convert a 24bit number to hex
  J8 V' x6 q. M- @5 ?2 zfunction toHex(n)
( F+ Q9 H5 L3 _6 C{
( e- k1 a4 l8 K+ ~* w5 V) f; N    return (enHex((0xf00000 & n) >> 20) +
! E- a4 d3 c* m% E# ^6 k            enHex((0x0f0000 & n) >> 16) +" D8 u# p  |2 {8 T8 ~
            enHex((0x00f000 & n) >> 12) +
) o+ Y8 [- ^) n5 K/ R/ }            enHex((0x000f00 & n) >>  8) +
! ]+ o, ?3 p& q4 w6 [& E            enHex((0x0000f0 & n) >>  4) +* l2 s3 {; T& \' G7 R
            enHex((0x00000f & n) >>  0))
& g2 M0 x- _2 G$ y8 k7 R( `/ `}
0 g3 G% b; {, v- y5 F5 o9 w8 F, C// Convert a six character hex to decimal+ t! z3 `9 ?7 v1 ]) [( ]
function toDecimal(hexNum)
2 ]! |" ]1 z- l& }{5 c: A4 P, ]# R. r/ a
           var tmp = ""+hexNum.toUpperCase()' Z4 G2 }9 \# J' G
    while (tmp.length < 6) tmp = "0"+tmp/ d( M9 |& {; k  F
           return ((deHex(tmp.substring(0,1)) << 20) +
& j4 N) h+ D' M, y2 Y, J                   (deHex(tmp.substring(1,2)) << 16) +
5 q- L% |9 X; P' B2 c            (deHex(tmp.substring(2,3)) << 12) +1 I; ~, n0 x- ^* a9 M9 C" }, o
            (deHex(tmp.substring(3,4)) << 8) +' Y, D6 r* r  |5 F3 D5 n/ Q
            (deHex(tmp.substring(4,5)) << 4) +
% g  P4 O3 [. `8 D# o                   (deHex(tmp.substring(5,6))))
( p) j2 U  e# F0 ^}
9 j: g6 C/ T/ W9 [///////////////////Shimmering Links/////////////////////, `' M" r7 ^- R, ^' [- G- `
//global variables
$ p/ G; f9 f0 tvar hoverColour  u  I1 H) x3 a  g5 X. |$ m+ I
var numLinks;
/ W6 K/ h6 e$ k0 Yvar rate;2 v' A  L4 V4 ^* z" {
var numFadeLevels;
( X0 w! n4 G" `! X) i# o9 lvar bgR;5 [1 Z7 z9 p/ |9 m
var bgG;4 Y/ H  R5 t" x, [
var bgB;
! j& a0 @: x" R1 Lvar currR;- T  P+ m( X9 L
var currG;2 q% G& ]8 x& n  K" O
var currB;1 X* Y$ |! u# D6 g& Z- C
var count;% p7 n! E1 ^& s% R
var fadeOut;4 T( u) Q. w( \2 e
var continuous;
2 `3 `( M2 m; \var newColour;. @9 Z1 A  J" V  r' d
var tID;
9 Y2 \* h) z7 f1 m1 g2 _var redInterval;
$ t( F- r$ k, ~% }- evar greenInterval;. Z3 W8 v; f9 u
var blueInterval;; q4 H5 a# J- H. {8 v5 C
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour), y  v' @8 R5 d  i: V3 M( n
{/ t" {+ A  j' |/ B& `& |8 C
        hoverColour = mouseOverColour;
: ~) ?, v: A# S2 G& D6 T) i3 Y' k1 w        numLinks = numberOfLinks;
' X; y7 z* B$ C/ A        rate = 1;
4 M* ?7 {/ G" m' A- }- V        numFadeLevels = 30;
- K8 ]7 p/ x# Y3 ~6 W$ N4 W$ F        function initArray(theArray, length, val)
9 n- D! l7 ?0 `8 @. [        {
# Y) @. X1 E9 O& p                for(i=0;i<length;i++)0 ]& G$ ?: x: }- x# m0 e" V
                {
( I& n! I9 e3 \  _                        theArray = val;# W0 w) P* K: _5 H( V
                }8 q- J* k" l- f& _9 Q, z) P$ r; b
        }
9 D; H8 N5 T) `& X, d        bgR = '0000' + fadeOutColour.substring(1,3)
0 X7 C1 K0 Y' ^+ ], B- O        bgG = '0000' + fadeOutColour.substring(3,5)* V. {" k. y6 {; F( I" B  c
        bgB = '0000' + fadeOutColour.substring(5,7)9 P. t" W$ ~9 Q# `
        currR = new Array(numLinks);
! Y! D; g( }; r6 _6 F6 X        currG = new Array(numLinks);3 y$ y! T3 I, \  d; B
        currB = new Array(numLinks);
/ ^  M3 g) o$ c1 I7 x- ^1 V+ u        count = new Array(numLinks);5 b- p, ?  Y' \% h: n
        fadeOut = new Array(numLinks);
9 L- Z. Z& Y' f# n* g9 L! |" i' O4 }        continuous = new Array(numLinks);
) n: B, v0 I$ A: }' Y        newColour = new Array(numLinks);4 s; i# n2 T, L; X
        tID = new Array(numLinks);
3 t% A- I) j7 L, @  X        redInterval = toDecimal(bgR) / numFadeLevels;, W6 a7 e9 `1 K* U: v
        greenInterval = toDecimal(bgG) / numFadeLevels;% Y7 i7 d- {& m9 l7 H, j
        blueInterval = toDecimal(bgB) / numFadeLevels;
. e8 A8 j6 p2 v( M6 z  `4 J        initArray(currR,numLinks,0);
2 N2 {  B% I- M3 g* D9 [* U        initArray(currG,numLinks,0);
; J- h) u4 `3 x- b4 E8 a( G4 ~        initArray(currB,numLinks,0);
/ G4 H+ E0 @/ f& ]& G  R        initArray(count,numLinks,0);; x4 n# R  O6 F6 {- o
        initArray(fadeOut,numLinks,true);8 q9 d8 y# x$ N$ Q" [7 P
        initArray(continuous,numLinks,true);3 X+ R" f/ |: ?9 H
}       
) v5 I1 r( D8 ?: D/ s- G$ l" D0 Ifunction startFade(id)
0 D: ]3 i9 c3 b2 [' U/ _{
0 H, X5 W! R6 @' \& N        if(fadeOut[id] == true)+ B# Z3 D! Q. T6 v' r
        { /*move colour towards background colour (increment)*/+ u  v) H6 _3 K$ B. A1 A% A$ A1 u
                currR[id] += redInterval;9 T1 u0 s% B3 f$ k) f. J% N
                currG[id] += greenInterval;
3 a  P& n+ k2 G                currB[id] += blueInterval;
5 i& d5 d% f" }                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 _7 r3 ~1 z, N) M: v' l6 s+ b- i
                if(++count[id] == numFadeLevels)3 k4 g( Y% c4 u+ c3 |4 ^1 w
                {1 h5 z0 J& G& S, z
                        fadeOut[id] = false;8 Z0 R( l0 N7 K, N
                }
8 m! b5 P% |- g  F        }
3 N. a$ k  K1 i, O- n) o7 D        else9 R+ j$ }/ ]! u
        {2 N" x! B0 w5 q9 y2 z' y, d
                currR[id] -= redInterval;
8 B4 S- M; `2 T! W
: m1 {# e5 F+ u                currG[id] -= greenInterval;) S. J, l1 S3 @, }

5 V7 I3 G2 k) `, d: d5 g                currB[id] -= blueInterval;: B' C$ W$ C2 U' x

! Z8 {2 c# c( ^5 F, V( k                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);/ `0 G  `7 V! _6 j
3 o6 ?: y: D. @  y
                if(--count[id] == 0)" s' v4 [( r" H: J2 C

8 h# h( m& }3 t                {5 T* N9 i* ?! u" K) ~
& V3 X$ F* j  h& x9 d/ t( P& O
                        fadeOut[id] = true;
/ ?/ L0 F4 r) q2 v, V$ u& B
* A# B/ Y  F- Z" l) ^                }
2 |( H! e  z5 a- c. T- A
, ]  ]" T1 p! t: n' {" v: R2 n        }) S5 [9 h' t, P! A! u+ r7 b
9 m) M. a. g( _3 u+ z9 {1 f
        if(continuous[id] == true)- a5 Y% }- E: o) W0 Q! `" P
) \/ n" s8 e5 R3 ]8 E2 ~( L5 A8 b
        {
1 c# W) v) I* j  }8 z
7 N! z' R% b& g! T4 {: l                document.getElementById(id).style.color = newColour[id];                * \  |$ X' w6 F. e( d
7 {$ H" I4 b0 i: x; ^. g4 g
        }& V8 ^, o) I$ r+ D
& j3 u9 S1 v6 i( Q. C
        else( n4 }) i) ]) n" ~, S) f

1 t; B' V; |0 g. g; j1 _        {
) R; C- _6 x% k& C0 K: b7 U1 U: Q6 g) ]' ]& u5 |
                document.getElementById(id).style.color = hoverColour;, M+ ^1 L, D4 ~- y
' u1 L' w( v0 d% f
        }
# d- S/ A9 R1 H8 I1 L: x6 K# o( q
( a; z1 k9 Z* a" r        clearTimeout(tID[id]);
" a. ~$ x- G- P) t& K
) H# |# p4 J7 X) T5 [8 s        tID[id]=setTimeout('startFade(' + id + ')', rate);
( w. V. h) w+ l. [
% n1 E, S1 n# m7 M- |8 O}5 d. F7 R, K" _  B* C3 {, Y0 G
- _4 W1 x2 U; v) j9 V
function continueFade(id)
2 o5 Y! K* |2 L
0 D( i- q+ I# `+ L/ _  r5 E{* d) }! d3 o& i
' u" B" \% P$ e" ^
        continuous[id] = true;
* u1 j8 D& A; V3 v3 O4 k3 f
) i' d- M' {+ @* s}
3 r0 I+ j5 P" \' a; Q
8 L1 Q3 Y; N5 h% J- E' k9 {1 g) Efunction stopFade(id)
3 K3 A3 ?5 G' s5 S2 p: L% v
  j* t% E+ Q0 x6 J% j4 I# n{
' @; o9 p3 R  i( \2 Z6 Y  C1 O9 s  v. k+ y. e: u; j' G
        continuous[id] = false;
# A0 s% j& g+ I. j+ `0 U, J4 J# z% G) p8 E: K" t
}9 S- ]- Q3 |- u/ G1 ^
2 y9 F6 E7 j0 O
function StartTimers()
+ ?$ v( ~% ]; @3 J* s
6 y2 @+ q* z. i, z# S: {4 j{        //set up an initial set of timers to start the shimmering effect' W4 y8 H, @: D1 }' w8 Z

. g2 W4 ?+ x1 x; H4 V        for(id=0; id<numLinks; id++)5 x: t8 T2 s7 {- m! y+ M& g, I
- x" _9 E4 e; f% G$ U
        {8 y+ ^! c: n+ T/ R
+ R. K9 |5 X# t( c$ y) X
                t=setTimeout('startFade(' + id + ')', id*100);; O8 G- d) y- m  K- @& A) w
! H* I4 A+ [  F! y6 e! Z6 Z+ N  g
        }
' l# _. x+ n# q  a# u6 J# U, k
# V  D( x# B2 z- v3 n7 Q2 A}0 i% p6 p( p5 [9 |( V* ?
' N7 ]! X3 P1 w* ]6 b) c
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
6 ~8 q- q& q8 a, y' N( v& Y& R1 e$ c! W- ?" X# Y5 O+ {
initLinks('#FF0000', 6, '#FFCC77');
' i9 C, n! K# b) G8 ]7 Q! @, Z0 J$ w& B, }, B+ Y  x: G& |
//-->$ Y* p# q  ^  P; s) {
: p4 H0 o  S5 M1 ]% k. v2 U* \
</script>/ p1 |7 P' V# i& G# `- `. @! I
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元. {2 j2 w3 D9 R) v
</a>
% X1 X: ?- ~) N, w: X<br>  d1 {1 h' t' K% ]
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>) q! J* r! e: K7 S1 j
<br>
- K4 X2 b7 {. z# N& g! z<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 ]& {+ [- E6 j2 g( t, t<br>       
. a' `& O: T" W2 W2 e) j<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, c/ e6 d0 |; S; I2 e<br>
+ Z, R& D! J  r2 e; ?<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" ?4 {) t$ L3 V. E% B1 j' `; W' H  g9 x! {<br>( Z7 \' X( Q3 i1 k% @
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>+ G: q8 ?" \! z5 l: p# D) S
<script language="javascript" type="text/javascript">
" M  J& \+ g- F2 b4 P<!--' K8 v! O" Y: e3 t2 a. R; J3 r# H
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
% d, o# S, P( y9 U( U/ n//-->
4 f+ f" Y6 v( C$ N4 P</script>

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