js off 缓动动画

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

缓动动画

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

2、步长越来越小

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

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

var but=document.getElementsByTagName("button")[0];
var box=document.getElementsByTagName("div")[0];
but.onclick=function(){
setInterval(function(){
//缓动效果，如果缓动，步子越来越小
// 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10;
var target=400;
var step=(target-box.offsetLeft)/10;
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
box.style.left=box.offsetLeft+step+"px"
//清除定时器，当目标值减去盒子的位置 小于步子 清除
            if(box.offsetLeft-400<(400-box.offsetLeft)/10){
                clearInterval(strme)
            }
},1000)
}

 

缓动简单分装版

<script>
    var but=document.getElementsByTagName("button")[0];
    var div=document.getElementsByTagName("div")[0];
    var timer=null;
    but.onclick=function(){
        //要用定时器先请定时器
        clearInterval(timer);
       timer=setInterval(function() {
           //缓动效果，如果缓动，步子越来越小
           // 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10;
           var step=(0-div.offsetLeft)/10;
           //最后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>0 ? Math.ceil(step) : Math.floor(step);
           div.style.left=div.offsetLeft+ step + "px";
            console.log(1);
           //跳出条件 目标值-当前位置绝对值<步长绝对值，因为与可能是
           if( Math.abs(0-div.offsetLeft)< Math.abs(step)){
               div.style.left =0+"px";
               clearInterval(timer)
           }
       },100)
    }

 

 缓动分装最总版

<script>
    var but=document.getElementsByTagName("button");
    var box=document.getElementsByTagName("div");
    var timer=null;
    //调用函数
    but[0].onclick=function () {
        animate(box[0],200)
    };
    but[1].onclick=function () {
        animate(box[0],400)
    };
    //分装代码
    function animate(ele,target){
        //用定时器先清除定时器
         clearInterval(ele.timer);
        //定义定时器
         ele.timer=setInterval(function(){
            //定义缓动 动画步长 越来越慢
             // 步长=（目标值-现在值）/10
            var step=(target-ele.offsetLeft )/10;
            //对步长二次加工（小于步长相下去值 大于）
             step=step>0 ? Math.ceil(step):Math.floor(step);
             //赋值给left
             console.log(1);
             ele.style.left=ele.offsetLeft+step+"px";
             //清除定时器
             if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                 //处理小数赋值
                 ele.style.left=target+"px";
                clearInterval(ele.timer)
             }
        },30)
    }
</script>

 

筋斗云案例

 

<style>
        *{margin:0; padding:0; }
        body{background:rgba(0,0,0,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:500 16px/42px "simsun"; cursor: pointer;}
        .box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:0; }
    </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")[0];
            var liWidth=liArr[0].offsetWidth;
            var coun=0;
            //绑定事件
            for(var i=0; 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 )/10;
                step=step>0 ? Math.ceil(step):Math.floor(step);
                console.log(1);
                ele.style.left=ele.offsetLeft+step+"px";
                if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                    ele.style.left=target+"px";
                    clearInterval(ele.timer)
                }
            },30)
        }
    </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:0; padding:0; }
        body{background:rgba(0,0,0,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:500 16px/42px "simsun"; cursor: pointer;}
        .box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:0; }
    </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")[0];
            var liWidth=liArr[0].offsetWidth;
            var coun=0;
            //绑定事件
            for(var i=0; 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 )/10;
                step=step>0 ? Math.ceil(step):Math.floor(step);
                console.log(1);
                ele.style.left=ele.offsetLeft+step+"px";
                if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                    ele.style.left=target+"px";
                    clearInterval(ele.timer)
                }
            },30)
        }
    </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>