键盘控制DIV移动

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#box1 {

				width: 100px;

				height: 100px;

				background-color: skyblue;

				position: absolute;

			}

		</style>

		<script type="text/javascript">

			window.onload = function() {

				// 使div可以根据不同的方向键向不同方向移动？

				/*

				按左键，div向左移动

				按右键，div向右移动

				*/

				// 为document绑定一个按键按下的事件

				document.onkeydown = function(event) {

					event = event || window.event;

					// 定义一个变量,来表示移动的速度

					var speed = 10;

					// 如果用户按下Ctrl以后  速度加快

					if(event.ctrlKey){

						speed=50;

					}

					/*

					37 左

					38 上

					39 右

					40 下

					*/

					switch (event.keyCode) {

						case 37:

							// alert("向左");left值减小

							box1.style.left = box1.offsetLeft - speed + "px";

							break;

						case 38:

							// alert("向上");

							box1.style.top = box1.offsetTop - speed + "px";

							break;

						case 39:

							// alert("向右");

							box1.style.left = box1.offsetLeft + speed + "px";

							break;

						case 40:

							// alert("向下");

							box1.style.top = box1.offsetTop + speed + "px";

							break;

					}

				};

			};

		</script>

	</head>

	<body>

		<div id="box1"></div>

	</body>

</html>

控制DIV移动的更多相关文章

  1. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  3. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  4. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  5. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  6. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  7. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  8. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  9. 控制DIV属性——实现盒子长、宽、背景等变化

    写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...

  10. 原生Javascript实现控制DIV属性

    写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...

随机推荐

  1. 【漏洞复现】Apache Solr远程代码执行（CVE-2019-0193）

    0x01 概述 Solr简介 Apache Solr 是一个开源的企业级搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr ...

  2. centos7安装fail2ban

    fail2ban是一款非常实用的安全软件,通过监视系统日志,设置错误登陆次数,可阻挡暴力密码攻击. 1.安装epelyum install epel-release -y 2.安装fail2banyu ...

  3. 配置Tomcat监听80端口、配置Tomcat虚拟主机、Tomcat日志

    6月27日任务 16.4 配置Tomcat监听80端口16.5/16.6/16.7 配置Tomcat虚拟主机16.8 Tomcat日志扩展邱李的tomcat文档 https://www.linuser ...

  4. 浅谈css样式之list-type

    在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把list-type设置成none.不过可能很多人对于这个属性的细节并没有很深的了解.甚至会把list-type和list-type-sty ...

  5. Android组合Windows环境下Frida的安装步骤

    Frida是什么     我觉得官网已经说得很清楚了.简单的说就是一款动态代码检测工具,可用于各种系统,这里的主要用途是动态检测Android代码,配合Windows系统环境使用.     Frida ...

  6. Spring Boot2 系列教程(三十)Spring Boot 整合 Ehcache

    用惯了 Redis ,很多人已经忘记了还有另一个缓存方案 Ehcache ,是的,在 Redis 一统江湖的时代,Ehcache 渐渐有点没落了,不过,我们还是有必要了解下 Ehcache ,在有的场 ...

  7. std::unique_ptr的用法

    std::ofstream("demo.txt") << 'x'; // 准备要读的文件 { std::unique_ptr<std::FILE, decltyp ...

  8. luogu P5002 专心OI - 找祖先

    题目描述 这个游戏会给出你一棵树,这棵树有NN个节点,根结点是RR,系统会选中MM个点P_1,P_2...P_MP 1 ​ ,P 2 ​ ...P M ​ ,要Imakf回答有多少组点对(u_i,v_ ...

  9. Python自动化之下拉框，隐藏标签定位 代码&报错解决

    python自动化:下拉框定位方法之select标签  style="display: none;" 报错 selenium.common.exceptions.ElementNo ...

  10. HDU 6405 Make ZYB Happy(广义SAM)

    It's known to all that ZYB is godlike, so obviously he has a large number of titles, such as jskingj ...