<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img{ filter :alpha(opacity:30); opacity:0.3; } </style> </head> <body> <script> window.onload=function () { var timer=null; var alpha=30; var img=document.getElementById('img1'); function startMove(target){ clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha<target){ speed=10; }else{ speed=-10; }; if(alpha==target){ clearInterval(timer); }else{ alpha+=speed; img.style.filter='alpha(opacity:"+alpah+")'; img.style.opacity=alpha/100; } },30) } img.addEventListener('mouseover',function(){ startMove(100)},false); img.addEventListener('mouseout',function(){ startMove(30)},false); } </script> <img src="pic1.png" id='img1' alt=""> </body> </html>
淡入淡出图片
最新推荐文章于 2021-04-07 17:34:36 发布