event 事件键盘控制div移动

最新推荐文章于 2018-12-25 20:01:54 发布

weixin_34238633

最新推荐文章于 2018-12-25 20:01:54 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5268790.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
				
				
			}
		</style>
		<script>
			document.onkeydown = function(ev){
				var oEvent = ev||event;
				var oDiv = document.getElementById("div1");
				
				if(oEvent.keyCode == 37)
				{
					oDiv.style.left = oDiv.offsetLeft - 10 +"px";
					
				}
				if(oEvent.keyCode == 39)
				{
					oDiv.style.left = oDiv.offsetLeft + 10 +"px";
				}
				
				if(oEvent.keyCode ==38)
				{
					oDiv.style.top = oDiv.offsetTop -10 +"px";
				}
				if(oEvent.keyCode ==40)
				{
					oDiv.style.top = oDiv.offsetTop +10 +"px";
				}
			
				
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5268790.html