网页之文字的循环闪动特效

zw2004

<script language="javascript" type="text/javascript">6 L  x* M- l! _& K
<!--
4 @5 s( {8 R2 v  R// convert a single digit (0 - 16) into hex
) l! C# x/ O6 Y1 n' ofunction enHex(aDigit)
  S% K, q# @" e8 J{
% \4 Z( U+ {3 N- k5 P3 A    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
8 b7 j5 j- K( \" W" |}
. b2 `1 K5 z& H$ X// convert a hex digit into decimal2 b9 ]* b0 j8 n/ I  p1 Q
function deHex(aDigit)
5 ]" h9 E' s2 Z3 i{
- w% F0 ~  f& m7 r    return("0123456789ABCDEF".indexOf(aDigit))
+ {3 x. T4 E7 r1 i& \}: r( g( X- p8 v' Z. q

$ Y. n5 I  u. l% F% _" A' M+ ~// Convert a 24bit number to hex+ E, I0 M9 V/ ~. {: R0 n% w8 z# @
function toHex(n)) Z' l) S1 Z6 }4 q/ c$ D
{: V3 U! O' ~, Q% U4 F
    return (enHex((0xf00000 & n) >> 20) +
. q& R3 H: J2 d3 n            enHex((0x0f0000 & n) >> 16) +8 d9 |! ^3 ?2 \8 L& }
            enHex((0x00f000 & n) >> 12) +
. {! ^" l' ^! X& _; O0 o9 q& n            enHex((0x000f00 & n) >>  8) +  K7 ^- a% r- c) [( P0 l  t9 s
            enHex((0x0000f0 & n) >>  4) +
. L: Y7 k& x: l* S$ l. q            enHex((0x00000f & n) >>  0)): O: c  r: q( ]4 e6 U
}7 j9 I0 f' @" d- i* ]
// Convert a six character hex to decimal8 v, ?% w; ^9 T+ A7 s
function toDecimal(hexNum)
" g7 y6 k7 U- ]8 ]$ b) R{( G: e: l% ~# Q) a* Z
           var tmp = ""+hexNum.toUpperCase(); A  f& ^  {& D7 K/ a
    while (tmp.length < 6) tmp = "0"+tmp
9 j2 R- H$ e  T9 |           return ((deHex(tmp.substring(0,1)) << 20) +( a8 H2 o; e: a& J7 N" \
                   (deHex(tmp.substring(1,2)) << 16) + 9 ]8 ]% D' C* S6 x7 R. @9 x
            (deHex(tmp.substring(2,3)) << 12) +
! o1 c) P# N" _            (deHex(tmp.substring(3,4)) << 8) +1 G# m" s. V& w& K- |- V7 W  C
            (deHex(tmp.substring(4,5)) << 4) +
' l4 D- i$ J" C* }3 o4 y- U, c                   (deHex(tmp.substring(5,6))))
2 ]& ?) {- r7 O/ R}
1 q* p  c  Y  u+ f- U4 q///////////////////Shimmering Links/////////////////////# y4 q2 v" I8 t" u5 K/ A
//global variables2 O. h- b8 f( h: H) n: o( U) s" D0 I2 v
var hoverColour
+ @1 ]# a' M3 Avar numLinks;
! a2 A9 [1 i0 s1 W9 |+ Gvar rate;
) e! ^. o& B* W) |9 Q' Xvar numFadeLevels;
6 n; |4 p! Z& _  g) Svar bgR;
! ~, q  s, v' fvar bgG;: Y2 |( G) p8 j: ^
var bgB;% S% Q" r/ _4 k5 W
var currR;
3 A2 w" g( N: c0 b3 r  {var currG;9 E( p4 E' ]  g; f( u
var currB;" l  ?3 [1 b- C9 Y3 h; e+ h
var count;. h: J+ C2 M$ a6 m5 a
var fadeOut;' v6 J  x: {, @' z: X& [
var continuous;
/ ]9 h" D& a# P0 O! fvar newColour;
4 Z5 Z7 m, ]( O. J. y1 H) lvar tID;7 w! x' x4 a+ Q$ m( P( S5 z
var redInterval;
' ?8 S( s& Q* a! d: q% k9 }- P8 R- ]var greenInterval;
- U) I$ t4 L; j; L# i1 \% vvar blueInterval;
7 G( \0 I& S: {function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
- o1 B& X' |. B$ w% V$ x. J9 p; G{( R$ K7 |( w* H
        hoverColour = mouseOverColour;
/ ^( h' O6 H5 R1 Y& ?. T        numLinks = numberOfLinks;( z$ x$ T1 q' c# n! u+ g4 V! B
        rate = 1;
% G# G& M2 P2 ~% ~) n/ S) u# x6 C        numFadeLevels = 30;
% ^( Q/ _* a! Z  X" ]        function initArray(theArray, length, val)
+ g* ~& ]8 S& b: R- D$ i        {& N$ d; w- Z& K% M# {
                for(i=0;i<length;i++)% o( T# _0 O' j# D. b/ a
                {
6 F3 ?5 s$ g% b! A                        theArray = val;
4 O2 H% ]! m, Y7 o& c                }2 a  N! C2 `5 q
        }
4 r: R7 Q% _* Y$ M7 f3 W' O8 u* b        bgR = '0000' + fadeOutColour.substring(1,3)
; K2 b- ~( Z! T: E) G. Q        bgG = '0000' + fadeOutColour.substring(3,5)
% m2 r- P: K6 Y" {0 S( q        bgB = '0000' + fadeOutColour.substring(5,7)
1 t$ }6 g$ g- |8 C; q" E        currR = new Array(numLinks);/ M2 B# Z- U' ^0 G
        currG = new Array(numLinks);
7 N" A# B" P7 l        currB = new Array(numLinks);# H. n) c" c7 \# N* ]
        count = new Array(numLinks);" K. e3 ^3 m4 q9 b
        fadeOut = new Array(numLinks);
# n; t+ {6 C0 W$ H5 Q        continuous = new Array(numLinks);
. T) b. r, o" g8 @        newColour = new Array(numLinks);
( q& ]0 t* c8 _) w        tID = new Array(numLinks);
) q3 Q" L/ _* e: {0 H- }1 ]        redInterval = toDecimal(bgR) / numFadeLevels;
, ^" R+ H) o" U        greenInterval = toDecimal(bgG) / numFadeLevels;  p9 V$ C% N2 n; k$ E+ C0 W
        blueInterval = toDecimal(bgB) / numFadeLevels;9 ^9 x1 m0 i! F. e! Q8 [6 E" `
        initArray(currR,numLinks,0);
2 ^% v* a( J0 s& I        initArray(currG,numLinks,0);
% R; s/ [+ J! G4 ^6 N+ z        initArray(currB,numLinks,0);
7 i4 {) @# G9 w9 V        initArray(count,numLinks,0);- {( g' R. r/ @% F4 J
        initArray(fadeOut,numLinks,true);* X" Z7 I# T* w0 m4 y& r; a
        initArray(continuous,numLinks,true);9 g6 H' R4 Q+ c* Q! O3 ^. c9 A5 y! L
}        $ l  `. W8 D+ q4 @  E
function startFade(id)) v& t! }* x* ~: T7 I  ~8 M
{( ^" B4 e: t. [0 [. \
        if(fadeOut[id] == true)& W6 \" N6 U. n. ~) K
        { /*move colour towards background colour (increment)*/* v6 k1 ^0 N3 x' K  G' b4 v
                currR[id] += redInterval;
3 Y/ t- r4 k3 F' @                currG[id] += greenInterval;5 Q; q4 T- n4 |7 N
                currB[id] += blueInterval;. c5 \! P! N8 {1 J" {( i. U
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 ]- e' z) H  U
                if(++count[id] == numFadeLevels). q+ v# Z, l% v
                {: w) n, I; ^$ Y
                        fadeOut[id] = false;
  w8 Z' T# S2 A0 [) i                }* z2 ~- T) K/ X  p* {
        }
/ X+ j" Y$ F6 e        else' ^8 X, d5 N7 M
        {
. l/ `. J$ }5 N                currR[id] -= redInterval;& w/ A# d6 I. M* A# r

$ Y5 S" M- a& v4 P' F! g' P  g& O                currG[id] -= greenInterval;
4 G  ]9 c: T1 P- r2 c5 w( R1 @% u' K) V4 k- w+ N! z
                currB[id] -= blueInterval;3 [; `: Y& a& F# T

; ]+ D6 |. w! k0 T& Z5 ]                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, o9 \2 D9 x# }' y$ g6 V
8 i9 b  @% V8 B6 d; h; H* l' ^
                if(--count[id] == 0)
6 B* {& w. ^5 Q1 V1 d; `- I+ ^# M, A7 V. a! w1 f- k
                {
" |% l6 o1 d  j8 e: A  T' T$ q: t- ~7 x6 Q
                        fadeOut[id] = true;
+ u* t( w3 T6 H$ B/ ]* z% c' M9 @$ n7 k  e$ D5 v, M7 i
                }
3 v, q# `4 T2 |+ z
& S7 D" F0 ^0 T4 V: v& i: x        }
- Z% d5 e2 ?4 V8 L# f1 i
) |  _5 q/ Y) w/ x  S! c1 `        if(continuous[id] == true)1 v' r) B& N- A- O+ [
* [( Q; Y, r+ r* E
        {$ Z4 X# Y6 I6 F
( }0 ?; r, T. g( r& \' z
                document.getElementById(id).style.color = newColour[id];               
3 m7 `9 K( l; ]: x1 v' s3 d: V5 a' A7 W% \7 l: j" I
        }$ `0 W3 t5 n! t6 a

; }) a% i2 N8 @+ p, P7 `+ p        else
; M& [0 \* h2 w( W; z) F9 y7 X+ C: i# Q: W) D
        {
% S+ Q% q! @5 P& I
2 u  w1 z9 G4 x7 W% T1 E/ d6 v* u# K                document.getElementById(id).style.color = hoverColour;  ~5 ~. U+ t0 m' X5 _
2 T, x) \; v' V& {
        }# _8 L, ]* T( G. h% T& O, t& S

7 {; c  E! W1 R        clearTimeout(tID[id]);
" Z: e% o- d, @+ x7 x# e1 m
% d9 t4 l# H! b        tID[id]=setTimeout('startFade(' + id + ')', rate);
, u) W, Q; `+ d. g' X- R* J" f4 m7 |; C3 I- M3 z. b
}3 t0 |+ o# o" B' T6 E  d2 k
! S8 ]9 C6 ~, W+ O8 o
function continueFade(id)
& Q: R# j3 C6 x* y3 q# R
, y3 i5 Z6 o8 D, C+ u2 B{' o1 Z' O7 J8 G; t. [
' H6 T8 |7 K5 ^5 @% D$ U* y. O3 C
        continuous[id] = true;
6 e& N' @/ w+ C5 R  X$ g& O
6 \9 C9 Z$ \! F2 @7 s}  r" C+ m4 \. H! C. U9 k6 S$ |

+ |' i3 Y3 {9 {! kfunction stopFade(id)4 I0 b0 q: w9 ?: j4 H. h

' K+ z' ?8 G" ~' k" ^, }{
& _  x9 Y3 g/ ^6 G
- ~% O/ t) [9 l        continuous[id] = false;
1 |" ]4 c& r6 P, O; N% x5 ]
0 b2 q# y: O( x: W& R( f}' T: B! b4 _0 N4 V7 N8 H2 k, n
# R0 p! P9 [5 S+ B, [1 H  \* L
function StartTimers()
1 m' X% `" t  l! p) p, G! g/ N% h# r4 p6 d
{        //set up an initial set of timers to start the shimmering effect
7 r- I6 f3 }4 R6 w  ~$ X# s/ \% q$ n* o2 W2 d
        for(id=0; id<numLinks; id++)
8 [) u6 H1 w6 @/ p7 l: {# c) O5 e" ?* a( a# z2 M" w. I, f" J& j; T
        {
& e! w) \9 X8 t8 ^5 v4 x4 v0 M+ ?$ U6 S' t0 T8 I' G
                t=setTimeout('startFade(' + id + ')', id*100);, H$ W- q8 b4 ?% D  b, j: h3 b
( @3 f7 _% |. Y1 K
        }
. l( G8 n4 Z' V( B5 s. a5 k1 ~3 j% b, H# z
}) O( u% T3 |; R" b' @% M6 w
# E( h9 A. N! c- \6 Y* U- Z0 t) C
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')$ D8 G1 f; C- F; i- W

/ F9 k$ B- H7 W9 @4 I4 y# ^! MinitLinks('#FF0000', 6, '#FFCC77');
$ F0 y) u  D, J! w8 W
( q$ `% e; C2 J/ g5 P//-->
: j3 Z; X1 ]$ [; {+ K2 G' p1 B( O
2 ^& F/ P, ~* m7 X</script>
. k: n* D7 T; {% O9 c* Y<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
; U8 o  c0 P4 ^7 G</a>$ L) k1 N, B1 x. D6 P# F1 C2 w
<br>
- R( e3 C* f9 k+ E( i<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>( I: E  @% Y- B7 |% U, u
<br>" D5 p# G% Q) F3 L8 d& {0 ^
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>, r: X* ?' E% u( l/ ~
<br>        8 b, Y% b( |: f  r
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>9 e, |& @2 k% y
<br>9 N* h- a. l2 p6 @, j
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
+ m3 F$ ?3 x9 c* b# }* T8 K<br>
! g: K, |" M4 Y1 A' g0 Q8 G<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
/ }: p2 `4 o+ a# f/ v9 [8 m<script language="javascript" type="text/javascript">9 M% c6 ^3 Z% R- t0 w- M! H& l" Q
<!--7 N: E* ]( u$ K# ?# ~) w1 h% W: n8 q7 F
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
! ~# U5 w/ n( ^6 P% d//-->; x. j4 ?- M" @# i2 G& I
</script>