<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. WOJ 1055

    #include<stdio.h> #include<stdlib.h> #include<string.h> int main() { char s[6]={0} ...

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

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

  3. 在gem5的full system下运行 alpha编译的测试程序 running gem5 on ubuntu in full system mode in alpha

    背景 先需要在full system下运行gem5,通过网上查找资料以及向别人请教,终于成功运行,网上大多是关于alpha指令集的,且都是英文的,为了方便大家学习,现在总结一下,希望对大家有所帮助. ...

  4. TCP/UDP简介

    TCP/UDP简介 Socket小白篇-附加TCP/UDP简介 Socket 网络通信的要素 TCP和UDP Socket的通信流程图 1.Socket 什么是Socket Socket:又称作是套接 ...

  5. poj2096（概率dp）

    题目连接:http://poj.org/problem?id=2096 题意:一个程序有m个子系统,要找出n种bug,某人一天找n种bug中的一种,求出他找出n种bug并且每个子系统中都有bug的天数 ...

  6. SE 2014年4月18日

    实验需求:   R1 R2 R3用环回口建立IBGP对等体(使用对等体组),AS号为100                     R4 R5 R6用环回口建立IBGP对等体(使用对等体组),AS号为 ...

  7. UVA12304 2D Geometry 110 in 1! 计算几何

    计算几何: 堆几何模版就能够了. . .. Description Problem E 2D Geometry 110 in 1! This is a collection of 110 (in bi ...

  8. linux进程解析--进程的退出及销毁

    一进程的退出: 当一个进程运行完毕或者因为触发系统异常而退出时,最终会调用到内核中的函数do_exit(),在do_exit()函数中会清理一些进程使用的文件描述符,会释放掉进程用户态使用的相关的物理 ...

  9. JS 在 HTML 中做加减乘除

    <script type="text/javascript"> function fun(t){ var fa = parseInt(document.getEleme ...

  10. Class ThreadPoolExecutor

    Class ThreadPoolExecutor java.lang.Object java.util.concurrent.AbstractExecutorService java.util.con ...