用javascript实现文本的淡入淡出效果

主要是对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 —

发表评论

电子邮件地址不会被公开。 必填项已用*标注