vue3 - 实现图片放大缩小和拖曳拖动功能，鼠标移入图像可拖曳移动，鼠标移入图像时滚轮放大缩小功能（vue3网页项目让图片支持鼠标拖动和滚轮放大缩小详细教程，提供完整示例源码，一键复制开箱即用！）

已于 2024-02-03 16:26:55 修改
阅读量4.2k 收藏 11
点赞数
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3 vue3网页项目图片拖曳功能 vue3图像拖动和放大缩小示例 监听鼠标滚轮实现图片缩小放大 vue3实现用鼠标拖动图片移动 用鼠标滚轮怎么让图片放大缩小 vue3详细图片缩放和拖曳教程
于 2023-12-11 19:14:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134913619
版权

效果图

在 vue3 网站项目中，详细实现图片拖曳拖动、缩小放大功能，鼠标移入图片时可滚轮放大缩小和拖拽图像功能示例，

直接复制全部代码，运行后简单修改即可使用。

在这里插入图片描述

全部代码

以下就是示例图的完整代码，可复制

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue - 【让一张图片可以拖动】鼠标点击拖曳拖拽图片及鼠标滚轮放大缩小功能实现，让一张图片图像在页面内可以任意拖动拖曳及鼠标滚轮可以缩放控制大小功能效果（完整实例源码，一键复制开箱即用！）
高级前端工程师
08-02 2291
vue图片拖拽及鼠标滚轮放大缩小效果，vue实现图片放大缩小及拖拽，vue项目实现图片缩放与拖拽功能，vue如何实现图片放大缩小拖拽，vue实现图片拖拽及鼠标滚轮放大缩小，vue图像拖拽,鼠标滚轮放大缩小，基于vue图片拖拽放大缩小，vue实现拖着一张图片走的效果，vue怎么让一张图片可以拖动，vue网页使图片图像可以用鼠标拖动，vue鼠标在图片上的时候怎么用滚轮缩放图片大小，vue 图片拖拽和滚轮缩放，vue组件实现图片的拖拽和缩放，Vue2实现图片的拖拽,缩放和旋转效果的示例代码，vue 图像拖拽、鼠标
Vue2 实现图片的拖拽、缩放、旋转
Web_boom的博客
01-17 3829
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
vue3 快速实现图片缩放拖拽功能
最新发布
前端程序员、项目经理、人工智能博主
04-28 1669
因为需要实现图片拖拽，缩放的功能，项目是vue3的所以找到这个组件，很简洁，api文档描述的也清楚，能够快速3分钟内搞完一个功能文档地址：https://ericfang.gitee.io/blog-vue3-vitepress/frontend-components/v3-drag-zoom.html#%E5%AE%89%E8%A3%85。
利用HTML5实现图片的拖拽
weixin_72101182的博客
07-19 227
利用HTML5实现图片的拖拽
vue3+js canvas实现图片的拖动滚动放大缩小
weixin_49651379的博客
10-14 2401
canvas实现图片拖拽滚动放大缩小
前端图片拖拽功能实现
焱敦的博客
05-09 6324
转发地址： 1、图片拖拽原地址 2、图片拖拽原地址 3、图片拖拽原地址 上述转载三个拖拽方式可以借鉴一下，其主要思想就是： 1、图片随鼠标移动而动； 2、判断鼠标移动后是否在图片范围，并将距离最近的图片与拖动图进行index的交换； 3、如果排序的话有很多方式，可以在标签初始化的时候添加index属性，在交换的时候将index属性值交换，最终取index值进行排序； 新...
前端----HTML5实现图片拖放
Nagile-zhou博客
09-22 3481
HTML5新增了关于拖放的API,通过拖放API可以让HTML界面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互界面. 1.在HTML5中,<img.../>元素默认是可拖动的;而<a.../>元素只要设置了href属性,它默认也是可拖动的. 如下面代码所示: <html> <head> <meta ht...
vue实现裁切图片同时实现放大、缩小、旋转功能
08-27
vue实现裁切图片同时实现放大、缩小、旋转功能 本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下： 知识点1：裁切图片 在vue中实现裁切图片可以使用canvas元素，通过读取...
vue实现鼠标移入移出事件代码实例
10-17
在Vue.js中，实现鼠标移入（mouseenter）和移出（mouseleave）事件是常见的交互功能，主要用于添加动态效果或提供额外的信息。以下是对标题和描述中提到的知识点的详细解释： 1. **Vue事件绑定**： 在Vue中，我们...
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
在本文中，我们将深入探讨如何在Vue项目中利用SVG文件并实现SVG元素的放大缩小功能，同时结合D3.js库进行操作。首先，SVG（Scalable Vector Graphics）是一种用于描述2D图形的矢量图形格式，它允许无限缩放而不会...
JavaScript 练手小技巧：拖拽事件、把图片拖拽入页面
九天翔龙的技术博客
01-30 3124
HTML5 新增了拖拽事件 drag，利用它可以实现把外部文件拖拽入页面中，可以实现文件的读取，上传等等功能。
VUE根据滚动放大缩小图片
weixin_47096099的博客
08-29 371
样式上 写的固定宽高图片可能会有所压缩，所以样式用的媒体查询。
鼠标移动到图片显示遮罩效果
TinaTxt的博客
04-19 879
鼠标移动到图片显示遮罩效果<div class="block block_2_1" style="background-image:url(/Img/artwork/ArtWorkHome/ysphh_3.jpg);display:block;"> </div>var backgroundImg = ""; $(".block").mouseover(function () { //
vue自定义指令--实现div和图片的拖拽，放大，缩小
快来一起学习前端知识把！加油，前端人
06-20 1820
在开发可视化大屏的过程中碰到甲方只能提供一张图片的地图无法提供经纬度，需要在这张图片实现类似百度地图功能的标点。所以就想实现对图片的拖拽移动然后加上放大和缩小功能。这样来模拟百度地图的小部分功能，然后通过在图片上放小div进行标点，来进行坐标定位，如下图代码已经封装成组件，复制可以。
Vue3 实现图片滚轮缩放拖拽组件
qq_37656005的博客
07-15 1535
采用Vue3的语法讲述如何实现在一定区域内用鼠标滚轮缩放图片以及在该区域内拖拽图片，在下面的应用里还会使用到父子组件传值，调用方法，以及compute计算，自定义指令等
【JavaScript】vue指令实现根据鼠标位置放大缩小功能
nuanYangC的博客
04-15 1971
通过vue自定义指令实现根据鼠标位置放大缩小
Vue3+TS项目中实现图片放大镜效果
luhanglh的博客
07-30 269
Vue3+TS的项目实现放大镜效果
vue3中如何使点击后的图片可以过鼠标滚轮来实现放大和缩小
05-17
可以通过以下步骤来实现： 1. 首先，在Vue3中引入一个图片组件，在该组件中设置图片的样式和初始大小。 2. 在该组件中添加一个点击事件，将该事件绑定到图片上。当用户点击图片时，会触发该事件。 3. 在该点击事件中，使用Vue3的$refs属性获取到该图片元素，并为其添加鼠标滚轮事件监听器。 4. 在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小。可以使用transform属性来实现图片的缩放。 下面是一个示例代码： ``` <template> <div> <img ref="image" src="./image.png" @click="onClick" /> </div> </template> <script> export default { methods: { onClick() { const img = this.$refs.image; img.addEventListener("wheel", this.onWheel); }, onWheel(event) { const img = this.$refs.image; const delta = Math.sign(event.deltaY); const scale = delta > 0 ? 1.1 : 0.9; img.style.transform = `scale(${scale})`; }, }, }; </script> <style> img { width: 200px; height: 200px; } </style> ``` 在这个示例代码中，当用户点击图片时，会触发onClick方法。在该方法中，使用$refs属性获取到图片元素，并为其添加鼠标滚轮事件监听器。 在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小，并使用transform属性来实现图片的缩放。这里使用了Math.sign方法来判断鼠标滚轮的方向，如果deltaY是正数，则表示鼠标向上滚动，需要放大图片；如果deltaY是负数，则表示鼠标向下滚动，需要缩小图片。 最后，还需要在样式中设置图片的初始大小。在这个示例代码中，图片的初始大小为200px*200px。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值