JS实现淡入淡出图片效果的方法分析

本文实例讲述了js实现淡入淡出图片效果的方法。分享给大家供大家参考，具体如下：

效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明

分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少

核心代码：

window.onload=function(){
  var odiv=document.getelementbyid("div1");
  var timer=null;
  var alpha=30;
  odiv.onmouseover=function(){
    setalpha(100);
  };
  odiv.onmouseout=function(){
    setalpha(30);
  };
  function setalpha(itarget){ //itarget目标透明度通过参数传入
    clearinterval(timer); //执行计时器之前，先清除计时器，否则执行完一次再执行，上次的计时器还在，会不停抖动
    timer=setinterval(function(){
      var ispeed;
      if(alpha<itarget)
      {
        ispeed=10;
      }
      else
      {
        ispeed=-10;
      }
　　　　 if(alpha==itarget)
　　　　 {
　　　　   clearinterval(timer);
　　　　 }
　　　　 else
　　　　 {
　　　　 　　alpha+=ispeed;
　　　　 　　odiv.style.opacity=alpha/100;
　　　　　　 odiv.style.filter='alpha(opacity:'+alpha+')'
　　　　 }
    },30);
  };
};

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。