JavaScript缓动动画

   JS实现的缓冲运动动画效果示例
   这篇文章主要介绍了JS实现的缓冲运动效果,涉及JavaScript数值运算与时间函数相关使用技巧。
   1.缓冲需要用到数值取整
           向上取整:Math.ceil() 
           向下取整Math.floor()
           移动的速度逐渐减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数。

  function animate1(ele,target){ 
    //要用定时器，先清除定时器 
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突 
    //而定时器本身讲成为盒子的一个属性 
    clearInterval(ele.timer); 
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负 
    //目标值如果大于当前值取正，目标值如果小于当前值取负 
    var speed = target>ele.offsetLeft?3:-3; 
    ele.timer = setInterval(function () { 
      //在执行之前就获取当前值和目标值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft + speed + "px"; 
      //目标值和当前值只差如果小于步长，那么就不能再前进了 
      //因为步长有正有负，所有转换成绝对值来比较 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target + "px"; 
        clearInterval(ele.timer); 
  
      } 
    },30); 
  } 

    2. 网页中的动画，在css中我们已经可以使用一些元素属性快速的做出来，但是有时候考虑到各种浏览器的兼容性问题我们还是需要使用js来制作网页中的动画。

var osTop = document.documentElement.scrollTop+document.body.scrollTop;//兼容chrome与IE方法之一，可用其他方法获取滚动条当前高度
        if(osTop >=clientHeight){//在滚动条超过第一页时显示按钮，否则隐藏
            obtn.style.display = 'block';
        }else{
            obtn.style.display = 'none';
        }

   3  使用js做动画最重要的一个函数就是setInterval函数
            setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。