移动的盒子

2021-04-09 04:34:19 阅读：165 来源： 互联网

标签：10 盒子 top oBox1 var 移动 keyCode left

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } .box { width: 800px; height: 500px; border: 10px solid black; margin: auto; position: fixed; left: 0; right: 0; bottom: 0; top: 0; } .box1 { width: 30px; height: 30px; background-color: #f00; border: 10px solid black; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> <script> var oBox = document.querySelector(".box"); var oBox1 = document.querySelector(".box1"); var maxTop = oBox.clientHeight - oBox1.offsetHeight; var maxLeft = oBox.clientWidth - oBox1.offsetWidth; var t; document.onkeydown = function (e) { var e = event || e; var keyCode = e.keyCode || e.which; console.log(keyCode); clearInterval(t); t = setInterval(function () { //定义上下的方向的移动距离,是通过offsetLeft是具有定位元素的祖先元素获取的 var left = oBox1.offsetLeft; var top = oBox1.offsetTop;
if (keyCode == 38) { top -= 10; } if (keyCode == 40) { top += 10; } if (keyCode == 37) { left -= 10; } if (keyCode == 39) { left += 10; } if (left < 0) { left = 0; } if(top<0){ top=0; } if (top > maxTop) { top = maxTop; } if (left > maxLeft) { left = maxLeft; } oBox1.style.cssText = `left:${left}px;top:${top}px`; }, 50); }; </script> </body> </html>

标签：10,盒子,top,oBox1,var,移动,keyCode,left
来源： https://www.cnblogs.com/czb1218/p/14635561.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动的盒子