返回列表 发帖

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

<script language="javascript" type="text/javascript">
& u9 s& o; Q1 ]) H. ~1 g<!--% @& O# q+ A: n# T3 q- V8 v# `% q
// convert a single digit (0 - 16) into hex
' P5 k5 p+ c' E7 I& ]' Ifunction enHex(aDigit)
3 m& ~: y) b  T{
4 u/ c) F- ?8 m; P& u    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
- Z" ~. U9 f8 K6 e3 h  h}
) [0 r$ T+ C# N8 Z3 |5 g# T1 ]// convert a hex digit into decimal/ v6 c9 x7 n5 H
function deHex(aDigit)
$ J. J# z) C1 ]4 Q9 P3 i+ K# g{
" r3 h9 l4 I8 `" y/ K    return("0123456789ABCDEF".indexOf(aDigit))
9 ], V) I# G5 @0 W0 k! `}# c0 S6 t1 L. u+ B3 V; @6 z& v

9 A1 r$ W. ]6 Q2 L1 u/ o// Convert a 24bit number to hex
, ~* T7 J& L/ Z6 y" a9 Efunction toHex(n)4 e' D; U( Q0 W; O: K
{7 l7 ?" w' f2 q# e( Z5 e$ K  b2 D
    return (enHex((0xf00000 & n) >> 20) +
1 U+ b/ J- B5 v. S" x! J( u            enHex((0x0f0000 & n) >> 16) +" \4 Z9 L5 n: N4 G3 `. ~3 C
            enHex((0x00f000 & n) >> 12) +1 J3 Q1 p, o% n$ Y% A
            enHex((0x000f00 & n) >>  8) +
: w* B9 c: Y. P$ A- V5 x            enHex((0x0000f0 & n) >>  4) +; E' I8 e! C8 _+ G9 Q3 O% N4 o
            enHex((0x00000f & n) >>  0)); O. L, c+ l! w$ W
}! \* f. r% m/ N  z3 G% v6 S
// Convert a six character hex to decimal5 U; C) n) c/ A; m2 z+ O- I" z2 {
function toDecimal(hexNum)
# F% Z3 [) S% [! T  E' l{
1 U  y3 e0 }& M5 U           var tmp = ""+hexNum.toUpperCase()/ i, ^5 \" H! E, c) ?
    while (tmp.length < 6) tmp = "0"+tmp
1 T7 R. t; s; B# X! s. g  |           return ((deHex(tmp.substring(0,1)) << 20) +* e* d: r$ F. I- S% G9 O
                   (deHex(tmp.substring(1,2)) << 16) + , O( N( d8 c9 V& Y
            (deHex(tmp.substring(2,3)) << 12) +, e, u  _" c+ t, Q6 o
            (deHex(tmp.substring(3,4)) << 8) +2 \8 P5 [! n- ~# B2 I
            (deHex(tmp.substring(4,5)) << 4) +. _9 ?! h( b0 ?7 w
                   (deHex(tmp.substring(5,6))))) ^2 K) `2 E; s) Y- ]% H, g4 J
}
4 ~8 B, U1 J& v///////////////////Shimmering Links/////////////////////
9 F1 {5 L4 E" U- c) x3 h//global variables
9 E# ~  ?7 W) l5 ^, h: evar hoverColour6 A. ~; I) X+ u4 `6 a7 t
var numLinks;
0 s0 w! P) c. S6 R% b# J/ Wvar rate;5 J0 k" {( G/ a0 u
var numFadeLevels;
" p4 n- M+ e! o: C! `* x6 avar bgR;
: \7 J' o. P0 ~, dvar bgG;( l  _- Z1 H" H
var bgB;
# J' Q1 q* F. [( q0 @; A' M, Evar currR;" E. {, o3 H2 w4 d
var currG;. B) G4 J# w5 j1 L9 b  P5 K
var currB;9 J4 f) J+ x; z
var count;
! c& ?; \! N# ]) y6 m2 ^: s% M' Ivar fadeOut;
* y1 G* P3 f% }" g+ m9 ]' ivar continuous;
; n( v7 K/ V3 t! avar newColour;9 I9 D* e, _* T4 N& x5 Y
var tID;& k! i* `; N, }# D6 G6 o; ?/ d( {' O
var redInterval;, u* y$ y1 Z% M% T
var greenInterval;3 B* G! x4 }- D, A7 n
var blueInterval;4 A0 J4 g( W; I# i8 Y" j
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)! [$ b" V/ L+ s4 ?* Y
{
7 ^0 [2 L8 f; N, L- ]; F! S6 k- `! f        hoverColour = mouseOverColour;8 I( k  p+ C1 d2 {* O
        numLinks = numberOfLinks;  E8 D( Q" Y" G  S" L3 [
        rate = 1;. q, l2 E0 L4 q1 `. y0 J
        numFadeLevels = 30;* K; L4 k: b8 ^& _+ g8 x0 Y
        function initArray(theArray, length, val)
9 b8 _7 w! y3 E        {
$ _& p9 Q$ ]' ?1 R9 H7 w- m) J                for(i=0;i<length;i++)) D1 Y/ M: n# L$ o0 }; N4 l
                {% F4 _; U3 S+ d2 x
                        theArray = val;
' |/ t0 f7 t5 b9 L/ y% ?                }
# w& c5 i+ D1 Z- v# |        }
/ L' P3 {" l& t' u% H        bgR = '0000' + fadeOutColour.substring(1,3): j, v. P* |. y0 ~5 Z$ E. u) D
        bgG = '0000' + fadeOutColour.substring(3,5)4 c  r# V* v4 v6 e5 h# t- t
        bgB = '0000' + fadeOutColour.substring(5,7)6 ]4 F, m5 y  ~# Z: L% o& F
        currR = new Array(numLinks);  L" C* D. `: G* H2 z: w
        currG = new Array(numLinks);7 `0 r. X: T6 ?9 D2 h4 S7 t
        currB = new Array(numLinks);
8 I% I# ?+ P" _1 e0 z        count = new Array(numLinks);5 D: Q% q, E( x/ j2 ^+ o- t7 `
        fadeOut = new Array(numLinks);! _$ ~  z  m' b) a
        continuous = new Array(numLinks);# d% d7 {1 i9 {
        newColour = new Array(numLinks);: l4 }$ |0 T2 W# @4 H! ?: ~
        tID = new Array(numLinks);
$ x: s9 O4 a5 U% @+ i9 j" J' e        redInterval = toDecimal(bgR) / numFadeLevels;
5 K0 o$ m7 Q/ f        greenInterval = toDecimal(bgG) / numFadeLevels;
) [0 `0 A) {* G- V" g& h6 W        blueInterval = toDecimal(bgB) / numFadeLevels;
+ Z9 W) ~8 W) T* p        initArray(currR,numLinks,0);0 n' D. i6 O; ~/ y: g: J: W
        initArray(currG,numLinks,0);2 n1 }+ Y1 @2 @& m/ g
        initArray(currB,numLinks,0);
8 }8 F- [- q7 I7 |        initArray(count,numLinks,0);# {' j2 T( b6 }( X
        initArray(fadeOut,numLinks,true);$ v4 l) q1 B! W: c% h+ Z9 E$ f6 ]
        initArray(continuous,numLinks,true);' t+ w1 o& P1 c3 v7 ]
}        , k8 U. Q9 m" U, i5 ~+ @
function startFade(id)& L, z( G; {; p2 q) q
{
: m4 M: v7 ?0 ?( M- U        if(fadeOut[id] == true)
0 G! j( L2 R6 p, [6 d        { /*move colour towards background colour (increment)*/+ F) i8 G# l; Q5 A6 n4 ?1 G) t0 n- g
                currR[id] += redInterval;
, y$ P3 M: p' B. [# A, o                currG[id] += greenInterval;
) I. l' P) ?2 R% u! T: M. g0 Z& h                currB[id] += blueInterval;
- y' i9 i% F2 }( d: v) P: m! h                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 k. g7 l" T/ D                if(++count[id] == numFadeLevels)
1 n/ @5 Q- Q  b- ^                {
6 j  c' x& f. W                        fadeOut[id] = false;/ x6 b4 w. f( a: ]1 m# b& C9 E
                }8 O2 R( o5 f; h8 k9 Y
        }
; ~: f# O( Z0 s$ s) {7 l$ i# E: O        else
! A% ^  W* g+ r8 B        {
+ q$ ~6 A! y( |/ R                currR[id] -= redInterval;+ O+ }8 Z% f: [# ^3 l8 Q
. A$ _9 ^3 `& Y0 m( k7 |" J& t
                currG[id] -= greenInterval;, i. ^+ m; t$ I: G+ t% Q+ l2 u( _) s
$ j3 H* k- O1 _  B, w
                currB[id] -= blueInterval;
& b4 Q/ L+ y: [% s! W$ M8 J, j* ]5 p$ b. w1 d
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);1 _% k- ?- l' }* \
5 C) ?$ W" F% G
                if(--count[id] == 0)# y# m! {& z6 E: k2 E7 U
: o; M# A& h, S/ V  [& d3 k
                {% p1 `4 m: Y& w: N; M
" a7 k/ k) \1 M+ v9 P9 V
                        fadeOut[id] = true;' j9 w! ]5 g8 @! e( e

/ ]0 E/ _2 L4 B7 v& D+ `% x8 c                }
' R" C0 K/ g+ N: ^2 ~( A3 Y9 g; P. ~
, l- ]7 {% v$ E# `7 V        }
1 X$ L1 t: J% }1 x& l- n2 Z' B
7 C$ L( M& B/ t6 A& I! V        if(continuous[id] == true)
2 y% @: `* j$ D3 e# ]) |* a! e- @* F- D; a, T# r' g- e
        {( n8 n2 [+ N! V5 u1 F9 P

: @9 D2 ?- N. @1 n                document.getElementById(id).style.color = newColour[id];                ) K/ Z# `" ^1 I* Q3 a2 v
: ~5 @. K+ {0 ^: E
        }
# f( ~4 i+ x% N0 I9 v3 P, i: d0 b
        else
, m( P/ X; K7 U" }% B
( ]# J* Q* a( _/ g$ C5 }; ?        {
! e- o& o+ ]( k& T4 I7 G% u/ U- z: d1 v2 W1 H' }
                document.getElementById(id).style.color = hoverColour;6 V# ^/ ^& Y4 `3 d$ K7 j+ ^+ K9 H

% O1 ^0 y3 m0 F) }        }) D" y- c+ ?6 C4 {

; V! r3 }' N* M( O/ Q$ |% \        clearTimeout(tID[id]);/ [. K9 p, A7 Q: s( K
) u& r+ O/ l) f
        tID[id]=setTimeout('startFade(' + id + ')', rate);2 e* F1 ]7 k( o6 s  s% N

- y2 Z- U! j! _8 E: Z}/ {0 ^% ~, b, v4 G  M) D

7 l+ v2 P! k, ^  s6 |4 _% cfunction continueFade(id)
  ^2 G* Q1 J8 v9 S
: b8 B; S  D$ }8 E1 s. U0 p0 `{
% {! u9 G/ x4 b% ^+ s9 N. L' S. n5 q  z$ I6 R2 k; J
        continuous[id] = true;
) d* O6 e, H+ o; F9 d6 P, k2 I' p; ^
}* G, x$ n0 K7 F$ y

  K; M+ Y( W3 ?6 Q% tfunction stopFade(id)6 t2 o3 D1 U3 v0 T

3 W: l, P& R3 L4 x9 P, C{9 j& S* [" c- y- e7 n+ M6 r
. S/ j6 N, r% k: A: C! c
        continuous[id] = false;
' {' c/ l2 D$ v) V
7 C: b! [2 r$ j7 m6 E( m, ?}
! P$ A3 M2 Z# |; ]2 `1 v3 [0 o1 P% D% j* `
function StartTimers()3 S9 t2 T  ~5 |( O- P

) x4 I2 d& Y* b5 h9 K- ]4 K9 r1 ?{        //set up an initial set of timers to start the shimmering effect
7 X6 B3 j: {% Y' ~$ r% n& n
# s8 [6 U- u6 n$ r7 y! h        for(id=0; id<numLinks; id++)
" b! ]. ]. R: a# {0 u+ k  z& |! a1 D9 C0 D7 @( M
        {
% _2 N: ^6 I  Q8 ^- _. p
- n- }4 h2 p+ R4 x                t=setTimeout('startFade(' + id + ')', id*100);
3 h* H7 ~8 p3 Q( f2 }5 [6 y, w0 @0 X: D1 G) @
        }
, E1 |8 R' U7 N9 X" k: [& P. L. G1 q) m7 [, v
}( [; s6 ]9 p5 O8 C+ S
% x1 P4 X& u$ {9 s' E# ?  Y6 P
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')% c9 I% u7 P% c

) _9 U2 M/ Y+ T, z& J- c# a% b4 linitLinks('#FF0000', 6, '#FFCC77');
' w8 r/ B* o2 x& W  n) q7 T0 Q% o. l# k6 I
//-->
( Z8 S) H" s( D8 n: v* U
% B! g; P# w5 Z) R0 Z4 h1 [</script>
2 m4 z6 P  \. J: c' N" B1 o<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
. b/ T1 e: t1 ?0 P1 Q% o( }* }</a>
& C6 ?( ]& @3 _% w5 L) F4 u/ s% \<br>' U4 T+ X' ?7 `6 k% H6 m! _$ O8 A* t
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>: z: o: }) {' L
<br>
  B$ F2 K. l, ~* Z; p; J1 N<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>  H& Y& v; h# F" L$ _. Q! k
<br>       
/ O9 I( s9 n% X: z& ~  G<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
  K! j# Q! \# ^<br>
0 W' _/ q4 h0 |, P2 h3 n0 m<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
9 R0 D7 ?$ m2 T+ O<br>- o0 w5 L+ L. {; a& |' p
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
+ a# q: a% p% ?2 j0 Y% R% S<script language="javascript" type="text/javascript">* y: Q' @1 l4 ]
<!--
8 W# I/ A& [' T* t# osetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. Y5 O9 {9 o, o//-->7 r; ?- _) F- I( }6 a
</script>

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