Board logo

标题: 网页之文字的循环闪动特效 [打印本页]
作者: zw2004    时间: 2008-1-21 20:48     标题: 网页之文字的循环闪动特效

<script language="javascript" type="text/javascript">! N, k5 E4 o2 g
<!--
4 D  ^. q" T8 q// convert a single digit (0 - 16) into hex0 @& ?1 z# U. y1 K
function enHex(aDigit)+ M* ?; D9 q2 w5 J# O% O5 W% }
{
/ A# T. c* P" R# ]    return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ H! R7 o6 v0 V. S; `
}
) i: S$ \. R& n% P$ k+ ]// convert a hex digit into decimal! j8 \) Q5 `  M# L( E
function deHex(aDigit)
0 m8 L# J# \+ e* }{' ]0 L! \& ~$ i9 U) G
    return("0123456789ABCDEF".indexOf(aDigit))' ^4 R* _/ `2 R( G# i
}
8 \5 a+ E  }9 o& n% @
/ S$ \5 V4 ?( H// Convert a 24bit number to hex: h$ K- J3 ~1 V' k
function toHex(n)
' A; L0 e: ?) u; B0 y% q{
! ?) V$ u$ j& N& _* N* ?    return (enHex((0xf00000 & n) >> 20) +9 u% U  |9 n) {: j0 \' m2 D) o
            enHex((0x0f0000 & n) >> 16) +
! f- G6 v: X7 P7 N# C            enHex((0x00f000 & n) >> 12) +' `( t2 ^3 I' f- B! _; M
            enHex((0x000f00 & n) >>  8) +, ^! V0 `# r, k8 d* F
            enHex((0x0000f0 & n) >>  4) +1 h* ]: F# l% N+ u0 f# `6 _
            enHex((0x00000f & n) >>  0))+ e+ ~8 `) U2 E
}& s% a# A& X4 |" ]% y0 k% E2 b
// Convert a six character hex to decimal% W4 s6 ?3 e# R2 h
function toDecimal(hexNum)
( D. z+ ~% B4 J( j& P0 W* \{: P- L, ^& k/ v2 \. T' C
           var tmp = ""+hexNum.toUpperCase()( H' v5 M8 ^$ ]2 F2 }7 E) Q
    while (tmp.length < 6) tmp = "0"+tmp2 Z7 J4 [! o! W$ U  W
           return ((deHex(tmp.substring(0,1)) << 20) +( A$ Q3 c6 z3 \6 x7 r5 ^# k
                   (deHex(tmp.substring(1,2)) << 16) + 9 c) ^4 F% ^( r) A" |
            (deHex(tmp.substring(2,3)) << 12) +
3 J% L$ [1 y& C; P! j3 H2 y            (deHex(tmp.substring(3,4)) << 8) +
" h* K1 L7 D; Y* i8 W6 ]            (deHex(tmp.substring(4,5)) << 4) +; t/ D, \0 Z2 o/ s6 n, x- X/ \$ @  A
                   (deHex(tmp.substring(5,6))))
6 e" W4 h! N! ]6 T5 s0 i}
7 L/ I- e9 k0 j: ~/ X# R///////////////////Shimmering Links/////////////////////+ `8 x. M$ \" @4 w7 f9 P
//global variables
% P# V7 }5 H0 V1 k( k& Jvar hoverColour
8 ]+ N+ o( f% D9 Hvar numLinks;+ a& E  R3 ^; T
var rate;  E* U8 B- H/ b6 S9 S0 {
var numFadeLevels;9 H5 }# r/ D: ]) M7 \
var bgR;  ?+ m4 W! a% c: m' F
var bgG;& V# X" J9 D/ F8 U/ }
var bgB;
1 T+ z) ^. b( h5 U( x8 Tvar currR;" t! _: J# y& m( V
var currG;
, N: e6 Z, }! V8 R. [( a; ~6 zvar currB;8 |2 H2 R; h: p) J+ K" Q; x3 z% \# o
var count;
2 G# J% ?# m4 N4 D1 O2 fvar fadeOut;
* G+ x! ]) J) ^$ Yvar continuous;4 t0 J9 |6 D+ \. j
var newColour;
- |1 y7 g: `- V: d/ Avar tID;0 y* q2 g/ U6 s! D8 w) B! L
var redInterval;
: Q+ o3 K, ?2 i# dvar greenInterval;0 t/ `( {4 J" T/ [6 k: }! y
var blueInterval;
# G: e# b8 H6 U: hfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
$ ~  A6 j* d0 c7 c( u  ]. m- ?{( {* _& C( F5 V: a
        hoverColour = mouseOverColour;. v- Q1 ]4 f+ o. Y. I6 N8 x
        numLinks = numberOfLinks;
0 L6 ^2 b3 @5 a5 ^# g& T3 T        rate = 1;- \9 U) q% L7 s
        numFadeLevels = 30;
7 |+ h: i* f4 q6 b! U        function initArray(theArray, length, val)
$ r' `: S) u' O6 |0 r( @4 P        {0 ?8 R% ~9 r; S
                for(i=0;i<length;i++)
+ u5 T% N" H" J. {) h                {
4 e) ~4 i1 v  `% f                        theArray = val;! a# Y2 N8 z. g* B( Z: S
                }
( M5 J- H( u6 |. F1 _# y        }( c4 z& a. f7 n# H; t8 w, |- b4 H
        bgR = '0000' + fadeOutColour.substring(1,3). p4 ~: v3 N* F, Q; Z
        bgG = '0000' + fadeOutColour.substring(3,5)
" ?! y; _) U# l7 e, ]; T        bgB = '0000' + fadeOutColour.substring(5,7)7 `( W+ J7 }* c. g
        currR = new Array(numLinks);
) ^  e3 a, ~* c4 h$ D6 v        currG = new Array(numLinks);9 u# U( Q) J% h1 o2 j6 o
        currB = new Array(numLinks);' N5 v( O" c4 h" j  `0 `
        count = new Array(numLinks);9 M; M$ m" `7 V! h( K& j7 Y
        fadeOut = new Array(numLinks);1 {4 Z( L/ k7 B7 c+ o
        continuous = new Array(numLinks);/ N- T3 f' P- H* r8 h* w. |# F
        newColour = new Array(numLinks);
# I4 r' g- r  g5 M4 P5 O        tID = new Array(numLinks);
" W3 J/ A& Q' ^6 l        redInterval = toDecimal(bgR) / numFadeLevels;" I! T+ L0 o% K. h# j! v
        greenInterval = toDecimal(bgG) / numFadeLevels;
8 u- J( `$ D% Y. l        blueInterval = toDecimal(bgB) / numFadeLevels;' B) G4 Q8 N- @# y4 J+ b
        initArray(currR,numLinks,0);
- Y. P" _/ E1 i8 C! I        initArray(currG,numLinks,0);
9 l' d8 }  F- S/ L: n. j0 n9 ~8 S  E        initArray(currB,numLinks,0);: V/ b3 f% W  v" q: k
        initArray(count,numLinks,0);! W5 Q; {9 g' T4 F, Q6 x
        initArray(fadeOut,numLinks,true);  J1 V( m/ W4 a
        initArray(continuous,numLinks,true);& h0 W  }7 \7 s& p3 P8 G. \/ b
}        ; Y# N0 P( e# D& H' h* p! k
function startFade(id)
9 i1 s' U+ `; @& e% Q( E{0 j9 b. R3 ?- t* m- x, {7 d& s" N" s% t
        if(fadeOut[id] == true)6 q8 F2 E* [# q  \) d4 \
        { /*move colour towards background colour (increment)*/  \6 m, b$ D' q; F7 [% c) N
                currR[id] += redInterval;  ?5 Z( l5 `: D! \
                currG[id] += greenInterval;
" }/ A/ I' t/ e& m                currB[id] += blueInterval;* }. g4 K: ?0 ]: I  G; U5 C! w/ z
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
, m/ x. w* _/ u9 ~5 H$ }                if(++count[id] == numFadeLevels)3 R; K# K4 |5 z' z
                {" K1 f# z8 |0 R1 b  U
                        fadeOut[id] = false;7 j" V3 R7 r$ A$ `% V$ r
                }
8 t* I3 R% \  [+ T+ w( g6 n        }
0 t& z% r% A! o( a: J( X        else
- w7 W  {, `! X9 }5 l+ U        {/ B+ w% o, D$ z3 d' \0 n- [# D' |
                currR[id] -= redInterval;: A- k4 U' t5 E# e$ V. J
+ P& R+ u/ U& q; \. f% C0 u/ }
                currG[id] -= greenInterval;. V( H4 Q, W7 z7 s: z

4 p1 q. B: y! _                currB[id] -= blueInterval;
5 f0 F6 H! _; O) y: o: P8 ]
6 ?, t5 Y- y1 y% B6 c                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 V6 C1 q6 ]2 A& r% z5 d! H
( ~7 e# P5 b  h' G
                if(--count[id] == 0)# C6 L1 T4 t, N  _* B$ J
' n3 y" Y  w) m
                {
6 w9 N! m) v' V9 z2 a, \1 \8 n% G6 f
% v2 C* p# |) B' Y4 g                        fadeOut[id] = true;8 }3 |2 ^! G; i- _. |

  N$ S4 V+ B6 }( o9 |                }, U, k6 w. M6 S/ x' s8 @2 A! J/ y- Z

6 Z- N4 c6 t- o* |* l! Q! e' z' o        }
* Z* K+ l0 |9 H
& {+ C0 u1 L8 `, q& O0 M        if(continuous[id] == true)1 y1 ^/ }; t1 I* {; [! c
$ _# U" l% A, |+ V
        {
2 h9 ^4 r8 y9 `" O
5 b" e9 e; w6 }; G- L                document.getElementById(id).style.color = newColour[id];               
* ^: V1 W$ D6 [% D* _& s. @) v$ P$ M/ n; K7 \8 Z2 O  C
        }+ R3 Z' w* p/ ^

3 {+ A+ L5 V: }. a9 O# e: y: w& g  \: b        else
: ^1 t: |$ Y! E1 H
3 K& A( ^' k5 E0 A2 d        {5 z& M! @" s3 H7 l

" k# l5 _/ @0 A4 w( ~! V                document.getElementById(id).style.color = hoverColour;
9 A# F" ]0 F; R" k0 E9 w  \; C. ~* K, X* a, L6 u3 e! P% R
        }
! U) P; C5 r' z; X" H% k2 c
3 E$ C4 r7 S$ T        clearTimeout(tID[id]);
2 c) U$ G% T) E- V9 [9 r5 _5 I8 {& k  n2 u8 `1 R3 ]& M! n2 f4 o0 f6 {6 N
        tID[id]=setTimeout('startFade(' + id + ')', rate);! {" C* L# v% T- s' O

9 D- C; a- g$ O$ r- ^4 x/ M}
- z! d% @$ A- L7 A, q# q9 V5 M. H& p5 L
function continueFade(id)% W! [1 {% }5 F/ \2 |6 m, a- a; P# t
1 P4 y% a5 n+ _+ T- a  l! t" J
{& J' q8 d' Q0 Y  H
+ h0 }. a3 g3 W; Z2 v
        continuous[id] = true;9 {% k3 l3 V4 W7 b; I! ~

8 m: B( F- _2 O( r$ s1 L}
2 c! o1 _" F3 {6 C8 t  d5 W+ X3 a+ p8 n7 e" B, _( U: A* }9 y
function stopFade(id)
! x0 |0 ~, n" m8 t- K
+ x  {; t! R3 n  ~; [{' m( j7 `6 L) L7 S. T
- ~! l2 i8 b; I9 L+ z+ A9 w
        continuous[id] = false;
# \' C7 Y& q0 l3 v2 @: \2 u  h/ z) p
}
. V% [, M; L7 I5 [& Z$ F: R9 W
function StartTimers()( p# c4 P7 Z/ n
; C/ u0 ^6 K  q( K3 n
{        //set up an initial set of timers to start the shimmering effect
  W3 A' b, D4 g9 n6 N% ~6 I  i2 ?6 i" l0 O. ]
        for(id=0; id<numLinks; id++)
: G9 R# j( k* o
; D/ V7 z( N; v% G" J2 D' o. ^7 K        {1 w$ [! z$ J) o9 L6 d
) l0 o! j% `( c" J
                t=setTimeout('startFade(' + id + ')', id*100);' M5 r( B6 N1 ?' W8 ]3 N
8 x7 K6 n+ K! W
        }+ I! |3 \* w6 i5 N
0 b  X8 g( S' F! {' k3 ~5 Y! G
}% N! d& e- ?% Y! t0 b9 p- ~
* j, N% J0 C/ {+ g7 c* I0 j+ P6 d
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
5 Z+ I; l: R+ Q- z/ M# B2 i4 b* [
  p* M1 s* C- I' k6 GinitLinks('#FF0000', 6, '#FFCC77');
, P+ a1 t2 E( t9 H* u8 m+ T2 l# S4 Z; H# C. t" W8 P$ O
//-->" e) {, f( S' P: I# f  I: }- Z/ {2 J

9 t% j0 M& B, M- V, s</script>3 z3 F1 k, s2 k: S* w9 H1 T
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
/ x8 p/ a7 F( ?% J</a>' Q) d+ @- }3 O) M; L8 n
<br>
; y, L! @) o% Z& U<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
. F4 w. _! u* D) m<br>
/ d2 \% C. h% H: i. U<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
0 M# [: N( n2 c( E2 g<br>        * F& P' n! a' |" P5 Q! O1 Q
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
& n9 V/ W8 P  t3 T" F# g# a<br>7 G7 [4 H6 [+ e
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>* t9 |9 Q6 ~) L! J( i
<br>
! }4 e4 p" o  ?4 L<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>5 J6 v8 e: B2 s* a3 c9 }  v
<script language="javascript" type="text/javascript">
! h  S! l' G$ y* @<!--
4 q( d! m: B, K* p4 J9 GsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering! T' y6 r8 {  l: ]
//-->
+ u! [  q. b: ?- L7 ?4 D</script>



欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2