代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 150px;
height: 150px;
background: sandybrown;
position: absolute;
border: 2px solid #ccc;
left: 800px;
top: 28px;
}
</style>
</head>
<body>
<button>右走</button> <button>左走</button>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var btn = document.getElementsByTagName('button');
var timer = null;
// 向右走
btn[0].onclick = function () {
run(box,'left',800,10)
}
// 向左走
btn[1].onclick = function () {
run(box,'left',0,10)
}
// box.onclick = function (){
// clearInterval(timer);
// timer = setInterval(function(){
// var cur = parseInt(getStyle(box,'left')); // 当前值
// // （目标值 - 当前值）/ 缩放比例
// var speed = Math.floor((0 - cur)/10); // 50 45 40.5
// if(cur == 0){
// clearInterval(timer);
// }
// box.style.left = cur + speed + 'px'; // 50 95 135.5
// },50)
// }
function run(ele,attr,target,param) {
clearInterval(timer);
timer = setInterval(function () {
var cur = parseInt(getStyle(ele, attr)); // 当前值
// （目标值 - 当前值）/ 缩放比例
var speed = (target - cur) / param; // 变速
speed = speed > 0? Math.ceil(speed) : Math.floor(speed); // 向右走 变速正数，需要向上取整，反之向左走 变速负数，需要向下取整
if (cur >= target&& speed>0 || cur<=target && speed<0) {
cur = target;
clearInterval(timer);
}
ele.style[attr] = cur + speed + 'px';
}, 50)
}
// 获取元素非行间样式
function getStyle(ele, attr) {
if (window.getComputedStyle) { // 标准
return getComputedStyle(ele)[attr];
} else { // ie
return ele.currentStyle[att];
}
}
</script>
</body>
</html>
效果
