<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. [C++]函数指针与指针函数

    函数指针与指针函数,之前总是分不清,今天就好好把它两认认清楚. 先从概念说起,简单是理解. 函数指针:是指针.一个指向某一个函数入口地址的指针. 指针函数:是函数.一个返回值是指针的函数. 记忆: 从 ...

  2. Amazon.com : The Odyssey of the Manual Toothbrusher

    Amazon.com : The Odyssey of the Manual Toothbrusher The Odyssey of the Manual Toothbrusher

  3. MFC模态对话框的消息循环

    MFC模态对话框的消息循环 单线程程序, 当主窗口响应函数中弹出模态对话框时,为什么主窗口响应函数可能照常工作? 当弹出模态对话框时,线程的消息循环无法返回,父窗口的事件本应没人处理,应该处于卡死状态 ...

  4. Mars之android的Handler(2)

    handler .looper.messageque的关系在前面已经有个介绍,但前面handler(1)中handler的使用是极少的一种情况,因为handler.sendMessage()可以在Ma ...

  5. WorkFlow介绍及用法

    WorkFlow介绍及用法 说起workflow大家肯定都不陌生,这里简单介绍一下salesforce中什么情况下使用workflow. 当你分配许多任务,定期发送电子邮件,记录修改时,可以通过自动配 ...

  6. Android在子线程中更新UI(一)

    MainActivity如下: package cc.testui1; import android.os.Bundle; import android.os.Handler; import andr ...

  7. Devstack: A copy of worked local.conf I&#39;m sharing with you.

    service_plugins = neutron.services.firewall.fwaas_plugin.FirewallPlugin [service_providers] service_ ...

  8. Java LinkedBlockingQueue和ArrayBlockingQueue分析

    LinkedBlockingQueue是一个链表实现的堵塞队列,在链表一头增加元素,假设队列满.就会堵塞.还有一头取出元素.假设队列为空.就会堵塞. LinkedBlockingQueue内部使用Re ...

  9. 什么是gulp？

    gulp初涉 1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用 ...

  10. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...