JS中使用上下左右键盘控制元素移动

最新推荐文章于 2024-07-12 12:03:01 发布

不可名状邵雅虎

最新推荐文章于 2024-07-12 12:03:01 发布

阅读量1.8k

点赞数 6

本文链接：https://blog.csdn.net/shaoyahu/article/details/105667012

版权

想要使用js实现操作上下左右键盘控制页面中元素移动，需要解决的问题有，

如何获取按键触发信息
如何使用已触发的按键信息移动元素

元素和样式

    <style>

        #car{

            width: 64px;

            height: 51px;

            background-image: url('选上我最爱的小汽车！');

            background-size: cover;

            position: absolute;

            left: 500px;

            top: 300px;

        }

    </style>

<body>

    <div id="car" ></div>

</body>

使用绝对定位将小汽车的位置布局在页面中间差不多的地方

js代码

    <script>

        window.onload = function(){

            var car = document.getElementById('car');

            document.onkeydown = function(event){

                console.log(event.keyCode);

                switch(event.keyCode){

                    case 37:car.style.left = car.offsetLeft-10+'px';break;

                    case 38:car.style.top = car.offsetTop-10+'px';break;

                    case 39:car.style.left = car.offsetLeft+10+'px';break;

                    case 40:car.style.top = car.offsetTop+10+'px';break;

                }

            }

        }

    </script>