原生js滚动放大缩小图片

js 放大缩小(滚动)

<template>
  <div>
    <div style="width: 100px;height: 100px;"></div>
    <!-- ondragstart="return false" 禁止浏览器默认拖动行为 -->
    <div class="image" @mousewheel="mousewheel">
      <img
        ondragstart="return false"
        ref="imgRef"
        @mousedown="mousedown"
        @mouseup="mouseup"
        @mouseleave="mouseleave"
        @mousemove="mousemove"
        :style="{
          top: getTop,
          left: getLeft,
          width: getWidth,
          height: getHeight,
        }"
        src="@/assets/images/homePageImg/pic.png"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //父框的大小和子框的大小尽量相同
      //图片父框坐标（x，y）
      fatherX: 500,
      fatherY: 500,
      //父框大小
      fatherWidth: 500,
      fatherHeight: 500,
      //图片相对父框位置
      top: 0,
      left: 0,
      //初始图片大小
      width: 500,
      height: 500,
      //图片宽高比
      ratio: 1,
      //放大缩小比例（即每次放大缩小的px）
      canvasBgRatio: 10,
      //图片是否可以移动
      isImgMove: false,
      //鼠标按下时坐标
      mousedownX: 0,
      mousedownY: 0,
      mousedownLeft: 0,
      mousedownTop: 0,
    }
  },
  created() {
    //图片宽高比
    this.ratio = this.width / this.height
  },
  computed: {
    getLeft: function() {
      return this.left + 'px'
    },
    getTop: function() {
      return this.top + 'px'
    },
    getWidth: function() {
      return this.width + 'px'
    },
    getHeight: function() {
      return this.height + 'px'
    },
    //图片当前坐标
    imgX: function() {
      return this.fatherX + this.left
    },
    imgY: function() {
      return this.fatherY + this.top
    },
  },
  methods: {
    //鼠标按压时间
    mousedown(param) {
      console.log('按下')
      this.mousedownX = param.clientX
      this.mousedownY = param.clientY
      this.mousedownLeft = this.left
      this.mousedownTop = this.top
      this.isImgMove = true
    },
    mouseup(param) {
      console.log('松开')
      this.isImgMove = false
    },
    mouseleave(param) {
      console.log('离开')
      this.isImgMove = false
    },
    mousemove(param) {
      if (this.isImgMove) {
        console.log('移动')
        //鼠标移动后坐标，即当前坐标
        let mouseX = param.clientX
        let mouseY = param.clientY
        //计算图片相对父框位置的变化
        let tempLeft = this.mousedownLeft - (this.mousedownX - mouseX)
        if (tempLeft < 0 && tempLeft + this.width > this.fatherWidth) {
          this.left = tempLeft
        }
        let tempTop = this.mousedownTop - (this.mousedownY - mouseY)
        if (tempTop < 0 && tempTop + this.height > this.fatherHeight) {
          this.top = tempTop
        }
      }
    },
    //鼠标滚轮事件
    mousewheel(param) {
      //如果处于移动状态则不能放大缩小
      if (this.isImgMove) {
        return false
      }
      //获取鼠标坐标
      let mouseX = param.clientX
      let mouseY = param.clientY

      // param.deltaY鼠标滚轮上滚为负数，下滚为正数，上滚放大图片，下滚缩小
      //放大
      if (param.deltaY < 0) {
        this.magnify(mouseX, mouseY)
      }
      //缩小（最小为初始值）
      if (
        param.deltaY > 0 &&
        this.width > this.fatherWidth &&
        this.height > this.fatherHeight
      ) {
        this.shrink(mouseX, mouseY)
      }
    },
    //放大
    magnify(mouseX, mouseY) {
      //计算图片的宽高
      let oldWidth = this.width
      let oldHeight = this.height
      this.height = this.height + this.canvasBgRatio
      this.width = this.height * this.ratio
      //鼠标组坐标和图片坐标距离
      let miWidth = mouseX - this.imgX
      let miHeight = mouseY - this.imgY
      //计算图片相对父框位置的变化
            this.left = this.left - ((this.width - oldWidth) / oldWidth) * miWidth
      this.top = this.top - (this.canvasBgRatio / oldHeight) * miHeight
    },
    //缩小
    shrink(mouseX, mouseY) {
      //计算图片的宽高
      let oldWidth = this.width
      let oldHeight = this.height
      this.height = this.height - this.canvasBgRatio
      this.width = this.height * this.ratio
      // 图片父框坐标和图片坐标距离
      let mfWidth = this.fatherX - this.imgX
      let mfHeight = this.fatherY - this.imgY
      //计算图片相对父框位置的变化
      this.left =
        this.left +
        ((oldWidth - this.width) / (oldWidth - this.fatherWidth)) * mfWidth
      this.top =
        this.top +
        (this.canvasBgRatio / (oldHeight - this.fatherHeight)) * mfHeight
    },
  },
}
</script>

<style scoped>
.image {
  position: absolute;
  border: 1px solid #aa0000;
  width: 500px;
  height: 500px;
  overflow: hidden;
  cursor: pointer;
}

.image img {
  position: absolute;
  width: 500px;
  height: 500px;
}
</style>