<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
left: 0;
}
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var box = document.getElementById("box");
var timer = null;
var target = 200;
btn200.onclick = function () {
timer = setInterval(function(){
//盒子本身的位置 + 步长(不断变化的)
var step = (target - box.offsetLeft )/10; //步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);//步长取整
box.style.left = box.offsetLeft + step + "px";
if(box.offsetLeft == target){
clearInterval(timer);
}
},30);
}
</script>
缓动动画原理
最新推荐文章于 2023-10-18 19:22:05 发布