weixin_50663749 2021-11-12 20:24 采纳率: 50%
浏览 154
已结题

vue实现按键盘移动div啊

vue怎么按键盘上下左右使div移动，求大神进行解答，小弟感激不尽

  • 写回答

2条回答 默认 最新

  • CSDN专家-赖老师（软件之家） 2021-11-12 20:26
    关注
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方向键移动div</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var b1 = document.getElementById("box1");
            var distance = 10;
            alert("按下ctrl键加速,按下alt键减速");
            document.onkeydown = function (event) {
                event = event || window.event;
                if (event.ctrlKey) {
                    distance = 40;
                }
                if (event.shiftKey) {
                    distance = 5;
                }
                if (event.keyCode === 37) {
                    b1.style.left = b1.offsetLeft - distance + "px";
                } else if (event.keyCode === 38) {
                    b1.style.top = b1.offsetTop - distance + "px";
                } else if (event.keyCode === 39) {
                    b1.style.left = b1.offsetLeft + distance + "px";
                } else if (event.keyCode === 40) {
                    b1.style.top = b1.offsetTop + distance + "px";
                }
            };
        };
    </script>
</head>
<body>
<div id="box1"></div>
</body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • java-Vue
    2021-03-13 13:47
    晒太阳的黑宝的博客 {{message}} ('Vue v-on')">vue的onclick</button> </div> </body> <script> //view model new Vue({ el:"#app", //表示当前vue对象接管了div区域 data:{ message:"Hello Vue!" //注意不要写分号结尾 }, methods:{ ...
  • Vue实现在线文档预览
    2023-07-07 17:08
    不愿意做鱼的小鲸鱼的博客 本次实现的文档预览的类型有：docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览
  • 乐优项目笔记之02 Vue学习
    2021-06-17 21:43
    废弃的root的博客 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 0.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经...
  • 【Java Web】 vue基础操作
    2021-12-05 20:04
    李鲤驴。的博客 VUE工程结构 打开 工程目录下的 App.vue ...script写 js style写css VUE基本语法 ...指定区域进行渲染 ，需要准备div vue.js代码 创建VUE.js对象，指定渲染区域，动态调用 <!DOCTYPE html> <html&gt
  • Vue基础
    2021-09-13 09:55
    胡安民的博客 Vue基础 创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ }) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： - el - data - methods ...
  • 【Java系列笔记016】Vue框架简单入门（完结）(1)
    2024-04-30 00:06
    2401_84418948的博客 【代码】【Java系列笔记016】Vue框架简单入门（完结）(1)
  • Java网络聊天程序实现详解
    2025-07-27 01:56
    苟全性命的博客 以下是使用Java实现的一个简单的消息队列示例代码： import java.util.LinkedList; import java.util.Queue; public class MessageQueue { private final Queue queue = new LinkedList(); public synchronized ...
  • vue学习笔记（超详细）
    2020-12-18 16:38
    fmk1023的博客 Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合...
  • Vue
    2019-08-06 17:25
    每一刻都是崭新的71的博客 Vue Vue概述 框架是一个软件的半成品，在全局范围内给了大的约束。库是工具，在单点上给我们提供功能。框架是依赖库的。Vue是框架，而jQuery则是库。 什么是MVC MVC的核心理念是：你应该把管理数据的代码（Model...
  • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》018-Vue中的事件类型
    2024-11-09 22:41
    愚公搬代码的博客 本篇文章将深入探讨 Vue 中的各种事件类型，包括鼠标事件、键盘事件、表单事件等，以及如何在 Vue 组件中有效地使用它们。我们将分析每种事件类型的特点，并提供实用的示例，帮助你更好地理解如何在 Vue 应用中灵活...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 11月18日
  • 已采纳回答 11月12日
  • 创建了问题 11月12日