键盘控制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. nginx实现内网服务唯一端口外网映射

    2.1         内网服务唯一端口外网映射 (一)       组网图 (二)       简要说明: 如标题所示,该功能可以实现内网环境下所有服务端口通过nginx的正向代理通过唯一端口映射至 ...

  2. 手写Promise A+ 规范

    基于ES6语法手写promise A+ 规范,源码实现 class Promise { constructor(excutorCallBack) { this.status = 'pending'; ...

  3. C++桌面计算机

    #include<iostream> #include<string> #include<map> #include<cctype> using nam ...

  4. Linux海量数据高并发实时同步架构方案杂谈

    不论是Redhat还是CentOS系统,除去从CDN缓存或者数据库优化.动静分离等方面来说,在架构层面上,实 现海量数据高并发实时同步访问概括起来大概可以从以下几个方面去入手,当然NFS的存储也可以是 ...

  5. react新版本配置代理

    新学习react 开始配置react跨域的时候 在网上查看到是在packjson.json里面添加如下代码: "proxy": { "/api": { &quo ...

  6. git的用法 回到某个版本

    进入到项目文件夹 如果新建项目时没有勾选git 进入到项目中

  7. Linux运维的第二周总结

    挂载操作:mount 设备文件信息 挂载点目录:mount /dev/cdrom/mnt ; Umount /mnt 查看日志文件:日志文件保存路径: /var/log      /日志重要文件信息: ...

  8. 多线程之NSOperation小结

    一.NSOperation 抽象类 NSOperation 是一个"抽象类",不能直接使用.抽象类的用处是定义子类共有的属性和方法. NSOperation 是基于 GCD 做的面 ...

  9. Python使用psutil模块，做你的电脑管家

    电脑管家 也许大家都有这样的感觉,优化完美的电脑系统,你把电脑借给一个电脑小白使用上几天,等你拿回来的时候会发现,开机各种慢,乱七八糟的软件装了一大堆.那么我们如何使用Python来获取电脑的相关数据 ...

  10. 为什么QQ能帮你找到失散多年的兄弟？----图论

    编程三分钟的第 44 篇原创文章 为什么qq里"可能认识的人"功能推荐的如此精准? 为什么两个没有什么联系的朋友会相互认识? 一切的背后到底是道德的沦丧,还是人性的扭曲 ? 让我们 ...