JS原生简单的物体碰撞回弹笔记

由前端开发者 · 发布于 2018年11月6日14:40:52 · 更新于 2018年11月6日15:14:14

摘要：html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> #warp { width: 1000px; height: 600px; position: relative; border: 10px solid black; } #div1 { width: 50px; height: 50px; padding: 20px; background-color: pink; position: absolute; top: 0; left: 0; border-radius: 50px; } </style> </head> <body> <div id="warp"> <div id="div1"></div> </div> </body> <script type="text/javascript"> var oWarp = document.getElementById("warp"); var oDiv1 = document.getElementById("div1"); //最大运动宽度 var maxWidth = oWarp.clientWidth – oDiv1.offsetWidth; var maxHeight = oWarp.clientHeight – oDiv1.offsetHeight; var speedY = 6; var speedX = 8; var timer = setInterval(function () { var iTargetX = 0; var iTargetY = 0; iTargetY = speedY > 0 ? maxHeight : 0; iTargetX = speedX > 0 ? maxWidth : 0; if (Math.abs(iTargetX – oDiv1.offsetLeft) <= Math.abs(speedX)) { oDiv1.style.left = iTargetX + "px"; //当到达目标值是,元素做反向运动,改变速度 speedX *= -1; } else { oDiv1.style.left = oDiv1.offsetLeft + speedX + "px"; } if (Math.abs(iTargetY – oDiv1.offsetTop) <= Math.abs(speedY)) { oDiv1.style.top = iTargetY + "px"; //当到达目标值是,元素做反向运动,改变速度 speedY *= -1; } else { oDiv1.style.top = oDiv1.offsetTop + speedY + "px"; } },20); </script> </html>

» 本文来自：前端开发者 » 《JS原生简单的物体碰撞回弹笔记》

» 本文链接地址：https://www.rokub.com/8845.html

» 您也可以订阅本站：https://www.rokub.com

JS原生简单的物体碰撞回弹笔记

You may also like...

发表评论取消回复

前端开发者/SEO-技术群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

JS原生 简单的物体碰撞回弹笔记

You may also like...

png的故事： 获取图片信息和像素内容.

移动端前端开发怎么做？

前端开发的动画实例：炫酷霓虹灯树枝生长动画

发表评论 取消回复

前端开发者/SEO-技术群

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

JS原生简单的物体碰撞回弹笔记

png的故事：获取图片信息和像素内容.

发表评论取消回复