JQ - 圖片在元素內拖動、縮放大小

 圖片在元素內拖拽/縮放

• 先獲取到起始坐標（在容器里鼠標按下時鼠標在瀏覽器頁面中的位置）
• 鼠標移動時再計算出當前鼠標當前坐標和起始坐標的距離，再使用 position 把圖片定位跟隨鼠標移動
• 拖動圖片時設置圖片拖動邊界限制
• 滾輪上下滾動時放大縮小圖片

css

*{ margin:0; padding:0; } div{ width:600px; height:400px; background:#FFF; border:1px solid slateblue; position:relative; overflow:overlay; margin:20px auto; } img{ position:absolute; left:0; top:0; transform:scale(1); } img:active{ cursor:move; } ::-webkit-scrollbar { width:6px; height:6px; background-color:#F5F5F5; } ::-webkit-scrollbar-thumb { background-color:#3d4a5dd9; } ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); background-color:#F5F5F5; }

 HTML

<div class="dragImage" ></div>

 JS

$(function(){ class DRAGIMAGE { constructor({ $dom, img, $zoomMax, $zoomMin }){ let that = this; this.$dom = $dom;    // dom
            this.$dom.html(`<img src="${img}" draggable="false" />`);    // 圖片放進盒子 this.$img = $dom.find("img");         // img
            this.$start_x = 0;                    // 鼠標起始坐標x
            this.$start_y = 0;                    // 鼠標起始坐標y
            this.$move_left = 0;                // 鼠標向左移動距離
            this.$move_top = 0;                    // 鼠標向上移動距離
            this.$img_left = 0;                    // 圖片當前定位 left
            this.$img_top = 0;                    // 圖片當前定位 top
            this.$img_width = 0;                // 圖片實際寬度
            this.$img_height = 0;                // 圖片實際高度
            this.$dom_width = $dom.width();         // 父盒子寬度
            this.$dom_height = $dom.height();    // 父盒子高度
            this.$zoom = 100;                    // 縮放大小 100正常大小 
            this.$zoom_Max = ($zoomMax*100) || 200 ;    // 最大縮放
            this.$zoom_Min = ($zoomMin*100) || 0.5 ;     // 最小縮放 

            var image = new Image(); image.src = img; image.onload = function(){ // 獲取到圖片實際寬高
                that.$img_width = image.width; that.$img_height = image.height; // 鼠標按下執行
 that.mouseDown(); } // 滾輪事件 放大縮小圖片
 that.mouseWheel(); // 鼠標抬起 清除移動事件
            that.$dom.on("mouseup", function(e){ that.stopmove() }); // 鼠標移出父盒子 清除移動事件
            that.$dom.on("mouseout", function(e){ that.stopmove() }); } /* 鼠標按下時觸發 獲取鼠標在圖片內的坐標 */ mouseDown () { let that = this; that.$img.on("mousedown", function(e){ e = e || event; // 獲取起始坐標
                that.$start_x = e.clientX; that.$start_y = e.clientY; that.stopmove(); // 清除移動事件
                that.mouseMove(); // 鼠標移動
                return false; }) } /* 鼠標移動事件 獲取鼠標在圖內的移動距離: 圖片當前定位 - ( 起始坐標 - 當前坐標 ) */ mouseMove () { let that = this; that.$dom.on("mousemove", function(e){ e = e || event; /* 獲取鼠標移動距離 */ that.$move_left = that.$img_left - ( that.$start_x - e.clientX ); that.$move_top = that.$img_top - ( that.$start_y - e.clientY ); // 隨鼠標移動 更新圖片定位
 that.setPosition(); return false; }) } /* 滾輪事件 放大縮小圖片 */ mouseWheel () { let that = this; that.$dom.on("mousewheel", function(e){ e = e || event; e.stopPropagation(); e.preventDefault(); let width, height; //判斷上下滾動 chrome & ie || firefox
                var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // delta > 0 上滾 ，delta < 0 下滾
                if (delta > 0) { ++that.$zoom; if (that.$zoom>=that.$zoom_Max) that.$zoom = that.$zoom_Max; // 限制最大縮放
                    if (that.$zoom <= that.$zoom_Max) width = that.$img_width*((that.$zoom)/100);
                        height = that.$img_height*((that.$zoom)/100);
                } else if (delta < 0) { --that.$zoom; if (that.$zoom<=that.$zoom_Min) that.$zoom = that.$zoom_Min; // 限制最小縮放
                    if (that.$zoom >= that.$zoom_Min) width = that.$img_width*((that.$zoom)/100);
                        height = that.$img_height*((that.$zoom)/100);
 } that.scaleImg({width, height}); // 對圖片進行縮放
 that.setPosition(); return false; }) } /* 通過改變 width/height 進行縮放 */ scaleImg ( { width, height } ) { this.$img.css({ 'width': width, 'height': height }); } /* 設置圖片定位, 邊界限制 左/上限制：圖片當前寬高 大於/小於 父盒子的寬高 鼠標移動距離 = 0 右/下限制：(鼠標移動距離-父盒子最大寬高)大於當前圖片寬高 || 鼠標移動距離大於 -(當前圖片寬高-父盒子最大寬高) 鼠標移動距離 = -(當前圖片寬高 - 父盒子寬高); */ setPosition () { let that = this; // 圖片當前寬高大於父盒子的寬高 || 圖片當前寬高小於父盒子的寬高
            /* 左/上 */
            if ( that.$move_left>=0 && that.$img.width()>that.$dom_width || that.$move_left<=0 && that.$img.width()<that.$dom_width ) that.$move_left = 0; if ( that.$move_top>=0 && that.$img.height()>that.$dom_height || that.$move_top<=0 && that.$img.height()<that.$dom_height ) that.$move_top = 0; /* 右/下 */ 
            if ( Math.abs(( that.$move_left-that.$dom_width ))>=that.$img.width() && that.$img.width()>that.$dom_width || that.$move_left>=(-(that.$img.width() - that.$dom_width)) && that.$img.width()<that.$dom_width ) that.$move_left = -(that.$img.width() - that.$dom_width); if ( Math.abs(( that.$move_top-that.$dom_height ))>=that.$img.height() && that.$img.height()>that.$dom_height || that.$move_top>=(-(that.$img.height() - that.$dom_height)) && that.$img.height()<that.$dom_height ) that.$move_top = -(that.$img.height() - that.$dom_height); // 定位移動的距離 = 鼠標移動的距離 
 that.$img.css({ 'left': that.$move_left, 'top': that.$move_top }); } // 停止鼠標移動
 stopmove(){ /* 清除移動事件，綁定圖片當前定位 */
            this.$dom.unbind('mousemove'); this.$img_left =  this.$img.position().left; this.$img_top =  this.$img.position().top; } }
 var dragImage = new DRAGIMAGE({ $dom: $('.dragImage'),    // 圖片的父元素
        img: "https://images.cnblogs.com/cnblogs_com/sanyekui/1693114/o_200409094205e56bf2254d1496cb6138b6cb271a2cf9.jpg", // 圖片路徑
        $zoomMax: 4,     // 縮放最大倍數，1正常大小 
        $zoomMin: 0.2    // 縮放最小倍數，1正常大小
 });
 })