<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; margin: 20px; background: yellow; border: 5px solid black; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.timer=null; oDiv1.onmouseover=function(){ move(this,100,'opacity'); }; oDiv1.onmouseout=function(){ move(this,30,'opacity'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=0; if(name=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,name))*100); }else{ cur=parseInt(getStyle(obj,name)); } var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; obj.style.filter='alpha(opacity:'+cur+speed+')'; }else{ obj.style[name]=cur+speed+"px"; } } },30); }; </script> </head> <body> <div></div> </body> </html>
javascript关于运动的各种问题经典总结(3)
内容版权声明：除非注明，否则皆为本站原创文章。