zoukankan      html  css  js  c++  java
  • vue 图片拖拽和滚轮缩放

    这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动
    @mousewheel.prevent 阻止默认行为

    <div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap">
      <img ref="img" :src="fullscreenImgSrc" @mousedown="moveImg" alt="大图" class="modal-img"/>
    </div>
    

      javascript

        moveImg (e) {
          e.preventDefault()
          // 获取元素
          let imgWrap = this.$refs.imgWrap
          let img = this.$refs.img
          let x = e.pageX - img.offsetLeft
          let y = e.pageY - img.offsetTop
          // 添加鼠标移动事件
          imgWrap.addEventListener('mousemove', move)
          function move (e) {
            img.style.left = e.pageX - x + 'px'
            img.style.top = e.pageY - y + 'px'
          }
          // 添加鼠标抬起事件,鼠标抬起,将事件移除
          img.addEventListener('mouseup', () => {
            imgWrap.removeEventListener('mousemove', move)
          })
          // 鼠标离开父级元素,把事件移除
          imgWrap.addEventListener('mouseout', () => {
            imgWrap.removeEventListener('mousemove', move)
          })
        },
        rollImg () {
          /* 获取当前页面的缩放比 若未设置zoom缩放比,则为默认100%,即1,原图大小 */
          let zoom = parseInt(this.$refs.img.style.zoom) || 100
          /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120,其中正数表示为向上滚动,负数表示向下滚动 */
          zoom += event.wheelDelta / 12
          /* 最小范围 和 最大范围 的图片缩放尺度 */
          if (zoom >= 80 && zoom < 500) {
            this.$refs.img.style.zoom = zoom + '%'
          }
          return false
        }

    less

        .modal-img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max- 100%;
            cursor: move;
            &-wrap {
              position: relative;
               960px;
              height: 560px;
              overflow: hidden;
            }
          }
    

      参考: vue实现鼠标滚轮滚动缩放图片,对图片进行拖拽

  • 相关阅读:
    route命令
    自动删除n天前日志
    ss命令
    rcp命令
    crontab,at命令,常见问题
    locate,nl命令
    kill,killall,top,free,vmstat,iostat,watch命令
    [转载]memcached stats 命令
    Swift学习笔记
    C++移位运算符
  • 原文地址:https://www.cnblogs.com/ToBeBest/p/14134136.html
Copyright © 2011-2022 走看看