<!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

键盘控制div移动的更多相关文章

  1. js键盘控制div移动，解决停顿问题

    问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...

  2. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

  4. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  6. 键盘控制div上下左右移动 (转)

    <html> <head> <title></title> <link rel="stylesheet" type=" ...

  7. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 第一课 1) 控制div属性 总结

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

随机推荐

  1. javascript事件处理解析

    一.什么是事件!(w3c解释) 事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素 ...

  2. DataRow数组转换DataTable

    public DataTable ToDataTable(DataRow[] rows) { if (rows == null || rows.Length == 0) return null; Da ...

  3. 编译ITK

    [2016年7月4周]编译ITK 1.下载必备文件 InsightToolkit-4.8.1.cmake 2.cmake编译 修改CMAKE_INSTALL_PREFIX配置到需要生成的目录下面去. ...

  4. CaronteFX插件简介

    CaronteFX是一个基于烘培的unity物理增强插件,而不是实时的. 也正因为如此可以在Cutscene中使用,而不用切到maya之类得到软件里去做,以提高效率 Adam demo里一些角色布料( ...

  5. 【linux命令与工具】ethtool命令

    ethtool是用于查询及设置网卡参数的命令. 如果command not found可以用apt-get/yum添加. 主要参数: ethtool ethX//查看ethX设备属性 ethtool ...

  6. linux内核2.4.x网络接口分析层次图

    http://blog.csdn.net/wswifth/article/details/5108744 今天大概分写了下<Linux内核2.4.x的网络接口源码的结构[转]>中的结构层次 ...

  7. 一种奇特的DEDE隐藏后门办法

    转自:http://www.91ri.org/6462.html   一种奇特的DEDE隐藏后门办法 单位某站用的dedecms,今天被某黑阔getshell了,提交到了wooyun. 为了还原黑阔入 ...

  8. PowerShell处理RSS信息

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 环境:Windows Server 2012 EN(解决PowerShell控制台中文乱码问题:方 ...

  9. SharePoint自动化系列——Create a local user and add to SharePoint

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 实现过程:在本地创建一个local user并将该user添加到Administrators组中, ...

  10. C#中通过Selenium定位<a>标签的问题

    刚才在QQ群里看到有人提问,如何实现退出百度登录问题.那么之所以会有这个问题,主要是因为这个元素,如下图所示,是无法直接定位到的: 经过研究发现,要想定位到这种元素,拢共分两步: 第一步,把鼠标移到能 ...