网络编程
位置：首页>> 网络编程>> JavaScript>> JS实现淡入淡出图片效果的方法分析

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

作者：鬼畜十三　　发布时间：2023-08-24 08:45:44　

标签：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程序设计有所帮助。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com