<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="public/easy_ui/themes/icon.css">
<script type="text/javascript" src="public/easy_ui/jquery.min.js"></script>
<script type="text/javascript" src="public/easy_ui/easy_ui.min.js"></script>
<script type="text/javascript" src="public/easy_ui/easyloader.js"></script>
</head>
<body>
<div id="div" style="background-color: red; width: 400px; height: 300px; left: 100px; top: 100px;">
</div>
</body>
<script>
$(function(){
$(document).keydown(function (event) {
var keyCode = event.keyCode;
var space = 20;
var div = $('#div');
switch(keyCode){
case 37: div.offset({left:(div.offset().left - 20)}); break;
case 38: div.offset({top:(div.offset().top - 20)}); break;
case 39: div.offset({left:(div.offset().left + 20)}); break;
case 40: div.offset({top:(div.offset().top + 20)}); break;
default: break;
}
});
});
</script>
</html>
http://www.cnblogs.com/cglWorkBook/p/5134698.html
 

键盘控制div上下左右移动 (转)的更多相关文章

  1. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  3. 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 ...

  4. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

  5. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  7. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  8. JQuery 通过方向键控制div上下左右移动

    在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现 ...

  9. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 关于hibernate中多对多关系

    关于多对多关系 数据库:在使用多对多的关系时,我们能够使用复合主键.也能够不使用,直接引入外键相同能够实现. 在数据库中使用多对多关系时,须要一个中间表. 多对多关系中的数据库结构例如以下: 表:Or ...

  2. 获取CentOS软件源中的updates包

    之前在本地网络中建了一个CentOS软件源,挺好用的,可是发现有些软件还是装不上,因为系统安装盘中的包并不全,有些软件的依赖在updates源中,updates源在网上,怎么把其中的包拿到呢?一种方法 ...

  3. 开源mp3播放器--madplay 编译和移植 简记

    madplay是一款开源的mp3播放器. http://madplay.sourcearchive.com/ 下面简单记录一下madplay的编译与移植到ARM开发板上的过程 一.编译x86版本的ma ...

  4. 字符串string和内存流MemoryStream及比特数组byte[]互转

    原文:字符串string和内存流MemoryStream及比特数组byte[]互转   字符串string和内存流MemoryStream及比特数组byte[]互转比较 定义string变量为str, ...

  5. VSTO 得到Office文档的选中内容（Word、Excel、PPT、Outlook）

    原文:VSTO 得到Office文档的选中内容(Word.Excel.PPT.Outlook) 目的:得到在Word.Excel.PPT.Outlook中选中的一段内容. Word: private ...

  6. java中怎么终止一个线程的执行----个人学习心得

    参考了一下两个网站的介绍: ①:http://blog.csdn.net/liuhanhan512/article/details/7077601 ②:http://www.blogjava.net/ ...

  7. poj 1011 Sticks ，剪枝神题

    木棒 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 118943 Accepted: 27429 Description 乔治拿 ...

  8. 新浪SAE数据库信息

    此账号仅能在SAE平台上使用,不能从外部连接我们建议开发者使用SaeMysql操作数据库 如果您想自己实现数据库相关操作,可以使用以下常量: 用户名  : SAE_MYSQL_USER 密 码 : S ...

  9. mongodb中的排序和索引快速学习

    在mongodb中,排序和索引其实都是十分容易的,先来小结下排序: 1 先插入些数据    db.SortTest.insert( { name : "Denis", age : ...

  10. Drools学习笔记-01-在eclipse indgo集成Drools5.5

    1.1.条件 Drools它是一个基于Java开源规则引擎.因此,使用Drools以及前需要安装在开发机器JDK周边环境,Drools5.5需要JDK版本号的1.5或者更多. 1.2.开发环境搭建 大 ...