用javascript实现文本的淡入淡出效果
作者：Hily 原始链接：http://hily.me/blog/2006/08/javascript-fade-in-out/
版权声明：可以转载，转载时务必以超链接形式标明文章原始出处和作者信息及版权声明
主要是对RGB三色进行均匀地递增和递减,写起来比较简单:)
<html>
<head>
<title> Fade In and Fade Out </title>
<script type="text/javascript">
<!--var colorIn='#0f0'; // 淡入颜色
var colorOut='#0080c0'; // 淡出颜色
var dur=5; // 淡入淡出步数// 淡入淡出函数
function fade(id,c1,c2){
var txt=document.getElementById(id);
var ri=sprRGB(c1,0),bi=sprRGB(c1,1),gi=sprRGB(c1,2);
var ro=sprRGB(c2,0),bo=sprRGB(c2,1),go=sprRGB(c2,2);
var st=0,sTimer = setInterval(function(){
if(st!=dur){
with(Math)var rs=floor((ri-ro)/(dur-st)),bs=floor((bi-bo)/(dur-st)),gs=floor((gi-go)/(dur-st));
ro+=rs;bo+=bs;go+=gs;
txt.style.color='rgb('+ro+','+bo+','+go+')';
}
else clearInterval(sTimer);
st++;
},50);
}// 分离RGB颜色 0:R | 1:G | 2:B
function sprRGB(c,x){
var p,l;
c.length==4?l=1:l=2;
p=x*l+1;
c=c.substr(p,l)
if(c.length==1)c+=c;
return parseInt(c,16);
}
//-->
</script>
</head><body>
<div id="body" style="background:#000;color:#0f0;width:500px;height:30px;font-size:18px;line-height:30px;text-align:center;font-weight:bold">用javascript实现文本的淡入淡出效果</div>
<div>
<input type="button" value="Fade In" onclick="fade('body',colorOut,colorIn)" />
<input type="button" value="Fade Out" onclick="fade('body',colorIn,colorOut)" />
</div>
</body>
</html>
-- EOF --
