自定义移动方向的快捷键

一、今天空闲时间写了一个自定义移动方向的快捷键，并控制了图片移动的范围，开始写的时候，遇到了问题，就是如何让它一个一个获取不同键位上的键码，然后搜了下，找到了解决办法，具体代码在后面
效果图如下：

二、具体效果实现思路
1、先写出界面效果，并给图片设置移动范围，再写四个输入框，来自定义上下左右方向，下面来看CSS样式代码：

<style type="text/css">
			#div1 {
				width: 1000px;
				height: 700px;
				margin-left: 100px;
				margin-top: 100px;
			}
			
			#div2 {
				width: 700px;
				height: 700px;
				float: left;
			}
			
			#div3 {
				width: 560px;
				height: 560px;
				background-image: url(2.jpg);
				margin-left: 70px;
				margin-top: 70px;
				position: absolute;
				float: left;
			}
			
			#div4 {
				width: 250px;
				height: 200px;
				font-size: 20px;
				line-height: 28px;
				float: left;
				border: 1px solid;
			}
			
			#img {
				width: 70px;
				height: 70px;
				position: absolute;
			}
		</style>

2、样式有了，接下来就是HTML代码了：

<div id="div1">
			<div id="div2">
				<div id="div3">
					<img src="1.jpg" id="img" />
				</div>
			</div>
			<div id="div4">
				<table>
					<tr>
						<th colspan="2" style="color: red;">自定义图片的移动快捷键</th>
					</tr>
					<tr>
						<th>上：</th>
						<td>
							<input type="text" id="top" onkeyup="getCode('top')" maxlength="1" />
						</td>
					</tr>
					<tr>
						<th>下：</th>
						<td>
							<input type="text" id="bottom" onkeyup="getCode('bottom')" maxlength="1" />
						</td>
					</tr>
					<tr>
						<th>左：</th>
						<td>
							<input type="text" id="left" onkeyup="getCode('left')" maxlength="1" />
						</td>
					</tr>
					<tr>
						<th>右：</th>
						<td>
							<input type="text" id="right" onkeyup="getCode('right')" maxlength="1" />
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="button" value="确定修改" onclick="confirm()" style="font-size: 20px;" /></td>
					</tr>
				</table>
			</div>
		</div>

3、js代码思路
a、找到图片的ID，再定义几个空变量，用来存储输入框的内容，然后写获取键码的方法
b、然后再写确认按钮的方法，把获得键码分别放入到up, bottom, left, right 变量中
c、最后写一个方法，来让图片能够移动，并且让它只能在一定范围内移动
代码如下：

<script type="text/javascript">
			var img = document.getElementById("img"); //获取图片的ID
			img.top = 0;
			img.left = 0;
			var up, bottom, left, right;
			var up1, bottom1, left1, right1;
			
			//把获取的上下左右的键码放入不同的变量
			function getCode(str) {
				if(str == "top") {
					up1 = event.keyCode;
				}
				if(str == "bottom") {
					bottom1 = event.keyCode;
				}
				if(str == "left") {
					left1 = event.keyCode;
				}
				if(str == "right") {
					right1 = event.keyCode;
				}
			}
			//确定修改快捷键 的方法
			function confirm() {
				//把获取的上下左右键码分别放到不同变量中
				up = up1;
				bottom = bottom1;
				left = left1;
				right = right1;
				change();
				alert("上：" + up + "/  " + "下：" + bottom + "/  " + "左：" + left + "/  " + "右：" + right);
			}
			//设置图片平移的快捷键
			function change() {
				//如果键码等于 左 方向键的键码，则向左移动
				if(event.keyCode == parseInt(left)) {
					//判断图片位置是否超出范围，如果超出则下次向左移动时回到上一个位置
					if(img.left < 0) {
						img.left = 0;
					} else {
						img.left -= 70;
					}
				}
				//如果键码等于 上 方向键的键码，则向上移动
				if(event.keyCode == parseInt(up)) {
					if(img.top < 0) {
						img.top = 0;
					} else {
						img.top -= 70;
					}
				}
				//如果键码等于 右 方向键的键码，则向右移动
				if(event.keyCode == parseInt(right)) {
					if(img.left > 490) {
						img.left = 490;
					} else {
						img.left += 70;
					}

				}
				//如果键码等于下方向键的键码，则向下移动
				if(event.keyCode == parseInt(bottom)) {
					if(img.top > 490) {
						img.top = 490;
					} else {
						img.top += 70;
					}

				}
				img.style.left = img.left + "px";
				img.style.top = img.top + "px";
			}
			document.onkeydown = change;
		</script>

3、代码上的图片
图片是规定好的大小


扫下面二维码关注微信公众号 回复：js1014 领取源代码