這次帶給大家js實現圖片勻速淡入淡出,js實現圖片勻速淡入淡出的注意事項有哪些,以下就是實戰案例,一起來看一下。
<!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> | #
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是js實現圖片勻速淡入淡出的詳細內容。更多資訊請關注PHP中文網其他相關文章!