这个实现效果是在老师的提点下完成的，当时自己一直陷入在怎样才能够实现匀减速运动中不能出来，代码中的亮点已经表明……欢迎大家指正交流……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>减速运动</title>
<style>
*{
margin:0;
padding:0;
}
#oplay{
width:200px;
height:200px;
position: absolute;
left:0;
background-color: #B7B7B7;
}
#start_btn{
position: absolute;
top:220px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="oplay"></div>
<button id="start_btn">开始运动</button>
<script>
var oplay = document.getElementById("oplay");
var start_btn = document.getElementById("start_btn");
var interval,speed;
start_btn.onclick = function(){
clearInterval(interval);
interval = setInterval(function(){
if(oplay.offsetLeft>=300){
clearInterval(interval);
}else{
//这个地方是关键，怎样才能够使speed在移动元素在停止的时候正好速度为0
speed = (300-oplay.offsetLeft)/10;
oplay.style.left = oplay.offsetLeft+speed+"px";
}
},30);
}
</script>
</body>
</html>
时间： 2024-08-29 21:09:29