<!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. ACM题目————网格动物

    Lattice animal is a set of connected sites on a lattice. Lattice animals on a square lattice are esp ...

  2. asp.net dropdownlist和listbox

    if (!IsPostBack) { //页面初次加载时执行这里的内容 DataSet ds = new DataSet(); //数据集 ds.Tables.Add("stu") ...

  3. poj3270 Cow Sorting

    给定有序数组a[1...n]的一个置换a[σ(1)...σ(n)], 通过交换数组元素把置换后的数组恢复为有序, 定义进行一次交换的代价为两元素之和,试问此过程的最小总代价. 实际上一种置换即定义S ...

  4. git总结

    1.先画个图,先对git的操作有个直观了解 2.分析下git中文件是怎么存储的 正如下面所示git存储不是每次更改就会产生一个新的文件,而是产生一个版本,这个版本对应着记录每个文件的不同情况 具体的存 ...

  5. Sql Server 2008完全卸载方法(其他版本类似)

    一．    SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板” 2)点击“卸载程序”. 3)在程序列表中找到“Microsoft SQL Server 2008” ...

  6. Android权限安全(1)自定义,检查,使用权限

    1.自定义权限: <!-- 定义自定义权限 --> <permission android:name="com.example.f6k5i8.checkpermission ...

  7. VirtualBox中安装CentOS-6.6虚拟机（转载）

    1. 下载 可以到官网下载,http://mirror.centos.org/centos/ 如果下载速度太慢的话,也可以到163镜像下载: http://mirrors.163.com/centos ...

  8. word2007

      word2007   word2007图标   word2007边框和底纹   word2007扫描图片   word2007剪贴画   word2007图片   word2007页面视图   w ...

  9. C#大纲

    输入输出--数据类型--变量与常量--运算符表达式--语句(顺序.分支.循环)--数组--函数--结构体一.输入与输出.Console.ReadLine();Console.WriteLine();C ...

  10. 【leetcode❤python】172. Factorial Trailing Zeroes

    #-*- coding: UTF-8 -*-#给定一个整数N,那么N的阶乘N!末尾有多少个0? 比如:N=10,N!=3628800,N!的末尾有2个0.#所有的尾部的0可以看做都是2*5得来的,所以 ...