Javascript 键盘事件移动图片

最新推荐文章于 2022-04-17 09:13:30 发布

weixin_34220834

最新推荐文章于 2022-04-17 09:13:30 发布

阅读量181

点赞数

文章标签： javascript ViewUI

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现通过键盘方向键控制图片在页面中的移动。图片初始位置固定，用户可以通过上、下、左、右四个方向键来调整其位置。

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

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>