1. html
<div class="wrapper">
<a class="btn btn-md" ui-turn-off="AllIssueImgView" style="position: absolute;top: 10px;left: 0px;font-size: x-large;color: white;z-index: 1100"><i class="fa fa-angle-left"></i></a>
<div class="modal-body">
<div class="panzoomContainer">
<div class="parent" style="position: fixed;left: 0px;top:0px;bottom:0px" ui-swipe-right="swipePreview('prev')" ui-swipe-left="swipePreview('next')">
<div class="panzoom">
<img class="issueImg" ng-src="{{activeImg.base64Str == null ? '/issues/bigImage/'+activeImg : activeImg.base64Str}}" style="width: 500px;height: 600px;">
</div>
</div> </div> </div>
</div>
2. js
<script>
var $panzoomContainer = $('.panzoomContainer').first();
var parentElement = $('.parent');
var panzoomElement = $panzoomContainer.find('.panzoom');
// 初始化panzoom
(function() {
panzoomElement.panzoom({
minScale: 0.7,
maxScale: 2,
startTransform: 'scale(0.7)',
duration: 100,
contain: 'automatic',
});
})();
// 处理panzoomstart事件
(function() {
panzoomElement.on('panzoomstart', function(e, panzoom, event, touches) {
if (panzoom.scale == 0.7) {
panzoomElement.panzoom("option", "disableYAxis", true);
} else {
panzoomElement.panzoom("option", "disableYAxis", false);
}
});
})();
// 处理panzoomend事件
(function() {
panzoomElement.on('panzoomend', function(e, panzoom, matrix, changed) {
if (changed) {
// 父元素绝对坐标
var parentLeftTop = parseInt(parentElement.offset().left);
var parentRightTop = parseInt(parentElement.offset().left + parentElement.width());
// alert(parentLeftTop);
// alert(parentRightTop);
// panzoom绝对坐标
var panzoomLeftTop = parseInt(panzoomElement.offset().left);
var panzoomRightTop = parseInt(panzoomElement.offset().left + panzoomElement.width());
// alert(panzoomLeftTop);
// alert(panzoomRightTop);
// alert(panzoom.scale);
if (Math.abs(parentLeftTop - panzoomLeftTop) <= 10) {
if (panzoom.scale == 0.7) {
angular.element('#issueImagesView').scope().swipePreview('next', true)
} else {
angular.element('#issueImagesView').scope().swipePreview('prev', true);
}
}
if (Math.abs(parentRightTop - panzoomRightTop) <= 10) {
if (panzoom.scale == 0.7) {
angular.element('#issueImagesView').scope().swipePreview('prev', true);
} else {
angular.element('#issueImagesView').scope().swipePreview('next', true);
}
}
} else {
// 缩放时重置
if (panzoom.scale != 0.7) {
setTimeout(function() {
panzoomElement.panzoom("reset");
}, 200);
}
}
});
})();
</script>