zoukankan      html  css  js  c++  java
  • 键盘控制Div的移动

    <!DOCTYPE HTML>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>事件对象-通过键盘控制div运动</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    *{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';}
    .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block;}
    * html .clearfix{height:1%}
    .clearfix{display:black;}
    #box{100px;height:100px;background:red;position:absolute;}
    </style>
    </head>
    <body>
    <div id='box'></div>
    </body>
    <script type="text/javascript">
    window.onload=function(){
      var oDiv =document.getElementById('box');
      document.onkeydown = function(ev){
          var Event = ev||event;
    	  var L = oDiv.offsetLeft;
    	  var T = oDiv.offsetTop;
    	  //alert(Event.keyCode);
    	  //←37↑38→39↓40
          if(Event.keyCode==37){
            if(L<=0){
    		   L = 0;
    		}else{
    		  oDiv.style.left = oDiv.offsetLeft-10+'px'; 
    		}     
    	  }else if(Event.keyCode==38){
    	    if(T<=0){
    		   L=0; 
    		}else{
    		  oDiv.style.top = oDiv.offsetTop-10+'px';  
    		}
    	  }else if(Event.keyCode==39){
    	    if(L>=document.documentElement.clientWidth-oDiv.offsetWidth){
    		   L=document.documentElement.clientWidth-oDiv.offsetWidth;
    		}else{
    		  oDiv.style.left = oDiv.offsetLeft+10+'px'; 
    		}
    	  }else if(Event.keyCode==40){
    	    if(T>=document.documentElement.clientHeight-oDiv.offsetHeight){
    		   T=document.documentElement.clientHeight-oDiv.offsetHeight;
    		}else{
    		  oDiv.style.top = oDiv.offsetTop+10+'px';
    		}
    	  }	  
      }
    }
    </script>
    </html>
    

    鼠标事件:
    clientX 是可视区的横坐标
    clientY 是可视区的纵坐标
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    document.documentElement.clinetWidth 可视区的宽
    document.documentElement.clinetHeight 可视区的高
    键盘事件
    onkeydown
    onkeyup
    keyCode-检测鼠标数字
    Event = ev||event;
    Event.keyCode 用法

     

  • 相关阅读:
    修改BeEF工具默认密码
    Metasploit发布了新版本5.0.83
    抓包概念大比较:数据报、数据包、分组
    Metasploit reload命令使用技巧
    Metasploit设置VERBOSE参数技巧
    了解 JavaScript (3)- 马上开始
    了解 JavaScript (2)- 需要了解的一些概念
    了解JavaScript(1)- Hello World
    ASP入门(二十三)- 数据库插入、更新和删除操作
    ASP入门(二十二)-连接数据库
  • 原文地址:https://www.cnblogs.com/xiaoxiaosha/p/3657986.html
Copyright © 2011-2022 走看看