<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. 温故知新-------jQuery层次选择器

    <html xmlns="http://www.w3.org/1999/xhtml">  <head>     <title></titl ...

  2. poj 3304(直线与线段相交)

    传送门:Segments 题意:线段在一个直线上的摄影相交 求求是否存在一条直线,使所有线段到这条直线的投影至少有一个交点 分析:可以在共同投影处作原直线的垂线,则该垂线与所有线段都相交<==& ...

  3. kobox ： key_wq.c -v1 如何使用工作队列 workqueue

    kobox: key_wq.c - v1 说明: TQ2440主要驱动因素,四个按键驱动的处理 key_wq.c和key.c类别似,与key.c之间的差异的主要驱动力: key.c使用计时器,在中断发 ...

  4. 开源图计算框架GraphLab介绍

    GraphLab介绍 GraphLab 是由CMU(卡内基梅隆大学)的Select 实验室在2010 年提出的一个基于图像处理模型的开源图计算框架.框架使用C++语言开发实现. 该框架是面向机器学习( ...

  5. poj1797（最短路小变形）

    题目连接:http://poj.org/problem?id=1797 题意: 分析:dp[i]表示到达i点的过程中的最大承受重量,更新到i点时可能有多条路径,由优先队列堆出最大的那条即可. #inc ...

  6. 服务器编程入门（4）Linux网络编程基础API

      问题聚焦:     这节介绍的不仅是网络编程的几个API     更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系.     这节主要介绍三个方面的内容:套接字( ...

  7. 美版SOLOWHEEL与盗版SOLOWHEEL-IPS独轮车终极PK【图】_厂商资讯_太平洋电脑网

    http://g.pconline.com.cn/x/330/3304676.html

  8. php中页面跳转部分方法论述

    假设当前页面:http://localhost:80/index.php 1.include echo “include t1.php”; 跳转后,url地址栏http://localhost:80/ ...

  9. Maven安装中的问题

    按照<Maven实战>中的讲述,在安装完Maven后执行mvn -v的时候,出现了问题.在网上搜索到了解决办法: 引用:http://blog.csdn.net/xueyepiaoling ...

  10. 解压system.img

    解压: All-Series:~$ simg2img system.img system.img.ext4 All-Series:~$ mkdir tmp All-Series:~$ mount -t ...