返回列表 发帖

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

<script language="javascript" type="text/javascript">
! z4 P) H: l: _) U4 i. ^<!--3 \1 K& `0 P7 t7 L; w
// convert a single digit (0 - 16) into hex
. E6 h7 |! J* ?9 [2 r: u: u, Y( Wfunction enHex(aDigit)8 S0 G8 Z9 |, N9 u- Y4 p
{
* G" r, f0 n. E# d' f/ I    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
$ u/ Q, y+ V2 h7 J5 j( q}; [& o4 A% x) P( b5 a) _3 A6 T  Z
// convert a hex digit into decimal
* {  b' c9 e0 v; L9 Xfunction deHex(aDigit)
0 j% O: X* R1 L* d% S& u{5 c0 v0 W9 K) c
    return("0123456789ABCDEF".indexOf(aDigit))/ E; p* p, Q2 Y. w2 c6 R* K8 [. r
}
$ J' z/ s' N  M9 `9 }
6 L; b/ H; ?5 b- M/ _8 t// Convert a 24bit number to hex
& D( ^8 U% [; A1 M: {function toHex(n)- E: c1 S: S7 L) x5 e( X1 b
{- w. [6 j8 g7 l: M: D: R
    return (enHex((0xf00000 & n) >> 20) +) b; m. p. T# R! w* D% P
            enHex((0x0f0000 & n) >> 16) +
9 q" \6 \" U" C: A' {: F            enHex((0x00f000 & n) >> 12) +( M; n9 z1 @! g' W" q- d9 x
            enHex((0x000f00 & n) >>  8) +
6 ]% x( S5 A7 M7 D1 {  ]; h6 S            enHex((0x0000f0 & n) >>  4) +
1 Z, k  D: C9 [0 M7 ^            enHex((0x00000f & n) >>  0))9 B, H' t( Z/ I% I; }% f
}' U% R0 ~; F* z
// Convert a six character hex to decimal- r6 j6 |: o2 ?$ }9 l
function toDecimal(hexNum)7 h7 Q5 N3 E6 p, D8 I9 @
{5 E" u% C! u1 B4 |7 k- a! C( B% S
           var tmp = ""+hexNum.toUpperCase()
9 z; T; M! Q( Y6 }( @/ _5 U    while (tmp.length < 6) tmp = "0"+tmp2 y1 r: p0 W, w' U
           return ((deHex(tmp.substring(0,1)) << 20) +- J7 _4 }/ O8 f  z0 G$ G$ e
                   (deHex(tmp.substring(1,2)) << 16) + 8 u* I5 o; x- _
            (deHex(tmp.substring(2,3)) << 12) +
2 T& \! x: u$ o" x: G            (deHex(tmp.substring(3,4)) << 8) +
& F# _+ [1 N7 N& O/ E            (deHex(tmp.substring(4,5)) << 4) +" Q2 o6 i  K3 m9 P/ ]2 U
                   (deHex(tmp.substring(5,6))))
+ \' ]$ a3 t6 g2 B}
" s* {* b" D5 Z( u. e( ^% V- o///////////////////Shimmering Links/////////////////////6 Z/ {2 J5 \7 g3 [9 {
//global variables
' l9 }" N* s5 i4 [3 V; nvar hoverColour
. j( y# s/ ]! m" f* X6 mvar numLinks;
2 d  q  y+ A( ^$ Bvar rate;5 b# l6 m* C4 s  ~* }
var numFadeLevels;
+ k7 T! k9 I# X, Gvar bgR;
0 u) u0 S7 Z/ evar bgG;( ~  u8 ^# ]3 t* y! m, A1 O
var bgB;) A: m, t" L7 ^. [; l2 ^& p. o
var currR;- [' H0 V" R" S8 ?* L; V- }
var currG;/ w, D2 R3 \2 n; `0 ?2 P+ U
var currB;: |# Y' C) Q/ v/ x) v( i+ r
var count;/ c, o9 `, E* L- v$ S
var fadeOut;3 F! M0 G5 D; @) p
var continuous;
4 ~  Z" `+ d6 fvar newColour;
  U1 O1 X5 h7 }9 a3 M* `4 I5 uvar tID;/ e$ Z2 h& }" d: [0 f5 n" a- d1 Z
var redInterval;
. `& H* A1 x3 O. e3 t0 Hvar greenInterval;- p( r  ?. C' e$ \
var blueInterval;2 P; C* S+ ^, s0 p: j. N
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
. U  A; E3 c% K; V{
9 |9 ~# _0 X2 l7 I% I# M        hoverColour = mouseOverColour;
* `) S# q( r( s+ r        numLinks = numberOfLinks;
2 U, n7 k& t; h5 ]. r& E4 x        rate = 1;
$ c3 a( J% h5 \  H, a        numFadeLevels = 30;# d: [+ E/ h6 U0 Q  S4 _
        function initArray(theArray, length, val)
3 P9 D/ n- m2 g        {2 X9 ^& m" K9 l3 W
                for(i=0;i<length;i++), p5 Q$ B9 c' Q% t$ K
                {5 }0 W7 Z# K' o/ v) i9 G
                        theArray = val;+ s- N  o8 @  R% ?
                }
, ^$ o* Z8 a3 j( P        }% Q* [0 r# O2 }* d$ x
        bgR = '0000' + fadeOutColour.substring(1,3)
/ A# [2 a; s; S$ {! g2 @* @        bgG = '0000' + fadeOutColour.substring(3,5)# ^4 J. [7 u. k4 u5 q
        bgB = '0000' + fadeOutColour.substring(5,7)
" j: S: v: T8 i        currR = new Array(numLinks);# x( C& o. P; P' q& e. y
        currG = new Array(numLinks);
- p% t% b2 X3 V( y4 P& }* i        currB = new Array(numLinks);
7 c+ i- F) a- g* s# j        count = new Array(numLinks);
0 ?% F# g) _6 x2 x* f, h. Z        fadeOut = new Array(numLinks);
9 J$ C5 E& ?" w- r- J' z  |; e& ~        continuous = new Array(numLinks);4 j: u( L7 _' S. p
        newColour = new Array(numLinks);
1 i4 K" F# ^4 y3 y8 j        tID = new Array(numLinks);( Q; A9 [. ]9 I' d) M) ~+ v
        redInterval = toDecimal(bgR) / numFadeLevels;3 Y2 Y# l4 u' @' t/ M) F6 d
        greenInterval = toDecimal(bgG) / numFadeLevels;
+ W9 _+ q1 j; A& m+ |; \$ i! O# @        blueInterval = toDecimal(bgB) / numFadeLevels;+ g9 O1 [  s4 x
        initArray(currR,numLinks,0);+ R/ q; S' p, F3 p3 r
        initArray(currG,numLinks,0);8 _2 D, f* K! b9 g
        initArray(currB,numLinks,0);
) _4 k; e9 w' h  s9 ^3 b1 M. B        initArray(count,numLinks,0);. H' _( Q$ }0 }4 _8 g: \
        initArray(fadeOut,numLinks,true);8 q/ m8 y" G  X7 V5 x
        initArray(continuous,numLinks,true);: k; I& ~3 m/ F1 h/ h
}       
% w6 G; b% x; E5 Gfunction startFade(id): y8 j8 k9 `: _1 A& @$ G$ @
{/ t) i( A; A, }& P3 H2 }# P
        if(fadeOut[id] == true)2 q# b% N/ T' f7 g
        { /*move colour towards background colour (increment)*/" o- y$ b5 [7 `0 F# S
                currR[id] += redInterval;; [, P2 {0 {! W1 s/ Y* ~, h# T* u
                currG[id] += greenInterval;
5 ^0 n, i- u" |) Z3 ^. F% m% i                currB[id] += blueInterval;
. ^2 x1 I1 ?  w( R3 S8 _& U: X1 j6 n                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" d9 O. z8 V3 U( k" u) f
                if(++count[id] == numFadeLevels)8 }) O8 t# f" W# y; S3 I+ Z
                {' A. w# b( q" K4 X7 Z  |
                        fadeOut[id] = false;) D4 f* h8 N# a. \: M- K& \
                }2 ?- B# C5 K8 y) s4 w
        }+ E# W, A( O- W
        else
( h4 j! ~  g5 i3 ]        {0 i7 q9 ]% f4 O+ B4 J
                currR[id] -= redInterval;& a4 ]9 _& n& ?( m. P

' E) B7 u, K1 v: A" A                currG[id] -= greenInterval;& X  l$ U+ F6 ~

. q% b+ f# L$ ~5 ^5 C. Y                currB[id] -= blueInterval;+ N: U0 _9 Z! y3 V  V

2 Q. s7 n9 o6 {) c4 \  T1 V, Y                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
! D2 H/ @/ S% N$ _1 O# \- L' I% W& ^) W; U
                if(--count[id] == 0)
0 [0 E2 I, x# h) J. L4 `! _
* U; U7 y4 x& S$ O6 x                {
) a4 L( ?/ w8 S1 \
# C9 Y1 J7 c4 \5 B& y- \                        fadeOut[id] = true;: m" a# x$ h! h! a, f
$ o, q+ A  m4 y9 h- e
                }( x( o$ H4 D# P

( N9 v+ W! r% w( Y% Q        }$ K, I+ f9 s3 L8 O; n
; K4 B2 [' l: ?, V2 b- @0 O1 X
        if(continuous[id] == true), D5 j( v" O# I
( e! `1 @( T+ x. q6 I
        {7 x+ d+ Y4 ]! P

! _) Q& `8 J( h                document.getElementById(id).style.color = newColour[id];                1 _; n1 H2 @9 ?5 L  W7 |
* w( k- C$ r# A) W, }1 U8 a
        }: m% m" e" A  S
$ L+ A5 c" l& D/ s6 [  O' h% [
        else
8 e/ [" b4 Y$ s
* C4 J  H) A/ T6 ?        {
4 e+ G, d# W7 w  F! C5 Z" Q" o
! P0 V3 o( ?4 D* y) C; f' P1 _                document.getElementById(id).style.color = hoverColour;
; P* e& g- \+ q: L2 |# `2 t4 Z' d1 Q2 O( {: w6 T
        }( p2 @. |6 `. F* P4 V: k0 A6 A
" D; x! p1 G" ?0 w
        clearTimeout(tID[id]);
$ K# F$ {# d! r7 ?
. ^; {# \4 e. G( N8 A        tID[id]=setTimeout('startFade(' + id + ')', rate);. N8 y) W' B& n9 C, G  a! [3 w
5 K* j) b" P& {8 U* J7 I: |: k0 e% G
}& y3 k$ K5 B* F* ?/ H9 g+ |/ G, j

, _9 _0 c( n% v  j+ xfunction continueFade(id)  G, G1 i4 [" B% m7 r" P) ]

8 y: X/ D4 a& z+ ?' U{- _# T3 b7 c# ^4 `& f7 B
5 [) s/ ~. v! L( h
        continuous[id] = true;* r. m; X7 P7 \, F" C

. n" c) }" I, m( Q8 M0 ^}, H2 n3 l2 M2 V) O# U2 L

* y* A) W% ~  f5 Q7 F+ b# _( sfunction stopFade(id)$ R: S  h4 P8 |2 R! z) Z: l

5 D* f' r: ^, S9 T6 `# I  e{
9 ]) a2 S/ [+ I9 ?7 ~; d9 C5 ]! S8 @* {( k% _: H% v5 }
        continuous[id] = false;: V0 j- p& s8 v- m& m  t" [2 k

( n- i9 X9 ~* u8 w6 }}
* |' {2 O: H+ c. t% P) ]5 }
/ ]# w8 n6 v  Ifunction StartTimers()
8 h3 m  a7 L- f7 r1 @- k: ?
' a5 R) l. l( ]9 k; {/ `1 O. a6 R{        //set up an initial set of timers to start the shimmering effect; ~1 M# x( B$ n- s
% U8 ^% I" g8 g% J2 V! [. ]
        for(id=0; id<numLinks; id++)' A/ B4 a) I, g# h

% T0 s, N/ C! X1 B! [9 _        {
, _4 m% @+ D' G( K  J6 ^
" J9 j% i/ r/ y0 B; O3 M3 Z2 J                t=setTimeout('startFade(' + id + ')', id*100);
0 w" J" k- \6 U6 ^9 Y% s$ K
7 ]: i0 r4 T+ g        }
: t- l3 L- }! A& {7 p8 o* U
- ^" K- G0 W4 [8 b) T4 G}( ]2 g: P7 Z* M9 Q6 F
, O7 B: E: Z( h0 E
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 n. s; h- r/ R: C7 _  X

+ N% ^$ ~/ l  Q4 ninitLinks('#FF0000', 6, '#FFCC77');4 ]7 a7 |) t' r+ r, j$ c# c8 h; I

1 D% U/ j& R3 W//-->! f; Z" |! r# Z% e+ q7 r
5 W, m& Q: q0 Y  p3 F
</script>& B5 x% T! {3 k7 ^
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
) G; o% y( j* {! R% _, D</a>; p. ]* I* S7 c  t# c
<br>
, }& b3 g0 M$ b$ C. J% L: m: i<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
  s: q7 n6 i2 f1 k, `<br>- E) B5 w$ z2 M1 m+ l
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># }9 E  I" V) ~' l; ]
<br>        9 f6 q; v5 R. B$ i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>% Q* @. k' Q3 Y  A
<br>
. p/ B/ r' V5 Y& E$ i3 q<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>4 k/ L, V$ |, ?6 F
<br>/ v: B' ?+ ]  J' f
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
- T* [8 p, N  K+ \<script language="javascript" type="text/javascript">' L# ~- Z5 G% i2 l! R5 k( w
<!--
( {; _  I3 Y/ V- R8 RsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering# k  s2 G% H5 G7 j  ?
//-->
" G9 x, Y, ?; N! S* h6 T) T</script>

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