js键盘事件，移动

最新推荐文章于 2022-10-26 09:43:03 发布

海龟先生plus

最新推荐文章于 2022-10-26 09:43:03 发布

阅读量304

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/94436942

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //box的移动，
        //获取移动相关键的ascll值，用switch判断来匹配，当相等时，改变它距离父元素的距离
        var box=document.querySelector(".box")
        //上38 下40 左37 右39  上下左右的ascll码
        onkeydown=function(){   //当用户按下键盘上任意键触发，如果按住不放，会重复触发
            var speed=10
            if(event.shiftKey){     //组合键，注意写法 shiftKey
                speed=100
            }
            switch(event.keyCode){  //keyCode，是获取Ascll码，但是要配合event使用
                case 38:
                box.style.top=box.offsetTop-speed+"px";//offsetTOP  offsetLeft,距离父元素上，左的距离，配合定位使用
                break;
                                //box.style.top=box.offsetTop, box距离上边的高度为，box距离父元素的top
                case 40:
                box.style.top=box.offsetTop+speed+"px";
                break;

                case 37:
                box.style.left=box.offsetLeft-speed+"px";
                break;

                case 39:
                box.style.left=box.offsetLeft+speed+"px";
                break;
            }
            
        }
    </script>

</body>

在这里插入图片描述

海龟先生plus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js键盘事件，移动

<style> *{ margin: 0px; padding: 0px; } .box{ width: 100px; height: 100px; background-color: gold; ...
复制链接

扫一扫

专栏目录