js off 缓动动画

动画也有很多种，一起来学习，缓动动画吧

缓动动画

1、缓动动画原理=盒子位置+（目标盒子位置-现在盒子位置）/10

2、步长越来越小

3、让步长越来越小的公式

     步长=（目标位置-本身位置）/10

var but=document.getElementsByTagName("button")[];

var box=document.getElementsByTagName("div")[];

but.onclick=function(){

setInterval(function(){

//缓动效果，如果缓动，步子越来越小

// 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10;

var target=;

var step=(target-box.offsetLeft)/;

//动画原理：盒子未来的位置 = 盒子当前的位置+步长

box.style.left=box.offsetLeft+step+"px"

//清除定时器，当目标值减去盒子的位置 小于步子 清除

            if(box.offsetLeft-<(-box.offsetLeft)/){

                clearInterval(strme)

            }

},)

}

缓动简单分装版

<script>

    var but=document.getElementsByTagName("button")[];

    var div=document.getElementsByTagName("div")[];

    var timer=null;

    but.onclick=function(){

        //要用定时器先请定时器

        clearInterval(timer);

       timer=setInterval(function() {

           //缓动效果，如果缓动，步子越来越小

           // 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10;

           var step=(-div.offsetLeft)/;

           //最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置

           //拓展，目标值 - 现在值 差值大于0时向上曲整，小于0的时候，向小取整

           // step=(0-div.offsetLeft)<0 ? Math.floor(step) : Math.ceil(step); //对的结果在前面

           //step=0<div.offsetLeft ? Math.floor(step) : Math.ceil(step);

             step= step> ? Math.ceil(step) : Math.floor(step);

           div.style.left=div.offsetLeft+ step + "px";

            console.log();

           //跳出条件 目标值-当前位置绝对值<步长绝对值，因为与可能是

           if( Math.abs(-div.offsetLeft)< Math.abs(step)){

               div.style.left =+"px";

               clearInterval(timer)

           }

       },)

    }

 缓动分装最总版

<script>

    var but=document.getElementsByTagName("button");

    var box=document.getElementsByTagName("div");

    var timer=null;

    //调用函数

    but[].onclick=function () {

        animate(box[],)

    };

    but[].onclick=function () {

        animate(box[],)

    };

    //分装代码

    function animate(ele,target){

        //用定时器先清除定时器

         clearInterval(ele.timer);

        //定义定时器

         ele.timer=setInterval(function(){

            //定义缓动 动画步长 越来越慢

             // 步长=（目标值-现在值）/10

            var step=(target-ele.offsetLeft )/;

            //对步长二次加工（小于步长相下去值 大于）

             step=step> ? Math.ceil(step):Math.floor(step);

             //赋值给left

             console.log();

             ele.style.left=ele.offsetLeft+step+"px";

             //清除定时器

             if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){

                 //处理小数赋值

                 ele.style.left=target+"px";

                clearInterval(ele.timer)

             }

        },)

    }

</script>

筋斗云案例

<style>

        *{margin:; padding:; }

        body{background:rgba(,,,0.8)}

        .box{width:800px; height:42px; border-radius: 8px;  background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}

        .box ul{position: relative;}

        .box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font: 16px/42px "simsun"; cursor: pointer;}

        .box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:; }

    </style>

    <script>

        //需求1：属于移到哪个li上，span就停在那个li上，离开后，span会到原点

        //需求2；鼠标点击哪个li就记录li标签，移开的时候，span就会到记录的li上

        window.onload=function () {

            //获取元素

            var liArr=document.getElementsByTagName("li");

            var span=document.getElementsByTagName("span")[];

            var liWidth=liArr[].offsetWidth;

            var coun=;

            //绑定事件

            for(var i=; i<liArr.length; i++){

                //绑定属性index

                liArr[i].index=i;

                liArr[i].onmouseover=function () {

                    animate(span,this.index*liWidth)

                }

                liArr[i].onmouseout=function () {

                    animate(span,coun*liWidth)

                }

                liArr[i].onclick=function () {

                    coun=this.index;

                    animate(span,coun*liWidth)

                }

            }

        }

        //分装代码

        function animate(ele,target){

            clearInterval(ele.timer);

            ele.timer=setInterval(function(){

                var step=(target-ele.offsetLeft )/;

                step=step> ? Math.ceil(step):Math.floor(step);

                console.log();

                ele.style.left=ele.offsetLeft+step+"px";

                if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){

                    ele.style.left=target+"px";

                    clearInterval(ele.timer)

                }

            },)

        }

    </script>

</head>

<body>

<div class="box">

    <span></span>

    <ul>

        <li>首页新闻</li>

        <li>搜狐新闻</li>

        <li>腾讯新闻</li>

        <li>河北新闻</li>

        <li>北京新闻</li>

        <li>湖南新闻</li>

        <li>山东新闻</li>

        <li>湖北新闻</li>

    </ul>

</div>

<style>

        *{margin:; padding:; }

        body{background:rgba(,,,0.8)}

        .box{width:800px; height:42px; border-radius: 8px;  background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}

        .box ul{position: relative;}

        .box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font: 16px/42px "simsun"; cursor: pointer;}

        .box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:; }

    </style>

    <script>

        //需求1：属于移到哪个li上，span就停在那个li上，离开后，span会到原点

        //需求2；鼠标点击哪个li就记录li标签，移开的时候，span就会到记录的li上

        window.onload=function () {

            //获取元素

            var liArr=document.getElementsByTagName("li");

            var span=document.getElementsByTagName("span")[];

            var liWidth=liArr[].offsetWidth;

            var coun=;

            //绑定事件

            for(var i=; i<liArr.length; i++){

                //绑定属性index

                liArr[i].index=i;

                liArr[i].onmouseover=function () {

                    animate(span,this.index*liWidth)

                }

                liArr[i].onmouseout=function () {

                    animate(span,coun*liWidth)

                }

                liArr[i].onclick=function () {

                    coun=this.index;

                    animate(span,coun*liWidth)

                }

            }

        }

        //分装代码

        function animate(ele,target){

            clearInterval(ele.timer);

            ele.timer=setInterval(function(){

                var step=(target-ele.offsetLeft )/;

                step=step> ? Math.ceil(step):Math.floor(step);

                console.log();

                ele.style.left=ele.offsetLeft+step+"px";

                if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){

                    ele.style.left=target+"px";

                    clearInterval(ele.timer)

                }

            },)

        }

    </script>

</head>

<body>

<div class="box">

    <span></span>

    <ul>

        <li>首页新闻</li>

        <li>搜狐新闻</li>

        <li>腾讯新闻</li>

        <li>河北新闻</li>

        <li>北京新闻</li>

        <li>湖南新闻</li>

        <li>山东新闻</li>

        <li>湖北新闻</li>

    </ul>

</div>