首页 > Web开发 > 详细

js运动框架

时间:2017-06-11 12:36:13      阅读:286      评论:0      收藏:0      [点我收藏+]

 

//获取当前行间样式 && 非行间样式 
function getStyle(obj, name)
{
if (obj.currentStyle)
{
return currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}


//运动框架
function move(obj, json, fnEnd)
{
clearInterval(obj.timer) //每运动一次就清除一次定时器
obj.timer=setInterval(function (){
var bStop=true; //假设:所有的值都到了

for (var attr in json)
{
var cur=0;

if (attr==‘opacity‘)
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}

var speed=(json[attr]-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if (cur!=json[attr])
{
bStop=false;
}

if (attr==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+‘px‘;
}
}

if (bStop)
{
clearInterval(obj.timer);

if (fnEnd)fnEnd();
}
}, 30)
};
  
  var moveBox = document.getElementById(‘moveBox‘);
  document.getElementById(‘click‘).onclick = function(){
    move(moveBox,{left:300},function(){
      move(moveBox,{top:300})
    })
  }

js运动框架

原文:http://www.cnblogs.com/wrupei/p/6984734.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!