返回列表 发帖

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

<script language="javascript" type="text/javascript">7 y- ^& j& {. c  F% ?
<!--
7 ~: B, W' }, W// convert a single digit (0 - 16) into hex: i, g$ p& y' q! \2 X
function enHex(aDigit)
+ N$ K+ x6 v9 _{8 e6 f) j7 h) n9 E! T+ K' S
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))( N) H4 z! `6 |. H
}! y  ]1 G+ G' ?
// convert a hex digit into decimal1 @6 C) y4 u, H7 h% ^
function deHex(aDigit)! c6 ]9 y0 w7 K8 Y2 f
{, s4 d/ q4 x/ N( ?" D: O3 R
    return("0123456789ABCDEF".indexOf(aDigit))$ R# R! Q, y  r4 V5 @$ l
}
, q$ H& l7 n5 _; W7 w. `: p/ Z% {9 }* Q, r
// Convert a 24bit number to hex
+ A+ W2 e( J$ [2 w( s2 Lfunction toHex(n)
7 j3 y1 ?3 r9 B* p{8 `! Y# P: ~! i4 J* c0 i5 @, N8 ?
    return (enHex((0xf00000 & n) >> 20) +/ u  l- E& b# x: Q: G
            enHex((0x0f0000 & n) >> 16) +
$ u# ]0 o3 v* h% s            enHex((0x00f000 & n) >> 12) +( m% S9 k" q( ~# o( F
            enHex((0x000f00 & n) >>  8) +
6 X: T8 H9 ~- i, O8 Z            enHex((0x0000f0 & n) >>  4) +
8 l; r+ C5 f0 d            enHex((0x00000f & n) >>  0))
1 e4 M" }' k- }" \2 n: n}
. X  T, o  n& R" W) U+ S// Convert a six character hex to decimal
0 x2 L. G* A& L6 K% ]function toDecimal(hexNum)
: w2 u  I; B* s: q4 M3 _  m, m{
; p# w1 _, j; b% p' t$ \           var tmp = ""+hexNum.toUpperCase()
# a! B, L7 \# h9 `    while (tmp.length < 6) tmp = "0"+tmp; g- a& `3 M' f" [) n+ {( g
           return ((deHex(tmp.substring(0,1)) << 20) +
6 e: j' i0 I3 e" K- f; Y) }                   (deHex(tmp.substring(1,2)) << 16) +
& m+ \6 F, S3 a; [- c4 R; k( @            (deHex(tmp.substring(2,3)) << 12) +9 p, _+ E  W% m
            (deHex(tmp.substring(3,4)) << 8) +3 s/ d& M6 [. z6 p, s$ [% e- e
            (deHex(tmp.substring(4,5)) << 4) +
4 j/ B) B7 _6 k5 J: U4 k                   (deHex(tmp.substring(5,6))))
$ c+ C7 g8 y) t' `/ U0 d}
8 O. [2 k5 w+ i4 E( k2 u, J+ R///////////////////Shimmering Links/////////////////////+ g( y5 V: l! x5 y
//global variables
* \* R4 K1 v  y8 ivar hoverColour
6 D. P& _7 Z) Kvar numLinks;: v+ r  m% O& S8 F% l% W
var rate;
; n) M( s8 S2 Jvar numFadeLevels;
; v7 g) ^8 b2 m: `var bgR;
- \2 o& L9 v9 t/ ^; ]/ i% W6 Gvar bgG;
4 W, @# s5 ~5 }2 n. |var bgB;8 \  s* `" C$ N% F4 q9 W
var currR;
; ^- _* m8 ~7 }3 L  @5 mvar currG;
% A" I8 V) F7 u( Uvar currB;$ x$ ^7 v" S* `; J+ d: v
var count;1 b1 u, E! {' P$ U
var fadeOut;
% g/ `% p0 g  e6 dvar continuous;
7 l; n! {2 E8 m% c4 E9 A! [var newColour;) P) ^' l- P, E; }" b
var tID;
7 O' S6 v& N: u8 N' l7 N, A  g' F) Jvar redInterval;
0 c  ]0 {/ |- \/ n0 _var greenInterval;
0 [1 Q3 l+ B7 E; Q+ m1 M3 ovar blueInterval;
  \4 S2 C0 a2 J: Xfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour): k5 ^9 x2 }- G9 i. L2 S
{
- ]4 u. Y: Y# e6 i        hoverColour = mouseOverColour;+ R7 T! ?8 R9 F" ]. l; \9 r
        numLinks = numberOfLinks;8 h1 d/ ]' \* {; m0 o9 G2 t
        rate = 1;
! @* q4 k+ y4 s/ w7 v6 k( H  v        numFadeLevels = 30;
: F1 U; v1 D2 w. r8 W/ @# Z        function initArray(theArray, length, val)
2 E1 p( m  u( o! V        {4 G! C" @( T4 }1 M! A! l  F" n
                for(i=0;i<length;i++)! Q1 x1 m: W, y
                {8 a: k( w, `; |( ~/ h+ k( z  ^; B) ?! }
                        theArray = val;
+ y: y2 x$ Z) m5 A1 T                }
3 z+ o  a1 }3 G) u" h7 n! K        }4 j6 s' O4 E+ e
        bgR = '0000' + fadeOutColour.substring(1,3)3 i# J& N9 a  D8 G% m% c
        bgG = '0000' + fadeOutColour.substring(3,5)
# N( b* f7 }( G  U5 M  k        bgB = '0000' + fadeOutColour.substring(5,7)% W; J6 F* W0 G' R/ H
        currR = new Array(numLinks);- J0 L8 Z- \6 g  R5 V0 G5 X
        currG = new Array(numLinks);
# A1 t9 T, j, M/ Q* U/ M        currB = new Array(numLinks);
  F" F8 v. X2 g* p# M1 l        count = new Array(numLinks);! }& d  h4 D. G: r5 C
        fadeOut = new Array(numLinks);3 K, b$ Q9 [! \
        continuous = new Array(numLinks);0 m% M6 H0 @2 Y' J
        newColour = new Array(numLinks);
/ L0 {7 }4 W$ n6 d0 A0 O        tID = new Array(numLinks);$ W" C6 V/ R. E& L( m2 c2 T
        redInterval = toDecimal(bgR) / numFadeLevels;! Q' v7 x2 r2 k7 l% l( M+ p
        greenInterval = toDecimal(bgG) / numFadeLevels;$ E  @, d* |- b* r6 B0 D
        blueInterval = toDecimal(bgB) / numFadeLevels;. d. a4 ~" W! E9 ]9 J# r& g
        initArray(currR,numLinks,0);
' z( U; g" a+ k( I+ ?: A        initArray(currG,numLinks,0);
/ {- I- n7 a: }4 \        initArray(currB,numLinks,0);6 F# _4 Q5 U3 k7 J
        initArray(count,numLinks,0);! \1 q7 r; x+ u+ S
        initArray(fadeOut,numLinks,true);& o/ Z. L6 b2 Z/ s. x+ m
        initArray(continuous,numLinks,true);
2 ?) m& X0 _/ G9 `# L4 |. c}        ' I, D# K# d: Q1 m4 }
function startFade(id)( |+ X1 C9 B# ~7 |
{
- }$ @' w5 A! ~4 x" K1 C: n" k        if(fadeOut[id] == true)  P6 J% W! X6 d2 w8 e0 O4 e/ }& n
        { /*move colour towards background colour (increment)*/
2 `- z2 {& l3 F+ V1 j6 y% g3 E$ b                currR[id] += redInterval;
8 P7 [; v) j+ o% |                currG[id] += greenInterval;% L8 G" ]6 A6 z9 S. k9 v
                currB[id] += blueInterval;
- l) S5 o1 y2 ]* r. v- k                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
; u8 _1 y. \( z                if(++count[id] == numFadeLevels)) W+ \5 ?5 g! z6 J5 H0 d
                {6 E# D# ^2 Z% Y0 d6 U
                        fadeOut[id] = false;
7 }9 P; I% J9 W/ m& }* r1 g                }
, U/ [( q1 C* [+ D2 O5 f/ J        }
% W, s% n, W$ U% ^. ^4 |4 H, }        else9 q# ]5 g: R- C2 {7 M& Q$ N  F
        {
7 E" f; {) R, g                currR[id] -= redInterval;7 v2 M" O! ?9 w# ?8 W
- \  Y) V& W7 ~# W0 [5 U
                currG[id] -= greenInterval;
$ W0 m- s6 x+ `, B4 s0 ~
" t* v  S  K% ]8 @' J  X- ~3 V                currB[id] -= blueInterval;5 U5 l: i5 {  ^6 L7 B( T

5 Z9 v% K- N, @1 d9 u$ Q1 M+ I                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);  c2 P7 S+ f; L5 S

# r, f  O9 S. p- f( ^% x                if(--count[id] == 0)0 K/ m- ^4 B6 D- ]& B% ^9 }" s' P
  l" t0 |( O3 m+ @  I- f
                {/ e$ o/ N# g' V9 V- u

: |9 r) W4 s7 m* K6 C+ C3 _                        fadeOut[id] = true;
4 s, S$ \0 R5 O
: N# a8 r+ |; |: N# @                }, h) Z+ ~4 N. U

; v) S! @3 b# N( ?        }. E; u% b+ x3 Z# T- Y
) Z9 ^2 h# h5 v! C
        if(continuous[id] == true)5 I9 Z% j3 V) r0 G3 P/ @

& J) d# O/ t/ J6 M% E6 I5 k        {  \# B9 q) b& |. L8 U0 \

) @( l; o/ M; I( q& I                document.getElementById(id).style.color = newColour[id];               
8 Z1 Y! }8 R2 f$ e7 F
6 b$ _2 t9 d5 ~7 P" c        }
- p& z. E8 X5 n0 o; r" f; D  t. `% T% X( u/ p1 D
        else
+ |  ?/ @! n- r
, `0 M  S7 _, m# c6 C" a* I6 d        {' ^/ ]; N: K( V; Z+ F+ g

! l& z7 x' k% q( l                document.getElementById(id).style.color = hoverColour;
) i: _7 k- G3 m0 |- G; s8 m3 F  ?+ j& O$ w
        }
: `( `! H& J  [. T& }
. e. s+ q$ e3 D% \, Z7 S        clearTimeout(tID[id]);% @- o9 a1 i7 r! p
3 A& H' r+ f1 j+ E
        tID[id]=setTimeout('startFade(' + id + ')', rate);7 u7 a5 V. G" ?; d6 F  _
7 f) e- `' d: A  \8 _
}
) E7 A$ B/ v7 h) e+ Z+ ]
0 {- ]7 s1 m0 ^: b+ vfunction continueFade(id)% Q: T- F2 s; D- Z# }
9 T7 f& ]7 a- J5 e! B
{
- \% E. U2 u2 B. G, ]! A& ?: `: l7 F6 R- e5 Q* M$ |: T/ K
        continuous[id] = true;
: w' E) T$ g/ E  x% y+ B: y
/ a: T1 |- o% T: L6 h( H" I$ c}5 E5 n- @, W% ]  j# [

4 H& k) C3 `( C" rfunction stopFade(id)) R1 ?# c9 ^3 T5 j5 Z8 ^
* e/ P0 G  u* n/ f7 b5 `; T1 R
{" l/ |( \# H% z# h9 g+ x. F

$ Q1 H0 L/ K7 h        continuous[id] = false;6 m4 N# [8 @- [- u8 m- m4 @5 b

: f. H9 q4 H& p) B1 p" r}4 L% v$ Y+ o; C% ]( w1 r

; K0 i# W. p1 R1 T' wfunction StartTimers()
% i5 Q% W( W. T" D9 y. N& ~! E3 ?. ^4 ~7 Z% l# M9 D
{        //set up an initial set of timers to start the shimmering effect
8 D5 `' s: i1 w9 U$ J* I% S2 `' f
+ W$ y- _1 O) s" {        for(id=0; id<numLinks; id++)6 X; O9 Z7 H) N& ?: [
" y2 @( D4 U; b
        {% U, C+ f( ~* |* B

6 k! W! _4 O8 B6 d                t=setTimeout('startFade(' + id + ')', id*100);
& k" Z# n0 ~5 z0 o" v" Z( R4 K
& A' T1 T7 I& l6 C( i- Z7 O( g        }
& ^5 Q  M6 C' ?( H3 v$ j
6 d4 L/ y& ]% i: m5 u2 X}
1 _- w* \3 G3 N9 c" `3 B% W- n* m, K) Q0 ~" Y
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')$ c: K0 ^- h8 n( e4 W1 D
0 Y' n3 E9 n7 Q( p+ u
initLinks('#FF0000', 6, '#FFCC77');
4 X+ f8 x" C( \& F4 S* Y* V' N; m( G: ]7 ?
//-->" F. l' I5 Q! Y. l+ P
6 ^6 d3 l$ c; [& k0 \+ Y) ]% ?
</script>
5 e5 l  @# a( P, `% p7 Z) w7 |<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元9 D7 s; V- a6 @* e8 V* M
</a>. O4 e! ]! L( S$ x& K
<br>
2 w# ?! X: b3 ]' i+ T; P+ J  y: ^<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
; ^$ z1 _$ L' I<br>; Q7 a; ^/ |4 Y3 R: m
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
  \8 r* g) d; w  g<br>        , u& P: T$ t; ]: o' ~3 C6 i
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" n" A& W% q! D" n7 L5 h
<br>" ?$ ^2 Q# B& Q* C( Q$ o$ T
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>1 l$ `  x7 p! e
<br>1 D' _6 P8 N1 W4 J* B: ~
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 T' o0 P6 i" u0 v( f<script language="javascript" type="text/javascript">; ]! F) o$ m1 B2 l! B% ]$ A
<!--7 I& D2 W# X/ g) E
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* L3 t2 _+ ]" c, c
//-->
4 F* }8 m: w! R& o  d& X' ]</script>

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