js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)

这篇具有很好参考价值的文章主要介绍了js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录



背景与效果图

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

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

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

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

js可改图片变大小和角度(拖拽顶部点),JavaScript Event事件,HTML|CSS,javascript,前端,鼠标事件

2.效果图如下:

拖拽后的效果

js可改图片变大小和角度(拖拽顶部点),JavaScript Event事件,HTML|CSS,javascript,前端,鼠标事件

缩放的效果

js可改图片变大小和角度(拖拽顶部点),JavaScript Event事件,HTML|CSS,javascript,前端,鼠标事件

放大的效果

js可改图片变大小和角度(拖拽顶部点),JavaScript Event事件,HTML|CSS,javascript,前端,鼠标事件


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

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 = 1
    divMove.onwheel=function(e){
       
        if(e.wheelDelta>0){
            scale+=0.05
            divMove.style.transform=`scale(${scale})`
        }else{
            scale-=0.05
            divMove.style.transform=`scale(${scale})`
        }
    }

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            background-color: antiquewhite;
            position: absolute;
           background-image: url("https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg");
           background-repeat: no-repeat;
           background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <button>重置</button>
    <div><img style=" width: 100%; visibility: hidden;" src="https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg" alt=""></div>
</body>
<script>
    var button =document.querySelector('button')
    button.onclick=function(){
        divMove.style.top=40+'px'
        divMove.style.left=10+'px'
        scale=1
        divMove.style.transform=`scale(${scale})`
        
    }
    
    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
    }
    let  scale = 1
    divMove.onwheel=function(e){
       
        if(e.wheelDelta>0){
            scale+=0.05
            divMove.style.transform=`scale(${scale})`
        }else{
            scale-=0.05
            divMove.style.transform=`scale(${scale})`
        }
    }
</script>

</html>

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

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

只是写了简易的功能,主要是为了给大家提供思路,可以通过这个小案例,完善自己的需求。文章来源地址https://www.toymoban.com/news/detail-777078.html

到了这里,关于js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包