<!doctype html> <htmllang="en"> <head> <metacharset="utf-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } p { border: 2px solid #aaa; } img { width: 300px; height: 300px; filter: alpha(opacity:30); opacity: .3; margin: 0 auto; } </style> </head> <body> <p> <imgsrc="img/timg.jpg"alt=""id="img"> </p> <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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是js实现图片匀速淡入淡出的详细内容。