一、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);}