捌玖网络工作室 » 网页编程 » 网页之文字的循环闪动特效

zw2004 发表于 2008-1-21 20:48

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

<script language="javascript" type="text/javascript">
#MKFV+G,Y <!--2N8l!T{3F
// convert a single digit (0 - 16) into hex
w~he |)?1a function enHex(aDigit)){E;J;H
a7?#s'l b
{C RE-V/m yX
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
5Sm)})`Gz:? h4~G!L }
@q1[%z,VCC // convert a hex digit into decimal
"L6?q,\lcG(I function deHex(aDigit)
E5fsJ%z
[g4`D {
7ds4I)z8L'g`     return("0123456789ABCDEF".indexOf(aDigit))AS[%iv:}z
}
'\ k]A$zcML
Gqc6Q-Z6Y // Convert a 24bit number to hex
.|E'dw[,L6H,R}? function toHex(n),l$_6P+~T?
{
P(dU H.fQ     return (enHex((0xf00000 & n) >> 20) +
$u:O/MR,E M8QN-H             enHex((0x0f0000 & n) >> 16) +!~(J&h(x0F2S e~v_2v
            enHex((0x00f000 & n) >> 12) +
;Cs9UP!y2O\(Qif             enHex((0x000f00 & n) >>  8) +fi,er*o"Q3dt ]3`
            enHex((0x0000f0 & n) >>  4) +
{/I Wet"t C*Lx             enHex((0x00000f & n) >>  0))M/X'k*g!T8Y
}hDi/~!N
// Convert a six character hex to decimal
]](d)@.c:W function toDecimal(hexNum) fp7@'}gR*k7ep
{
2nsP$vl1b            var tmp = ""+hexNum.toUpperCase()~'lhd%A
    while (tmp.length < 6) tmp = "0"+tmp
$x2r,s/t}E^            return ((deHex(tmp.substring(0,1)) << 20) +
!b g{)x:t                    (deHex(tmp.substring(1,2)) << 16) +
@a3LS'o0L:N!A             (deHex(tmp.substring(2,3)) << 12) +0@E.hfiq
            (deHex(tmp.substring(3,4)) << 8) +p&htj:cy3c?;H
            (deHex(tmp.substring(4,5)) << 4) +0n#u&NB(c~ t/B
                   (deHex(tmp.substring(5,6))))f'XyLZ;S
}
pX&TF3psK!_ ///////////////////Shimmering Links/////////////////////
0jD+@+`I$TE //global variables
mM.v*{i var hoverColour7X ]NK`9D0Q^qAT
var numLinks;
6Ihs^"TkF var rate;`\/p%b!j DC
q
var numFadeLevels;U.|3?$LS:yc\[
var bgR;
L&B4{,PN8iC:P5` var bgG;
Ko8`"HI2b(@ var bgB;W]+ur.Cis
var currR;/KQF0s5k&y(z
var currG;
#v5i-]*Cg:{"T j?+iU var currB;
C$U @K
ApL3k0C var count;
.d/bq!g$}lJ$t,NU#Z2p var fadeOut;t |{5V(ea
var continuous;kM[Q^(LY
var newColour;v,d^*v+xD5k\ r7G
var tID;
]q*v.O.]7cV/_ var redInterval;H:K~g7r\ s2E/n
var greenInterval;
G4K"G,P(u-I
^$eA9n var blueInterval;-@ S7qt+U
}1`
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)O;Mtu2r5f"f3C`
{WLo/X||Nx
        hoverColour = mouseOverColour;
Q%uaO g0c+G         numLinks = numberOfLinks;
G)}4A_*x
B         rate = 1;c q$h4cy*q L
        numFadeLevels = 30;.S)DRN9]/d w
        function initArray(theArray, length, val)5S$w!gn e:Wf
E
        {
eI#[ B
Cz                 for(i=0;i<length;i++)o5o;Gv^Mll6g
                {
i7oMW-h;FVC-NM                         theArray[i] = val;
.pL4TT| Y*B0^0o7Y                 }7uK4n8v5_"j/j\
        }
t'r:yf!S!GA
W(g         bgR = '0000' + fadeOutColour.substring(1,3)p-Ri#G9L P
        bgG = '0000' + fadeOutColour.substring(3,5);?QW+ABP9M$t
        bgB = '0000' + fadeOutColour.substring(5,7)
9E2?,YT,q,P/N)n         currR = new Array(numLinks);
.h9_X``T$b         currG = new Array(numLinks);
m w+Zm3fds.jy         currB = new Array(numLinks);
'w4U RoNEl M2}
A?         count = new Array(numLinks);6[Y1L;?#s5PL+y Ef%z
        fadeOut = new Array(numLinks);
3bC^Yw4V8\         continuous = new Array(numLinks);*IT@Y#b7L
        newColour = new Array(numLinks);{_-Vl'X/sf4tq
        tID = new Array(numLinks);6bAK(R,W|`^
        redInterval = toDecimal(bgR) / numFadeLevels;j+Y%d1kq o ]
        greenInterval = toDecimal(bgG) / numFadeLevels;0ZVdUW"h}
        blueInterval = toDecimal(bgB) / numFadeLevels;
5K ^~%QZ.mtk         initArray(currR,numLinks,0);
z4^oM-{.M,h@         initArray(currG,numLinks,0);
]"_,c!}w         initArray(currB,numLinks,0);
%T8V;_7|[\         initArray(count,numLinks,0);
1o0@~r V         initArray(fadeOut,numLinks,true);
T6}2K4M2]         initArray(continuous,numLinks,true);
.B8j}H5h d3l ZNY:@ }        WFd)I$|YR`7S
function startFade(id) N.e$kp XG;N+t(f^
{
H.mM;E/T$] O6ZB'rGk         if(fadeOut[id] == true)$x m#T'siS-Q$w
        { /*move colour towards background colour (increment)*/Z5QM] Z4DOsAa*i
                currR[id] += redInterval;
wo0G/fB;TTk nn/|                 currG[id] += greenInterval;
:fe#bB[7S)r.WP                 currB[id] += blueInterval;
~;M#L1f1rTF1v?
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);4]e`?[6u&Mc
                if(++count[id] == numFadeLevels)
xWp[4H5L Yi                 {
"j8QL/Q:~'P pZ k                         fadeOut[id] = false;['V E$`U
                }5\:`"u]
Ra$Y P|
        }n3NY#}%hr5v[^
        else MV*Qu kMw
        {
9rpqJhR                 currR[id] -= redInterval;7T$eL#clZ&}dH@

8PR/x(\ a L                 currG[id] -= greenInterval;
/xP POCL ~L^2A3v+Z n4s
K;y
                currB[id] -= blueInterval;^3g)L,H#n }L+[
*lLP[ x7g
                newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
vj }1P.D`d
,IiS7e8|Y                 if(--count[id] == 0)
#f)w S
R7ZJ-r
/c(T
X!R$T%r;EC                 {*QU Sk
Y J&O+w^'o
cA+^U_ xZ.mT
                        fadeOut[id] = true;)kQ/M:h&a"U'\R

F${*b2Z f;~_S(i                 }
`xT)^g
^#V!w[y@)pc         }
X&o_C"v~ W
X_+z(|q-aU+B
        if(continuous[id] == true)i5_+G]7M|+F\

"aM;wc!O`"C Fx         {
O3A0G"Xf,O;d)? +l:q,UE;KT
                document.getElementById(id).style.color = newColour[id];               
8fr*t#S"x'SYV

_3J-f1N6[OU         }}Z2~m
s/Qj6G
gDUJ6d
        elseso3m8kM

k?4}1T:a\3v         {
!c:KS.L0Ux+y
_"z+_'@}
E"y                 document.getElementById(id).style.color = hoverColour;
'Iqs/f?"t M.t ZJ%Ns
        }
Upyp#Z|+L+C
;PVS:f,p+U5`Bs8Cw         clearTimeout(tID[id]);
E?c a/D4S *{E+{"y{,K%L*E8Sh.J(hx
        tID[id]=setTimeout('startFade(' + id + ')', rate);D/lXt2?2f0x8]T
Tu,YE1aF(?fK
}5[H(ZS0?ZC

8y)m'th
V/^E(g function continueFade(id)%p])cEZS4\O7J
.aR2x2[c
{(u1M%|/rj2A%n@
1m
d;WBjX q
        continuous[id] = true;NHc t
w%e
G5E-F0rvF
}Fc%aF"|,S,EN+f
)s5Yk.I9F
function stopFade(id)8ld2f7MY-SWk(`nAJ/S%_
w,`8tR`|(n
{
7J(iut#b9I tUA)h
.@Kg iu&Y;?|         continuous[id] = false;
6gQ[/bf:I N8AH C%nr.qu aN
}c.O wPRL0e
#v`hPg
function StartTimers()
Q0Rq!{gV5g4ml
$B4K-|A q'i_+m] s {        //set up an initial set of timers to start the shimmering effect
|9u#f2h,Z ]#kt
t*{/Y"?)`mT-Q         for(id=0; id<numLinks; id++)
U!\ z!j#R SWB k~agPdj
        {
!]C$N3`2P K!w4lV B@m ]wt:[;o,l-?
                t=setTimeout('startFade(' + id + ')', id*100);
M`*R8~-p
%v
Mj*Lu0Y1f         }
6dA`(SR^ sT IGz3MEk-w
}"ue YN%cP!S


bW,R?SUv:| I //format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
Ik!q9SC XkA:a
!R{!i |Zo _ initLinks('#FF0000', 6, '#FFCC77');
$e)FM-B7x*Tf6a H
.wc#^ r9AZ }%b)s7W //-->s{'Phy{C"]"S
.j!U8A'f^
</script> Ua"Yfg!|
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
O|:{]e8G%g </a>&BhA`'K,g5n4{"v
<br>
^R4V\N:\"\ <a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
;gA8@lX4t3JEx <br>
l$~D(}l$rj4~"tz <a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
7l4h&Y6vIo;j8W,}O <br>        [4eY y*gBh4\
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
sY Z_,a <br>
-gM\o"y(_Sf <a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
2C,O)vDJ}xE:B <br>N;{L0Jac7t}
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>T3qiD9TPHL
<script language="javascript" type="text/javascript">

z4@ yvO6v+oj <!--W+G*r2A;?,Y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
z/Ad6I5Vo j
//-->
1D1VoE;g5i#l </script>

查看完整版本: 网页之文字的循环闪动特效