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

来源：年旅网

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

这里写图片描述

<!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>

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务