键盘控制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. DBEntry.Net 简介

    [尊重作者:本文转自:http://www.cnblogs.com/lephone/]   这是我设计的一个轻量级的 .Net ORM (Object Relational Mapping) 数据访问 ...

  2. linux bash shell编程之参数变量和流程控制。

    参数变量:用来向脚本中传递参数 我们在执行脚本的时候可以在其后面加入一些参数,通常来说这些参数与脚本中变量为对应关系. start.sh argu1 argu2 引用方式: $1,,2,……${10} ...

  3. 我的第一个python web 开发框架

    1:数据库结构设计与创建 小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计 ...

  4. [ch03-02] 交叉熵损失函数

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 3.2 交叉熵损失函数 交叉熵(Cross Entrop ...

  5. Git之GitFlow工作流

    一. GitFlow 介绍 1.1 什么是 GitFlow GitFlow 是一种 Git 工作流,它是团队成员遵守的一种代码管理方案 . 1.2 GitFlow 常用分支说明 分支名称 分支说明 P ...

  6. Chapter 02—Creating a dataset(Part1)

    一. 数据集 1. 在R语言中,进行数据分析的第一步是创建一个包含待研究数据并且符合要求的数据集. · 选择装数据的数据结构 · 把数据装入数据结构中 2. 理解数据集 (1)数据集通常是矩形的数据列 ...

  7. 小白的springboot之路（二）、集成swagger

    0-前言 现在的项目开发,基本都是前后端分离,后端专注于API接口开发,都需要编写和维护API接口文档.如果你还在用Word来编写接口文档,那你就out了,这个时候,当当当当~神兵利器swagger隆 ...

  8. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

  9. Xcode编译引用Framework

    需要两步配置 1.在xcode工程的search path下设置要引用的Framework所在路径 2.将Framewoek拖入工程中时 不要选择copy,而选择引用模式.

  10. GIS学习汇总

    GIS之家: Geoserver: geoserver安装部署步骤 geoserver发布地图服务WMS geoserver发布地图服务WMTS geoserver集成以及部署arcgis serve ...