2020-09-16

最新推荐文章于 2022-11-18 10:31:21 发布

清籼

最新推荐文章于 2022-11-18 10:31:21 发布

阅读量103

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45656118/article/details/108631014

版权

移动图标（move）

	<style type="text/css">
		#img1 {
			position: absolute;
			top: 0px;
			left: 0px;
		}
	</style>
</head>
<body onkeydown="move(event)">
	<img id="img1" src="../云购一号/img3/切图/download_iphone_selected.png" alt="">
</body>
<script type="text/javascript">
	var top1 = 0;
	var left = 0;

	function move(e) {
		switch (e.keyCode) {
			case 37:
				left -= 5;
				break;
			case 38:
				top1 -= 5;
				break;
			case 39:
				left += 5;
				break;
			case 40:
				top1 += 5;
				break;
		}
		var img1 = document.getElementById("img1");
		img1.style.top = top1 + "px";
		img1.style.left = left + "px";

如果把top1改成top，就会导致上下移动失败，这是因为window.top这个全局变量冲突了，换一个变量名就好了
如果把top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是零，不会保留上一次的值，如果需要保留，就只能使用全局变量！