jquery按键监听(移动div)

本文介绍了一个使用键盘事件控制DIV元素移动的实例。通过监听键盘的按下与释放事件,实现利用箭头键调整页面上DIV元素位置的功能。具体地,按下左箭头键时,DIV元素向左移动10像素;按下右箭头键时,向右移动10像素;按下上箭头键时,向上移动10像素;按下下箭头键时,向下移动10像素。

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

完整的 key press 过程分为两个部分:
1. 按键被按下;
2. 按键被松开。
当按钮被按下时,发生 keydown 事件。
keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

event.which属性指示按了哪个键或按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jquery不可缺少 -->
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <title>按键监听</title>
</head>
<body>
    <div id="content" style="position:relative;width: 200px;height:200px;background:red"></div>

</body>
<script>    
  $(document).keydown(function(event){ 
    switch(event.which){
        case 37:
        $("#content").css("left","-=10px") ;
        break;
        case 38:$("#content").css("top","-=10px");
        break;
        case 39:$("#content").css("left","+=10px");
        break;
        case 40:$("#content").css("top","+=10px") ;
        break;
        default:break;
    }
  });
    $(document).keyup(function(event){ 
        $(document).keydown=null;
        return false;
    });
</script>
</html>

通过按下↑↓←→来移动div元素的位置
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值