首页 > 代码库 > js实现减速运动
js实现减速运动
这个实现效果是在老师的提点下完成的，当时自己一直陷入在怎样才能够实现匀减速运动中不能出来，代码中的亮点已经表明……欢迎大家指正交流……
<!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>
js实现减速运动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。