当前位置: 首页 > 知识库问答 >
问题:

用户交互 - vue如何在网页中实现使用代码控制当前可见内容视角的移动?

刁瀚昂
2024-08-07

在内容超出容器时,用户可以通过上下左右滑动的操作,来使得可视范围内的内容改变,这是基于用户用手滑动实现的,如何使用代码控制当前视角的移动呢?

使用过window.scrollTo()等没有达到效果,还有其他方法吗?
例如,植物大战僵尸中,玩家视角首先在花园中,几秒间隙后,可视界面右移至花园外的僵尸处。(只是举例,实际用到的技术是不同,但是需要实现的效果是相同的。)

共有2个答案

袁建木
2024-08-07

拖拽的时候那种滑动效果?

https://sortablejs.github.io/Sortable/

看一下是上面这种吗?

还有一种是 CF 那种游戏中的


https://jsrun.net/ZsDKp/edit

看这个效果

国盛
2024-08-07

拿到你滚动的那个dom节点,执行如下代码

  1. 上下滚动 element.scrollTop = xxx 具体见文档
  2. 左右滚动 element.scrollLeft = xxx 具体见文档
 类似资料:
  • 我有问题的样式分页。我有html代码: null null 我的分页元素有渐变边框,这是正常的,但分页数是不可见的。请帮我解决这个问题。

  • 大佬们求助 vue-router在mounted中,没有用户交互情况下,执行router.push ,无法返回当前页面,没有当前页面的历史记录,用户点击跳转就可以

  • 源代码控制系统(又称版本控制系统)让你高效地管理工程。他们对一个人是很有用的,对一个团队是至关重要的。它们追踪不同版本里的所有改变,以至于所有代码都未曾丢失,其含义可以归属于改变。有了源代码控制系统,一个人可以自信地写一些而半途而废的代码和调试的代码,因为你修改的代码被仔细地与提交的、官方的即将与团队共享或发布的代码分割开。 我挺晚才开始意识到源代码控制系统的好处,但现在即使是一个人的工程,我也不

  • 本文向大家介绍vue之数据交互实例代码,包括了vue之数据交互实例代码的使用技巧和注意事项,需要的朋友参考一下 vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob

  • 我想用php在远程计算机上运行一个C程序。最终目标是使用手机或任何其他计算机上的web浏览器控制程序。 我的C程序在几十分钟内从不同的传感器获取数据。它在linux中从命令行运行,我可以通过按计算机键盘上的“q”键来关闭它。主线程如下所示: 每个线程执行一些printf以给出每个传感器的状态。我想在我的手机上监测这些值,并有一个按钮来终止远程程序。 我可以使用system()、open()或pro

  • 我使用selenium获取网页,并发送kenword获取新页面。但是我怎样才能获得新的网页,并搜索我需要的信息呢 请原谅我没有使用降价。我的问题是:我想在搜索关键词后获得网页,但我编写了浏览器。page_源码,它是百度的主页

  • 本文向大家介绍用JavaScript获取页面文档内容的实现代码,包括了用JavaScript获取页面文档内容的实现代码的使用技巧和注意事项,需要的朋友参考一下 JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题、各个表单值。 以上这篇用JavaScript获取页面文档内容的实现代码就是小编分享给大家的全部内容了,希望能给大家一

  • 我需要在现有PDF的顶部添加几行。我已经使用PdfReader和PdfStamper做到了这一点。为了在页面标题区域有更多的空间,我需要将当前内容向下移动1或2行。下面是论坛上的内容。但这并不能解决问题。如何使用IText在PDF中的页面中间插入内容 有什么建议吗? - 我不能上传pdf或PDF的图像,因为我是一个新用户