<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width:200px; height:200px; background-color:red; margin-top:50px; filter:alpha(opacity:30); opacity: 0.3; } </style> <script> function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } window.onload=function () { var oDiv=document.getElementsByTagName('div'); for(var i=0; i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].onmouseover=function(){ startMove(this,'opacity',100) }; oDiv[i].onmouseout=function(){ startMove(this,'opacity',30) } }; function startMove(obj,attr,target) { clearInterval(obj.timer); obj.timer=setInterval(function () { var iCur=0; if(attr=='opacity'){ iCur=parseInt(parseFloat(getStyle(obj,attr)*100)); }else{ iCur=parseInt(getStyle(obj,attr)); } var speed=(target-iCur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(iCur==target){ clearInterval(obj.timer); }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+speed)+')'; obj.style.opacity=(iCur+speed)/100; }else{ obj.style[attr]=iCur+speed+'px'; } }; },30) }; } </script> </head> <body> <div></div> </body> </html>
任意值运动框架
最新推荐文章于 2020-11-25 15:33:49 发布