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

---

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

<script language="javascript" type="text/javascript">
$ c& y/ N3 E$ G0 H6 H7 U3 W' L<!--
# H; x( J* E$ Z0 X' F7 W// convert a single digit (0 - 16) into hex. ^) R! G8 H, @! Q) T5 a4 t
function enHex(aDigit)
! h3 _1 ~2 l0 B" j2 ]; r3 _{
- c% C( \8 [$ Y. S5 t9 M    return("0123456789ABCDEF".substring(aDigit, aDigit+1))6 i9 e& T) Q, Z* @" L2 x; P
}9 ?  P+ q; ^$ @0 \9 ^2 a) ?
// convert a hex digit into decimal
3 {: P5 {  X1 nfunction deHex(aDigit)
! E$ O$ v' m! L  t{- W: o8 O* q8 n( X# U
    return("0123456789ABCDEF".indexOf(aDigit)), b. {6 u- c' e! s& Z: Q
}. @1 Y% f2 B0 N5 l+ S

9 W- W2 U# U! M% n! J1 ~// Convert a 24bit number to hex7 b1 o: t0 e$ [# c' X- R) \; D
function toHex(n)1 G7 ]6 o8 c$ w; M# P' t2 f5 w9 E
{
& k& B% @' j) q7 V    return (enHex((0xf00000 & n) >> 20) +' E$ s. N4 ?  `; y: y, ^2 x2 v4 o
            enHex((0x0f0000 & n) >> 16) +7 r6 W; o, k" E: H! x2 q
            enHex((0x00f000 & n) >> 12) +- Y6 k  P7 m( I* I6 j0 Q
            enHex((0x000f00 & n) >>  8) +
( _6 w' x, g7 [* k6 ^7 |            enHex((0x0000f0 & n) >>  4) +
. N8 R- S- r4 I& f& F0 |            enHex((0x00000f & n) >>  0))# [# }/ Q; T: j" Q" A, f
}
. V8 v/ ^1 e9 u& o* `: ?4 I// Convert a six character hex to decimal) k5 Y) N7 e7 a1 ]# Z$ _) Y; H
function toDecimal(hexNum)
# [' n" @* U6 h8 C% n! B/ S+ b{, u7 F6 j. w4 S9 e4 ]2 M
           var tmp = ""+hexNum.toUpperCase()
" o2 b( D! b% u5 ?+ n% g' i0 |    while (tmp.length < 6) tmp = "0"+tmp  o" F6 S- e6 ]. e
           return ((deHex(tmp.substring(0,1)) << 20) +3 P5 Z8 |) Q* v' V+ V' U% A
                   (deHex(tmp.substring(1,2)) << 16) + 7 Y6 j) i3 L! ~( P/ r
            (deHex(tmp.substring(2,3)) << 12) +
0 c8 A8 M* |" n% g. r            (deHex(tmp.substring(3,4)) << 8) +
- a8 v9 x9 n, t( K, T% v' i            (deHex(tmp.substring(4,5)) << 4) +
" d9 B# F( D' S' _                   (deHex(tmp.substring(5,6))))
+ z0 ~) b8 Q4 V, @% r& |! k" M3 e}# b4 q& r/ l: S1 _6 U4 a
///////////////////Shimmering Links/////////////////////
; b. S: d+ j5 E//global variables& l) K; h! A3 f1 p: V  r
var hoverColour6 m4 g" Q; b( N' O
var numLinks;
- a# y3 Z9 E. Bvar rate;
$ Q9 x7 o6 n, J4 Mvar numFadeLevels;
- c6 r1 y  w3 X( u/ o7 Avar bgR;: Q8 d) H- S: |% y$ x6 ?* Q
var bgG;
1 h. p: X1 X- y* J; z/ X9 r* @8 Nvar bgB;
% Y' P9 u/ h3 k  e* \  k( gvar currR;( ]4 @' L5 N" X! q9 c+ x, [, d
var currG;! Q; V6 v% C" I" p# @7 ]) E% @  A. Z
var currB;
& x1 _8 @6 H" v( X  B: y3 s8 wvar count;9 V  V  m3 @; q" E
var fadeOut;' o% y& `  r. C: d' V8 }
var continuous;" N- ]2 ~7 ^" X  B9 r
var newColour;$ I$ X& i- x# Y- i% |
var tID;
& L- d) R* O  I8 H3 K4 o. Avar redInterval;& p) t# ^, ?; d5 j* s; m# v
var greenInterval;
6 C6 n2 j) I. s5 H" E1 M6 }var blueInterval;
' q% u- w7 z0 A7 bfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
2 V0 O9 Y4 t; j{
' w$ r/ A) S" C) v        hoverColour = mouseOverColour;
3 q/ X* e( w  r4 N2 p6 `- C/ G! y        numLinks = numberOfLinks;
  m  x# o& H8 @" i; [8 V        rate = 1;
% X/ `# A5 Y# ?        numFadeLevels = 30;7 t) x: _  ~- t7 e6 h
        function initArray(theArray, length, val)
- j2 X7 v# d5 R3 x" i6 |& a        {) j; F8 P( L! n9 e  u9 {
                for(i=0;i<length;i++); Y5 j5 A7 J0 D3 s
                {
/ q; R! l: ~& a; S% d                        theArray = val;
$ P' D  z- y4 w2 G' D4 T                }
6 l/ y- c' Q8 Z! M& O        }% N  ]# S+ E  g
        bgR = '0000' + fadeOutColour.substring(1,3)6 E. X0 M/ ?! S% ?7 |8 M9 K$ a! c
        bgG = '0000' + fadeOutColour.substring(3,5)
7 n" k  j% X7 Y1 S% B        bgB = '0000' + fadeOutColour.substring(5,7)
! V8 \2 N6 |1 h& b2 I        currR = new Array(numLinks);) t# E9 R# u7 ~* d
        currG = new Array(numLinks);
- }* H% k4 f, e$ Q4 T$ C2 t        currB = new Array(numLinks);7 l0 S. M- p$ e/ n' W0 K* q. \
        count = new Array(numLinks);: W/ }* h! [: J6 |- N, f! z7 u
        fadeOut = new Array(numLinks);6 M8 M* t9 M# p- s- c8 h4 y
        continuous = new Array(numLinks);
: f* H, |" I. g4 W        newColour = new Array(numLinks);
6 m- \2 g/ ?5 C0 M. ~  e        tID = new Array(numLinks);
  j0 T; Z6 O% d" b8 t$ ]        redInterval = toDecimal(bgR) / numFadeLevels;  s, K! L( k% u, x+ k5 V/ P
        greenInterval = toDecimal(bgG) / numFadeLevels;+ R- y* M5 ^; g$ T* _0 G
        blueInterval = toDecimal(bgB) / numFadeLevels;
3 U! `& B  W9 [; x        initArray(currR,numLinks,0);- G5 d8 ^& ~8 [. |
        initArray(currG,numLinks,0);  E1 {! U+ q% }. a, W6 T& O8 {
        initArray(currB,numLinks,0);9 z7 M/ i% ]: ?( X2 x5 Q
        initArray(count,numLinks,0);# p1 M! v* r* Z/ P- T
        initArray(fadeOut,numLinks,true);
+ @7 ]& l. `1 S  ?1 P! i2 S        initArray(continuous,numLinks,true);
, y% }+ b# K! N! z/ d}        , |1 N0 I! [: O: j; p! _8 f
function startFade(id)
* o5 i9 Y* P: B! _: A+ d  I{
  |. v0 Y, _9 U        if(fadeOut[id] == true)- e' l) o: F1 X- `
        { /*move colour towards background colour (increment)*/
; }7 i, `' |: p  U3 N                currR[id] += redInterval;- ^. K1 G% }  s" Y  e  X8 S- Q
                currG[id] += greenInterval;
1 c$ H0 H7 V8 f: _' U# `/ L# ~1 z* A                currB[id] += blueInterval;2 @) }" }: e2 f9 S: C: u2 L0 F! o
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 q* B  F& Y; d- w3 E/ d* P6 Y                if(++count[id] == numFadeLevels)
, W; N1 O- A6 U7 [) s8 r* O                {2 F, c1 Q. t3 `3 {2 [  n# e
                        fadeOut[id] = false;
8 V6 i7 A: J. D5 z0 u                }2 I3 c' j7 ]; |& o/ W1 {  ~
        }; p9 k) u- b3 J" O% m
        else
5 f" G* _7 d9 X/ e        {  u1 A0 G: @& T% Y- P! {
                currR[id] -= redInterval;
$ }/ [8 v' H. _! w
7 H! S7 D- M3 P0 F& {; ~" A                currG[id] -= greenInterval;  E4 {" C+ {6 B  _7 B# C% H
  b- Q4 y* `; u5 j, ?7 y6 Q
                currB[id] -= blueInterval;$ j# C/ V3 S4 S" I+ F7 N

4 F" r+ R3 W+ |5 }, N( \: s/ q                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);' Z' ]9 X7 F; `
* V2 @" s$ j+ C9 q" {
                if(--count[id] == 0)1 z  U2 i* ?) t+ K/ Z  h

+ F" k: ^3 x5 T/ s' \; Q$ L                {
- [; l& a; I$ k( {( U" r
- a) [1 h$ c8 Y7 H                        fadeOut[id] = true;3 c  Z" F5 z! E# q
4 L3 b" H; ?6 A+ R
                }( f) u, _* Q! \6 h" |7 U
/ D" u8 w4 `% \  C& `5 d; V' r
        }
1 C. n5 @" W6 w4 L" D
; y3 q( q: @/ i+ r" _        if(continuous[id] == true)  F, ^9 G0 j, {$ p$ A  k: ^

5 F; l. @1 U% E5 O        {
0 |& x: T5 A6 a
# P* X, _' J$ Y+ k                document.getElementById(id).style.color = newColour[id];               
6 {% K. C( N* W( ^: K6 N5 Q2 ~8 E2 @5 [$ O- k/ y) m& E
        }
0 r4 {& r# e& h0 M, g* [6 i4 G: Q" M$ v6 x$ s
        else
) K6 |( m- S5 }) K  g# q* @
3 O. X' ?8 g5 |% f4 U        {' L4 u0 b6 h: }# M% a& N" k. A

' y6 b$ Y) L; c- v- F" x                document.getElementById(id).style.color = hoverColour;
& {- T5 s# q- k6 x: W' \, ]3 B1 P0 b8 U, K; N7 ~/ H
        }
/ b6 h% v! C& d" Y" g) ~7 E4 Z! z" U
        clearTimeout(tID[id]);
$ R+ k8 Z: j: n6 b9 U8 i9 Q/ F4 m/ b4 Q' W/ k9 u! c1 I2 b
        tID[id]=setTimeout('startFade(' + id + ')', rate);( q, V) d3 F  ~! l$ |
0 X) ?" v0 r; F9 V* Q9 a
}
; |7 J* |7 ~5 J4 H/ W* J5 b
, ~) n! ]: W: x1 a' F& b) lfunction continueFade(id)+ G) v- o3 F0 C9 g( p% b2 D
' }' y9 n# O7 s! X* _+ W: S
{
: b( V7 P- |9 b- K3 L, s; _9 g8 ]; M4 G$ G& [3 I8 b8 e
        continuous[id] = true;% ?% {7 u1 D' i2 g3 `

" B& f! x, n' l$ x: v+ p}1 a0 O2 s) S9 M4 Z
, p& d# S4 R& `, c* P" M6 ^
function stopFade(id)7 W9 y& g3 s& y

5 v( z  A* a7 O# P{' n3 d' R% I% \$ H; _) M; L+ D

* L+ k4 Q! |* o        continuous[id] = false;
7 T* N1 I" ~% Z7 R& ?  ]/ B
+ K, H1 ]9 V- y9 n' I}8 n$ d& \7 E5 J
5 O' N6 D. j! F; q9 K0 H$ A
function StartTimers()$ A* N. I# q4 p
% j1 r+ L( j! M2 \4 ~8 [, r
{        //set up an initial set of timers to start the shimmering effect
. B( u9 F6 n( `4 Y; l: q
, n3 G& }) L" c! r6 g        for(id=0; id<numLinks; id++)/ U4 ~5 a5 L5 B! D

; n; B) s# v+ G        {
* s( L# G& G3 K3 E4 J# @7 x( s( D/ y! c+ ^4 @+ k# G+ w$ x
                t=setTimeout('startFade(' + id + ')', id*100);; }7 z. k7 ?8 t4 P/ r

/ }; E8 r3 p* U( `% p. n7 ^, X8 E        }! b1 N6 R7 J! O1 D4 [2 w

' b8 [2 m! u4 v0 y; g, `7 w}, f& q5 j. [, s0 y1 \
9 V/ G* o4 Y% |# O
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; ], F' q, B" K8 q4 {- f+ w9 x2 X7 L/ ^
initLinks('#FF0000', 6, '#FFCC77');2 N, N; _( k+ H0 O( J) `; h

+ l9 t, k3 T1 l1 q5 b//-->
5 l: q5 B2 o0 F3 O: e- e; G' I. y! E2 w  y" i9 Z
</script>) o# [6 M- p: M  D3 e2 u! _
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元& c* }9 ]1 ^8 m* I( H9 L
</a>
% G/ j/ X8 `. \8 W* J  a6 s<br>; K; K2 n, K) U6 V
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>9 R+ |: j# L0 W* @! X$ T2 P
<br>4 T4 w( u% K8 R
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>; H0 o# ?/ E4 t3 [8 H
<br>        * ~& A" N1 j6 d1 B$ Q
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>+ _. U3 ?, P$ q
<br>. d- ~9 U- u1 t+ I
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>' ^, d8 O9 t  p7 K& T& s" o  y
<br>
+ L: ]8 h, t2 A2 r9 c<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>$ \! T5 ~2 ~% f6 h( g% x
<script language="javascript" type="text/javascript">' Z: P# S9 \1 ~7 R0 q6 r/ e
<!--
! U/ U: U$ Z" u9 O& \+ QsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
/ F) l1 W& B6 T( Y8 N. Y! }$ ^//-->) S8 h/ |% A6 @8 s- p
</script>

---

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

Powered by Discuz! 7.2