一个简单的通过上下左右键移动div的案例--可用于游戏的用户操作界面

最新推荐文章于 2022-07-28 00:38:21 发布

javascript前锋

最新推荐文章于 2022-07-28 00:38:21 发布

阅读量2.2k

点赞数

分类专栏： java学习

本文链接：https://blog.csdn.net/trsli/article/details/16804979

版权

这是一个通过监听键盘事件，使div元素根据上下左右键在页面内移动的JavaScript案例，适用于游戏用户界面的操作设计。代码中包含兼容IE和Firefox的键盘事件处理，并实现了div在限定区域内的移动。

摘要由CSDN通过智能技术生成

 <meta name="Generator" content="EditPlus">
  <style type="text/css">
  body{padding:0;margin:0}
 .main{height:400px;width:400px;background:#123321}
 .mouse{height:20px;width:20px;position:absolute;background:red}
  </style>
 </head>
 <body οnkeydοwn="adddiv(event)">
  <div id="main" class="main" >
  <div id="mouse" class="mouse" />
  <script type="text/javascript">
  /**这样做的目的是节约空间，但是绝对不会解决性能问题*/
  function getdom(id){
   
  return document.getElementById(id);
 }
 /**在body中定义一个全局函数并接收其中的事件*/
 function adddiv(event){
   
  var dom=getdom("mouse");
  var main=getdom("main");
  //获取主页面的宽度和高度，让小div在其内部运动
  var xm=mai