使用JavaScript自定义按键移动图片

最新推荐文章于 2021-11-05 20:25:43 发布

你看我是谁

最新推荐文章于 2021-11-05 20:25:43 发布

阅读量281

点赞数

分类专栏： js DOM 文章标签： Java Script

本文链接：https://blog.csdn.net/zyk262511/article/details/102596179

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

DOM

1 篇文章 0 订阅

订阅专栏

使用JavaScript自定义按键移动图片

先上效果图

在这里插入图片描述 思路：使用DOM事件和event.keyCode获取自定义的按键码然后进行图片的移动

JS代码如下

var obj = document.getElementById("img");
        obj.left = 0;
        obj.top = 0;
        var getTop,getBom,getLeft,getRight;
        var inpTop,inpBom,inLeft,inpRight;
        function direc(a) {
            var key = event.keyCode;
            alert(event.keyCode);
            if (a == "up"){
                inpTop= key;
            }
            if (a == "bom"){
                inpBom= key;
            }
            if (a == "left"){
                inLeft= key;
            }
            if (a == "right"){
                inpRight= key;
            }
        }
        function f() {
            getTop= inpTop;
            getBom= inpBom;
            getLeft= inLeft;
            getRight= inpRight;
            alert(up+":"+bom+":"+left+":"+right);
            define();
        }
        function define(){
            console.log(event.keyCode);
            var key = window.event.keyCode;
            if(key == parseInt(getLeft) || key == 37){
                //左
                obj.left -=80;
            }
            if(key == parseInt(getTop) || key == 38){
                //上
                obj.top -=80;
            }
            if(key == parseInt(getRight) || key == 39){
                //右
                obj.left +=80;
            }
            if(key == parseInt(getBom) || key == 40){
                //下
                obj.top +=80;
            }
            obj.style.left = obj.left+'px',obj.style.top = obj.top+'px';
        }
        document.onkeydown = define;