Board logo

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

<script language="javascript" type="text/javascript">
4 K- L9 a! s: Q<!--
: b9 J8 U& v3 Y2 O// convert a single digit (0 - 16) into hex: Y0 X! u7 I2 H9 f9 G3 `
function enHex(aDigit)! _2 q! T$ N- n  l
{& N: {1 L% S' l' j$ O' M" T9 I
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ j9 ~. z. w+ U: M7 V' B0 z
}
( z8 N0 z) N0 ^# g8 |// convert a hex digit into decimal
; p& p, ^, T! t+ U$ dfunction deHex(aDigit)/ P* {4 q1 Q/ \  ^7 {
{) A; [5 y0 E  v4 W; E# w
    return("0123456789ABCDEF".indexOf(aDigit)), X6 Z  A7 B; w" |
}1 R. D3 Q/ B0 @+ N- z2 R8 C8 k

! G; n% Q4 i% T* n: O" l$ ~// Convert a 24bit number to hex
/ g* J& k# e/ P8 J2 E1 J* h! Z4 Yfunction toHex(n)1 U1 `9 ~( G0 O( P! G/ L: u5 c3 c
{, P* w6 U; C$ w
    return (enHex((0xf00000 & n) >> 20) +8 F+ s* m7 M5 ~; [$ T
            enHex((0x0f0000 & n) >> 16) +3 i8 C1 {" r2 i& F; I* o0 ^) I
            enHex((0x00f000 & n) >> 12) +& z; M8 x: G' w9 Y
            enHex((0x000f00 & n) >>  8) +
# g8 y6 G; x# d  M            enHex((0x0000f0 & n) >>  4) ++ J! D* g8 U6 @/ h& `
            enHex((0x00000f & n) >>  0))$ `' L, a( S1 H
}9 O& O) {$ ]5 [% z
// Convert a six character hex to decimal
6 U4 G" h0 }3 p5 k6 H! sfunction toDecimal(hexNum)
5 m+ b( J' K# @: l{
9 z1 C. |  D  u% x: Y- z           var tmp = ""+hexNum.toUpperCase()$ b; h) i- [. H% N$ Q
    while (tmp.length < 6) tmp = "0"+tmp
5 x+ k# M$ n& C           return ((deHex(tmp.substring(0,1)) << 20) +
, g3 n% V7 W* A, y- H0 V$ O" f3 w                   (deHex(tmp.substring(1,2)) << 16) + % ?8 ~! {4 M9 f0 v2 @6 y5 \7 x
            (deHex(tmp.substring(2,3)) << 12) +/ `4 @" P9 i& l: \
            (deHex(tmp.substring(3,4)) << 8) +
: a" |" e  m, o0 q            (deHex(tmp.substring(4,5)) << 4) +, d' W& ]+ ~5 w* w/ V
                   (deHex(tmp.substring(5,6))))# y* |$ X/ U. a/ Z% J$ B# n
}
4 E- o( s* Y8 V) o( Z$ c///////////////////Shimmering Links/////////////////////+ n; y# j7 }8 m6 A( G
//global variables
  ^, S' w' k( O* |& a. W4 nvar hoverColour0 |- {; x. ?- `9 X
var numLinks;( o3 a+ X: i4 f1 A* a, @! U, ^
var rate;
0 l9 q* |+ P) l1 c' ~: ]var numFadeLevels;
# ~) I# ?& X0 p# nvar bgR;
+ x" w5 |9 x+ V0 Bvar bgG;
( A7 N- N9 U7 V6 X# Hvar bgB;# `5 J4 A: u5 m! U$ p
var currR;4 G1 S1 E1 ]# w  n
var currG;: Z: k* R/ i' M6 G  I2 \
var currB;3 q3 i& z- i5 g( c3 v  O3 h9 G
var count;
4 b6 y: o, U- [: c& h9 p0 Z/ G" Jvar fadeOut;  [0 I. A3 j, t" f1 N2 K, e
var continuous;: z/ K/ C8 h+ Z6 y" d' J6 u
var newColour;3 r" T5 `2 y* j: j( B
var tID;
% x1 ?) T6 }8 o0 ]var redInterval;
- O  k) C5 M' f& b0 evar greenInterval;. }. X6 T. I4 _+ Z7 y& R
var blueInterval;& X9 e) c) z; }# n3 G9 \. |
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
" E! J; P( S4 P8 M{
5 f2 o& H9 j) `; \6 A$ Q1 Q        hoverColour = mouseOverColour;
' Q2 j9 v; v+ J6 u; u        numLinks = numberOfLinks;. f6 w4 t. j2 `5 B# @
        rate = 1;1 h4 S6 ~- h6 L: F$ W0 N: D: p! ?
        numFadeLevels = 30;0 B4 o0 o! Z8 e8 E/ b4 E7 L
        function initArray(theArray, length, val)
' U" j  Q+ S: A$ m; j        {8 o; V1 i4 ~! {
                for(i=0;i<length;i++): A5 s* Y, H# b) D
                {1 K! r% h8 [8 W: x* s
                        theArray = val;
+ L8 |2 r# ~' ~( }6 u, G                }
* S% D$ o9 a0 e4 I8 e        }
# ?& n) J, v5 t8 S& [5 w& V        bgR = '0000' + fadeOutColour.substring(1,3)
' U# g, \0 Z& m% t        bgG = '0000' + fadeOutColour.substring(3,5)( V- z+ y! {0 e8 N
        bgB = '0000' + fadeOutColour.substring(5,7)  Q; N  ?1 S: i- l7 G
        currR = new Array(numLinks);
: J3 n' K  t) ~0 h9 n& ?0 ?        currG = new Array(numLinks);$ j2 F* D1 n" |' I5 ]1 b
        currB = new Array(numLinks);
8 V+ ~  I5 `9 g8 K- t) |/ E1 [. r        count = new Array(numLinks);
; T* J. Z4 P/ u8 v4 h  v6 R        fadeOut = new Array(numLinks);" T( J1 ?, e  d8 X$ C
        continuous = new Array(numLinks);
6 e- V4 o/ C- J) i        newColour = new Array(numLinks);
+ {* A2 v/ |5 t, m        tID = new Array(numLinks);5 A# B5 P1 B; F2 o' w. ~* l% Q
        redInterval = toDecimal(bgR) / numFadeLevels;& J! w) l: E* K' B$ K
        greenInterval = toDecimal(bgG) / numFadeLevels;
: S2 p+ j; x" u4 K        blueInterval = toDecimal(bgB) / numFadeLevels;
: `5 q, }( r* y+ _$ S) E9 q        initArray(currR,numLinks,0);
' K0 r; V8 f0 U* B1 S' H  @        initArray(currG,numLinks,0);
/ N/ A: [, s- _0 Q% G8 F1 m: w' U# G* @        initArray(currB,numLinks,0);% T2 J: r$ `! T
        initArray(count,numLinks,0);
9 |4 y) x1 T* }        initArray(fadeOut,numLinks,true);
! c: e) T( Z0 c/ j& Z        initArray(continuous,numLinks,true);
, S7 Z. X2 K1 @3 K* E/ J}       
" X/ U% j7 D1 H; f% hfunction startFade(id)$ B; H9 J+ r* N& W) {4 j
{
' M3 d9 b. G. |- s" o        if(fadeOut[id] == true)6 M5 J& V4 |3 p
        { /*move colour towards background colour (increment)*/
/ W" j6 g" u! p1 K5 K                currR[id] += redInterval;; D" e8 G  x6 r/ j
                currG[id] += greenInterval;/ L% A5 A  \% A
                currB[id] += blueInterval;' @, \5 A- ]9 v, C
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);  ~8 O. A. p; j6 G8 H; L8 U: N/ Q" V  A
                if(++count[id] == numFadeLevels)% N6 \1 O# `2 M7 S# a5 |9 b/ G: P* |
                {% F" a7 ~. B& o. K5 _: p
                        fadeOut[id] = false;& q' M. T/ S8 t- l: H$ J  j
                }7 h! k7 E. W" F7 I/ H5 Z2 q% R) x
        }
+ V+ D+ _7 |& F+ C; O8 I9 i) p        else' A+ j0 E  `/ d6 w
        {) c* L1 F& U: M+ D. \% G
                currR[id] -= redInterval;: C9 v* S" y: p+ q( @  T+ @% Z) ^

6 R7 f9 T4 ^0 F, _7 t                currG[id] -= greenInterval;1 c! Z6 A: Z: F/ g
' C2 O% H1 h: U; K9 q
                currB[id] -= blueInterval;
1 E3 @! @3 i" j
+ C7 f4 _0 u" a+ Q; R( }8 K                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);! p6 y( b# H. I) D% m
' g1 ]8 d9 Q7 F3 `, B
                if(--count[id] == 0)5 P2 n( i7 b6 [9 Y& k
: E1 Z6 g) p4 l! L4 o1 T
                {
: K- L0 ?, E  g$ R& T" X. |+ [5 [. r( C2 a" O( f/ g% p
                        fadeOut[id] = true;
! [7 B9 J5 h1 s2 u  D  h7 V+ C2 L3 y
                }
4 i, A. F+ K2 q$ z( x9 i6 m! H
4 b; n+ Y1 U8 V; `        }; T! w) T, K: K  \) q0 N
( R! l5 w3 C& [$ G' A/ E
        if(continuous[id] == true)2 x( x, w8 u7 s! T. E$ F
# a* u7 w- K' p4 j/ v# q4 s
        {; e2 n4 ?6 I, g

3 |$ h0 Z; Q- F$ v# W4 s: B+ |6 C                document.getElementById(id).style.color = newColour[id];               
4 S& f% i# _) d% y
0 b# N$ f8 Y; b        }7 u( v. Y# }+ k% m

' S5 D" b* Y$ b# k        else
$ l: H7 G1 O7 M- T& k: d6 W* O, N6 a! n+ v
        {# Y( H" k7 t2 }. X, J: c
8 t9 p/ W3 J! K) t
                document.getElementById(id).style.color = hoverColour;
4 W2 f: C6 N4 Z2 n
7 H- i5 J6 u* M0 Q* d1 I        }
0 E8 ?* j6 M6 R0 q' b4 ?+ M# S8 i- Y# ]7 |! k% M7 Q
        clearTimeout(tID[id]);
' _& ]$ o  r6 i1 Y6 a" D0 r" }: f' E) g2 _
        tID[id]=setTimeout('startFade(' + id + ')', rate);% H( z8 @6 {# m9 ?' o; n4 [$ x5 a
# g: z0 q2 H. o5 H' O
}; R0 i0 V! A* d2 d* A7 {/ V

6 v! _5 d: _" @6 F9 [5 Z% jfunction continueFade(id)5 C# M! d" ]) q% Y8 k& L8 H

+ o# D; N( R2 s) s5 L: g8 h  A' ?{
/ J2 K  X( u3 {. o8 E. o  ^$ D- C% c( C6 s; F$ y; |* q5 x4 f
        continuous[id] = true;
8 A: t& d+ A: f* S; N
9 I- X. s1 h* {/ N: j* z}* [* v8 W. r6 D( q& Y8 U+ z

) I) u3 D8 r( [( Z5 ~6 q. pfunction stopFade(id)
! Y2 Y$ M9 I' }$ u* A, b! F7 C, l# J/ }1 K; ~' Q5 n* u
{* y' f) k7 L. E8 z9 }  b
; q2 `% u' J- Y! M8 M7 `
        continuous[id] = false;. x% i* Z" f7 i
5 q4 f/ x1 V6 j6 H  n/ O
}
0 j) B3 @, E# }/ P- h' M8 ^  z2 r  o0 K( S, S% L* e
function StartTimers()  W+ ~/ }8 p1 i* B0 N2 K

. t+ `1 ], D/ ~{        //set up an initial set of timers to start the shimmering effect8 N2 n* I2 A' Z8 c" r5 e; R
* u2 j4 g+ c7 x3 E  P
        for(id=0; id<numLinks; id++)- P) z4 g8 _$ \. Q  H9 `
( z0 j8 K2 m9 {7 t6 h
        {5 `! e! i6 }6 R7 ]
% a; @3 T% ]  U" u- N. O1 O
                t=setTimeout('startFade(' + id + ')', id*100);
- X; A8 N6 q& ]/ I
, g# }$ {' I5 {0 l: Z4 M        }& e- P8 H6 {# n9 S: i
! m1 j- R# T  d$ u
}
. B  j' ]& H; O- d
$ @: F, c$ A/ ~( K7 L1 a) V//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 A( t( {6 T- S% k* H- j8 d$ I
# u7 O) P  e, A( K6 T, ]
initLinks('#FF0000', 6, '#FFCC77');/ [4 w' ^1 I" k+ X6 [6 J$ z
) l  o' `0 ~- \* W
//-->2 J) n7 E- M5 w) S# `

$ B& c( q: g( d</script>* @/ Q3 t8 ~' E, G" v; \0 C4 I6 i# c
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
$ f! G, Y7 b9 u1 a5 N4 |</a>
" q# w2 @, l! I" ^<br>5 h7 f7 w1 u: l9 x* V; {
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>' r6 m5 t. f+ L8 H3 x5 }/ ~- O/ ~% \
<br>4 W1 J" z6 D% G3 F4 C
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>) \. S6 R, r$ K3 f
<br>        & J6 Q0 O) u* u' w" |% k$ W2 t
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
; u" N& V8 Z3 d/ p/ T, H- w4 ^<br>( E1 z2 G+ j9 _
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>2 t; g! C- {- H  S$ M
<br>% k; p9 X; {: `  [3 l: f
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
# {% C6 c+ O8 J* J<script language="javascript" type="text/javascript">
! r8 U. _6 I) A9 V<!--% T8 e* I! a+ R; g. C
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
& u" M- N7 Q0 ^//-->
# P" d! e% S- M% o* f& ]</script>



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