Board logo

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

<script language="javascript" type="text/javascript">
3 x9 x: G: K6 Z0 n<!--
' ^/ R' i' _7 q/ g* f// convert a single digit (0 - 16) into hex
, E) Z- K+ l5 Ifunction enHex(aDigit)4 |; D6 f0 g& R3 b
{
  R# O6 c8 z4 |    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
- |% S8 Z9 B! T; T# n}
6 R5 ^: t% C* t/ e! \// convert a hex digit into decimal, X# s5 b* v; ~: E3 l
function deHex(aDigit)( w% W5 j  v0 n4 D9 b
{
  y' n; k* o- g/ \( M* g$ w% B    return("0123456789ABCDEF".indexOf(aDigit))! s9 s5 ]& {9 t; U
}( ?8 U3 @: u8 x( X  ^
4 A/ W, I7 u9 k& O
// Convert a 24bit number to hex
. |. w1 G3 R( t: \, wfunction toHex(n)3 m9 }$ j. ?, c' d! [+ T' F
{- J. G+ u3 Z6 M" J* _
    return (enHex((0xf00000 & n) >> 20) +, Y3 u) ^( b  B9 }
            enHex((0x0f0000 & n) >> 16) +
) w% s3 G" [$ B& a( U            enHex((0x00f000 & n) >> 12) +
" `- n6 _6 ]+ @/ S5 z$ U& l, Z3 D            enHex((0x000f00 & n) >>  8) +
. b3 ~- g! j& h+ m3 A            enHex((0x0000f0 & n) >>  4) +. a2 I$ r* P" c( {* T! }
            enHex((0x00000f & n) >>  0))
  q& a- t$ Z3 N}
5 K0 i, P/ t; o1 J' W: @// Convert a six character hex to decimal
4 N9 q) z. x9 l% w, o. N, gfunction toDecimal(hexNum)
/ n1 @! q; x  d8 a{
* s* c% m5 l* V           var tmp = ""+hexNum.toUpperCase(). \1 ^) p& x  a) C. f2 M: N
    while (tmp.length < 6) tmp = "0"+tmp
2 M  Z. h3 W- o           return ((deHex(tmp.substring(0,1)) << 20) +
! P1 V  p8 A  N& D' a4 Z                   (deHex(tmp.substring(1,2)) << 16) +
' U% @9 m: o, |- v            (deHex(tmp.substring(2,3)) << 12) +% y6 _' o/ p2 N7 S
            (deHex(tmp.substring(3,4)) << 8) ++ X# P, q: z* m* ~% P& X6 U
            (deHex(tmp.substring(4,5)) << 4) +
# Z9 X6 ~4 V6 r, r" |2 }                   (deHex(tmp.substring(5,6))))$ @  ?( r0 H: z% _
}- f4 g$ J9 L  n. Q. f7 H
///////////////////Shimmering Links/////////////////////' ?3 n% s5 x7 B( [" b0 A$ e* P( E$ X
//global variables
4 J0 {6 B/ ~3 }var hoverColour
+ c) R, m& Q, p$ svar numLinks;1 M  {3 q: U! j: ~
var rate;
2 S( ~& b2 u2 J! tvar numFadeLevels;
$ u/ k0 z  O( p2 r4 n- S+ }4 w1 ivar bgR;$ D# [8 n' ^8 ]/ {# ^
var bgG;$ K3 y, M8 H, c$ G3 \
var bgB;
$ N; w+ f$ u) q0 D5 K  _var currR;
: x, b: o* H$ E7 p: u" X" \4 pvar currG;9 n9 r' P4 e& R7 j) t0 i
var currB;
6 R/ w  o- ~0 W$ W8 z3 P+ {& Mvar count;
- a2 l0 w3 R! Q# \var fadeOut;
0 A  C9 }# e- v; E7 xvar continuous;  Z' c- O, @" f
var newColour;. R+ Z( k" @" l( G
var tID;, T- K& D+ ]/ z4 U: s5 L
var redInterval;
$ b9 k2 A1 q- R9 |4 r! r5 [: \var greenInterval;$ N' a( }/ @3 \  `* d& G' F! Y
var blueInterval;
& i, J2 v- t3 U4 \+ E1 }$ B% Qfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 Q' h& N3 C, I: h{
1 }5 H7 {/ a' r        hoverColour = mouseOverColour;9 o7 _! L8 N$ B9 b- {' d
        numLinks = numberOfLinks;; Y% z; _) X' g# _) ?2 z1 C
        rate = 1;8 ?( O9 ~/ l5 C
        numFadeLevels = 30;
9 H+ p! ~, l- _$ b; R6 J# ]- ^        function initArray(theArray, length, val)
2 ^  n; I' L; x1 o* [        {9 \+ O! a3 @) t. m7 P" Y" s& c
                for(i=0;i<length;i++)
* K! U& `9 T/ G% v8 b5 M                {; x0 ]8 Q3 F( S+ K
                        theArray = val;
1 r$ p! H" n+ S6 F& H. o                }4 E$ t& Z& L4 D6 w1 k2 ^& `  b
        }3 F) P" ^' v' C1 @+ U( F+ g; t
        bgR = '0000' + fadeOutColour.substring(1,3)
1 X) u) C+ J- ]4 a        bgG = '0000' + fadeOutColour.substring(3,5)
! k' x& x+ _( L* Y2 [, o        bgB = '0000' + fadeOutColour.substring(5,7)
- t- I, F# H  }        currR = new Array(numLinks);/ J' p1 B" V8 A" z
        currG = new Array(numLinks);' Q& z2 i# B2 ^
        currB = new Array(numLinks);
. ^# g$ u' H1 }- S: ^        count = new Array(numLinks);
* W) w5 y/ L" M; i7 u1 S- |        fadeOut = new Array(numLinks);/ U3 p% r' t6 D) D% @
        continuous = new Array(numLinks);
- N  M! i9 R* W$ h        newColour = new Array(numLinks);
8 H  {% q! f8 A. p        tID = new Array(numLinks);3 ?8 r! I" j( J- x* ?2 x# I( F6 U
        redInterval = toDecimal(bgR) / numFadeLevels;' _2 f' L5 o' r+ D5 H  m) W4 R  ]
        greenInterval = toDecimal(bgG) / numFadeLevels;
$ Y: }" i: a' F/ Z        blueInterval = toDecimal(bgB) / numFadeLevels;
- _+ n% ?, s" w, f! ?        initArray(currR,numLinks,0);
+ G' ^  i* x, b4 Q4 a+ e9 x! B        initArray(currG,numLinks,0);- e* O% E1 N8 N9 f. `
        initArray(currB,numLinks,0);
3 v$ H9 m6 Z6 i" ]9 C" R, d        initArray(count,numLinks,0);% n, c& i5 C  t% ]- r; Y9 Q: c
        initArray(fadeOut,numLinks,true);1 r" S4 p6 h1 J7 A8 d) z, h- j
        initArray(continuous,numLinks,true);
7 |: C7 M+ h3 h1 N6 U: H}        + T, M8 ^6 b! I4 T" c  e
function startFade(id)1 V* a) c3 B- c3 U; K# J/ B
{
+ S5 Z% t% ?2 l9 i        if(fadeOut[id] == true)6 A7 e9 a( {9 ?( }, z+ i  d
        { /*move colour towards background colour (increment)*/
- _, p1 E- R  \* r2 {. @7 P$ M  E) n                currR[id] += redInterval;  H' C5 A( ~/ A4 Z) w) F
                currG[id] += greenInterval;* L1 T! F, R1 o! N
                currB[id] += blueInterval;
0 y7 S9 h) f/ y+ o9 V8 [                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
$ k5 `* S9 |  g' Z% a  J' }) c                if(++count[id] == numFadeLevels)5 e6 J- ^/ v% L% y/ {1 |
                {; i! j+ [  [& W& g* V& l# L5 C
                        fadeOut[id] = false;& @. S$ Y* }4 ^
                }
9 n5 q' v0 M; v. F0 ~        }( ^/ X6 x' M% c- k  T+ k
        else9 W# e) O" G7 q$ A4 Y: H
        {
1 G- M1 _% m8 X7 z& g3 @) `                currR[id] -= redInterval;) {. K8 j3 o' y& r6 j; X
& |! y* M, V! w) e6 v
                currG[id] -= greenInterval;0 p+ V9 W; b# {

! ?  V* E- `- w- g* H7 a                currB[id] -= blueInterval;
* {; U% \  G: s. y2 a; F: X8 q; Q0 A- x, j
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% J+ c4 W/ u* {8 R8 ^! j, Y, w5 C/ \( c4 i2 W
                if(--count[id] == 0)
5 r, I2 r- g& l( M5 K) V- i
, q  z3 A& z, f$ h" ?                {/ G! p1 o6 m8 s; {, b- ?2 _
, N7 ?* e0 z( f: q3 R" A
                        fadeOut[id] = true;
; |$ o# }) \6 z+ w4 ~  C
# k% z" F5 a7 m# ~: m; K3 p                }# Y: ^$ i6 q: w4 j* s! J

" S4 x2 u2 v2 i" g4 S3 _6 `! a        }
& _3 x( |9 {, Y  ^) L6 ]* v$ `) g' u5 t
        if(continuous[id] == true)7 B3 e) M* g- q
: g4 g/ l+ ]$ w6 s: [
        {; b1 g- y+ @- y3 w0 P
7 }# n, E2 y& J9 ^! y3 B% H" R2 b' K
                document.getElementById(id).style.color = newColour[id];               
2 x$ [6 m: \  K1 o
8 H) N' o( Y! V; a- _        }
* m% }9 a7 [" L/ I9 B7 X: e
  l& T' `5 c9 q- s- e- o; h        else0 A6 ?8 _6 v  W# R- t" h

9 M/ s) j  P7 Q3 Q/ e        {
: ^! ?& h) r2 z, G# S- E% Q  G0 y" H/ r8 x3 T4 r2 l  R
                document.getElementById(id).style.color = hoverColour;
. M! \0 j. P4 G8 C0 w: _
  s* L/ ]( o% p5 K% b        }' M+ N& R: F7 V+ ]% G

; x' y% T; {9 D$ O8 ~        clearTimeout(tID[id]);, a5 k0 s' q' i( M6 A3 H! p

4 X, L8 I7 u+ A8 b- y  W        tID[id]=setTimeout('startFade(' + id + ')', rate);
3 K& d9 C, Y- a4 a2 I
9 s5 x# |3 C8 J5 n( I' Y/ T$ ?}
, I* {/ Y. K. c. c, ?1 t6 w$ x
, P8 C, |- Y! X2 ^8 u$ T" Ifunction continueFade(id)
' c: R% a" d. N6 I% P4 X
5 m7 u) }1 o3 d- F+ x3 F{
/ U: m7 x+ u$ h
9 `8 v- h8 T6 |3 E$ w# T7 |        continuous[id] = true;
; C! V) d5 F0 E+ D
. z' N7 G' a, ?, {% O}4 M0 d3 K2 J/ c7 {$ u
; F& E# c' c! n: |
function stopFade(id)
8 ?3 ^1 H; K! _7 H- I4 s' ^' i
+ Q; T: D7 n8 }% L- w" n{
  {* ~; j  b$ j+ T5 T" E- \
* r9 H$ P+ `* ]" S        continuous[id] = false;
) V. F+ B6 k- W, y& L$ v- q/ J
! c) X8 A4 W+ w! y* n}
- c5 Z. [1 g& W: G$ m2 c# e; M, C" i( R% }
function StartTimers()
2 V4 N0 h: d. W8 r* I) x9 L
* C0 d0 N: x( G7 i/ i) O{        //set up an initial set of timers to start the shimmering effect
; P* b  p5 Q$ b
2 B$ E- K! [' l7 c        for(id=0; id<numLinks; id++)
# U( _  N8 K% X6 ?' H, R0 P* }0 H3 ^
        {7 P* F# b& I( Q( G
* b+ N  i& m5 _2 D) `
                t=setTimeout('startFade(' + id + ')', id*100);
9 G' A! f( i9 Q4 W
% ?8 {" F; [8 _7 Y# Y" b        }! ^2 `% {0 ^: ]. P# j8 p

5 J: y, m5 {+ ?4 s5 T}
/ L- ~+ E+ a1 R1 v4 H9 R& j9 c  z9 p& b" `8 ?$ S+ t
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
: n5 z! e$ }$ ^, Z" t1 @4 ]$ Q. Q! N# ]+ i2 R  v: E  q
initLinks('#FF0000', 6, '#FFCC77');  C! e: z$ Z5 d- k
& J3 |" E. M. n" U
//-->
7 ^3 X1 E  L- a) j' B9 _( I( r' H: Z4 A) Q
</script>) C! ]: |8 \0 Z! f" @- L* Q
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元, k: }$ Y/ K: t. p% ^: D" E2 N
</a>" R5 W) C: q( v1 I/ v, \9 t' j
<br>
4 X! L* k. G* Z<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>  D1 B8 t. y& [' m0 S% }( e4 t0 |
<br>
; M9 u7 q  L+ {8 R7 E<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
# j4 B6 d+ L1 |* j/ W" R<br>        5 `( s$ w; P/ H7 W5 R6 |; ]" F
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
6 ~+ V& p: {) [) n, {<br>% C4 w* [4 a8 z$ m1 Q, \. m
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
; {* V# y+ D: c! x; f1 Q<br>; l+ c/ v6 b6 P; t2 ]+ i, {
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>  }& u( x8 k" r- o5 K* _
<script language="javascript" type="text/javascript">
# ~% B4 s5 E  A8 _3 h- X<!--
  N/ \  t0 |8 ]4 z- nsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering) n0 A0 \2 x3 |4 i( {7 F( j
//-->
7 B# N. [! Z5 \" ?& `. @</script>



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