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

---

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

<script language="javascript" type="text/javascript">& x4 D+ n. A( H1 @  y. H6 Y. h
<!--) G3 h! a% n: s8 ^% a7 i" l2 i
// convert a single digit (0 - 16) into hex" U! C% W1 ^( U6 b$ L
function enHex(aDigit)
- z2 Y( g- ]8 Z6 T% \6 E4 h* b{
3 d$ B4 S3 c3 h6 y0 m5 f    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
# H, E1 h, X- x* ]: s}
, p9 `, e! e$ Y! w# W) Z// convert a hex digit into decimal$ b: o7 P; k/ C+ x8 I
function deHex(aDigit)
' C  _* {* |, ]9 S; M, g( g5 d) j2 r{0 w2 U4 R  \6 u: v; \  V
    return("0123456789ABCDEF".indexOf(aDigit))
- \% O. P* T0 E* L) x}9 a) R+ ^* `2 ?* b4 f

/ @3 C8 r- N' R6 K; o7 D// Convert a 24bit number to hex
* A! C' U2 U  L% X' U; bfunction toHex(n)* a6 N8 C9 z/ N% H3 \) @: d- v
{
+ I) z/ T; Y0 F" f! O    return (enHex((0xf00000 & n) >> 20) +
* a: |+ f- ]; o1 r2 v            enHex((0x0f0000 & n) >> 16) +
( `- {- J! C& ~            enHex((0x00f000 & n) >> 12) +( r+ ~2 j8 \+ c1 [5 C; J9 R3 @
            enHex((0x000f00 & n) >>  8) +
8 _( a4 G% n8 R            enHex((0x0000f0 & n) >>  4) +
* m) ~( v0 l1 C0 [7 \            enHex((0x00000f & n) >>  0))
0 }/ h5 k. o0 s2 N5 }3 I8 M}
8 s7 G6 g; i3 o) C- F2 c3 F// Convert a six character hex to decimal. {$ d" x4 Q) e
function toDecimal(hexNum)
- s- g) S7 n% C0 W2 U{5 g/ ^3 e$ X; B6 {6 j: y
           var tmp = ""+hexNum.toUpperCase()7 N! I4 E$ M" M
    while (tmp.length < 6) tmp = "0"+tmp
" r) w. m5 w+ G1 a6 W% j4 p" v8 c           return ((deHex(tmp.substring(0,1)) << 20) +
- V; L/ n9 Z% f                   (deHex(tmp.substring(1,2)) << 16) +
! j6 \! ?# u4 ^) b. D            (deHex(tmp.substring(2,3)) << 12) +5 G4 w( C7 L( K
            (deHex(tmp.substring(3,4)) << 8) +
8 u: G8 {, Z8 ?: G& o4 q/ R* x            (deHex(tmp.substring(4,5)) << 4) +: Z& ?" }# I' |; S/ y( _# h7 P
                   (deHex(tmp.substring(5,6))))
  A0 A) Q7 t3 Q* q}
' r7 x  r( {0 j& r2 _* x///////////////////Shimmering Links/////////////////////
. @2 s' ]7 D+ v- V//global variables' B* b0 [2 H2 G) L' [
var hoverColour2 s3 b0 F. T' x2 w$ T
var numLinks;: }2 y( N8 y& G& P
var rate;
7 a9 E* X7 B1 Bvar numFadeLevels;
1 R7 n+ d8 f9 g) z! v) O8 J' Avar bgR;
( O5 W% Q1 ]  \5 H0 Gvar bgG;  F: [9 _6 S' n$ _# v/ f
var bgB;3 s% N1 Z5 J0 N% ?4 U8 h; v9 h
var currR;
' f8 O/ k; A1 J' `var currG;  V. ^% C7 D# R0 P0 ?- y- R
var currB;: V/ W/ h# `, u0 Q+ A
var count;
1 B; A5 X/ y8 v: \var fadeOut;
5 Z0 d' M7 `2 g; F% X' ~var continuous;2 u. h: r- |0 a
var newColour;
' [) F7 s1 \1 z: }var tID;6 A* V$ p" A# n2 _0 y6 H/ B
var redInterval;6 i# M! I* |! e; _* c6 V( m
var greenInterval;
+ O. r8 z. H4 Q( W4 h+ Vvar blueInterval;
$ H0 ]9 M- w- D7 vfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
, D" b- X6 @) R5 B# q{7 F3 x5 O' Z4 i
        hoverColour = mouseOverColour;
# W. x( f4 }9 b; [        numLinks = numberOfLinks;
6 @0 w9 m" z3 G. q; U        rate = 1;  X/ w- s8 p0 Q! s" ?
        numFadeLevels = 30;
- @1 U2 V+ F: S; y: t# ]7 T        function initArray(theArray, length, val)
5 n9 F( C2 C/ r' q        {0 S4 G2 \6 ]" Y
                for(i=0;i<length;i++)
0 G/ j1 l* x$ s$ O5 |; _                {. J( [+ V* M- g
                        theArray = val;5 M6 N% @  j1 S
                }
& c( s# g' q, U! z* F1 {' \0 J        }
7 Y8 h7 [2 u- w: x# u! W7 J- H        bgR = '0000' + fadeOutColour.substring(1,3)! k  }) @3 e( ~& [
        bgG = '0000' + fadeOutColour.substring(3,5): ~2 g+ r' k+ m  s9 f
        bgB = '0000' + fadeOutColour.substring(5,7)8 p4 ]: ~( _5 d. z" H* |
        currR = new Array(numLinks);
2 [4 z, }0 O" k5 _        currG = new Array(numLinks);! L" k( o# }0 `4 G5 l7 s) S& R
        currB = new Array(numLinks);1 J6 `6 N/ S; w; C
        count = new Array(numLinks);0 v' V" V" L/ Y" H# j& ^
        fadeOut = new Array(numLinks);; A. r, v0 e, k! [) ]. D
        continuous = new Array(numLinks);* x$ b& F8 n3 H
        newColour = new Array(numLinks);
$ R* c" z: h4 C6 `. d        tID = new Array(numLinks);
4 y" k8 u7 K  G) K* N        redInterval = toDecimal(bgR) / numFadeLevels;
! d1 `8 b1 Y( {. _# t        greenInterval = toDecimal(bgG) / numFadeLevels;
% l1 W( Y8 J/ M! p- R        blueInterval = toDecimal(bgB) / numFadeLevels;. K3 m+ [8 G4 K
        initArray(currR,numLinks,0);- s& u; l  T% [3 G
        initArray(currG,numLinks,0);
- x+ P8 v, [5 F5 Q        initArray(currB,numLinks,0);
* v( g5 ]: c9 F/ Z        initArray(count,numLinks,0);' M: m. @) R/ y3 P/ B4 v3 I
        initArray(fadeOut,numLinks,true);" D( k* [0 e9 y4 l5 x) ]3 V. t% w9 R& e
        initArray(continuous,numLinks,true);: f4 J* ?9 v3 K8 F( M8 K' R8 P/ W' F
}       
3 N, V  |  O( e" j  rfunction startFade(id)7 H! W/ G3 R. R6 a9 }
{, Q' A$ e3 Y  d% S% z" R7 e
        if(fadeOut[id] == true)
- y7 ?1 }* [2 j8 S/ e& Q; Y: w        { /*move colour towards background colour (increment)*/, n1 b; Q. m/ s
                currR[id] += redInterval;
* d- t3 e1 N, E; g% d                currG[id] += greenInterval;
: w' E) j3 d' z1 _- t                currB[id] += blueInterval;
& e3 G: b  v/ e. |  ?                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
7 _5 A" S) Q# U7 \8 V- o4 ]2 X& P                if(++count[id] == numFadeLevels)
7 m+ ^& f  E1 E1 }4 x                {
. ]& j6 P2 d1 Q7 U; _8 C                        fadeOut[id] = false;
7 U0 C4 k+ b% N( j, x! _                }3 k" w, B) G6 a6 A: m# q4 J
        }* Y& Z& `( E, J, P! @
        else  f8 m& M/ G7 ~+ p
        {
" s+ a6 @4 b! Q/ }* V( I1 H                currR[id] -= redInterval;
5 ]: f2 r' T  w+ [
$ }9 D. H9 r; {                currG[id] -= greenInterval;. J% ~( A' s4 l: V: T: [8 m6 G4 J
2 G+ T) ?/ A% d" Y
                currB[id] -= blueInterval;
( J4 `8 U6 f' ~- a0 N/ v
7 v3 \. S( ^2 I1 s: V: \                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
8 K4 e0 }2 R! u# B% @, p" E" N: I  J  u- z( k; Z, T
                if(--count[id] == 0)
/ L) ?4 ]3 _  z/ U3 q9 q
, L2 T. O7 S# ]" R% z                {8 q' _- g/ U' V
7 n5 t1 W) H4 Q3 \4 W: J9 a
                        fadeOut[id] = true;+ |5 b5 ^! N7 X$ d  o+ }* h7 ^( T" Z0 g

( _1 P0 S. e! B7 u5 Z' i8 {                }
0 ^7 V3 g7 t4 s6 r. V/ E; X( c5 `7 A. y
        }
1 o8 d9 b8 X+ e) s. O
8 h  {5 S4 p% r        if(continuous[id] == true)
/ [' V+ C3 S6 {4 D7 i
5 D) s* o( G( \% K5 }        {
% W5 X; @* Y( `. m* Z2 e( K7 z% Y
                document.getElementById(id).style.color = newColour[id];               
% `- l3 R: ^- l, g1 C9 n0 X' G0 x, B" n; ]
        }
' z5 N4 A& [& Q5 O0 c1 g$ Z  L+ }/ b& i6 n  F( p( w6 _
        else
9 S) A3 h" l. w7 L
' r/ }" T  @- P. c: `6 d. B& ]& H        {
! v6 @7 i! _1 i* t6 z+ f8 ?# W) @  N4 v' a6 O! b0 ?( H
                document.getElementById(id).style.color = hoverColour;
: e; \$ N* t" W" b1 i6 l! y* V
7 n& y4 ]" E6 W" b        }) m6 [2 v, W) \* M& k" N% F8 z
5 P/ z6 @5 p) ?
        clearTimeout(tID[id]);$ u& o2 q  B; M! g

" `2 \9 `5 g& s+ [6 Z        tID[id]=setTimeout('startFade(' + id + ')', rate);8 B8 X7 {0 ~( m1 |8 ~4 l4 L1 g

( [+ T5 d0 Y# b9 Z}
3 _$ |; }. O2 E* b! p; D  [
/ ~, a5 ]8 P* M9 Y; A8 j  Yfunction continueFade(id)$ f: z$ S0 v: r# p1 y$ q2 \2 ~1 G

( o, c$ k, _1 O& s{! p+ w" U8 L5 U  Q, E

8 D9 f$ i* W- \6 N9 ~" C        continuous[id] = true;
. A  z* K+ m$ r$ I$ p1 u/ C" q' T/ y" ~& z" T* w" ?+ Z
}9 j2 j3 q& R! ]. |- |3 R6 D( X

+ U. J; K1 \& D- p6 z! jfunction stopFade(id)* t( l) R6 E8 s/ \, ^+ c  X2 G

4 o7 B2 `7 M# I5 |{. l3 ^% u% V7 E
: I$ o  f! J+ z; V" t
        continuous[id] = false;
( x/ o5 _! @5 W! i+ b/ ~7 I5 ]6 k) W. e0 a/ C6 @. S2 V
}
# @8 i: q! w" P( X  t% I0 c! X; c4 D; J( s$ z1 l
function StartTimers()- J6 b; D' _$ Y
+ H/ ~& a, R, s$ N8 j, d' B: t. m7 x
{        //set up an initial set of timers to start the shimmering effect
( f* a4 B, {0 i) [- c$ K$ d! U5 E5 q# b! z
        for(id=0; id<numLinks; id++)
% P* d# Z3 U& ?/ x3 h( Z2 L
4 |$ I# G0 V" d  [( q. `        {
; V) D+ k; [+ u0 `# K9 {# w
% }  A) l' J/ A; ^" q' d. o                t=setTimeout('startFade(' + id + ')', id*100);6 }8 S, o7 d0 E, k6 s
. Y1 Q. q% T9 O) ]) J
        }7 l, k3 i! g2 ^  U3 Q

0 s$ H) Q/ p3 `" w}
4 }% ^& I. ]$ G# c( M
9 F$ H7 @- o& b//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour'), g5 f, D; _% \) Z' B5 O! P; d: `
3 q+ i: g& C) R$ D
initLinks('#FF0000', 6, '#FFCC77');- _7 r  [% w6 x

2 n$ A8 p" E4 N* h+ O' U7 y8 T//-->
+ E3 M, `/ ^. r; c! `9 C
6 ^! B9 ]& u4 h2 B</script>: l/ _" F9 a2 p1 F7 ]4 P+ V
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元: ?7 K6 M" P3 D- n# n9 ^
</a>
; h& Y' q# i0 O1 X- I<br>1 q6 z7 h/ @* z% L# i' W
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>- E2 Y. C8 l! R& h
<br>9 V4 L% ?' L# C* [  x  ?
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
; C" V5 V# s7 m+ ~<br>       
7 H+ Q* O( y: I6 N8 F* u# G& R' V<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>& ]8 U( K% y' p1 D$ z
<br>& @3 Y1 z9 T) Z" y+ H* [: k
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
3 @+ @, e; _$ P/ E( d<br>, L6 a- z1 i' I- l9 p* Y
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>- x4 [+ f/ I% `2 ]% a+ T
<script language="javascript" type="text/javascript">; C2 n% y$ n) g9 q- d" |: J
<!--& c2 x# Y% a( v! c
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering: C+ l, c, a" r) x" s! e: }
//-->
) k% O' H; z5 b- A. a  H0 G</script>

---

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

Powered by Discuz! 7.2