JS实现用键盘上下左右键移动页面的div进行移动，并且不能移出页面

<style>#box {width: 200px;height: 200px;background-color: red;position: fixed;}
</style><body><script>// 2、用键盘上下左右移动页面的divlet box = document.createElement('div');  // 给页面创建元素document.body.appendChild(box);           // 把创建的元素添加到body中box.setAttribute('id', 'box')             // 给元素添加iddocument.onkeydown = function (e) {switch (e.keyCode) {           //  box.style.left =   box.style.left = case 37:              //  做判断当元素向移动位置距离文档X坐标为 0时  让元素的左移动坐标为0 使之不能移出文档显示区box.style.left = box.offsetLeft <= 0 ? 0 + 'px' : `${box.offsetLeft - 5}px`break;case 39:  //  做判断当元素向移动位置距离文档X坐标为 最大值（减去元素的宽度）时 让元素的右移动坐标为最大值使之不能移出文档显示区box.style.left = box.offsetLeft >= window.innerWidth - 200 ? (window.innerWidth - 200) + 'px' : `${box.offsetLeft + 5}px`break;case 38://  做判断当元素向移动位置距离文档Y坐标为 0时  让元素的上移动坐标为0 使之不能移出文档显示区box.style.top = box.offsetTop <= 0 ? 0 + 'px' : `${box.offsetTop - 5}px`break;case 40://  做判断当元素向移动位置距离文档Y坐标为 最大值（减去元素的宽度）时 让元素的下移动坐标为最大值使之不能移出文档显示区box.style.top = box.offsetTop >= window.innerHeight - 200 ? (window.innerHeight - 200) + 'px' : `${box.offsetTop + 5}px`break;}}</script>

JS实现用键盘上下左右键移动页面的div进行移动，并且不能移出页面相关推荐

layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...
用键盘上下左右键和ctrl键移动TreeView节点
/// <summary>/// 用键盘上下左右键和ctrl键移动节点 /// 思路:现复制2个选中的节点.1.为了记住第一次选中节点位置,2在上移过程中现将令一个插入指定位置,/// 然 ...
如何解除计算机方向键问题,笔记本键盘上下左右键怎么解锁_笔记本电脑的上下左右键被锁住了如何解决-win7之家...
我们在电脑中玩游戏的时候,经常会使用到键盘上下左右键来进行操作,不过有不少笔记本用户反映说键盘上下左右键被锁住了,导致无法操作,但是这种情况不多见,如果被锁定的话.一般是数字区域,方向键基本上没有被锁 ...
linux 读取键盘上下左右键小程序
linux 读取键盘上下左右键小程序月城雪兔 2016-06-03 17:28:31 因为想读取键盘的上下左右方向键,却发现在网上不容易找到恰当的例子,最后是以一个ros程序简化而来的. 第一,为什 ...
【 js中通过键盘上下左右移动图片】
js中通过键盘上下左右移动图片第一种方法 <!-- <!DOCTYPE html> <html lang="en"> <head>< ...
页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
[vue-cli]vue-cli默认是单页面的，那要弄成多页面该怎么办呢
[vue-cli]vue-cli默认是单页面的,那要弄成多页面该怎么办呢创建多个app? app =new Vue({}) app2 = new Vue({}) 个人简介我是歌谣,欢迎和大家一起交 ...
键盘上下左右键返回的键值的问题
在用getch()(在头文件conio.h)获得上下左右键的键值时候,他们是双键值,会返回高八位和低八位的int型数值. eg:int key1=getch() key2=getch() 在键盘中按下 ...
js键盘上下左右键如何触发function
<script type="text/javascript"> function jumpPage() { if (event.keyCode==37)//左 ...

JS实现用键盘上下左右键移动页面的div进行移动，并且不能移出页面

JS实现用键盘上下左右键移动页面的div进行移动，并且不能移出页面相关推荐

最新文章

热门文章