社区
JavaScript
帖子详情
基于vue的单文件组件以鼠标为中心滚动滑轮实现图片缩放
qq_36681092
2018-10-09 02:33:00
本人菜鸟一枚,最近公司有个小需求,就是要实现类似于地图的拖拉和缩放的功能,我知道网上有许多例子,但是我想实现一个基于vue的一个功能组件,方便以后的使用,目前已经实现了拖拉的功能,但是以鼠标为中心滚动滑轮的没有实现,想求助各位大神,(尝试了各种方法还是不行,希望各位能把源码发一下,感激不尽)
...全文
794
2
打赏
收藏
基于vue的单文件组件以鼠标为中心滚动滑轮实现图片缩放
本人菜鸟一枚,最近公司有个小需求,就是要实现类似于地图的拖拉和缩放的功能,我知道网上有许多例子,但是我想实现一个基于vue的一个功能组件,方便以后的使用,目前已经实现了拖拉的功能,但是以鼠标为中心滚动滑轮的没有实现,想求助各位大神,(尝试了各种方法还是不行,希望各位能把源码发一下,感激不尽)
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
m0_61418639
2021-09-26
打赏
举报
回复
你实现了吗,我也有这个需求,拖拽都可以,就是以鼠标为中心点缩放怎么 都搞不出来
馍馍xs
2019-11-04
打赏
举报
回复
最终实现这个效果了吗?
vue
- 【让一张
图片
可以拖动】
鼠标
点击拖曳拖拽
图片
及
鼠标
滚轮放大缩小功能
实现
,让一张
图片
图像在页面内可以任意拖动拖曳及
鼠标
滚轮可以
缩放
控制大小功能效果(完整实例源码,一键复制开箱即用!)
vue
图片
拖拽及
鼠标
滚轮放大缩小效果,
vue
实现
图片
放大缩小及拖拽,
vue
项目
实现
图片
缩放
与拖拽功能,
vue
如何
实现
图片
放大缩小拖拽,
vue
实现
图片
拖拽及
鼠标
滚轮放大缩小,
vue
图像拖拽,
鼠标
滚轮放大缩小,基于
vue
图片
...
Vue
实现
图片
监听
鼠标
滑轮
滚动
实现
图片
缩小放大功能
其实想要
实现
功能很简
单
,就是在一张
图片
上监听
鼠标
滑轮
滚动
的事件,然后根据上滚还是下滚
实现
图片
的
缩放
。
vue
以
鼠标
位置为
中心
的
滑轮
放大功能
//
图片
显示默认大小 width: "1400px", height: "800px", // 可缩小倍数,为空则可无限缩小 minification: 3, // 可放大倍数 为空则可无限放大 magnification: "", bigMaxWidth: ...
vue
3 -
实现
图片
放大缩小和拖曳拖动功能,
鼠标
移入图像可拖曳移动,
鼠标
移入图像时滚轮放大缩小功能(
vue
3网页项目让
图片
支持
鼠标
拖动和滚轮放大缩小详细教程,提供完整示例源码,一键复制开箱即用!)
vue
3中
实现
图片
拖拽,
vue
3
实现
图片
的放大缩小(以
鼠标
位置为
中心
放大缩小)以及拖拽功能,
图片
缩放
,
实现
图片
的随意拖动方法,
实现
用
鼠标
让
图片
放大缩小拖拽,
vue
3
鼠标
拖动图像 放大缩小,图像滚轮
缩放
和拖拽,
vue
3...
vue
3中css+js
实现
鼠标
滚轮
缩放
和拖拽移动(支持文本/
图片
/表
单
/表格等各类页面内容)
vue
3中
实现
滚轮
缩放
和拖拽移动的
鼠标
交互效果。通过监听wheel事件
实现
缩放
(调整scale属性),通过mousedown和mousemove事件
实现
拖拽(调整transform属性)。
组件
动态配置项:1)尺寸、内容、
缩放
比例等;2)采用...
JavaScript
87,993
社区成员
224,694
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章