使用jquery-panzoom来实现图片或元素的放大缩小

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>