<!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/201211/168081.html  我刚开始安装mysql的时候,在windows的服务里面可以看到,但是装了以后有一段时间没有 ...

  2. 设计模式之——单例模式(Singleton)的常见应用场景

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  3. Communication System(dp)

    Communication System Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 25006 Accepted: 8925 ...

  4. JAVA基础知识之Collections工具类

    排序操作 Collections提供以下方法对List进行排序操作 void reverse(List list):反转 void shuffle(List list),随机排序 void sort( ...

  5. 准确率(Precision)、召回率(Recall)以及F值(F-Measure)

    转载自:http://blog.csdn.net/yechaodechuntian/article/details/37394967 https://www.zhihu.com/question/19 ...

  6. 2016 ACM/ICPC Asia Regional Qingdao Online HDU5883

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5883 解法:先判断是不是欧拉路,然后枚举 #pragma comment(linker, "/S ...

  7. EasyUI扩展方法

    EasyUI扩展方法: 1.我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行.请问大家怎么配置才是指定行的啊? 配置 ...

  8. Repeater删改

    一.Repeater删改 中心思路:点击"删除"链接,跳转到"删除"网页,在"删除"网页里面执行删除方法,然后再返回主界面,根据删除界面返回 ...

  9. 修改Netbeans默认使用UTF-8编码

    NetBeans是一款优秀的开源集成开发环境,可以用于Java,C/C++,PHP等语言的开发.同时它也是一个可扩展的开发平台,可以通过插件来扩展官方版本没有的功能.自从被Oracle这个开源杀手收购 ...

  10. 如何更改java应用程序标题栏默认图标

    方法一: 如果你用过Toolkit类,这将是一件很简单的事情: Toolkit tk=Toolkit.getDefaultToolkit() Image image=tk.createImage(&q ...