js实现图片匀速淡入淡出效果 纯js实现图片匀速淡入淡出效果
diuleilaomo 人气:0想了解纯js实现图片匀速淡入淡出效果的相关内容吗,diuleilaomo在本文为您仔细讲解js实现图片匀速淡入淡出效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js图片匀速淡入淡出,js图片淡入淡出效果,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>
加载全部内容