运用js实现图片的上下左右，并自定义按键_js 在图片中自定义按钮位置-CSDN博客

本文链接：https://blog.csdn.net/wxm_1507448498/article/details/102596805

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<lable id="show" />
<img id="img" src="22329.png" style="width: 80px;height: 60px;position:absolute ;left: 0px;top: 0px; " />

<table align="center" border="0">
    <tr>
        <td>上</td>
        <td>
            <input type="text" id="shang" onkeyup="n('shang')" />
        </td>
    </tr>
    <tr>
        <td>下</td>
        <td>
            <input type="text" id="xia" onkeyup="n('xia')" />
        </td>
    </tr>
    <tr>
        <td>左</td>
        <td>
            <input type="text" id="zuo" onkeyup="n('zuo')" />
        </td>
    </tr>
    <tr>
        <td>右</td>
        <td>
            <input type="text" id="you" onkeyup="n('you')" />
        </td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="确定" onclick="f()" /></td>
    </tr>
</table>
<script language="JavaScript">
    var obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    var shang,xia,zuo,you;
    var shang1,xia1,zuo1,you1;

    function f() {
        shang = shang1;
        xia = xia1;
        zuo = zuo1;
        you = you1;
        alert("您设置的热键键值为:" + shang + ";" + xia + ";" + zuo + ";" + you);
        move();
    }

    function n(str) {
        var key = window.event.keyCode;
        if (str == "shang") {
            shang1 = key;
        }
        if (str == "xia") {
            xia1 = key;
        }
        if (str == "zuo") {
            zuo1 = key;
        }
        if (str == "you") {
            you1 = key;
        }
    }

    function move() {
        console.log(event.keyCode);
        var key = window.event.keyCode;
        if (key == parseInt(shang) || key == 38) {
            obj.top -= 80;
        }
        if (key == parseInt(xia) || key == 40) {
            obj.top += 80;
        }
        if (key == parseInt(zuo) || key == 37) {
            obj.left -= 80;
        }
        if (key == parseInt(you) || key == 39) {
            obj.left += 80;
        }
        obj.style.left = obj.left + 'px', obj.style.top = obj.top + 'px';
    }
    document.onkeydown = move;
</script>
</body>
</html>