键盘控制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. 【Luogu P1439】最长公共子序列（LCS）

    Luogu P1439 令f[i][j]表示a的前i个元素与b的前j个元素的最长公共子序列 可以得到状态转移方程: if (a[i]==b[j]) dp[i][j]=dp[i-1][j-1]+1; d ...

  2. asp.net core 从 3.0 到 3.1

    asp.net core 从 3.0 到 3.1 Intro 今天 .net core 3.1 正式发布了,.net core 3.1 正式版已发布,3.1 主要是对 3.0 的 bug 修复,以及一 ...

  3. 03-kubernetes 应用快速入门

    目录 增删改查 增 service创建 测试其他pod通过series访问nginx 测试手动变更nginx对应的pod的ip pod和service之间的关系 service调度测试 创建myapp ...

  4. 使用 colgroup 和 col 实现响应式表格

    Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...

  5. 基本shell脚本

    #!/bin/bash attr=() num= while true do read -p ">>input:" name attr[$num]=$name echo ...

  6. SMProxy,让你的数据库操作快三倍！

    SMProxy GITHUB:https://github.com/louislivi/smproxy 喜欢请star 中文 | English /$$$$$$ /$$ /$$ /$$$$$$$ /$ ...

  7. 鲲鹏云实验-Python+Jupyter机器学习基础环境

    [摘要] 介绍Ubuntu 18.04环境下Python3常用科学计算和数据分析包(numpy, scipy, matplotlib, sklearn, pandas)的安装,以及Jupyter No ...

  8. #华为云·寻找黑马程序员#微服务-你真的懂 Yaml 吗？

    在Java 的世界里,配置的事情都交给了 Properties,要追溯起来这个模块还是从古老的JDK1.0 就开始了的. "天哪,这可是20年前的东西了,我居然还在用 Properties. ...

  9. [Mathematics][BJTU][Calculus]Detailed explanations and proofs of the Dirac-Abel Discriminant Methods which deal with the conditional convergence

    So, today we will talk about the conditional convergence and two discriminant methods, namely Dirac- ...

  10. Xcode11 踩坑记录

    1.UITextView控件莫名导致崩溃 如上图所示,点击Step over 前进进入编译器内部 在lldb控制台输入指令 po $arg1 看到编译器给的提示是由于UITextView的问题. 解决 ...