js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)
创始人
2024-04-27 11:51:56
0

系列文章目录


文章目录

  • 系列文章目录
  • 背景与效果图
    • 1.背景如下(功能图):
    • 2.效果图如下:
      • 拖拽后的效果
      • 缩放的效果
      • 放大的效果
  • 一、功能:支持鼠标长按拖拽
    • 1.鼠标事件:
    • 2.拖拽功能流程
    • 3.拖拽部分代码如下
  • 二、功能:滚轮控制图片放大缩小
    • 1.鼠标事件(推荐使用onwheel;mousewheel存在安全隐患)
    • 2.功能流程:
    • 3.具体代码如下:
  • 三、案例功能的完整代码如下:
  • 四、总结(一定要看,功能是有坑的)


背景与效果图

1.背景如下(功能图):

该功能的需求点事2个月前的一个需求,当时采用的是Element-UI中的image图片做的一个功能,但是不能满足产品真实的需求,只能定制化自己封装。

该功能在Vue2 的element-UI中还是比较鸡肋的 ⬇️ ⬇️
Element-UI

该功能在Emenent-UI-plus(vue3)版本已经很好的支持了。 完整功能如下link⬇️ ⬇️
Element-Plus的Image标签

请添加图片描述

2.效果图如下:

拖拽后的效果

在这里插入图片描述

缩放的效果

在这里插入图片描述

放大的效果

在这里插入图片描述


一、功能:支持鼠标长按拖拽

1.鼠标事件:

onmouseup : 按键弹起事件
onmousemove鼠标移动事件
onmousedown鼠标按下事件

2.拖拽功能流程

1.给 需要移动的盒子 添加鼠标按下事件 : onmousedown 盒子要添加绝对定位

2.并且给全局(window)注册鼠标移动事件 : onmousemove

3.给需要移动的盒子添加鼠标距离左侧和顶部的长度

4.在鼠标按键松开后把全局注册的鼠标事件移除 (到此拖拽的功能基本完成)

这里如果使用的是img标签作为图片展示的话,一定要把img上的长按拖拽事件先去除,要不然就回出现BUG

3.拖拽部分代码如下

  var divMove = document.querySelector('div')divMove.onmousedown = function (e) {window.onmousemove = function (event) {divMove.style.left=event.clientX-e.target.offsetWidth/2+'px'divMove.style.top=event.clientY-e.target.offsetHeight/2+'px'}}divMove.onmouseup=function(){window.onmousemove =null}

二、功能:滚轮控制图片放大缩小

1.鼠标事件(推荐使用onwheel;mousewheel存在安全隐患)

1.onwheel : wheel当用户旋转定点设备(通常是鼠标)上的滚轮按钮时会触发该事件。(现在主流的浏览器都支持该事件)

2.mousewheel : 操作鼠标滚轮或类似设备时异步触发该事件。它由MouseWheelEvent界面表示

2.功能流程:

1.获取需要放大缩小的盒子DOM 给盒子绑定onwheel事件(这个事件里面存在在谷歌和火狐上放大和缩小的Api不准确,建议先尝试确认下)

2.给需要放大缩小的盒子DOM 添加Css样式 scale控制图片的缩放

3.具体代码如下:

     //scale是为了控制图片大小为正常渲染let  scale = 1divMove.onwheel=function(e){if(e.wheelDelta>0){scale+=0.05divMove.style.transform=`scale(${scale})`}else{scale-=0.05divMove.style.transform=`scale(${scale})`}}

三、案例功能的完整代码如下:


Document


四、总结(一定要看,功能是有坑的)

在完整的代码里面给出了,多种解决图片拖拽和onmousemove冲突的问题,第一种:可以使用background-image代替img标签第二种:可以使用img标签添加css的属性解决这个问题。

只是写了简易的功能,主要是为了给大家提供思路,可以通过这个小案例,完善自己的需求。

相关内容

热门资讯

安卓双系统添加应用,轻松实现多... 你有没有想过,你的安卓手机里可以同时运行两个系统呢?听起来是不是很酷?想象一边是熟悉的安卓系统,一边...
pipo安卓进系统慢,探究pi... 最近是不是发现你的Pipo安卓系统更新或者运行起来特别慢?别急,今天就来给你好好分析分析这个问题,让...
怎样使用安卓手机系统,安卓手机... 你有没有发现,安卓手机已经成为我们生活中不可或缺的一部分呢?从早晨闹钟响起,到晚上睡前刷剧,安卓手机...
双系统安卓安装caj,轻松实现... 你有没有想过,你的安卓手机里装上双系统,是不是就能同时享受安卓和Windows系统的乐趣呢?没错,这...
安卓使用ios系统教程,安卓用... 你是不是也和我一样,对安卓手机上的iOS系统充满了好奇?想要体验一下苹果的优雅和流畅?别急,今天我就...
安卓系统gps快速定位,畅享便... 你有没有遇到过这样的情况:手机里装了各种地图导航软件,但每次出门前都要等上好几分钟才能定位成功,急得...
安卓手机系统更新原理,原理与流... 你有没有发现,你的安卓手机最近是不是总在提醒你更新系统呢?别急,别急,让我来给你揭秘一下安卓手机系统...
安卓系统通知管理,全面解析与优... 你有没有发现,手机里的通知就像是一群调皮的小精灵,时不时地跳出来和你互动?没错,说的就是安卓系统的通...
安卓系统手机哪买,揭秘哪里购买... 你有没有想过,拥有一部安卓系统手机是多么酷的事情呢?想象你可以自由安装各种应用,不受限制地探索各种功...
安卓系统 ipv4,基于安卓系... 你知道吗?在智能手机的世界里,有一个系统可是无人不知、无人不晓,那就是安卓系统。而在这个庞大的安卓家...
目前安卓是什么系统,探索安卓系... 亲爱的读者,你是否曾好奇过,如今安卓系统究竟是什么模样?在这个科技飞速发展的时代,操作系统如同人体的...
安卓6.0系统比5.0,从5.... 你有没有发现,自从手机更新了安卓6.0系统,感觉整个人都清爽了不少呢?没错,今天咱们就来聊聊这个话题...
安卓2.36系统升级,功能革新... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓2.36系统升级!这可不是一个小打小闹的更新,而是...
安卓系统源码怎么打开,并可能需... 你有没有想过,安卓系统的源码就像是一扇神秘的门,隐藏着无数的技术秘密?想要打开这扇门,你得掌握一些小...
安卓8.0系统体验视频,智能革... 你有没有听说安卓8.0系统最近可是火得一塌糊涂啊!作为一个紧跟科技潮流的数码达人,我当然要来给你好好...
宣传系统漫画app安卓,探索安... 亲爱的读者们,你是否曾在某个午后,百无聊赖地打开手机,想要寻找一些轻松愉悦的读物?今天,我要给你介绍...
鸿蒙替换安卓系统吗,开启智能生... 你知道吗?最近科技圈里可是炸开了锅,因为华为的新操作系统鸿蒙系统,据说要大举进军手机市场,替换掉安卓...
手机安卓系统深度清理,解锁手机... 手机里的东西是不是越来越多,感觉就像一个装满了杂物的储物柜?别急,今天就来教你一招——手机安卓系统深...
安卓上的windows系统,融... 你有没有想过,在安卓手机上也能体验到Windows系统的魅力呢?没错,这就是今天我要跟你分享的神奇故...
安卓系统焦点变化事件,Andr... 你知道吗?在安卓系统的世界里,最近发生了一件超级有趣的事情——焦点变化事件。这可不是什么小打小闹,它...