react 实现图片的滚动缩放和按住鼠标左键移动图片效果

最新推荐文章于 2024-06-21 09:30:26 发布

我坑我承认

最新推荐文章于 2024-06-21 09:30:26 发布

阅读量3k

点赞数 1

文章标签： react 图片移动图片缩放 js

本文链接：https://blog.csdn.net/qq_38262910/article/details/96187771

版权

本文介绍了如何在React项目中实现图片的拖动和滚轮缩放功能。通过监听鼠标按住拖动事件实现图片移动，同时利用滚轮事件处理函数实现图片的缩放效果。

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

在react项目

按住鼠标左键移动图片效果

html（jsx）中

<img 
  className='zoomImg'
  onDragStart={this.handleStopDrag}
  onMouseDown={(e) => { e.persist(); this.handleDrag(e) }}
/>

handleDrag事件


    handleDrag = (e) => {
        const o = $('.zoomImg')[0]
        const s = o.style
        const p = 'onmousemove'
        //在jsx中需要用e.persist()此方法会从池中移除合成事件，允许用户代码保留对事件的引用,否则clientX会是null
        let x = e.clientX - o.offsetLeft;
        let y = e.clientY - o.offsetTop;
        document[p] = function (e) {
            s.left = e.clientX - x + 'px';
            s.top = e.clientY - y + 'px';
        }
        this.setState({
            event: document[p]
        })
        document.onmouseup = function () {
            documen