纯js实现图片匀速淡入淡出效果

2019-11-19 15:43:00

字体：大中小

来源：转载

供稿：网友

图片匀速淡入淡出效果如下：

这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>淡入效果</title>  <style>    * {      margin: 0;      padding: 0;    }    div {      border: 2px solid #aaa;    }    img {      width: 300px;      height: 300px;      filter: alpha(opacity:30);      opacity: .3;      margin: 0 auto;    }  </style></head><body><div>  <img src="img/timg.jpg" alt="" id="img"></div><script>  var alpha=30;  var img = document.getElementById("img");  img.onmouseover=function(){    startMove(100)  };  img.onmouseout=function(){    startMove(30)  }  var timer;  function startMove(tar) {    var img = document.getElementById("img");    clearInterval(timer);    timer = setInterval(function () {      var ispeed=0;      ispeed= alpha<tar?5:-5;      if(alpha==tar){        clearInterval(timer)      }      else{        alpha+=ispeed;        img.style.filter="alpha(opacity:"+alpha+")";        img.style.opacity=alpha/100;      }    }, 30)  }</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈Vue父子组件和非父子组件传值问题

下一篇：vue.js组件vue-waterfall-easy实现瀑布流效果