Board logo

标题: 网页之文字的循环闪动特效 [打印本页]

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

<script language="javascript" type="text/javascript">
4 V3 [+ \7 L, S& a0 ]<!--' d; }: y) m) Z) ]5 u4 J+ J
// convert a single digit (0 - 16) into hex8 P: }' ], v5 U
function enHex(aDigit)
7 d7 ~3 R. |. @7 E: C; s{  t* M) Z- n9 p
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))) R% e8 Q2 R" e' m2 a
}
6 U6 z+ P* H6 z- p8 |# ?; w2 H// convert a hex digit into decimal* V1 p; a4 c8 U3 H( N6 ^
function deHex(aDigit)1 J3 P8 q! M& q6 F! t2 f
{
  j7 s/ |4 X4 Z    return("0123456789ABCDEF".indexOf(aDigit))
0 F8 E3 Y& n* d9 b& ?, `}
- f9 I" h: D- q3 H/ p4 c
" d4 v, `- `- h// Convert a 24bit number to hex
! c& J3 L1 O3 C) ]function toHex(n)* w+ b; f9 r% w6 }+ ^; j
{
- w  g( y: n& U3 z* y    return (enHex((0xf00000 & n) >> 20) +% W7 B1 J- ~* h  j9 c& @2 _/ u& E
            enHex((0x0f0000 & n) >> 16) +
: A* k+ f/ E: q* n/ m; S. U            enHex((0x00f000 & n) >> 12) +, m3 M# H( L9 z2 u% U
            enHex((0x000f00 & n) >>  8) +
; o) M  I3 G* M1 g& I. ?/ u7 j: c5 r            enHex((0x0000f0 & n) >>  4) +. Z# C$ Y3 U, n; \' `
            enHex((0x00000f & n) >>  0))
; x- I* j1 z3 J* ?! k9 C}
# r' p" @8 l& C% J// Convert a six character hex to decimal
7 O0 J+ `1 s- y( M( v4 ?function toDecimal(hexNum): d1 U; T  i4 Y9 T
{
1 m( s7 E/ _  m' M0 \           var tmp = ""+hexNum.toUpperCase()
( a2 U3 s/ b$ ]2 ^7 f* J, U# D    while (tmp.length < 6) tmp = "0"+tmp
% z8 A, S6 v9 j# t, p           return ((deHex(tmp.substring(0,1)) << 20) +, s3 E- S2 L! Y6 U% h( b
                   (deHex(tmp.substring(1,2)) << 16) + 8 R1 ]' W# G' z& D/ T* s, u
            (deHex(tmp.substring(2,3)) << 12) +
% i) A' N& B! l8 A6 z6 L            (deHex(tmp.substring(3,4)) << 8) +! c3 @4 s$ y; ?: L: T0 Y
            (deHex(tmp.substring(4,5)) << 4) +
, N9 A4 ^/ p$ {4 W; F( a0 V6 P5 K                   (deHex(tmp.substring(5,6))))
3 Q7 d, Q/ W" e/ y$ P1 D4 Y: d& ]}
; S0 a, p& _' F( `. t5 Q3 r///////////////////Shimmering Links/////////////////////; ^( h7 n  t6 E+ v6 T) e+ e
//global variables" v: y! V! A; w/ J, J# s* M
var hoverColour
3 ^) U: _' p+ j+ g/ ?var numLinks;+ r3 t1 @  ?: \- B
var rate;- w3 b8 W3 v  A- M) J; d8 u7 c3 [
var numFadeLevels;
7 B, N1 L5 G& `+ d2 ~$ ^. pvar bgR;
& l- \# ?4 b1 {0 ~4 v* ^8 d3 fvar bgG;
% q; y3 I5 N" b. W" _( @8 Cvar bgB;2 T, @. ^+ `! u8 O
var currR;( _) ]# ]# @5 i* Z9 Q
var currG;
1 h$ U3 v/ T- H; v# ?5 Y6 ^) yvar currB;0 n3 l' f3 p6 O0 ]- ?9 F
var count;
2 _# W. {  l" {  j2 l/ Rvar fadeOut;
9 X1 D1 N6 O, s; X2 Y7 l+ hvar continuous;
3 y2 e2 g9 d# q6 Ivar newColour;- t4 ?$ R' O: y) r
var tID;6 }8 a3 s8 N6 H& O1 }5 a! s
var redInterval;7 n/ B, I! u- W' v7 F# [5 w
var greenInterval;
) b% T+ M% U( @! r( \$ fvar blueInterval;
% ?- o! o& j% s: mfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, |8 e' h3 V8 j# d2 o5 ?( p{
: x1 }! n- M! D& U6 c        hoverColour = mouseOverColour;3 Z, K% _5 V8 U, z  U! Y% N
        numLinks = numberOfLinks;
8 i  Z# p  M! N3 W        rate = 1;
% C+ e; a. m* K" w$ C7 Z3 b9 M        numFadeLevels = 30;; [& m. a* M. e& j
        function initArray(theArray, length, val)
+ H% y9 f0 k9 F7 {; l! e7 l% Z& x8 Y        {7 V' x7 ^+ I5 D) ?8 y
                for(i=0;i<length;i++)
/ m; c: ]) Q! S8 Q& m                {
/ ^; u6 r6 @0 Q" A& v' t9 q: H                        theArray = val;
. o/ T$ K' B. e; i/ K                }- {: l. c9 Q9 c) I/ d
        }
- ^/ f$ ~" a  F$ H( W        bgR = '0000' + fadeOutColour.substring(1,3)5 T( {3 v- Z$ j1 ^
        bgG = '0000' + fadeOutColour.substring(3,5)) u9 B, }! l' c* g
        bgB = '0000' + fadeOutColour.substring(5,7)5 i* C5 ~' m" J, T7 H, \! e+ T! j
        currR = new Array(numLinks);
- ?& E/ G8 C: e7 I+ U" i        currG = new Array(numLinks);
9 \0 e0 l: ]4 W! K5 G) o& w. b! K        currB = new Array(numLinks);
; _3 O) [3 V: q7 Q        count = new Array(numLinks);
9 f9 m- _1 Q; Y4 R8 f        fadeOut = new Array(numLinks);
+ `5 w( {/ O" n  t/ c        continuous = new Array(numLinks);
9 X1 J0 o5 @. K. Q        newColour = new Array(numLinks);
  ]+ D% T# M4 [; `" X        tID = new Array(numLinks);
! }+ V$ l& f. e        redInterval = toDecimal(bgR) / numFadeLevels;
/ x5 Y! M& Y2 q% ]9 O* c5 H        greenInterval = toDecimal(bgG) / numFadeLevels;
& E. K2 X5 h0 w, w/ a        blueInterval = toDecimal(bgB) / numFadeLevels;$ R  h' M/ Q/ k$ m
        initArray(currR,numLinks,0);
2 k/ o0 d* }& K  B* {3 s        initArray(currG,numLinks,0);5 c2 W1 U. d; E  ?) q( p6 m" I
        initArray(currB,numLinks,0);
$ i. N+ }$ J& U; U5 q) R% [0 i0 Y        initArray(count,numLinks,0);0 _" ~3 D9 T, E9 `, D% D6 T3 M: N8 z' q
        initArray(fadeOut,numLinks,true);
* q4 s4 Z  E  q# t0 ?0 w! n: n: F        initArray(continuous,numLinks,true);0 U4 F/ ^1 w$ L" @/ J. V: M
}       
2 D+ C; S5 W1 I0 `9 s5 `$ \function startFade(id)
0 B' T0 Z' i1 \* C2 S; j{5 w% h& z+ x8 K. F- r( c8 N2 Y' c
        if(fadeOut[id] == true)
* A0 ]/ Y" p) q- G        { /*move colour towards background colour (increment)*/
& R/ U5 D/ }& |1 |+ s                currR[id] += redInterval;
  L/ D; p) T( L5 ^, z                currG[id] += greenInterval;% v; [- k" ^: p6 V6 ^- s
                currB[id] += blueInterval;
5 S2 `% M  y+ F8 Z" W# R                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);$ E5 A  y* ]2 _- H* n1 ?
                if(++count[id] == numFadeLevels)( H6 X( G6 {% e# T2 B
                {3 b2 y& M1 O5 o% S
                        fadeOut[id] = false;( [  s5 h/ N& I* `
                }* u5 Y3 _1 X6 z& H, |
        }+ B7 L  F4 N" A
        else
# f. S) u% |' ~, A3 S        {
- T& x& f" R& |; s- Z0 M$ z                currR[id] -= redInterval;9 F' O4 i, Q6 E) V  A" }* u  M+ m% F6 g

, i/ U# Z+ W. p5 A                currG[id] -= greenInterval;  Z$ v  V; A4 P% w$ K6 W. c6 z3 D
# m1 b9 R7 Y5 Z5 s9 A8 \2 O
                currB[id] -= blueInterval;
0 X8 q1 G7 v& D6 v- j; f/ W
  X7 @9 S' z0 d8 O2 U4 o                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
. \* M' f/ e0 p, B1 m& H6 V
3 c$ m9 I: e6 M9 S2 e: R                if(--count[id] == 0)
( a- }0 N) s+ I" I3 a0 _. q$ n% S% I3 c8 i
                {
3 t$ j0 @8 X$ \7 y. M) G' P$ J( o, x1 J9 l- q# b0 o
                        fadeOut[id] = true;& Q5 A: G1 ~. v& h

+ Y6 \' M- Z. R9 q8 q. T' e8 Q                }# S' L/ g" X: r3 m

8 `$ x6 {  W: @% b        }
7 H0 X7 b- f) m5 w/ d! A  O7 P/ ^! j. R6 d8 D! i- m5 e
        if(continuous[id] == true)
  w) D( `1 Q1 y& w" S" R0 L  s1 y* O1 M# u! |2 T* T
        {8 l/ i1 J0 d: o+ d

' g1 T8 k& U) b6 R% x* [) E' M8 t                document.getElementById(id).style.color = newColour[id];               
% M& @5 S- N! i* E! a" x: [2 |) B* D7 K) V. J' W, i0 R
        }8 |* t& S3 \( W) f% x: p

8 B5 E% ^+ z3 C0 M& J, X' j        else
. D& a- \, \$ o0 K6 h: V
5 _3 b) Q# t; o* [5 o4 E! {, n        {% j! k, ]' e8 Z: P9 C
* a4 D4 x8 I# C0 Q6 e4 p  F  J
                document.getElementById(id).style.color = hoverColour;
$ d$ d2 W) M9 G( Z
3 q# S* i! t. ^# e# A        }# E: V4 r" {8 N! ^5 e; v# F

+ K' A3 A% D# o4 w' v* q        clearTimeout(tID[id]);
" _' _9 O  A, z/ s
+ Z5 O" i3 p; \1 L! T( L4 O        tID[id]=setTimeout('startFade(' + id + ')', rate);
, }* f# f& Z  L& L- T
/ H# [! o+ Q& o6 _" T}
4 d' k( X( \4 j, f5 i/ _: D, y1 G
) ~* C* ~* a" E6 ffunction continueFade(id)9 X1 i( ]9 b9 X

1 C/ a! o- f; M! M/ A9 h" a1 E) }{. P* w. }4 _0 {+ L
/ Z% l) F- h8 E, b$ Q. `" a
        continuous[id] = true;
0 |5 l+ K5 {6 |2 Z' R! C3 j* ]. v: t% F9 U! F
}0 j( b! y& d0 O" w# `
2 h8 h7 |4 z3 E  Z; I: Z, N
function stopFade(id)
2 Z3 r  j, ~5 G
  j* G; X4 n- V{9 L+ N: t1 L3 q+ s2 v, b* {! ?
2 J/ }7 _9 u1 R; m( D; H
        continuous[id] = false;& \- y0 d- r( g% v2 O
" [1 |8 d( z  t% E
}- T- L8 x6 j7 J  ~# {1 R- P

) r& F- j" f; K  O0 B4 Mfunction StartTimers()4 O- Q  W. Q" a- S9 T2 s
- G) `) C% v5 q# r
{        //set up an initial set of timers to start the shimmering effect, [! C8 r( t" r4 \+ S8 v% Z; R
  ~0 @3 Z( r9 r! t* t
        for(id=0; id<numLinks; id++)" ~1 g: w: D; L
5 z( A, F. C$ q7 m. i; @
        {
# z: C& a* M4 X  A/ u. P& @# F
& n- G9 E7 \0 `' F                t=setTimeout('startFade(' + id + ')', id*100);3 a! U# V- X* _8 ~/ p

  A5 X% |* \# o5 u        }0 ^0 [$ N8 X& v4 A+ d

) k; s1 M$ s  h& M. O5 {}
' c; z( P3 V7 O/ x6 x5 u/ Y
$ u, U) a. P3 ?6 f+ H) S! v//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, N( X) u8 q: R! m  K3 z, n+ W" M+ J, g; j
initLinks('#FF0000', 6, '#FFCC77');
! Z9 \' L  d/ ?$ q' ^- T
& W. U6 l2 J0 R//-->, }7 e- X- O3 \6 t& [

& e! ~1 k& t+ |: }* R</script>- S+ q+ Z+ [* y7 X& u
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元* l6 C: B5 s& n( s- h
</a>) X/ q' W$ \) |# U
<br>% ?" n. q  D' U
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
2 @7 F/ o. I6 c7 D; y<br>/ E+ G4 \2 P! `+ f" s
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>6 z% d1 F8 n: y4 @- ]
<br>       
. }$ f, E* h; }# [. c4 D<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
! b6 T+ e2 L/ R" z! N7 z  x<br>! A6 r9 W1 W( T& V6 k' t
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
# R3 i/ g2 I# H0 x<br>: |# [) a( E6 R0 h% L; N
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>' G5 a4 Y& @0 `+ M* I9 P( o
<script language="javascript" type="text/javascript">6 M3 o! q' a, @$ ?+ [9 ]2 s
<!--
: c5 C& x4 V/ fsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
5 h# r* K% W% @, Q; F/ c//-->
# `# x/ @  m" p+ M# p</script>




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