<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. python中逐行读取文件的最佳方式_Drupal_新浪博客

    python中逐行读取文件的最佳方式_Drupal_新浪博客 python中逐行读取文件的最佳方式    (2010-08-18 15:59:28)    转载▼    标签:    python   ...

  2. 有关于web server架构的一个小疑问

    今天闲的时候trace route了yahoo和sina的域名,yahoo的如下: 1     1 ms     1 ms    <1 ms  172.21.127.1   2     3 ms ...

  3. Android真机网络adb联机调试初探

    新项目是一个基于android4.2设备.刚拿到demo板时就对联机互调感兴趣了.处于以前在S3c2440上对linux的移植使用经验.心里猜测对于android设备应该也这样.所以通过搜索资料整理如 ...

  4. linux命令笔记之ls

    假设要将全部的命令以一篇博客持续更新的方式去展现,将来在查找的时候非常不方便.出于这种考虑.将来将非常多命令都分开记录. 这里,一些基础使用方法都不做太多说明.主要记录下平时经经常使用到的一些命令. ...

  5. MTK Android Driver：GPIO

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2JrODYxMTEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  6. （白书训练计划）UVa 120 Stacks of Flapjacks(构造法)

    题目地址:UVa 120 水题. 从最大的開始移,每次都把大的先翻到最上面,再翻到以下. 代码例如以下: #include <iostream> #include <cstdio&g ...

  7. STL之Vector(不定长数组)

    vector是同一种对象的集合,每一个对象都有一个相应的整数索引值.和string对象一样,标准库将负责管理与存储元素相关的类存. 引入头文件 #include<vector> 1.vec ...

  8. 正确AJAX了解该技术的，创建，应用

    ajax认识: 1. ajax这是间client与server机制.但这一机制是在前台的,利用前台的闲置功能,来进行前台与后台的数据交流,以达到增强用户体检.降低server压力,更有效的利用带宽的效 ...

  9. Android多线程文件下载器

    本应用实现的是输入文件的网络的地址,点击button開始下载,下载过程中有进度条和后面的文本提示进度, 下载过程中button不可点击,防止反复的下载,完成下载后会进行Toast的提示显示, 而且回复 ...

  10. U6Linux的文件权限与目录配置

    1.ll查看文件信息:［权限］［连接］［所有者］［用户组］［文件容量］［修改日期］［文件名］ 2.第一个字符代表文件的属性:若为［d］则是目录．若为[-]则是文件．若为[l]则为连接． 3.chgrp ...