键盘控制元素移动案例

想要实现键盘控制图片移动该怎么办呢? 

1.需要获取键盘2.需要获取图片坐标

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq+img/jquery-3.6.0.js"></script>
    <style type="text/css">
    h1{text-align: center}
    .box{
       position: absolute;   /*position: absolute;绝对定位*/
       left: 50%;top: 50%;
       width: 120px;height: 120px;
       background-image: url("jq+img/yy.png");
       border-radius: 50%;  /*向box元素添加向圆角边框 %以百分比定义圆角的形状*/
    }
    </style>
</head>
<body>
<h1>键盘控制元素移动案例</h1>
<hr/>
<div class="box"></div>
<script type="text/javascript">
    $(function (){
        /*
         * 上:38  w87
         * 下:40  s83
         * 左:37  a65
         * 右"39  d68
         */

    //计算页面的宽,高
        var pWidth=$(window).width();
        var pHeight=$(window).height();
        console.log(pWidth,pHeight);

    //绑定键盘事件
        $(document).keydown(function (event){

    //获取键的值
        console.log(event.which);
        var left=$('.box').offset().left;
        var top=$('.box').offset().top;

    //判断按键
        switch (event.which){
            case 38: //上移
            case 87: //W
            $('.box').offset({
                top:Math.max(top-10,0)
            });
            break;
            case 37: //左移
            case 65: //A
                $('.box').offset({
                    left:Math.max(left-10,0)
                });
                break;
            case 40: //下移
            case 83: //S
                $('.box').offset({
                    top:Math.min(top+10,pHeight)
                });
                break;
            case 39: //右移
            case 68: //D
                $('.box').offset({
                    left:Math.min(left+10,pWidth-80)
                });
                break;
        }
    });
    });
</script>
</body>
</html>
运行结果:





 


 


 


结论:offset() 方法设置或返回被选元素相对于文档的偏移坐标。


返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。






            

            
posted @ 
2022-04-05 19:02 
努力学爪哇 
阅读(47) 
评论(0) 
 
收藏 
举报