键盘控制div移动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>键盘控制div移动</title>
<style>
div{width:100px;height:100px;background:red;position:absolute;}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).keydown(function(ev){
var l=$("div").offset().left;
var t=$("div").offset().top;
if(ev.which==39){
$("div").css("left",(l+10));
}
if(ev.which==37){
$("div").css("left",(l-10));
}
if(ev.which==38){
$("div").css("top",(t-10));
}
if(ev.which==40){
$("div").css("top",(t+10));
}
});
</script>
</head>
<body>
<div></div>
</body>
</html>
补充:
alert($('div').width()); //不包含 padding border与大小有关
alert($('div').innerWidth()); //包含内边距 padding
alert($('div').outerWidth()); //包含内边距 padding+边框 border
alert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步