<!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. 【转】MYSQL入门学习之三：全文本搜索

    转载地址:http://www.2cto.com/database/201212/173873.html 一.理解全文本搜索   www.2cto.com   1.MyISAM支持全文本搜索,而Inn ...

  2. 数据库连接池（DBCP:为数据统一建立一个缓冲池，现在企业开发使用）

    数据库连接池:(里面放了许多连接数据的链接,负责分配,管理,释放数据库连接,可重复使用连接,而不新建  )为数据统一连接建立一个缓冲池,放好了一定数据库连接,使用时在缓冲池里面拿,用完之后再还给缓冲池 ...

  3. 查找练习 hash——出现过的数字 分类： 查找 2015-06-18 17:30 7人阅读 评论(0) 收藏

    查找练习 hash--出现过的数字 *Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 有一个数据字典,里面存有n个数字(n<=10 ...

  4. apache-common pool的使用

    Apache commons-pool本质上是"对象池",即通过一定的规则来维护对象集合的容器;commos-pool在很多场景中,用来实现"连接池"/&quo ...

  5. #在lua中的运用

    在lua中"#"表示返回表长度或字符串长度 例子一: a = "Hello " b = "World" print("Concat ...

  6. 2016年10月14日 星期五 --出埃及记 Exodus 18:25

    2016年10月14日 星期五 --出埃及记 Exodus 18:25 He chose capable men from all Israel and made them leaders of th ...

  7. Linux 性能监控、测试、优化工具

    Linux 平台上的性能工具有很多,眼花缭乱,长期的摸索和经验发现最好用的还是那些久经考验的.简单的小工具.系统性能专家 Brendan D. Gregg 在最近的 LinuxCon NA 2014 ...

  8. PM（Project Manager）：系列博客

    http://blog.csdn.net/MoreeVan/article/list/2

  9. Android编译选项eng、user、userdebug的区别

    eng:debug 版本 user: release 版本 userDebug版本:部分debug版本 LOCAL_MODULE_TAGS := user eng optional test这个样子. ...

  10. ContentProvider官方教程(7)3种访问形式：批处理、异步访问、intent间接访问(临时URI权限)

    Alternative Forms of Provider Access Three alternative forms of provider access are important in app ...