js 实现图片放大缩小拖动功能

最新推荐文章于 2024-06-27 16:14:54 发布

淋上

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/w1794340559/article/details/130583345

版权

该文章介绍了如何使用JavaScript配合HTML和CSS实现一个轮播图组件，该组件具有图片的放大、缩小以及拖动功能。通过监听鼠标的滚轮事件来控制图片的缩放比例，同时在mousedown事件中添加了图片的拖动功能，当鼠标移动时更新图片的位置，鼠标抬起或离开时移除移动事件。

摘要由CSDN通过智能技术生成

js 实现图片放大缩小拖动功能

我是实现一个轮播图加上放大缩小拖拽功能
1 首先 html

	<el-dialog  :visible.sync="dialogVisible" :modal='false'  v-dialogDrag  :close-on-click-modal='true' >
         <el-carousel  height='600px' :autoplay='false'  trigger="click" >
          <el-carousel-item v-for="(item,index) in dialogImageUrl" :key="index"  ref="moveWrap">
             <img ref="img" class="dialogImg" :style="{transform:'scale('+multiples+')'}"   @mousewheel="handleWheel"  @mousedown="imgMove(index,$event)" width="100%" style="height:100%" :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>

2.js代码

   handleWheel(e){
      console.log(e)
      if(e.deltaY<=-1){ //放大
        if (this.multiples >= 2) {
            return;
         }
          this.multiples += 0.25;
      }else{ //缩小
       if (this.multiples <= 0.5) {
          return;
        }
          this.multiples -= 0.25;
      }
    },
    imgMove(index,e) {//拖拽
       e.preventDefault();
      // 获取元素
      var left = this.$refs.moveWrap[index].$el
      console.log(this.$refs.moveWrap,this.$refs.img[0])
      var img = this.$refs.img[index]
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function() {
        left.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function() {
        left.removeEventListener("mousemove", move);
      });

    },