Javascript 键盘事件移动图片

关注

转载最新推荐文章于 2026-04-17 08:45:55 发布 1k 阅读 AI 写同款· GEO 优化 ›

JavaScript 鼠标事件、图片跟随鼠标移动。键盘事件 鼠标事件对象 event 对象代表事件的状态跟事件相关的一系列信息的集合现阶段我们主要是用鼠标事件对象 mouseEvent 和键盘事件对象KeyboardEvent 图片跟随鼠标移动 <body> <img src="images/h_h.jpg" alt="">  <script> var pic = docum 阅读详情

CODE:

<body onkeydown="movePic()">
    <div style="width:600px;height:300px;border:1px solid green">
        <img id="pic" src="lang.gif" style="border:0;width:80px;position:absolute;left:260;top:120">
    </div>
    <script>
        var pic = document.getElementById("pic");
        var step = 10;        
        var x = pic.style.pixelLeft;
        var y = pic.style.pixelTop;
        
        function movePic(){
            var code = event.keyCode;
 
            switch(code) {
                case 37:
                    x-=step;
                    pic.style.left = x; 
                    break;
                case 38:
                    y-=step;
                    pic.style.top = y;
                    break;
                case 39:
                    x+=step;
                    pic.style.left = x;
                    break;
                case 40:
                    y+=step;
                    pic.style.top = y;
                    break;            
            }
        }    
    </script>
</body>