Javascript学习笔记（13_2） --js事件案例（小人快跑）

桑丘紫言

于 2018-06-19 14:15:10 发布

阅读量380

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39209728/article/details/80733216

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小人快跑</title>
		<style type="text/css">
			#imgs{
				position: absolute;
				left:200px;
				top:50px;
			}
		</style>
	</head>
	<body>
		<img src="images/11.png"  id="imgs"/>
		<script src="script.js"></script>
	</body>
</html>

var imgs = document.getElementById("imgs");
var i = 0;
document.onkeydown = function(e){
	
	var e = window.event || e;
	
	switch(e.keyCode){
		
		case 37: //左
			
			imgs.style.left = imgs.offsetLeft - 10+"px";
			run("2");
			
		break;
		case 38: //上
			imgs.style.top = imgs.offsetTop- 10+"px";
			run("4");
			
		break;
		case 39: //右
			imgs.style.left = imgs.offsetLeft + 10+"px";
			run("3");
			
		break;
		case 40: //下
			imgs.style.top = imgs.offsetTop + 10+"px";
			run("1");
			
		break;
	}
}

function run(value){
	i++;
	if(i > 9){
		i = 1;
	}
	imgs.setAttribute("src","images/"+value+i+".png")
}