<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽图片demo</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
.test-box {
500px;
height: 400px;
border: 1px solid yellow;
overflow: hidden;
margin: 30px auto;
position: relative;
}
.test-img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="test-box">
<img class="test-img" src="http://images.669pic.com/element_psd/72/58/16/45/1c8e874b9b360550caab1a98a674cd73.jpg" alt="">
</div>
<script>
// 缩放
var imgZoom = {
init: function() {
this.zoomImage();
},
zoomImage: function() {
var _this = this;
$('.test-box').off('mousewheel').on('mousewheel', '.test-img', function(e) {
_this.mouseScroll($(this));
});
$('.test-box').off('DOMMouseScroll').on('DOMMouseScroll', '.test-img', function(e) {
_this.mouseScroll($(this), e);
});
},
mouseScroll: function($img,e) {
var e = e || window.event;
var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.originalEvent.detail)));
var imgWidth = $img.width();
var newWidth = Math.max(350, Math.min(1200,imgWidth + (30*oper)));
var left = parseInt($img.css("left")) - (newWidth - imgWidth) / 2;
$img.css({
"width": newWidth + "px",
"left": left + "px"
})
},
};
// 拖拽
var imgDrag = function() {
var isDrag = false;
var dragTarget;
var startX, startY;
var imgPositionTop,imgPositionLeft;
var boxWidthMin, boxWidthMax, boxHeightMin, boxHeightMax;
function moveMouse(e) {
if (isDrag) {
var e = window.event || e;
var clientY = e.clientY;
var clientX = e.clientX;
if(clientY >= boxHeightMin && clientY <= boxHeightMax) {
dragTarget.style.top = imgPositionTop + clientY - startY + "px";
}
if(clientX >= boxWidthMin && clientX <= boxWidthMax) {
dragTarget.style.left = imgPositionLeft + clientX - startX + "px";
}
return false;
}
}
function initDrag(e) {
var e = window.event || e;
var dragHandle = e.srcElement;
var topElement = "HTML";
var eventBtn = e.button == 0 || e.button == 1; // 鼠标左键
while (dragHandle.tagName != topElement && dragHandle.className != "test-img") {
dragHandle = dragHandle.parentElement;
}
if (dragHandle.className == "test-img" && eventBtn) {
isDrag = true;
dragTarget = dragHandle;
imgPositionTop = parseInt(dragTarget.style.top + 0);
startY = e.clientY;
imgPositionLeft = parseInt(dragTarget.style.left + 0);
startX = e.clientX;
var initVal = 50; // 防止图片拖出框内的最小边界值
var $box = $('.test-box');
boxWidthMin = $box.offset().left + initVal;
boxWidthMax = $box.offset().left + $box.width() - initVal;
boxHeightMin = $box.offset().top + initVal;
boxHeightMax = $box.offset().top + $box.height() - initVal;
$(document).unbind('mousemove').bind('mousemove', moveMouse);
return false;
}
}
$(document).unbind("mousedown").bind("mousedown", initDrag);
$(document).unbind("mouseup").bind("mouseup", function() {
isDrag = false;
});
};
imgZoom.init();
imgDrag();
</script>
</body>
</html>