​本文已参与「新人创作礼」活动，一起开启掘金创作之路​​​

一、H5的简单布局

	<div class="box box1"></div>
	<div class="box box2"></div>

二、css的布局

简易的布局出两个不同颜色的‘盒子’。

		<style type="text/css">
			*{
				padding:0px;
				margin:0px;
			}
		 .box{
			 width: 200px;
			 height: 200px;
			 background: blue;
			 position: absolute;
			 left:0px
		 }
		 .box2{
			 background: red;
			 margin-top: 210px;
		 }
		 </style>

三、获取元素

		var box1 = document.querySelector('.box1');
		var box2 = document.querySelector('.box2');

四、使用js来实现‘盒子’移动

可以使用函数封装，来实现，修改调用，不需要在代码中修改，可以减少出错的几率。

function myRun(box,h1,h2){  //封装函数
var myInter = setInterval(function(){
var offsetLeft = box.offsetLeft;
var num = h1;     //每次都移动h1个像素
var target = h2;  //一共移动的距离
if(offsetLeft==target){  //通过if来判断，到达了设定距离，就会删除间隔函数
		clearInterval(myInter);
	}else{
		box.style.left = offsetLeft+num+'px';//没有达到距离，一直赋值给‘盒子’左边距
				}
	},1000)}
    box1.onclick=function(){
    myRun(this,50,200); } //给‘盒子’设计点击事件，点击才会出现移动，this指向box1，里面是所调用的值，可以直接在里面修改，移动一次的距离，一共移动的距离
            

效果展示

​编辑

五、使用js来实现缓动效果 

依旧可以使用函数来封装，达到简洁的效果

大致代码与js移动相同，中间判断与上文稍微有些不同，其中的含义是，第一次移动取移动距离的十分之一，接下来的每一次移动，都是取省下来还剩多少距离的十分之一，取整是为了，在无线接近于所设置的距离可以移动。

             function move(obj,sum){
                var liLi = setInterval(function(){
                    var offsetLeft =obj.offsetLeft;
                    var num  = (sum - offsetLeft)/10;
                    num > 0 ?  Math.ceil(num):Math.floor(num);
                    if(offsetLeft==sum){
                        clearInterval(liLi);
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                },1000)
             }   box2.onclick=function(){
                    move(this,200);
            }

效果展示

​编辑

 六、完整代码评论区自取

​