1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

JS实现鼠标移入图片的淡入和淡出的效果两种方法

我们在网站开发中有时会遇到图片淡入淡出效果这样的需求,我们首先来看下图片刚开始处于模糊状态的样子:

接下来,我们把鼠标放到图片上,我们便可以看到图片由模糊逐渐变的清晰,最后如下图所示:

第一种方法:

  个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer和alpha也作为参数封装到函数内,感觉貌似也没必要 - -!......  

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title></title>          <style type="text/css">              div{display:inline-block;opacity:.3;filter:alpha(opacity:30);}              img{vertical-align:top;}          </style>          <script type="text/javascript">              window.onload=function(){                  var odiv=document.getElementById("div");                  var timer=null;                  var alpha=30;                  var speed=1;                                    odiv.onmouseover=function(){                      startChange(odiv,speed,100);                  }                  odiv.onmouseout=function(){                      startChange(odiv,speed,30);                  }                  function startChange(obj,speed,target){                      clearInterval(timer);                      speed=target>alpha?speed:-speed;                      timer=setInterval(function(){                          if(alpha==target){                              clearInterval(timer);                          }else{                              alpha+=speed;                          }                          obj.style.opacity=alpha/100;                          obj.style.filter="alpha(opacity:"+alpha+")";                      },20);                  }              }          </script>      </head>      <body>          <div id="div">              <img src="https://www.qiquanji.com/data/img/dmj/201904021554216280818610.jpg" alt="" />          </div>      </body>  </html>

第二种方法:

  直接利用opacity属性,但还不支持IE8以下的浏览器。另外,在以下32行代码中,还容易出现诡异的小数问题,听说是由于计算机在处理小数的时候,本身就有些问题,但具体如何产生的,以及如何去解决,暂时还不清楚。(但我用火狐浏览器和360浏览器没看到这个BUG,也只是听说而已)

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title></title>          <style type="text/css">              div{display:inline-block;opacity:1;}              img{display:block;}          </style>          <script type="text/javascript">              window.onload=function(){                  var div1=document.getElementsByTagName("div")[0];                  var t=null;                  var speed=0.1;                  div1.onmouseover=()=>{                                  change(div1,speed,0.3);                  }                  div1.onmouseout=()=>{                      change(div1,speed,1);                  }                  function change(obj,speed,target){                      clearInterval(t);                      t=setInterval(()=>{                          obj.style.opacity=getComputedStyle(obj,false)["opacity"];                          if(obj.style.opacity==target){                              clearInterval(t);                          }else{                              if(target==0.3){                                  obj.style.opacity-=speed;                              }else if(target==1){                                  speed+=0.1;                                  console.log(speed);   //0.30000000000000004   可能会出现小数这种BUG,但我用火狐浏览器和360浏览器没看到有BUG                                  obj.style.opacity=speed;                              }                          }                      },50);                  }              }          </script>      </head>      <body>          <div>              <img src="https://www.qiquanji.com/data/img/dmj/201904021554216280818610.jpg" alt="" />          </div>      </body>  </html>

原文链接:https://www.qiquanji.com/post/7165.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: