<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. android怎样查看当前project哪些profile是打开的

    代码project里面有三仅仅文件都是涉及到各个profile的宏的,各自是:featureoption.java.common/ProjectConfig.mk.product/ProjectCon ...

  2. Codeforce 143B - Help Kingdom of Far Far Away 2

    B. Help Kingdom of Far Far Away 2 time limit per test 2 seconds memory limit per test 256 megabytes ...

  3. Xah Lee Web 李杀网

    Xah Lee Web 李杀网 ∑ Xah Lee Web 李杀网

  4. C语言里为何会有“2+2=5”的结果

    写这篇原创文章是由于看到了极客中的一篇文章<有趣各种编程语言实现2+2=5>,当中C语言是这样实现的: int main() { char __func_version__[] = &qu ...

  5. C语言文件操作之fgets（）

        来说一说fgets(..)函数.     原型  char *  fgets(char * s, int n,FILE *stream);     參数:          s: 字符型指针, ...

  6. 【STL】关联容器 — hash_set

    容器hash_set是以hash table为底层机制的,差点儿所有的操作都是转调用hash table提供的接口.因为插入无法存储同样的键值,所以hash_set的插入操作所有都使用hash tab ...

  7. linux kickstart 自动安装

    最近很多业务系统都是linux lnmp平台安装,反复的安装让人觉得很苦恼,仔细钻研了下kickstart .这里环境是red hat linux 5.8 32位,系统盘中的软件包里包含有kickst ...

  8. MySQL中CASE的使用

    语法说明: 方式一: CASE value WHEN [compare_value] THEN result [WHEN [compare_value] THEN result ...] [ELSE ...

  9. linux+nginx+mysql+php

    LNMP(linux+nginx+mysql+php)服务器环境配置   一.简介 Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为 “engine X”, 是一个高性能的 ...

  10. ConditonHelper

    在网上其实已经有很多类似这种拼接sql条件的类,但是没有看到一个让我感觉完全满意的这样的类.最近看到 http://www.cnblogs.com/xtdhb/p/3811956.html 这博客,觉 ...