小人

	<div id="wrap">
		<img id="ren" src="images/b1.gif" alt="">
	</div>		
	<script>


		// 获取小人的对象
		var Ren = document.getElementById('ren');

		// 绑定键盘按下的事件
		document.onkeydown = function(event){
			//	处理兼容性的问题 
			var e = window.event || event;


			// 设置人 每次移动的步长
			var step = 10;

			/*
				w-87   s-83   a-65   d-68
			*/ 
			switch (e.keyCode) {
				case 87: // 上
				Ren.style.top = Math.max(0,Ren.offsetTop-step)+'px';
					changeTu('u1.gif','u2.gif');
					break;
				case 83: // 下
					// alert(Ren.offsetTop);  当前top 值 
					// Ren.style.top = Ren.offsetTop+step+'px';
					// 向下的边界 top 470  如果470 大  就取470
				Ren.style.top = Math.min(470,Ren.offsetTop+step)+'px';
					changeTu('b1.gif','b2.gif');
					break;
				case 65: // 左 
					// Ren.style.left = Ren.offsetLeft-step+'px';
					Ren.style.left = Math.max(0,Ren.offsetLeft-step)+'px';
					changeTu('l1.gif','l2.gif');
					break;
				case 68: // 右 
					// Ren.style.left = Ren.offsetLeft+step+'px';
					Ren.style.left = Math.min(470,Ren.offsetLeft+step)+'px';
					changeTu('r1.gif','r2.gif');
					break;
			}

		}

		// 换图函数
		function changeTu(img1,img2){
			// 根据方向来确定显示的图片
			//截取（substr）绝对路劲的最后一个（lastIndexOf）/
			newTu=Ren.src.substr(Ren.src.lastIndexOf('/')+1);

			if(newTu==img1){
				Ren.src = 'images/'+img2;
			}else{
				Ren.src = 'images/'+img1;
			}
			
		}

	</script>