让div跟按键走,基本键码

---恢复内容开始---

想要快速的做这样一个简单效果,首先要明白它的原理;

    样式设置的重点,就是要跟上次拖拽一样,给该元素绝对定位,

    事件就是onkeydown,事件,通过判断键码,来执行;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#dDiv{
				 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var dDiv=document.getElementById("dDiv")
				var a=8;
				var b=8;
				
				window.onkeydown = function(e){
					if(e.keyCode==37){
                            //左 // 当鼠标按下时判断键码 dDiv.style.left=b-- +"px" } if(e.keyCode==38){
                            //上 dDiv.style.top=a-- +"px" } if(e.keyCode==39){
                            //右 dDiv.style.left=b++ +"px" } if(e.keyCode==40){
                            //下 dDiv.style.top=a++ +"px" } } } </script> </head> <body> <div id="dDiv"> </div> </body> </html>

    2.熟悉一下常使用的特殊键码:

      

按键   	      键码	  按键	  键码	 按键  	 键码	
BackSpace 	8	   Esc	  27	    Right Arrow  39
Tab	                9	Spacebar	  32	    Down Arrow	  40
Clear    	       12	Page Up	  33	    Insert	          45	
/?	             191      Enter	         13	   Page Down	 34	
Delete	      46      `~	         192      -_	         189
.>	              190      Shift	         16	     End	       35	
Num Lock      144      [{219         Control  	17	
Home	     36      ;:	       186	      /|	      220
Alt	              18	  Left Arrow	37	    =+	    187	
]}	             221            Cape Lock	                                20	

  

    

      

---恢复内容结束---

原文地址:https://www.cnblogs.com/cyj-dz/p/7126982.html