html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <head><br /> <meta charset="UTF-8"><br /> <title></title><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> #warp {<br /> width: 1000px;<br /> height: 600px;<br /> position: relative;<br /> border: 10px solid black;<br /> }</p> <p> #div1 {<br /> width: 50px;<br /> height: 50px;<br /> padding: 20px;<br /> background-color: pink;<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> border-radius: 50px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="warp"><br /> <div id="div1"></div><br /> </div><br /> </body><br /> <script type="text/javascript"><br /> var oWarp = document.getElementById("warp");<br /> var oDiv1 = document.getElementById("div1");<br /> //最大运动宽度<br /> var maxWidth = oWarp.clientWidth – oDiv1.offsetWidth;<br /> var maxHeight = oWarp.clientHeight – oDiv1.offsetHeight;<br /> var speedY = 6;<br /> var speedX = 8;<br /> var timer = setInterval(function () {<br /> var iTargetX = 0;<br /> var iTargetY = 0;</p> <p> iTargetY = speedY > 0 ? maxHeight : 0;<br /> iTargetX = speedX > 0 ? maxWidth : 0;</p> <p> if (Math.abs(iTargetX – oDiv1.offsetLeft) <= Math.abs(speedX)) {<br /> oDiv1.style.left = iTargetX + "px";<br /> //当到达目标值是,元素做反向运动,改变速度<br /> speedX *= -1;<br /> } else {<br /> oDiv1.style.left = oDiv1.offsetLeft + speedX + "px";<br /> }<br /> if (Math.abs(iTargetY – oDiv1.offsetTop) <= Math.abs(speedY)) {<br /> oDiv1.style.top = iTargetY + "px";<br /> //当到达目标值是,元素做反向运动,改变速度<br /> speedY *= -1;<br /> } else {<br /> oDiv1.style.top = oDiv1.offsetTop + speedY + "px";<br /> }<br /> },20);</p> <p> </script><br /> </<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>> » 本文来自：前端开发者 » 《JS原生 简单的物体碰撞回弹笔记》 » 本文链接地址：https://www.rokub.com/8845.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册