<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. sort如何按指定的列排序·百家电脑学院

    sort如何按指定的列排序·百家电脑学院 sort如何按指定的(9php.com)列排序 0000            27189           41925425065f           ...

  2. ubuntu install mysql server method

         recently try to install mysql in my computer so that  I can practise some sql statement on seve ...

  3. C语言数据结构----递归的应用（八皇后问题的具体流程）

    本节主要讲八皇后问题的基本规则和递归回溯算法的实现以及具体的代码实现和代码分析. 转载请注明出处.http://write.blog.csdn.net/postedit/10813257 一.八皇后问 ...

  4. nodejs启动守护程序pm2

    nodejs启动守护程序pm2 by 伍雪颖 做了个应用,server放阿里云,只是server总会自己断,后来写了个心跳程序,就是检測应用线程是否还在,不在就再启动, 这种方法好笨重啊,后来发现no ...

  5. KFC - About KFC - Quality Assurance

    KFC - About KFC - Quality Assurance Restaurant Quality The main attributes for KFC restaurant excell ...

  6. 全国各大 oj 分类题集...

    各种题集从易到难刷到手软  你准备好了吗? 准备剁手吧

  7. nginx.conf 文中描述的配置文件

    ###############################nginx.conf 件里文说明 #user nobody; # user 主模块指令,指令nginx worker 执行用户和用户组(u ...

  8. 使用U盘进行Linux系统的安装

    由于目前很多服务器已经本身不配光驱了,最近测试了下使用U盘进行Linux系统的安装,过程比较简单,需要注意的地方如下: 1.找一台linux主机,插入U盘,执行fdisk -l,识别到U盘. 2.将需 ...

  9. 搭建php环境时解决jpeg6 make: ./libtool：命令未找到

    搭建php环境时解决jpeg6 make: ./libtool:命令未找到 [root@bogon jpeg-6b]# make; make install ./libtool --mode=comp ...

  10. ReentrantLock可重入锁的使用场景（转）

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...