返回列表 发帖

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

<script language="javascript" type="text/javascript">
- U0 y8 T; n/ g* w: Z6 Y<!--  ]( p* d. f( ~' h  k
// convert a single digit (0 - 16) into hex. ]' v$ D: t! A
function enHex(aDigit)
2 [& a! F  j- z- e{
. d& f$ e( J. D. p& ?" J/ B    return("0123456789ABCDEF".substring(aDigit, aDigit+1)), ^* P1 W/ m# C- j  a! A" a9 V* j
}
  ]) ?) g$ z# U! P// convert a hex digit into decimal
3 a2 q' c$ U3 e( f8 yfunction deHex(aDigit)7 Z, Z6 m" Q* v) ~. \6 K; ?
{1 ?+ p9 b  `: y+ E5 G
    return("0123456789ABCDEF".indexOf(aDigit)): X  T( N3 R* d2 R
}
/ r# v# I: A' x/ q+ V; F# K
! L, _( @# J3 n  m6 e// Convert a 24bit number to hex2 I6 ]4 g6 d2 [# o( x
function toHex(n): C# u0 P& e* o- v* [
{
( k$ G  ], O0 @7 \' U" D4 @    return (enHex((0xf00000 & n) >> 20) +
: m! r6 |0 U0 Z% O; m3 o9 J0 r            enHex((0x0f0000 & n) >> 16) +
6 P8 s" m- ~( H5 E* C7 `% ]+ m            enHex((0x00f000 & n) >> 12) +
& x  |5 f7 ]8 r' ^# P- F+ J/ v- N            enHex((0x000f00 & n) >>  8) +
4 Q$ U8 i4 x3 r) f6 Y$ n! N$ @            enHex((0x0000f0 & n) >>  4) +
$ ~) a! H( D6 R            enHex((0x00000f & n) >>  0))# l3 `1 l+ F. r- F- b
}% n( X9 y( u# q9 D
// Convert a six character hex to decimal6 H' |: \8 z) U; ~+ I$ J
function toDecimal(hexNum)4 q# \& J0 o/ S! A1 z7 F/ ^
{
( G3 h' N8 J! Y: `  m           var tmp = ""+hexNum.toUpperCase()) ~! M" V. b0 v
    while (tmp.length < 6) tmp = "0"+tmp
* Z3 h; _' V# v; r. V, p: F           return ((deHex(tmp.substring(0,1)) << 20) +2 A6 J3 p" M; T1 d' I; a) K* W
                   (deHex(tmp.substring(1,2)) << 16) +
' r" X7 Z' o8 Q) e, s7 U. d" c$ H            (deHex(tmp.substring(2,3)) << 12) +/ b6 {) i7 e1 s6 Q7 S" q
            (deHex(tmp.substring(3,4)) << 8) +
" c( D. J! s# v% H# r7 w8 x( `" w9 T" s            (deHex(tmp.substring(4,5)) << 4) +- |" i, B5 ]$ d$ L" ]8 n
                   (deHex(tmp.substring(5,6))))7 I% R/ U3 V7 m% |6 m
}3 d9 H% t0 Z7 K, I" n4 {
///////////////////Shimmering Links/////////////////////4 l  A0 n& ?1 g1 G2 y( q! _+ m& q3 G
//global variables* H# D# M! Y6 }8 c4 \
var hoverColour
( l; p6 @( ^: u4 ^7 _6 vvar numLinks;
+ t. Y: M" {, l' P0 F8 hvar rate;
3 Y" @" a& F% n0 Uvar numFadeLevels;
" ]1 A! n7 v1 j, X9 ~var bgR;
. _( x  M; Y0 S3 Mvar bgG;
6 V  _- J7 C, F1 H8 Tvar bgB;
7 h7 \+ w- e4 j7 c5 v/ n5 Nvar currR;, V* D$ l$ X# P3 `: q+ S
var currG;4 c4 Y* i/ u0 R# r3 w
var currB;) N$ D8 x! z0 z& @* o5 J3 r9 V
var count;
0 m, T; f0 B' T: j8 wvar fadeOut;
( Z( e" J1 t% d8 v: B# Cvar continuous;, _2 w' v, q6 @$ p6 @7 a
var newColour;
$ M& z; ^( Q9 M$ B/ v5 k7 ?var tID;
+ t3 z% k: v0 h' u& U6 H' `( _$ r5 ovar redInterval;
6 D9 ~  o/ ]9 dvar greenInterval;3 |+ P5 s) k3 }3 r- V
var blueInterval;
6 |9 f; `5 v9 {! Z1 s( \  h1 Afunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
0 B/ B; P9 _! w. q{
9 P- w% s' G. a) Y2 y        hoverColour = mouseOverColour;
1 H4 R% j" a1 ~7 i        numLinks = numberOfLinks;
3 b/ a1 @! y4 N0 ?5 d1 I8 m        rate = 1;0 ]% \, j" J; c/ r) F5 p
        numFadeLevels = 30;" x! m: Z6 e: N- b6 c0 A
        function initArray(theArray, length, val); v. e7 ^1 [( z5 `" j1 {
        {
, M4 u% H  [# X+ ]" w                for(i=0;i<length;i++)0 Q# i. E' C9 [* K; {
                {/ |) ]: D$ @6 X) d* i- o
                        theArray = val;
6 U/ y9 j+ H" j' U! S! ?+ }1 X; B+ U                }* d- |8 i0 f9 n$ i: P" Y
        }
# y3 J5 t0 x% g8 z4 j4 U$ W$ ~        bgR = '0000' + fadeOutColour.substring(1,3)9 l4 ]2 @, ?, t
        bgG = '0000' + fadeOutColour.substring(3,5)0 p) L# H( Q2 F: m
        bgB = '0000' + fadeOutColour.substring(5,7)2 Z" N$ e9 D& l0 H( M
        currR = new Array(numLinks);
5 N  Z& }" K" }        currG = new Array(numLinks);7 e5 a- E+ U1 G5 P; e- O% w; w
        currB = new Array(numLinks);
: {, X- s3 B! a( \/ i6 v        count = new Array(numLinks);/ N% w# Z! ~4 @0 }: U3 b# c( y
        fadeOut = new Array(numLinks);# I. \4 i8 D- D  p( T  c( o- O
        continuous = new Array(numLinks);
% }& l! W2 d) c- y. B$ {        newColour = new Array(numLinks);. x9 B2 F5 i6 C8 `
        tID = new Array(numLinks);
  S! l- d# N% |/ `  L) o/ ^        redInterval = toDecimal(bgR) / numFadeLevels;
7 d  a0 x( V6 J" u7 Q8 ?+ {        greenInterval = toDecimal(bgG) / numFadeLevels;
6 y; T! _1 k5 L. B8 Y' L8 A        blueInterval = toDecimal(bgB) / numFadeLevels;) E, C) E7 }1 _& _8 m2 |1 P+ w
        initArray(currR,numLinks,0);8 b$ h7 d" C, K8 b3 ]4 t5 z
        initArray(currG,numLinks,0);
; `1 y: M  q* p" K        initArray(currB,numLinks,0);  `0 `; V" g; n% ?- E
        initArray(count,numLinks,0);: c7 {9 @' P% i8 x
        initArray(fadeOut,numLinks,true);4 J! W! p) V* g: R; w+ F
        initArray(continuous,numLinks,true);/ B+ x( L+ ?! X8 t* |" v4 H
}        , M* B0 b, \6 P4 F1 }& h+ v
function startFade(id)0 d7 X4 k3 Q* l" b, b4 c9 e
{  H$ t; E0 E1 ^( S3 |# o+ t
        if(fadeOut[id] == true). `, [- F2 h2 ], j: N
        { /*move colour towards background colour (increment)*/
0 O8 N- H4 g) m* a8 J+ m                currR[id] += redInterval;
) g- {  J# i: V3 @' @5 Q( h                currG[id] += greenInterval;  v6 p; y1 _% Q
                currB[id] += blueInterval;9 Z7 v( p4 s# E" d
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);2 ?  g5 n: j! ~% h6 m4 ~
                if(++count[id] == numFadeLevels)7 d3 l) L' I; B% [9 v; s9 A0 B
                {
1 a1 p+ U$ H& ~$ r" I2 _$ L1 g                        fadeOut[id] = false;
4 X: v: C/ ^& ~/ k                }
" g% ]- y  h9 L. |  s        }  S% Z2 Z+ m* X7 b# ?
        else/ ?  |- ?' A) B$ {
        {
% A! \* F0 J$ W4 t" e5 ]                currR[id] -= redInterval;
# g9 \7 K+ Y( o7 }4 m
) l. s- n: j6 O- e4 d- `! j0 q. x                currG[id] -= greenInterval;
0 _6 T9 o( t6 v7 `) `0 [2 E9 H4 ]$ |5 E; A
                currB[id] -= blueInterval;
0 x2 h1 p9 v, @; d0 V' q: s$ b# i6 @3 J5 F* `. @& V
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 s  S9 c8 Y, ?3 r  @3 ?* z) S& G3 h) b- j
                if(--count[id] == 0)1 B3 o9 j* O3 H/ K2 B) p, g- x7 V
5 B! y% u: W& u: {3 ^
                {" \7 \! ]$ r6 I5 R& G3 {

: K( I" B$ ]" o! ?1 F: z+ N                        fadeOut[id] = true;7 h$ v& n" |' v! Q" [

- c1 f1 ~: |+ o: i8 O6 x                }
; T5 ?) v- [; g5 D* J+ g- W+ h% d) w6 b0 a* W
        }' Y- U/ P7 \8 d3 ^& P3 z2 S, ?1 V

3 Z% Q* M) r5 c- M        if(continuous[id] == true)+ e. Y. v$ h  |) L- d9 I
5 R* T7 ], Z9 v
        {# t' S7 Y1 g2 v! |# R5 w
& L& Y! U4 _9 D0 o
                document.getElementById(id).style.color = newColour[id];               
: O- w  c6 m) b; E5 }) C5 c. p& T1 R% g7 E, W
        }3 Q4 a9 P: ^" j! G( S4 Z' m3 L

, ^! g, }$ j. }* @/ v% ~/ ?        else  B- x* C. h" R; ~

. v/ R9 V$ x$ Q* U        {
1 {# z3 V  l( Z3 o/ F% @. h6 x( m
' A- x9 t1 r( c! T  q                document.getElementById(id).style.color = hoverColour;
7 j* s% z8 W/ c( h, \
/ G% [- o! y* {! v7 K        }9 v4 a  N5 F5 B, ^9 I3 \; c! _

8 f: z2 H6 Q  N2 b9 R8 A3 ~        clearTimeout(tID[id]);
" f7 l3 B7 ?3 P$ z) t
) {* H( }5 ~0 }1 ~        tID[id]=setTimeout('startFade(' + id + ')', rate);
% z. y+ m% D7 X9 m) X2 {( u0 U; o3 v" g
}. J% Y; d8 W! i2 p
! A6 x$ R0 g( Z$ H% ?. ?8 M# Y
function continueFade(id)
4 }& w( G# e5 W# h( K
4 w: Y2 ^& ?9 ]  W+ K{9 D: L8 r, j+ \5 f+ [: {! Q/ [- i

" r9 e+ H$ F" \$ l        continuous[id] = true;. R( f: P5 u& {4 i2 Y( a: A

' z2 F# I  K3 |4 G1 p}$ g" u8 O: M5 i) c& X# V
. d, ~; m3 L# P8 @7 b5 r, `
function stopFade(id)/ b$ P2 ]  k' ?9 _3 S7 H9 _% ]3 D
( i8 g  n& p" H; Q
{; w6 D/ y7 s% w5 M$ I

  A6 j* d: m) d6 j) g/ y- j        continuous[id] = false;
8 m+ ?9 F+ B9 _6 l/ I9 t
3 _) _- H" y1 ^  U, l}
- a3 Z8 P) K8 b/ F' S9 N$ N5 J! g  z; O7 `! z
function StartTimers()& b  m% {+ W- i+ W$ R4 {7 T

0 `# }  G  N% B% \; I9 O& F8 h! i  i{        //set up an initial set of timers to start the shimmering effect4 O# X5 }( l6 a+ Y2 X
  H# ^4 W( A1 [( }5 y$ ~
        for(id=0; id<numLinks; id++)9 s) c& x- `( ?2 Y* S  z
( x7 T: r% }( m( r  f8 {- p
        {
; m, [5 z# \% _. }5 q
; C5 n! s, P6 d, m                t=setTimeout('startFade(' + id + ')', id*100);
% a" N! ?- b# |* x7 J3 B& w. C5 f
        }$ a) V8 [1 X8 @" }- X) m

' t; P. C1 y# S7 k5 ^}
) K9 V) x& [2 Q) D" Q9 x/ f  r
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
/ Z) @0 c; C7 s" u5 |& ]4 s5 A# T2 U1 d9 d
initLinks('#FF0000', 6, '#FFCC77');, l" q. {) E& _5 n
5 _$ k! \. \: E5 J% J
//-->
; N" W8 A  Q* I% H" V; g1 D  t" d* S+ J+ m# N" T4 x
</script>
  o( U3 d/ Q  O<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
2 Q4 ?! W% d! N9 h. B</a>
2 M7 N2 g$ p* M, h. r4 F9 y<br>
) b; a+ r  t- \# S# f- b8 ]<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
4 T7 T. o; g1 M5 Y4 x<br>
- T' K) t! a) K8 D% w) @$ J, e<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
% Q5 _( U* y+ ^9 M: L<br>       
9 C' y* G! j: f. r9 d2 r<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
2 H  f7 u! m6 S) e8 r, X<br>
( E( c& g% e& W<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>, q! k3 r1 }. ~1 R2 u
<br>
0 \- F. M+ i4 z$ ^1 z5 ~' D2 k<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 F# l& E. L* P7 E+ R7 n$ J
<script language="javascript" type="text/javascript">& p, ^4 Z% r+ `) o" J
<!--
2 `' N1 {- F* I/ m. G4 q: s: psetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
' ~5 [0 Y8 ]$ {: E4 L, @& d//-->
7 V% `2 J- b. `; W5 k</script>

返回列表
【捌玖网络】已经运行: