这篇文章主要为大家详细介绍了纯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="https://www.jb51.net/img/timg.jpg" alt=""> </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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: