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正常大小
});
})
