键盘控制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. Shell - 长 ping 脚本监控网络时延

    生产环境中, 网络时延是一个很重要的指标. 为了方便检查网络时延的大小, 我们可以通过ping命令实现长时间的网络监控. 1 ping 命令的使用 1.1 常用参数 -i: 每次执行ping操作的间隔 ...

  2. PHP基于Redis实现轻量级延迟队列

    延迟队列,顾名思义它是一种带有延迟功能的消息队列. 那么,是在什么场景下我才需要这样的队列呢? 一.背景 先看看一下业务场景: 1.会员过期前3天发送召回通知 2.订单支付成功后,5分钟后检测下游环节 ...

  3. HT Vue 集成

    (本文中 dataModel = dm = 数据容器, gv = graphView = g2d = 2D 视图) 初始化项目 使用 vue-cli 生成项目.生成注意以下几个问题 1. 建议手动配置 ...

  4. Java语法进阶10-多线程

    多线程 并发与并行.进程,线程调度自行百度 线程(thread):是一个进程中的其中一条执行路径,CPU调度的最基本调度的单位.同一个进程中线程可以共享一些内存(堆.方法区),每一个线程又有自己的独立 ...

  5. ctf线下赛中检测外来IP的shell脚本

    该脚本可用于ctf线下赛中,用来检测攻击IP的接入,及时做出响应. #!/bin/bash #写自己队的ip ipA="172.22.60.230" ipB="172.2 ...

  6. Spring Boot整合Mybatis报错InstantiationException: tk.mybatis.mapper.provider.base.BaseSelectProvider

    Spring Boot整合Mybatis时一直报错 后来发现原来主配置类上的MapperScan导错了包 由于我使用了通用Mapper,所以应该导入通用mapper这个包

  7. IDEA的控制台拖拽出来之后，如何恢复？

    大家搜到这个的时候,肯定遇到了如下图展示的尴尬情况,我们的控制台在不小心之间被拖拽出来,然后不知如何再拖回去?放心,我来告诉你怎么办. 点击左下角的  恢复按钮 就可以了.

  8. LeetCode-7.reverse-integer 【翻转字符串】【数学】

    PS: 第一次写文章好累啊,没想到这么短的文章写完这么累,大家给我点反馈,多给我留言啊.

  9. Python文本转化语音模块大比拼，看看青铜与王者的差别！

    文本转语音 如果把Python比喻成游戏中的一个英雄,你觉得它是谁?对于Dota老玩家来说,我会想到钢琴手卡尔!感觉Python和卡尔一样,除了生孩子什么都可以做的角色.日常生活中,我们会涉及到很多语 ...

  10. es6 proxy浅析

    Proxy 使用proxy,你可以把老虎伪装成猫的外表,这有几个例子,希望能让你感受到proxy的威力. proxy 用来定义自定义的基本操作行为,比如查找.赋值.枚举性.函数调用等. proxy接受 ...