js 方向键实现图片移动效果

「已注销」

于 2019-10-25 12:51:53 发布

阅读量705

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/csdsnzxz/article/details/102740920

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html

<body onkeydown="change()">
        <img src="1.PNG" id="imgShow" style="width: 70px;height: 70px;
        position: absolute;left: 0px;top: 0px"/>

javascript

var img = document.getElementById("imgShow");
            img.left = 0;
            img.top = 0;
            function change(){
                //左-37 上-38 右-39 下-40
                var keyCode = event.keyCode;
                if(keyCode == 37){
                    img.left -=70;
                }
                if(keyCode == 38){
                    img.top -=70;
                }
                if(keyCode == 39){
                    img.left +=70;
                }
                if(keyCode == 40){
                    img.top +=70;
                }
                img.style.left = img.left + 'px',img.style.top = img.top + 'px';
            }

效果图

在这里插入图片描述

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 方向键实现图片移动效果

html<body onkeydown="change()"> <img src="1.PNG" id="imgShow" style="width: 70px;height: 70px; position: absolute;left: 0px;top: 0px"/>javascriptvar img = document.getEl...
复制链接

扫一扫