10006 摁住键盘AWDS键移动物体的源代码 – 恵玩科技

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>网页标题</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		#tanke{
			position: absolute;
			left: 100px;
			top: 100px;
		}
	</style>
	<script type="text/javascript">

		//在一个网页中,使用上下左右箭头来移动某个对象
		var x = 100;
		function move( evt )
		{
		var obj = document.getElementById("tanke");
			//var obj = evt.target;                     //修改可惜不能用,奇怪
			

			var code = evt.keyCode;	//按键的键值

			//alert(code);
			if(code == 65 )	//往左,即左箭头
			{
				x -= 10;
				obj.style.left = x + "px"
			}
			else if(code ==68 )	//往右,右箭头
			{
				x += 10;
				obj.style.left = x + "px"
			}
			//上下箭头自己补充:
			else if(code == 87 )	//往上,即左箭头
			{
				x -= 10;
				obj.style.top = x + "px"
			}
			else if(code == 83)	//往下,右箭头
			{
				x += 10;
				obj.style.top = x + "px"
			}

		}
	</script>
</head>
<body onkeyup="move( event )"><div>
	<img src="http://i1.fuimg.com/602888/bae9faf509ca964bt.jpg" id="tanke" width="100" />
	<p>摁住AWDS可以移动灯泡位置</p>
</body>
</html>

 

打赏作者