<!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. coco2dx服务器简单例子

    实现的单个socket例子,了解socket原理. 先创建一个win32的项目(命令行的),作为服务端 // SocketServer.cpp : 定义控制台应用程序的入口点.// #include ...

  2. poj3372 Candy Distribution

    可以证明: f(k) = k *(k - 1)/ 2 (1 ≤ k ≤ n)是n的完全剩余系当且仅当n = 2 ^ t. http://poj.org/problem?id=3372

  3. Java 期末复习提纲

    Java 开发环境 Java 的特点 面向对象.跨平台.能把中小型程序写成大型程序 开发 Java 的流程 设计类 写代码 重构 Java 程序规范 Javadoc 风格注释 接口以 able 结尾 ...

  4. 怎样解决：未找到路径“……”的控制器或该控制器未实现 IController？

    就是要加上new{area=""},比如下面的: @{Html.RenderAction("Cartsummary","ShoppingCart&qu ...

  5. torch基本操作

    1.在terminal中th进入troch,th+文件名.lua运行文件.进入torch之后,dofile+"文件名.lua"运行文件

  6. hdu敌兵布阵

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  7. webserer错误

    HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理. 解决方法: C:\Program Files\Microsoft Visual Stu ...

  8. Linux下mysql备份 恢复

    转载自http://blog.chinaunix.net/uid-20577907-id-161611.html 比如我们要备份mysql中已经存在的名为linux的数据库,要用到命令mysqldum ...

  9. Debug不崩溃Release版本崩溃的一种原因

    今天有一个工程Debug是正常,Release崩溃,郁闷至极. 研究了一下下午,原因是一个类成员变量没有构造函数中初始化.而Debug版本正好没有问题. 所以定义类成员,一定不能忘记初始化!!

  10. ubuntu中rar与unrar用法详解

    本文转载:http://helloklzs.iteye.com/blog/1139993 安装: sudo apt-get install rar 这样就可以安装了 删除是以下语句 sudo apt- ...