原生JS封装时间运动函数

/*讲时间运动之前先给大家复习一下运动函数

通常大家都会写运动框架，一个定时器(Timer),一个步长(step 就是每次运动的距离)，一个当前位置(current)一个目标位置(target),然后判断一下当前位置加上步长和目标位置的关系就可以了

就可以了。

简写就是这样呗*/

var obj=document.getElementById("div");

/*想要获取元素当前的位置,是要获取CSS的，obj.style.left="25"px;这样是OK的，没有问题，

但是如果你这么写 var left=obj.style.left;是获取不到的，CSS的获取，需要用到方法*/

 

function getCSS(obj,attr){

/*window.getComputedStyle 兼容标准浏览器  谷歌 火狐 苹果浏览器

currentStyle 是兼容IE的*/

return window.getComputedStyle?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

 

}

/*attr 是要改变的元素属性(left或者top);

step的正负决定运动方向*/

function move(obj,target,step,attr)

{

var timer=null,current=0;

clearInterval(timer);

 

timer=setInterval(function(){

 current=parseFloat(getCSS(obj,attr));//去掉单位px

  if((current+step-target)*step<0) //运动向下或者向上都满足这个条件

{   

  obj.style[attr]=current+step+"px";

}

else{

 obj.style[attr]=target+"px";

 clearInterval(timer);

}

},1000/60);

}

 

时间运动函数

function getCSS(obj,attr){
return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}

function $(id){return document.getElementById(id);}
/*时间运动主要依赖一个公式 变化的时间/总时间=变化的位移/总位移
当比值为1的时候，运动就结束了呗！
变化的时间=当前时间-初始的时间
变化的位置=当前位置-初始位置
每次移动的位移=（变化的时间/总时间)*总位移
*/

function move(obj,attr,time,target)
{
var current=parseFloat(getCSS(obj,attr));//获取当前位置
var startTime=new Date();//获取当前时间
var offset=target-current;//总偏移量，总位移
var changeTime=0;//变化的时间
obj.timer=null;
clearInterval(obj.timer);//使用定时器之前清除一下，只是一个良好的习惯，避免多次产生定时器

obj.timer=setInterval(function(){
changeTime=(new Date()-startTime);//变化的时间
var t=changeTime/time;//变化的时间/总时间
if(t>=1){

obj.style[attr]=target+"px";
clearInterval(obj.timer);

}

else{
obj.style[attr]=current+t*offset+"px";

}
},1000/60);

}

 

经过测试都是没问题的 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有