返回列表 发帖

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

<script language="javascript" type="text/javascript">, v  c  `4 u& A6 Y0 }
<!--
7 z2 s" n5 i# ?  e// convert a single digit (0 - 16) into hex
, X. U5 x0 m* N0 l; c3 {& Zfunction enHex(aDigit)
/ |  z/ j7 L9 J% n0 \, K2 c8 f2 @, a6 m{
+ r4 x$ W5 K8 v# O5 d  X5 L" i    return("0123456789ABCDEF".substring(aDigit, aDigit+1))2 f9 z+ V" e9 Z6 X, D! H' a
}
& P( Q, k. C8 f* r- p/ t# u// convert a hex digit into decimal  n2 Z# U$ c/ n/ j7 ^7 L
function deHex(aDigit)' D' {  {; \" |+ s2 f
{  ^3 S( m4 M# v- g; r
    return("0123456789ABCDEF".indexOf(aDigit))
; E5 k2 M4 A5 s) k' p2 l$ o}& ?5 W  A9 d# t/ Q: d: g3 d
  E# ?3 I1 q  B! S" p* R
// Convert a 24bit number to hex# ~3 E4 l- ^+ g2 o2 O1 k1 s0 t
function toHex(n)
1 S: F+ U4 P) L- J{
5 c8 e  ?+ v4 ?/ q+ h1 B( o; I    return (enHex((0xf00000 & n) >> 20) +
. z0 I, T; C0 Y            enHex((0x0f0000 & n) >> 16) +) W# J& F; l, a7 ^' K2 ]) y
            enHex((0x00f000 & n) >> 12) +0 T' {8 z- l! G7 |9 m
            enHex((0x000f00 & n) >>  8) +
' v& n& f! A. M/ U& r2 a5 B! h            enHex((0x0000f0 & n) >>  4) +
" `: K, J& Q, u( S( P6 k0 M            enHex((0x00000f & n) >>  0))
; @0 d" {" I: m* d# Q}7 _. A# ?; a) K  K/ O5 n- p" p
// Convert a six character hex to decimal
% Q! L# F0 k2 u& @+ d# o: Ifunction toDecimal(hexNum)( N4 `4 U5 Q0 M# m
{
: b  U) V+ I6 j: F4 o7 }! O! x           var tmp = ""+hexNum.toUpperCase()* }; e; K1 a/ x" L, \
    while (tmp.length < 6) tmp = "0"+tmp. z  N: j- F7 M2 L$ J2 i$ g
           return ((deHex(tmp.substring(0,1)) << 20) +: S9 C' c4 j+ P. a( z0 N, |
                   (deHex(tmp.substring(1,2)) << 16) +
9 U4 C" q1 y+ t; K& t% f; o, v            (deHex(tmp.substring(2,3)) << 12) +
! R9 G9 m3 c. O: ?, B            (deHex(tmp.substring(3,4)) << 8) +" e# X, a2 C5 _" x6 X
            (deHex(tmp.substring(4,5)) << 4) +, l: N3 K( [1 I+ e
                   (deHex(tmp.substring(5,6))))( G% J3 L# l! i
}
, U7 ~# i* h9 i8 g, B1 F3 o///////////////////Shimmering Links/////////////////////
0 I0 P! K- _9 m  d  f& K//global variables7 U1 A. C; i7 d! b4 y0 Y1 z
var hoverColour
" N# {% \9 m' V' Q- Cvar numLinks;: J  i# X9 p7 Z: Z/ Q9 j9 o
var rate;6 N8 r: V* S0 B3 |/ L' ~
var numFadeLevels;+ Y/ \" _. I; T8 r# X: }/ ]
var bgR;
& t3 A4 i& ]& W4 Svar bgG;
$ M$ ~7 v0 f2 k9 A% V+ d/ Uvar bgB;
! K$ y1 k7 Q' W2 ?var currR;
6 n& X9 m4 y6 F( fvar currG;. F2 e2 ^9 x0 c* q* l
var currB;
2 _$ z" i, F8 C* u7 h1 b, X: d2 [var count;8 L( g) ^) N' B
var fadeOut;
; N! T5 t1 r) D. k$ K2 N$ j' {var continuous;
  z4 U' d+ n, j) G: D% i) J" q7 Evar newColour;" g  n1 x# Q4 Q
var tID;
. `  M: x5 O, v4 ?+ f% C' qvar redInterval;+ z/ ^, F) e$ f. `
var greenInterval;2 X$ J; {# J; y6 y3 ^
var blueInterval;
; A/ x- c1 R1 ?  \function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)$ R' u/ n0 h) \- m* E1 E# B
{9 M* I# `4 ^7 R0 |( I6 q' ]
        hoverColour = mouseOverColour;' {% k& P3 u+ s: I* B5 ^2 b9 H
        numLinks = numberOfLinks;
# D) N: B! ^! @        rate = 1;, y- F" X  T! v3 W3 `  c6 ~. P/ x/ g
        numFadeLevels = 30;
6 j; O+ c* {- [+ N0 j) C9 o) Z        function initArray(theArray, length, val)( v+ I8 r8 D5 ?
        {5 L% d* t* e5 c+ S; X. E
                for(i=0;i<length;i++)/ u- M5 H& u. j7 |8 N/ v
                {
, w0 r% {( z. l- w" R* o0 f% y8 W% G                        theArray = val;+ v- j- l, F% P, C- Z& Q
                }8 m- l7 B- R. ?( T' z( E# e
        }
+ q! T2 P; _* W# T7 U        bgR = '0000' + fadeOutColour.substring(1,3)
; R6 p( M+ `9 o1 c        bgG = '0000' + fadeOutColour.substring(3,5)
) m$ D* ]0 c+ }9 R  m* H        bgB = '0000' + fadeOutColour.substring(5,7)' K  T6 I- {9 [
        currR = new Array(numLinks);
# J& k9 e: b) a" q1 J% I        currG = new Array(numLinks);
5 o2 K8 V3 w) G% a5 r% [% h4 t9 V        currB = new Array(numLinks);
# M# v4 Z2 K$ ?; m        count = new Array(numLinks);
0 O6 l1 Y; Q5 s. g, v& j4 z# k        fadeOut = new Array(numLinks);
: M+ y$ D' B- v6 T% y        continuous = new Array(numLinks);! G$ c# [& _4 L" q5 S+ O
        newColour = new Array(numLinks);
" r/ r. j: s# x1 b. N1 z6 P        tID = new Array(numLinks);7 p; ?7 r  @$ D  u0 P2 y1 t# z2 \
        redInterval = toDecimal(bgR) / numFadeLevels;
  x" j4 |. y& q- E- D# y( p        greenInterval = toDecimal(bgG) / numFadeLevels;  t2 v6 I2 c. b% B$ S* s
        blueInterval = toDecimal(bgB) / numFadeLevels;! H6 V/ d7 z, c% _
        initArray(currR,numLinks,0);3 w( `2 y1 b' d! O- t
        initArray(currG,numLinks,0);" p; Q2 y! l" A/ f% p+ K0 ?- r
        initArray(currB,numLinks,0);
+ z& L  h5 J) B1 o        initArray(count,numLinks,0);
6 f9 N6 M; X4 ?  R+ q/ {        initArray(fadeOut,numLinks,true);
% D; M/ W, }8 m        initArray(continuous,numLinks,true);
: g5 U  f6 |* H% ~6 \/ s}       
, v% ~: t" l( s: W+ S" h6 {# Vfunction startFade(id)
: c" z0 a$ s4 H: [8 z/ g{0 ^0 L, c+ g, _' S1 T, _
        if(fadeOut[id] == true)- ^6 q9 G8 d/ S* Z. Z- ~( I
        { /*move colour towards background colour (increment)*/" L! I: O: ?5 X' U& S* c6 }4 x$ E
                currR[id] += redInterval;
/ W( J  l* }2 r( n0 I$ T                currG[id] += greenInterval;& {3 \1 d  q- H; z6 i2 t4 ]
                currB[id] += blueInterval;
" A6 X- m9 @9 N  {                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
2 k6 c/ F+ J0 g- q                if(++count[id] == numFadeLevels)# t7 E5 Z% n. o, L# ^( G! v8 R
                {9 m! m( }1 N1 r2 A$ c9 u* ?) Y
                        fadeOut[id] = false;1 r' A) }! p5 q
                }
& T! j+ z4 O2 Z+ i9 m        }8 B0 [3 l% P0 U
        else' K. |* ^; C+ T
        {
/ q0 X9 Z; t" L                currR[id] -= redInterval;9 e7 }9 `  T/ H$ v" W8 Z

* C. M3 ~5 Q4 E7 e% `8 u                currG[id] -= greenInterval;6 B: J3 _! r: {% n
" b' E3 N9 |, ]! p3 r( i* E
                currB[id] -= blueInterval;
& Z( L6 L1 r8 W1 f: q
3 {3 E9 _! @1 ]6 z6 Q                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);, }, S$ x+ R! i0 f5 Q7 h# B
2 f) J" R% }/ Y) O) A
                if(--count[id] == 0), R+ f% q" k9 `' A; t; T

, \2 q( p0 D8 J- e% J& G" u                {' e6 O* w3 ~* ?2 G; c& Q& @0 E6 d
3 c* ^6 C0 R; o
                        fadeOut[id] = true;8 U4 R1 Y( I* N1 _
( d# `: I% H6 h, F" g6 n
                }) M0 b. v! e1 u: c

  Q/ p: b0 e; A1 t2 L        }
* o0 n: l" a: q( p
9 H/ N5 N; O1 l9 E5 g" D: g        if(continuous[id] == true)
( g. a8 }  Y9 q. k1 X+ I+ [5 [) G& m& n
        {
5 x. z& ]+ e, Q8 U" V! C0 \) F# l& X, @3 c" W0 N* Z% p$ l
                document.getElementById(id).style.color = newColour[id];               
; ]0 I, K, d% J' T0 u8 @" J
/ o) ^6 [3 i1 p        }
' N+ v3 s8 j6 S& C5 M- }  Z/ A
* B& l* ]' Z/ p) E        else: l4 ^7 {- x: U) g2 H5 ^

7 |! G. x, Q  Y5 o        {
/ U) d$ O4 o( g% k! y$ K/ ]
  Q& J3 K& t3 v; m: E: ^3 t                document.getElementById(id).style.color = hoverColour;9 s6 d9 @2 _4 l# T1 D

7 j+ s$ i* ?  @3 G8 W        }. D- Q) y6 R- U1 A/ q# U
# J2 B2 \4 Z. a& L2 M- @; M$ d& {
        clearTimeout(tID[id]);, S1 Y; T, d4 T$ H& x

" n9 {4 [* `) N8 @        tID[id]=setTimeout('startFade(' + id + ')', rate);
8 n- Y+ B% Z2 O; Q; n* y# a8 ]& R0 [! F- T
}& y+ H8 H" y! ^) S
2 S/ d6 F3 Z: Q9 r2 I4 h
function continueFade(id)* V) \: u- ?6 a' I
$ W1 F) r/ k" R7 C6 S+ X. ~( b/ Y
{
) [" j  I$ c7 V
0 p2 l! A0 `: E# D& u+ n" L        continuous[id] = true;5 T, V7 c$ V  \! Y! D5 ~5 t

' _4 y, Y6 y/ I4 |5 `2 {3 P7 v}) O* T" ~6 Y( c! w) v: g7 m% s
* v1 g  x* {" b
function stopFade(id)$ J% p0 F; I* a2 \1 Q: s

( Z9 \. V$ J- M6 ?" Y{2 d  P8 P0 r! q

  [7 P; G- y; ]3 A  x        continuous[id] = false;! w2 ~9 f4 t# L# o& F. E' }- d

4 D! s4 |' [% M8 r: V* H. p  G}
, {7 f8 W, h& r; r
$ k! k7 p- g8 @. pfunction StartTimers(); m7 |0 v+ S$ a) \1 p+ ]

/ l* `. P, v5 _4 C{        //set up an initial set of timers to start the shimmering effect! b  h8 `2 k8 q; V

' ]% r* \9 ^: {: K9 C% O( V        for(id=0; id<numLinks; id++)
$ n5 _) j; k# o
5 G9 u5 _, K0 `; ^; J2 Z        {
: |* a$ B; }& m$ U/ r
3 d: E; }# ]: k" k, W8 Z, T                t=setTimeout('startFade(' + id + ')', id*100);
2 s0 K9 M" w/ j2 P9 u) d
( D5 N0 w* b. ^4 ]2 z! e: V1 Q        }1 }; q& u& A) [' i7 K2 u
: X- ~' I6 |0 p. h6 M( Q: z
}/ b, h1 a( B# {' s6 X' T" W4 r
! @( ]2 A, M, B
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')) t- \: P0 u5 X5 p9 E) Z7 `

7 f  J  [" z  b2 V! |initLinks('#FF0000', 6, '#FFCC77');
  O" g+ }0 }/ E7 Q1 M3 G0 B: _
3 @5 l# b0 p% d$ s/ W, m" I//-->, t- _& [( D6 g; X, s* a
1 W3 K! b: U% S" ?/ |  V" J
</script>( b# \& \7 S1 _7 ]3 k
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
7 U: C6 \, |! F3 A- {  f</a>
  j2 B- B% B, ]3 d" l; |<br>8 l/ a2 B9 g* {
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
6 I1 U6 j! I: r1 I& C+ O. Q3 [1 h<br>
1 r. l: O1 Y. T: P$ g' D<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
1 t5 P! A* E$ z3 }5 I1 y<br>        4 g* S( Q' v4 P% Q/ K0 P- F: w
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># v1 L( O5 N+ x) ]; G1 h
<br>( h; t, U$ |6 {8 J; U9 P
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
; I! g, ]4 m* C( M4 }8 v$ ?: k8 t" ^<br>* k; O' V7 d# e7 I2 y1 U$ T3 E3 Z
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 {. n2 d9 S  D/ r4 V' r% d4 p
<script language="javascript" type="text/javascript">0 b. ?1 f2 C/ C9 O+ g3 B
<!--
: c5 C: m  U! L6 T9 y* Q' msetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering; p( \. A7 Q0 J! `) A; r
//-->
5 j( t: M' R: z2 b1 Q5 W" W8 e$ N</script>

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