在此僅記錄一個示例 html ~~~ <div class="zh-pg-container"> <div class="zh-pg-box" data-x="0" data-y="0" data-scale="1"> <img class="zh-bg-kmg" src="/images/bg-kmg.svg" alt=""> <!-- <div class="zh-plane-pos" data-fid=""><div class="zh-img-plane"></div><div class="zh-txt">MU5693</div></div> --> <!-- <div class="zh-car-pos" data-cid=""><div class="zh-img-car"></div><div class="zh-txt">民航D6645</div></div> --> <!-- <svg class="zh-joint-line" data-fid="5f53be5e910869e468d9e271d77e0e0b" data-cid="e033c9b4-629d-456a-8c63-ff3f23c1d3f9" data-status="3" width="137" height="44" style="left: 627px;top: 189px;" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="137" y2="44" stroke="#fff" stroke-width="1.5"></line> </svg> --> </div> </div> ~~~ css ~~~ .zh-pg-container{position: absolute;z-index: 9;left: 50%;top: 50%;width: 1920px;height: 964px;margin: -482px 0 0 -960px;} .zh-pg-container .zh-pg-box{position: relative;width: 100%;height: 100%;} .zh-pg-container .zh-bg-kmg{display: block;width: 100%;height: 100%;} ~~~ ~~~ // 拖動與縮放 function dragScale() { // 拖動 $('.zh-pg-box').mousedown(function(e) { var _this = $(this), startX = e.clientX, startY = e.clientY, dataX = +_this.attr('data-x'), dataY = +_this.attr('data-y'), dataScale = +_this.attr('data-scale'), moveX, moveY; $(document).mousemove(function(e) { var endX = e.clientX, endY = e.clientY; moveX = endX - startX + dataX, moveY = endY - startY + dataY; _this.css({ '-webkit-transform': 'translate('+moveX+'px, '+moveY+'px) scale('+dataScale+', '+dataScale+')', '-ms-transform': 'translate('+moveX+'px, '+moveY+'px) scale('+dataScale+', '+dataScale+')', 'transform': 'translate('+moveX+'px, '+moveY+'px) scale('+dataScale+', '+dataScale+')' }); }).mouseup(function() { $(this).off('mousemove'); _this.attr({ 'data-x': moveX, 'data-y': moveY }); }); }); // 阻止圖片拖動 $('.zh-pg-box .zh-bg-kmg').mousedown(function(e) { e.preventDefault(); }); // 縮放 $('.zh-pg-box').on('mousewheel DOMMouseScroll', function(e) { var _this = $(this), dataX = +_this.attr('data-x'), dataY = +_this.attr('data-y'), dataScale = +_this.attr('data-scale'), delta = e.originalEvent.wheelDelta ? (e.originalEvent.wheelDelta/120) : (-e.originalEvent.detail/3); if(delta < 0) { // 向下 dataScale -= 0.1; if(dataScale < 0.4) { dataScale = 0.4; } } else { // 向上 dataScale += 0.1; } dataScale = +dataScale.toFixed(1); _this.css({ '-webkit-transform': 'translate('+dataX+'px, '+dataY+'px) scale('+dataScale+', '+dataScale+')', '-ms-transform': 'translate('+dataX+'px, '+dataY+'px) scale('+dataScale+', '+dataScale+')', 'transform': 'translate('+dataX+'px, '+dataY+'px) scale('+dataScale+', '+dataScale+')' }).attr('data-scale', dataScale); }); } dragScale(); ~~~ 可以配合transform-origin: x y z;來精確控制縮放 平移縮放效果