JavaScript通过键盘让div盒子上下左右的移动

#直接上代码

<script>var box = document.getElementById("mytank");document.onkeydown = keyDown;function keyDown(event){var event = event || window.event;switch(event.keyCode){case 37:box.style.left = box.offsetLeft - 10 + "px";break;case 39:box.style.left = box.offsetLeft + 10 + "px";break;case 38:box.style.top = box.offsetTop - 10 + "px";break;case 40:box.style.top = box.offsetTop + 10 + "px";break;}return false}</script>
//mytank 是你的盒子的id的属性名如  <div id="mytank">盒子</div>

JavaScript通过键盘让div盒子上下左右的移动相关推荐

JavaScript通过键盘方向键控制盒子移动
0. 效果图 1. 实现代码 html <head> <style>.box {position: absolute;width: 100px;height: 100px;to ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
常见的div盒子居中（上下左右）实现
关于div的上下左右居中,之前总是学完之后忘记,现在总结一下并记录下来,常见的有以下的几种实现的效果图: 1.使用absolute进行绝对定位注:这方法,需要知道子元素的宽高,但是不需要知道父元 ...
html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
JavaScript - 模拟键盘输入支付密码
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面: 有没有很像支 ...
js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.首先为div开启绝对定位 2.为document绑定键盘按下和抬起事件 3.获取对应键盘的Unicode编码 4.设置变量保存速度和键盘Unicode编 ...
盒子模型、div盒子、边框粗细、外边距
1.盒子模型概念:盒子模型是由margin + border + padding +网页元素(content)组成图示: 最简单的盒子: <style> ul{ border: 1px ...
html如何有立体效果,一段CSS代码让div盒子有立体效果
先上效果图,再来代码: 上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫.先确定下html结构, ...
JavaScript 虚拟键盘 A-Keyboard
A-Keyboard A-Keyboard是一个小型的 JavaScript 虚拟键盘. A-Keyboard Github Demo 网站查看在线键盘.数字键盘.手机键盘 Demo. 我们为你提供 ...

JavaScript通过键盘让div盒子上下左右的移动

JavaScript通过键盘让div盒子上下左右的移动相关推荐

最新文章

热门文章