基于匀速运动的实例讲解(侧边栏,淡入淡出)(3)
再来一个淡入淡出的效果:
当鼠标移上去之后,透明度变成1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出 - by ghostwu</title> <style> img { border: none; opacity: 0.3; filter: alpha(opacity:30); } </style> <script> window.onload = function () { var timer = null; var oImg = document.getElementById("img"); oImg.onmouseover = function(){ animate( this, 100, 10 ); } oImg.onmouseout = function(){ animate( this, 30, -10 ); } //alpha=30 --> 100 function animate(obj, target, speed) { clearInterval(timer); var cur = 0; timer = setInterval(function () { cur = css( obj, 'opacity') * 100; if( cur == target ){ clearInterval( timer ); }else { cur += speed; obj.style.opacity = cur / 100; obj.style.filter = "alpha(opacity:" + cur + ")"; } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script> </head> <body> <img src="./img/h4.jpg" alt="" id="img"/> </body> </html>
以上这篇基于匀速运动的实例讲解(侧边栏,淡入淡出)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持黑区网络。