首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

前言其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。...实现思路在js中,onmousewheel是鼠标滑轮滚动事件,可以通过这个事件触发来改变图片的大小,实现图片放大缩小功能。但是我们这里是vue所以使用的是:mousewheel。...@mousewheel来监听鼠标滑轮滚动。...this.imgWidth = `${this.imgWidth}px`; console.log(this.imgWidth, this.imgHeight, "hou"); }, },当鼠标在这个图片滚动滑轮的时候就会被这个时间监听到...在页面有滚动条的时候,滚动条会随着鼠标滚轮滚动滚动,这是浏览器的默认行为,可用return false来取消浏览器的默认行为。有火狐鼠标滚轮兼容问题。

3.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

MacOS 实现自动切换鼠标滚动方向

实现效果 想在 macOS 上实现如下效果: 连接了(非 Magic Mouse)鼠标时,系统自动切换鼠标滚动方向为“非自然”; 断开鼠标连接时(使用触控板),系统自动切换鼠标滚动方向为“自然”。...application "System Preferences" 执行脚本: $ osascript scroll-direction-mouse.applescript 使用 Shell 脚本检查鼠标连接状态并切换滚动方向...这时候我们可以通过 macOS 自带的 Automator 应用,将上面的检测切换脚本制作成一个 app, 并设置为登录后自动执行,以实现不同工作场景自动切换鼠标滚动方向的效果。...login 使用 crontab 定时检查 如果还有其他的临时切换工作场景的情况,仅凭登录时检测还不够(比如在登录后插入鼠标设备、到会议室开会等), 可以使用 crontab 定时检查鼠标连接状态并切换滚动方向...$ crontab -e 添加定时任务: # 每分钟检查一次鼠标连接状态并切换滚动方向 * * * * * /bin/bash /path/to/scroll-direction-switcher.sh

12310

使用Selenium模拟鼠标滚动操作的技巧

其中之一就是模拟鼠标滚动操作,这在许多情况下都是必需的。使用Selenium,一种流行的Web自动化测试工具,可以轻松实现这一功能。...模拟鼠标滚动的重要性网页内容可能会因为需要用户滚动才能加载而延迟显示,或者是在滚动时动态加载内容。在这种情况下,如果没有模拟鼠标滚动操作,我们可能会错过某些重要信息或无法执行后续操作。...使用Selenium模拟鼠标滚动的方法Selenium提供了ActionChains类来模拟用户的行为,其中包括鼠标滚动。...假设我们需要对一个长页面进行截图,但是一次性无法完整显示所有内容,这时模拟鼠标滚动就变得至关重要。...然后,我们创建了一个ActionChains对象,并循环执行鼠标滚动操作,每次滚动一定像素数,直到滚动到页面底部。最后,我们使用save_screenshot方法来保存整个页面的截图。

33810

Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?我就比较疑惑 uni-app 是移动端场景啊,谁用手机还外接个鼠标啊。...没办法,该改还得改,下面教程开始: 1、在 methods 内添加方法: methods: {   handleScroll (e) {     // 鼠标滚轮滚动 swiper     if (this.curDot...mounted () {   // 监听鼠标滚轮   window.addEventListener('mousewheel', this.handleScroll, false) } 现在,滚动鼠标滑轮试一下...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...methods 内的方法: methods: {   handleScroll (e) {     console.log('mouse scroll:', e.deltaY + 'px')     // 鼠标滚轮滚动

43030

Vue&uni-app swiper 轮播支持鼠标滚轮实现

今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?我就比较疑惑 uni-app 是移动端场景啊,谁用手机还外接个鼠标啊。...没办法,该改还得改,下面教程开始: 1、在 methods 内添加方法: methods: {   handleScroll (e) {     // 鼠标滚轮滚动 swiper     if (this.curDot...mounted () {   // 监听鼠标滚轮   window.addEventListener('mousewheel', this.handleScroll, false) } 现在,滚动鼠标滑轮试一下...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...methods 内的方法: methods: {   handleScroll (e) {     console.log('mouse scroll:', e.deltaY + 'px')     // 鼠标滚轮滚动

1.1K40

实现pc端鼠标滚轮缩放图片的步骤

获取鼠标滚动方向 阻止了鼠标滚动的默认事件之后,我们就要开始进入正题了。获取鼠标滚动的数据进行图片缩放,其实主要就是获取鼠标滚动的方向,向上滚动就放大,向下滚动就缩小。...,我们只需要根绝他的正负来获取鼠标滚动的方向就可以了。...相反,所以取反 e.delta = e.wheelDelta || -e.detail e.preventDefault() if (e.delta > 0) { //当滑轮向上滚动时...this.scaleFunc(0.05) } if (e.delta < 0) { //当滑轮向下滚动时 this.scaleFunc(-0.05) } }, 执行缩放操作...我们在上面获取鼠标滚轮滚动方向之后,会执行scaleFunc函数,并传入一个参数,当鼠标向上滚动时,传入0.05,意为放大0.05倍(实际倍数1+0.05),反之缩小0.05倍。

2.2K30

Vue&uni-app swiper 轮播支持鼠标滚轮实现

今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?我就比较疑惑 uni-app 是移动端场景啊,谁用手机还外接个鼠标啊。...没办法,该改还得改,下面教程开始: 1、在 methods 内添加方法: methods: {   handleScroll (e) {     // 鼠标滚轮滚动 swiper     if (this.curDot...mounted () {   // 监听鼠标滚轮   window.addEventListener('mousewheel', this.handleScroll, false) } 现在,滚动鼠标滑轮试一下...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...methods 内的方法: methods: {   handleScroll (e) {     console.log('mouse scroll:', e.deltaY + 'px')     // 鼠标滚轮滚动

1.3K20

WPF --- 触摸屏下的两个问题

,而且不光是触摸屏无法滚动鼠标滑轮也无法滚动。...我处理这个问题的时候,是先处理的鼠标滑轮无法滚动,处理方案就是根据鼠标的偏移量,手动设置 ScrollViewer 的位置,如下: private void DataGrid_MouseWheel(object...DataGrid 中时,使用滑轮界面无法滚动的问题,那么解决触摸屏触点在 DataGrid 中无法滚动的问题,也是一样的思路,根据触点的偏移量,模拟鼠标滚轮的偏移量,在调用鼠标滚动事件,模拟滚动,代码如下...if (Math.Abs(deltaY) > TouchMoveThreshold) { // 设置鼠标滚动的差值 int mouseWheelDelta...= (int)(deltaY / TouchMoveThreshold) * SystemParameters.WheelScrollLines; // 创建模拟的鼠标滚动事件参数

15310

Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

今天领导在用的时候提出一个问题:你这个不支持鼠标滚轮啊?我就比较疑惑 uni-app 是移动端场景啊,谁用手机还外接个鼠标啊。...没办法,该改还得改,下面教程开始: 1、在 methods 内添加方法: methods: {   handleScroll (e) {     // 鼠标滚轮滚动 swiper     if (this.curDot...mounted () {   // 监听鼠标滚轮   window.addEventListener('mousewheel', this.handleScroll, false) } 现在,滚动鼠标滑轮试一下...不过有个问题,不管鼠标滚轮上滑还是下滑, swiper 都是往下翻的。 还需要再改造一下: 鼠标滑轮滚动的时候会有一个 deltaY 属性,正直(100)为往下滑动,负值(-100)为向上滑动。...methods 内的方法: methods: {   handleScroll (e) {     console.log('mouse scroll:', e.deltaY + 'px')     // 鼠标滚轮滚动

2.5K30

Java selenuim用执行js模拟鼠标滚动的方式

题目: Java selenuim用执行js模拟鼠标滚动的方式完成页面滚动的异步加载及Java接收浏览器js的返回值 在使用selenuim webdriver爬取网页时,经常会有很多网页并不是访问链接就会加载全部内容的...,而是需要鼠标向下滚动,动态的加载内容,比如知乎首页。...这样在爬取的过程中并不能直接抓数据,需要先模拟鼠标滚动,让页面先加载出来才行。 ---- 我使用的方法是利用如下js代码来完成页面的滚动,每次滚动多少可以根据不同情况自行调整。...可以先在真实场景调试好每次要滚动多少会触发加载,然后再写进代码中使用。同理想要横向滑动的话,就改变第一个参数,第二个参数置为0。...对于部分网页来说,是不会允许无限制的加载新数据的,换句话说就是滚动加载出的数据是有一定限制的。那么如何使页面滚动到恰好加载到没新数据可加载 就是一个新问题了。

4.4K20

从零开始学 Web 之 BOM(四)client系列

"px"; console.log(window.event); } 这个时候,如果 body 的高度/宽度变化了,可以滚动滑轮了会怎样呢...body { height: 5000px; } 这时候,如果鼠标不动,只滚动滑轮的话,会发现图片会距离鼠标原点越来越远。为什么呢?...因为当我们滚动滑轮的时候,鼠标距离页面顶部的距离改变了,但是 clientY 是可视区域的大小,滚动滑轮的时候, clientY 的大小是没有变的,但是鼠标距离页面顶部的距离改变了,而图片在 Y 轴的距离计算还是按照...看来,只能是鼠标移动的距离 + 滑轮卷曲出去的距离来实现了。 思路: 之前我们封装的兼容代码都在一个函数里面,这里我们封装到一个对象 evt 里面。...2、鼠标点击,滑动,抬起,三个事件。 3、鼠标点击的时候获取鼠标的位置。 4、鼠标滑动的时候计算坐标 y。由于要保证鼠标移动的时候,鼠标相对滑动条顶部的距离一定,所以需要 spaceY。

81020

鼠标控制物体旋转、移动、缩放(Unity3D)

一、前言 Unity3D对于鼠标操作物体的旋转、移动、缩放的功能点使用的比较多。 今天就分享如何使用Unity实现鼠标对于物体的旋转、移动、缩放。...效果图: 二、知识点 Input.GetMouseButton(0) 获取鼠标输入,参数为一个int值 为0的时候获取的是左键 Input.GetMouseButton(1) 为1的时候获取的是右键...Input.GetMouseButton(2) 为2的时候获取的是中键(就是那个滑轮) Input.GetMouseButton 鼠标按压 Input.GetMouseButtonUp 鼠标点击...Input.GetMouseButtonDown 鼠标松开 Camera.main.ScreenToWorldPoint 屏幕坐标转化为世界坐标 Quaternion rotation =...= 0) { //鼠标滚动滑轮 值就会变化 if (Input.GetAxis("Mouse ScrollWheel") < 0)

3.4K21
领券