智慧社JS實現圖片淡入淡出效果
阿新 • • 發佈：2019-01-22
我們在網站開發中有時會遇到圖片淡入淡出效果這樣的需求，我們首先來看下圖片剛開始處於模糊狀態的樣子：
接下來，我們把滑鼠放到圖片上，我們便可以看到圖片由模糊逐漸變的清晰，最後如下圖所示：
那麼這樣的效果，JS怎麼做到的呢，下面我粘出HTML、CSS及JS程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{width:400px;height:320px;} #div1 img{filter:alpha(opacity:30);opacity:0.3} </style> <script> var opacityNum=30; var timer=null; window.onload=function () { var oDiv=document.getElementById("div1"); oDiv.onmouseover=function () { startMove(100); } oDiv.onmouseout=function () { startMove(30); } }; function startMove(iTarget) { var oImg=document.getElementById("div1").getElementsByTagName("img")[0]; var speed; if(opacityNum<iTarget){ speed=10; }else{ speed=-10; } clearInterval(timer); timer=setInterval(function () { if(opacityNum==iTarget){ clearInterval(timer); }else{ opacityNum+=speed; oImg.style.filter='alpha(opacity:'+opacityNum+')'; oImg.style.opacity=opacityNum/100; } },30); } </script> </head> <body> <div id="div1"><img src="img/5.jpg"></div> </body> </html>