S設置自定義快捷鍵並實現圖片上下左右移動

1. 簡單的來看下效果圖

2. 是不是感覺很有趣呢

3. 下面就是大家關心的代碼咯
   HTML

<div align="center" style=" text-align-all: center">
<h1 align="center">修改按鍵</h1>
<input type="text" id="up" onkeyup="myFunction('up')" maxlength="1">上<br>
<input type="text" id="below " onkeyup="myFunction('below')" maxlength="1">下<br>
<input type="text" id="left" onkeyup="myFunction('left')" maxlength="1">左<br>
<input type="text" id="right " onkeyup="myFunction('right')" maxlength="1">右<br>
<button onclick="show()">確定修改</button>
</div>
<lable id="show"/>
<img id="img" src="a.png" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px"/>

js

<script type="text/javascript">
    //獲取圖片id
    var obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    var up,below,left,right;
    var up1,below1,left1,right1;
    //點擊按鈕保存輸入的鍵值
    function show(){
        up = up1;
        below = below1;
        left = left1;
        right= right1;
    }
    //判斷上下左右輸入框
    function myFunction(str){
        if(str=="up") {
            up1 = event.keyCode ;
        }
        if(str=="below") {
            below1= event.keyCode;
        }
        if(str=="left") {
            left1= event.keyCode;
        }
        if(str=="right") {
            right1 =event.keyCode;
        }

    }
    //移動的關鍵 
    function move() {

        console.log(event.keyCode);
        if (event.keyCode == parseInt(left)) {
            //左
            obj.left -= 80;
        }
        if (event.keyCode == parseInt(up)) {
            //上
            obj.top -= 80;
        }
        if (event.keyCode == parseInt(right)) {
            //右
            obj.left += 80;
        }
        if (event.keyCode == parseInt(below)) {
            //下
            obj.top += 80;
        }
        obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
    }

    document.onkeydown = move;
</script>

到這裏就要結束咯
這些就是設置按鍵移動圖片的代碼咯
關注初級程序程序員不迷路會不斷更新哦