vue实现 图片拖拽及鼠标滚轮放大缩小

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

效果:
vue实现 图片拖拽及鼠标滚轮放大缩小,vue,js,vue.js,javascript,前端
代码实现文章来源地址https://www.toymoban.com/news/detail-622364.html

<template>
  <div class="container">
    <div
      class="image-container"
      @mousewheel.stop="onMouseWheel"
      @mousedown="onMouseDown"
      @mousemove="onMouseMove"
      @mouseleave="onMouseLeave"
      @mouseup="onMouseUp"
    >
      <img :src="imageSrc" :style="{ transform: imageTransform }" ref="image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc:
        "https://img1.baidu.com/it/u=3065838285,2676115581&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1690995600&t=33317e67c6570c9f6d7cdfd53ee8db57",
      scale: 1,
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      imageLeft: 0,
      imageTop: 0,
    };
  },
  computed: {
    imageTransform() {
      return `translate(${this.imageLeft}px, ${this.imageTop}px) scale(${this.scale})`;
    },
  },
  methods: {
    onMouseWheel(event) {
      event.preventDefault();
      const wheelDelta = event.deltaY;
      if (wheelDelta > 0 && this.scale > 0.4) {
        this.scale -= 0.1;
      } else if (wheelDelta < 0) {
        this.scale += 0.1;
      }
    },
    onMouseDown(event) {
      this.isDragging = true;
      this.dragStartX = event.clientX;
      this.dragStartY = event.clientY;
      this.startImageX = this.imageLeft;
      this.startImageY = this.imageTop;
    },
    onMouseMove(event) {
      event.preventDefault();
      if (this.isDragging) {
        const offsetX = event.clientX - this.dragStartX;
        const offsetY = event.clientY - this.dragStartY;
        this.imageLeft = this.startImageX + offsetX;
        this.imageTop = this.startImageY + offsetY;
      }
    },
    onMouseUp() {
      this.isDragging = false;
    },
    onMouseLeave() {
      this.isDragging = false;
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.image-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}
</style>

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

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

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

相关文章

  • C# 在picturebox控件里实现用鼠标滚轮让图片上下翻页,按住ctrl键加鼠标滚轮实现图片放大缩小

    想要实现picturebox控件里面用鼠标滚轮让图片上下翻页和按住ctrl键加鼠标滚轮实现图片放大缩小这两个功能,就要借助于picturebox控件中的三个事件。 第一个是pictureBox1_KeyUp。 第二个是pictureBox1_KeyDown。 第三个是PictureBox1_MouseWheel 下面直接上代码就可以了: private void pictureBox1

    2024年02月09日
    浏览(58)
  • vue实现在页面拖拽放大缩小div并显示鼠标在div的坐标

    实现在一个指定区域拖拽div,并可以放大缩小,同时显示鼠标在该div里的坐标,如图可示 缩小并拖动 js代码 css

    2024年02月05日
    浏览(71)
  • Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

    前言 其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。 效果: 注:该配图使用《漫画|有趣的了解一下赋值、深浅拷贝》文章图片,不存在侵权问题。 实现思路 在js中,onmousewheel是鼠标滑轮滚动事件,可以通过

    2024年02月01日
    浏览(62)
  • LabVIEW鼠标滚轮实现波形放大缩小(zoom)功能

    实现功能:将鼠标放在波形图曲线上,滚轮可以实现波形放大缩小功能。 代码思想:注册鼠标滚轮事件,滚轮时改变波形图横纵坐标最大值和最小值。 鼠标滚轮 方式1:github链接 https://github.com/Gnepuil79/LabVIEW.git 方式2:百度网盘 链接:https://pan.baidu.com/s/1RUBZM8dy7jGIbimpze9cSA 提取

    2024年01月16日
    浏览(56)
  • js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

    一、需求 鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。 鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。 点击还原按钮:绿色盒子里所有元素还原为初始值。 二、相关知识点 1、CSS3 Transform属性应用于元素的2D或3D转换。这个属性允许

    2024年02月11日
    浏览(56)
  • vue3 图片放大缩小、拖拽功能(自定义指令)

    效果 自定义 拖拽指令 vDrag.js 参考来源 https://github.com/sunzsh 使用 自定义 拖拽指令 写法二 (带传参及回调写法) vDrag.js 使用 自定义 缩放指令 vWheelScale.js 根据项目需要 我指令加了 动态参数 及 回调函数 不需要自行修改 使用 自定义 缩放指令 写法二(带传参及回调写法)

    2024年02月01日
    浏览(52)
  • Pycharm-用鼠标滚轮放大缩小字体大小

    1,pycharm 字体放大设置: ①,File — setting — Keymap —在搜寻框中输入:increase — Increase Font Size(双击) — 在弹出的对话框中选择Add Mouse Shortcut ②,在弹出的对话框中按住ctrl 键,鼠标滚轮向上滑动后点击 OK 。 2,Pycharm 字体缩小设置 : ①,File — setting — Keymap —在搜寻框

    2024年02月12日
    浏览(105)
  • IDEA设置鼠标滚轮自由放大缩小字体

    IDEA中可以设置【按住Ctrl键+鼠标滚轮】自由调节某个工作窗口的放大和缩小: 打开 IDEA的Settings - Editor - Genral,勾选 “Change font size with Ctrl+Mouse Wheet”。然后就可以通过快捷键Ctrl+鼠标滚轮来 放大 或 缩小 工作窗口中的内容了。 该操作对控制台同样有效。

    2024年02月05日
    浏览(59)
  • 【Qt+FFmpeg】鼠标滚轮放大、缩小、移动——解码播放本地视频(三)

     上一期我们实现了播放、暂停、重播、倍速功能,这期来谈谈如何实现鼠标滚轮放大缩小和移动;如果还没看过上期,请移步 【Qt+FFmpeg】解码播放本地视频(一)_logani的博客-CSDN博客【Qt+FFmpeg】解码播放本地视频(二)——实现播放、暂停、重播、倍速功能_logani的博客-C

    2024年02月10日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包