<!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. SDUT 2623：The number of steps

    The number of steps Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Mary stands in a stra ...

  2. python安装numpy科学计算模块

    解决两个问题: (1)Import Error: No module named numpy (2)Python version 2.7 required, which was not found i ...

  3. ByteBuffer解析

    一.前言 前一篇文章我们介绍了Android中直播视频技术的基础大纲知识,这里就开始一一讲解各个知识点,首先主要来看一下视频直播中的一个重要的基础核心类:ByteBuffer,这个类看上去都知道了,是 ...

  4. android Log 等级以及在Android Studio 的Logcat中过滤方法

    Log等级 等级越高,问题越严重. Log.e(TAG,"级别5,错误信息"); Log.e(TAG,"级别5,错误信息"); Log.w(TAG," ...

  5. javascript耐人寻味

    在思考javascript解释过程的时候,看过别人几篇文章,自己做了几个测试 容易理解,在javascript,形如这样的代码可以正常执行: alert(hello()); function hell ...

  6. PowerDesigner导出Excel

    1.打开PowerDesigner,创建物理模型(Physical Data Model) 2.在PowerDesigner菜单栏中,依次点击“Tools ->Excute Commands-& ...

  7. 3.求m+mm+mmm+…+m…m（n个）的和，其中m为1~9之间的整数。 例如，当m=3、n=4时，求3+33+333+3333的和。

    package a; public class QiuHe { private int m; private int n; public int getM() { return m; } public ...

  8. 【leetcode❤python】107. Binary Tree Level Order Traversal II

    #-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):#     def __init ...

  9. 怎样在mysql里面修改数据库名称

    怎样在mysql里面修改数据库名称       提供三种方法:1. RENAME DATABASE db_name TO new_db_name这个..这个语法在mysql 5.1.7中被添加进来,到 ...

  10. Html basic tag

    The <p> tag defines a paragraph. http://www.w3schools.com/tags/tag_p.asp The <td> tag de ...