首页 > 代码库 > js实现缓冲运动，和匀速运动有点不相同
js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同，看图可以知道缓冲运动速度是越来越慢的。
1 <style> 2 *{ 3 padding:0; 4 margin:10px 0; 5 } 6 #div1{ 7 height:100px; 8 width:100px; 9 background:green;10 float:left;11 position:relative;12 left:1000px;13 }14 #div2{15 border-left:1px solid black;16 position:absolute;17 height:200px;18 left:600px;19 float:left;20 }21 </style>22 23 24 <body>25 <div id="div1"></div>26 <div id="div2"></div>27 </body>
首先定义两个div，一个div只看见一条边，另外一个做运动
js代码如下，带注释
<script> var i=setInterval(function startMove () { var div1=document.getElementById("div1"); var speed=(600-div1.offsetLeft)/30; //首先获取速度，因为div1。offsetleft=1000，所以此速度为负数 speed=speed>0?Math.ceil(speed):Math.floor(speed); //将速度上下取整，像素没有小数 div1.style.left=div1.offsetLeft+speed+‘px‘; //因为速度为负数，所以offsetleft越来越小，向左运动 if (div1.offsetLeft==600) //当达到div2的边时停止运动 { clearInterval(i); } }, 30)</script>
js实现缓冲运动，和匀速运动有点不相同
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。