一、今天空闲时间写了一个自定义移动方向的快捷键,并控制了图片移动的范围,开始写的时候,遇到了问题,就是如何让它一个一个获取不同键位上的键码,然后搜了下,找到了解决办法,具体代码在后面
效果图如下:
二、具体效果实现思路
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 领取源代码