JS设置div根据键盘移动

ゝ一世哀愁。 2022-02-21 05:21 294阅读 0赞

使用js设置div根据方向键“上、下、左、右”方向键移动，

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>键盘移动</title>
     <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
    	.s-move-content-outer{border:1px black solid;width:200px;height:200px;position:relative;outline:none;user-select:none;/*overflow:hidden;*/;}
        .s-move-content-header{background-color:pink;width:100%;height:30px;text-align:center;line-height:30px;}
    </style>
    </head>
    
    <body>
    	<div class="s-move-content-outer" tabIndex="1" >
    		<div class="s-move-content-header" tabIndex="1" >div1 </div>
    		<div>内容1</div>
    	</div>
    </body>
    </html>
     
    <script>
    //键盘控制移动
    $(document).keydown(function(event){
        var keyNum = event.which;   //获取键值
        var Item = $(".s-move-content-outer");   //要移动的元素
        switch(keyNum){  //判断按键
    		case 37: Item.animate({left:'-=5px'});break;
    		case 38: Item.animate({top:'-=5px'});break;
    		case 39: Item.animate({left:'+=5px'});break;
    		case 40: Item.animate({top:'+=5px'});break;
    		default:
            break;
        
        }
    });
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，294人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现键盘移动光标

通过键盘的上下左右，实现对光标的移动，当点击回车时，进入所选的对应页面。左边是菜单栏，右边是具体数据。 ![Center][] 左边的菜单栏布局 ![Ce

╰半橙微兮°/ 2023年10月17日 08:29/ 0 赞/ 135 阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 46 阅读

相关前端---js（自学笔记26)（滚轮的事件、键盘事件、键盘移动div）

滚轮的事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

不念不忘少年蓝@/ 2022年12月01日 14:22/ 0 赞/ 206 阅读

相关 js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开这两个事件一般会绑定给可

野性酷女/ 2022年11月29日 14:29/ 0 赞/ 218 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 306 阅读

相关 js 实现键盘控制方块移动

需求：在网页上有一个方块，我们需要键盘上下左右键控制方块的移动。代码： <!doctype html> <html> <h

怼烎@/ 2022年05月09日 03:04/ 0 赞/ 213 阅读

相关 js实现div移动

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。首先先把格子画出来，因为想做列的移动，所以一列是一个div。 HTML： <div cl

墨蓝/ 2022年03月15日 02:26/ 0 赞/ 438 阅读

相关 JS设置div根据键盘移动

使用js设置div根据方向键“上、下、左、右”方向键移动，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

ゝ一世哀愁。/ 2022年02月21日 05:21/ 0 赞/ 295 阅读

相关 js 定时器移动div案例

主要问题:多次点击开始定时器，会开启多个不同的定时器，会改变初始移动解决方法：在定时器函数内首部添加一个清除定时器，使得每一次点击都清除上次定时器，并重建一个定时器代码

约定不等于承诺〃/ 2021年07月24日 18:29/ 0 赞/ 524 阅读

相关 js如何实现利用键盘控制div移动

js如何实现利用键盘控制div移动描述： div通过键盘事件上下左右实现div块的移动

红太狼/ 2020年06月06日 18:42/ 0 赞/ 869 阅读