js事件实现通过键盘移动图片

最新推荐文章于 2022-07-19 17:09:49 发布

原创最新推荐文章于 2022-07-19 17:09:49 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#移动 #事件 #事件的应用 #javascript #onkeydown

前端学习笔记专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现通过键盘上下左右移动图片。在实践中遇到的问题包括：因变量名与window.top冲突导致的移动失败，以及将变量置于函数内部导致每次移动仅能移动5像素。解决方法包括更换变量名和使用全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   #img1{
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<body onkeydown="move(event)">
    <!--<p id="p1">鼠标的坐标</p>-->
     <img src="../img/download_logo.png" id="img1">
</body>
<script>
    var top1 =0;
    var left =0;
    function move(e){
//        var p1 = document.getElementById("div");
//        p1.innerHTML = e.clientX+","+e.clientY;

        switch (e.keyCode){
            case 37:left -=5;break;
            case 38:top1 -=5;break;
            case 39:left +=5;break;
            case 40:top1 +=5;break;
        }
        var img1 =document.getElementById("img1");
        img1.style.top = top1+"px";
        img1.style.left = left+"px";
    }


</script>