目录
一、H5的简单布局
二、css的布局
三、获取元素
四、使用js来实现‘盒子’移动
效果展示
五、使用js来实现缓动效果
效果展示
六、完整代码评论区自取
一、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); }
效果展示
