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

---

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

<script language="javascript" type="text/javascript">- A  b. x  J3 [1 H1 m& Y+ _+ s
<!--( M2 l$ B: m. X
// convert a single digit (0 - 16) into hex* ^& x# q" Q. z
function enHex(aDigit)) c% V$ E& u8 J6 t, n3 E
{
2 A7 z+ N3 x8 ?8 o7 i, ^0 C) k9 b    return("0123456789ABCDEF".substring(aDigit, aDigit+1))! c( d) w, m! ^. N* X3 ~
}
# [5 z) U- a' `7 {; T// convert a hex digit into decimal
. q  W+ A: s$ a/ Y4 Vfunction deHex(aDigit)) D" b) F( D, ?& i/ m
{6 j! h" A" N; a- E
    return("0123456789ABCDEF".indexOf(aDigit))
: h% F  C8 R- i, S4 o, q: Y1 C}
1 k" ]3 N% E/ n9 E) P
- e8 l; F' y: x1 E# i( C// Convert a 24bit number to hex$ n1 R" c9 Y5 i2 W8 Q. }
function toHex(n)$ y9 |3 E, i: R, V' Z- e8 M4 U
{/ }2 @8 ]& j+ l! j+ [3 m8 Q( ^
    return (enHex((0xf00000 & n) >> 20) +
0 {8 y+ p( E( K; [1 s$ g% G            enHex((0x0f0000 & n) >> 16) +3 x3 S8 r$ V5 W7 q1 f* X
            enHex((0x00f000 & n) >> 12) +
3 q/ m9 ~# v) G( F! X6 \            enHex((0x000f00 & n) >>  8) +
- m% v/ M0 K1 g2 z+ U            enHex((0x0000f0 & n) >>  4) +3 t- t8 j4 x8 o2 k. H6 U- z% m( c3 e
            enHex((0x00000f & n) >>  0))
/ |( I, L/ ?4 z, b* ~  a; C$ p}% P' E" F; ~0 E* I" k  K/ f
// Convert a six character hex to decimal
, y" S8 e  v9 O4 Z% Y, s2 r. p/ h) O1 _function toDecimal(hexNum)! S8 m% m. G( \6 K
{$ L9 U* e+ b6 g1 b/ j5 J
           var tmp = ""+hexNum.toUpperCase()5 B$ H# |$ T" W/ T" J( k5 \. w! c: g
    while (tmp.length < 6) tmp = "0"+tmp
2 l0 N1 y/ \' R1 C  ]) K) K+ |3 [           return ((deHex(tmp.substring(0,1)) << 20) +. y* O+ N( l( ]( s/ ?$ A: f
                   (deHex(tmp.substring(1,2)) << 16) + : u: A( ]; {1 ~# G
            (deHex(tmp.substring(2,3)) << 12) +
. ^  ]9 L. x, w) K4 r% s5 C7 F            (deHex(tmp.substring(3,4)) << 8) +6 \/ w" A. C/ |; v. J
            (deHex(tmp.substring(4,5)) << 4) +
. J0 ~' _" k4 s                   (deHex(tmp.substring(5,6))))
* `: s# V$ j0 ^}
5 n  A1 ]( i- E# M///////////////////Shimmering Links/////////////////////# ^3 ^) k: E( Y6 |. M( k' c
//global variables& W. u4 Z+ D  M; C) C
var hoverColour
4 x1 \' ^3 ]0 z( C- ]% m& h) fvar numLinks;
# [. C' J3 d! R5 n1 j" b  Vvar rate;
: ?; d! o1 F# _4 d  Q+ [var numFadeLevels;" y  ]: J( ~! s9 o  w
var bgR;0 c4 R) @7 j2 z. L3 J9 y& w
var bgG;6 W3 w. P5 E4 c- Z7 m7 I
var bgB;
1 T& _9 N; p; ?, B4 jvar currR;
6 p& N$ w3 C6 R6 svar currG;7 A+ M5 `$ ]9 h5 J: ~7 h( U
var currB;
6 N" N) V. k% f" d5 l9 Ovar count;$ \+ ^4 O' w3 `7 ]0 x) N! k
var fadeOut;7 t9 c" s2 c3 W8 x* l0 O
var continuous;; N5 U  T3 S$ a5 Q& ^
var newColour;
1 T" V' x4 k& fvar tID;
4 r! S" g3 }2 u# ^8 |1 K: s1 nvar redInterval;& }0 \3 B+ n8 {6 j+ a; u
var greenInterval;
; U6 \: `* I5 X5 Uvar blueInterval;
5 a* ^9 A# Y* R, B) |function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, L8 {7 C# P( X8 n: W{- O. ^; n* a# n+ C- \! d
        hoverColour = mouseOverColour;) U, E5 H# E- i) {
        numLinks = numberOfLinks;
+ T! \9 j( m: z6 Z+ t' w0 _5 W        rate = 1;3 `) c; J" C9 y2 l2 \  O4 P
        numFadeLevels = 30;
1 [; o9 q& D- j* G7 R% t        function initArray(theArray, length, val)
* k8 z5 Y, C2 a" A3 h% Z. F        {
& I+ E. ~% ^9 C4 V" H7 `                for(i=0;i<length;i++)7 y# l8 O% P" B. [9 D2 s' f
                {9 L. n- O- }2 @* t+ G7 o
                        theArray = val;
$ h/ g" L5 e+ U2 v                }8 W3 A" E6 Y) v" ]- C4 n& h
        }
1 D6 S( C: o9 B, M; N        bgR = '0000' + fadeOutColour.substring(1,3)9 ~: N0 m  A# d: T
        bgG = '0000' + fadeOutColour.substring(3,5)
. z, a# d/ J! d+ H+ K  G' N        bgB = '0000' + fadeOutColour.substring(5,7)
1 x/ U. {0 _6 u& b        currR = new Array(numLinks);: j7 ?* v- q# k* s3 @! Z
        currG = new Array(numLinks);* d+ e7 @& l* L0 g4 N
        currB = new Array(numLinks);
  a2 m$ l) I1 A+ U2 c3 ?* q        count = new Array(numLinks);% T# i5 T2 Y. X, z% c
        fadeOut = new Array(numLinks);
" j' s7 m0 \5 w7 {, n% U        continuous = new Array(numLinks);& N0 ?! Q* G) o" E0 V3 T3 X
        newColour = new Array(numLinks);
3 X/ b4 I* ~; @/ g        tID = new Array(numLinks);
: Z6 z+ V( m: J' s        redInterval = toDecimal(bgR) / numFadeLevels;$ a! X2 l% T! P4 d& `
        greenInterval = toDecimal(bgG) / numFadeLevels;/ q  V! f  [) U% E# ]: K8 Z8 u* [- N
        blueInterval = toDecimal(bgB) / numFadeLevels;" K- z( r: m9 G9 X4 }3 z/ y( @7 p; M4 a
        initArray(currR,numLinks,0);( T0 a3 `5 U" G0 v% l
        initArray(currG,numLinks,0);
( k! u% s# {" W/ y3 ^" o        initArray(currB,numLinks,0);
5 C, R+ T$ y3 Y" b        initArray(count,numLinks,0);
- w, Z" P" X7 v" x- ^  M        initArray(fadeOut,numLinks,true);1 J0 T5 r: [$ O8 z9 q
        initArray(continuous,numLinks,true);4 x% O  V  o% G  P3 D4 A% v
}          T. u" t8 X& ]* ?: e: {
function startFade(id), ]' @2 Y" k8 e# {; M) B
{& _: N8 F1 k  [2 @& c0 ^6 O
        if(fadeOut[id] == true)
/ n% c$ p. m7 {5 h% o: D  O        { /*move colour towards background colour (increment)*/
9 z( |' @7 n. ~$ E+ m7 |2 e2 H                currR[id] += redInterval;  g' P, V* X+ Y/ X' i8 S
                currG[id] += greenInterval;; r3 q, N" O' Y8 C6 h1 i3 `& t
                currB[id] += blueInterval;! J* i+ v" U1 o
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 H1 S8 W1 F/ a/ b8 g/ u                if(++count[id] == numFadeLevels)
$ c- i! u" o: b& ?                {+ W8 q. _& j5 h& b$ M
                        fadeOut[id] = false;
% N2 v1 p' k8 [5 N. ^                }
1 i1 p& F! z. O8 F" V  z2 n- }        }
$ N& ~7 @3 X( [2 N) Z        else+ z6 s7 u7 x2 w1 v9 Y
        {  E3 N- p+ o- X! g2 X( w, w
                currR[id] -= redInterval;
" r$ Z. b8 f: p! @
' V1 a! |. F: I, Z, u3 s2 j                currG[id] -= greenInterval;
* Z. H4 {- y; n* c+ N9 ~/ [0 o2 v; H9 z
                currB[id] -= blueInterval;
8 a3 ?- C9 q/ R0 U# M& N4 L9 y3 ?: Y
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 }& |' s5 p$ F- k7 z

' p6 B5 H1 W, p8 F- b% u* l                if(--count[id] == 0)! n* T, u; l8 l+ U! L* f. {

2 C" [" W6 u7 |( E! U                {$ R) J7 t7 Y: w5 L. Q

0 [' W& W7 D+ t! x( m                        fadeOut[id] = true;
6 c& S7 g. E) w" ?; S7 V& j$ ]
; L$ H* R' f' z. h                }: s# Z' G' ~5 R2 q: `
  i( ^+ X+ E, B, V& Z
        }
2 ^' Z1 N( [& I" o& H7 X2 G2 t6 |6 ?7 h
        if(continuous[id] == true)
. ]6 @  l3 }, L( a: R5 W; {" v+ v' i' K/ C" Y  S( N  I0 T
        {' d$ x7 X, E  b& R4 A, V! ?

: W! x/ n7 |; p/ R2 e4 b                document.getElementById(id).style.color = newColour[id];                9 E" o. R; l% F- H' D) F

/ D. X; y$ a' d. W1 [" V1 V        }
: V/ b8 @( x- ^, T2 [8 J. Q! @/ r, w# Q. k$ Q+ E
        else
/ o' }' `2 `! H" \  {* |/ ^1 |8 Y- j9 s8 @- n
        {
. m4 E) h( e1 l, N1 b& B4 h" P1 n1 j, a
                document.getElementById(id).style.color = hoverColour;
% m3 |& V) ~8 v( j$ Y1 `5 P( b  a3 q* x/ F7 B/ ^
        }9 ~& K. T1 ]$ o7 k5 u

. R' ]7 V. Q6 ?+ R- G        clearTimeout(tID[id]);8 }' ]8 L* ~& f. f, S7 Z$ k! a9 Q
9 u5 ?5 O2 i# l
        tID[id]=setTimeout('startFade(' + id + ')', rate);2 C$ x" V% B! _0 O# ^8 B- K

: A# i& G% R: M* p, f" `9 T, F+ b}% S; R: b" E% M; z) U4 g- l$ O- i
2 E, \# [" U: O- c) q6 s
function continueFade(id)4 y( x, y" g# Q! \  ]8 J) b0 u# C
0 I% |2 e* h) \  o+ Y+ H* x
{
; r9 E* a6 ]- h. J) P3 I$ X
& D2 O! {& H, G- H0 s5 c! u        continuous[id] = true;
2 m/ I: Y" a* Y: l: }0 e0 j4 g7 Q1 `3 J
}; ?% n: L7 a  W

* [0 S0 r3 Y( @: F2 r8 T! vfunction stopFade(id)( W/ b9 V, U7 y, {% ?+ ]' q! K
( o8 p$ h/ C3 A3 l) u# O
{
! T: \9 u4 V( g
  Z  `7 I  h. i2 N        continuous[id] = false;
! j1 g2 N, s, m" X2 w* |+ q4 F+ w0 n$ ^& G. y
}0 ]* z% @- l; x

/ v/ i& _( z/ z6 ^& Cfunction StartTimers()
% C9 v' B% H/ D8 B, t- l9 ]1 P
) f1 V( A- k+ }# Y- E{        //set up an initial set of timers to start the shimmering effect
) [) F! O. I/ x3 c& B& O! i3 B  W9 p
        for(id=0; id<numLinks; id++)0 i) X- E( {& H& F  A

& F& n6 O! Z1 c7 U; c4 |- [1 C$ f        {, q/ r4 ^# c  y9 e/ u& T, K
/ u8 R1 S/ h8 }* R
                t=setTimeout('startFade(' + id + ')', id*100);
1 i; H* C5 x2 a& F; a3 V( O! i. Y5 L0 g) C4 I: ~
        }: a/ L6 j# N$ |  M! a, y, A9 m

; O( `% n9 x( T) w1 }2 L1 B( j# t}/ k% k* z% }: ~* M6 K
6 J; M6 e0 E6 o8 Z, X1 H
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
) E: V' ]& S7 K' A1 x, ~1 v9 {4 \7 [' N$ e$ o1 ^
initLinks('#FF0000', 6, '#FFCC77');. P9 V& z2 f% k1 B, ^

) H8 b0 B0 `% n" Y/ l6 N//-->4 Q* ^1 U# s9 Z7 Y. p; b* |; h; C

, S( G' D* k1 {/ S* W+ I</script>
4 a/ o9 B  S/ b" M( n<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
( H$ C! T4 C( I5 N3 F1 c$ J5 t; ^</a>
% ~* X% P) H; `: b9 n4 C<br>) u2 T( _: ^0 i' X5 B5 h
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>6 k% B9 d2 b. Q" ~% g/ _
<br>
; v7 d/ E, Z" g1 V<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
" h' }8 e1 ~6 e- ~8 T# A% [& @<br>       
8 p' W, y9 A+ F9 _4 V) y3 ^<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" {" s; c. N7 [9 U$ y+ g) M, Z( _% J
<br>% |  b! x' H; X" ~$ o) ~) `8 Q& z+ E
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
& k( g8 _! `. g) Z6 u<br>/ W' ?& }- {3 j5 i5 N% [5 x! _
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
5 j! e' _8 n6 j5 r<script language="javascript" type="text/javascript">
4 {* v- {1 G. k) W: E# j$ c<!--
' U6 P+ @: e( @( l4 x5 ]setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering' J6 R$ J8 [9 k- A. l# R
//-->
: Z: d/ `4 q+ x</script>

---

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

Powered by Discuz! 7.2