前端基本功--网页特效4 12.05

一、三个取整函数

• 数学函数 Math

1. Math.ceil() 向上取整，取大的
   console.log(Math.ceil(1.01)) 结果 是 2
   console.log(Math.ceil(1.9)) 结果 2
   console.log(Math.ceil(-1.3)) 结果 是 -1
2. Math.floor() 向下取整，取小的
   console.log(Math.floor(1.01)) 结果 是 1
   console.log(Math.floor(1.9)) 结果 1
   console.log(Math.floor(-1.3)) 结果 是 -2
3. Math.round() 四舍五入函数
   console.log(Math.round(1.01)) 结果 是 1
   console.log(Math.round(1.9)) 结果 是 2

二、缓动动画原理

1.匀速：原来位置+步长
2.欢动：原来位置+步长（变化的）
var step = (target - obj.offsetLeft) / 10;

var timer = null;
         var target = 400;
        $("btn200").onclick = function(){
           timer = setInterval(function(){
            var step = (target - $("box").offsetLeft)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            box.style.left = $("box").offsetLeft + step +"px";
            if($("box").offsetLeft == target){
                clearInterval(timer);
            }
           },30);
        }