<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
width: 800px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 100px;
top: 100px;
/*margin: 50px auto;*/
}
.box {
position: absolute;
top: 0;
left:0;
width: 100px;
height: 100px;
background-color: pink;
margin: 0 -1px;
}
</style>
</head>
<body>
<button>向右移动2个盒子距离</button>
<button>向左移动2个盒子距离</button>
<div class="big">
<div class="box"></div>
</div>
<script>
var btnArr = document.querySelectorAll('button');
var big = document.getElementsByClassName('big')[0];
var box = document.querySelector('.box');
var width = box.offsetWidth;
console.log(width);
var count=0;
btnArr[0].onclick = function () {
// alert();
count++;
animate(box,-count*width);
}
btnArr[1].onclick = function () {
count--;
animate(box,-count*width);
}
//缓动框架封转
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);
ele.style.left = ele.offsetLeft + step +'px';
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.language = target+'px';
clearInterval(ele.timer);
}
console.log(1);
},31);
}
</script>
</body>
</html>
这样给要移动的元素加上margin之后，不能判断清除定时器的条件，
