這個圖片的縮放的流暢度還是很好的，需要引入touch.js,好像是百度團隊那邊寫的

<script src="./js/touch.min.js" type="text/javascript"></script> $(function() { //放大縮小var scaleVal = 1;var initialScale = scaleVal || 1; var currentScale; touch.on('.swiper-mast img', 'pinch', function (ev) { currentScale = ev.scale - 1; currentScale = initialScale + currentScale; scaleVal = currentScale;if(scaleVal < 0.5){scaleVal = 0.5;} var transformStyle = 'scale(' + scaleVal + ')'; $(this).css("transform", transformStyle).css("-webkit-transform", transformStyle); }); touch.on('.swiper-mast img', 'pinchend', function (ev) { initialScale = currentScale; scaleVal = currentScale; }); }); 拖拽目標元素$(function() {touch.on('.swiper-mast img', 'touchstart', function(ev) {ev.preventDefault();});var dx, dy;touch.on('.swiper-mast img', 'drag', function(ev) {dx = dx || 0;dy = dy || 0;var offx = dx + ev.x;var offy = dy + ev.y;if(offx < 0){offx = 0;}if(offy < 0){offy = 0;}$(this).css("left", offx+'px').css("top", offy+'px');// alert(offx);// alert(offy);});touch.on('.swiper-mast img', 'dragend', function(ev) {dx += ev.x;dy += ev.y;});});

html代碼：

<div class="swiper-mast"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/libai.jpg" alt=""></div><div class="swiper-slide"><img src="./img/libai.jpg" alt=""></div><div class="swiper-slide"><img src="./img/libai.jpg" alt=""></div><div class="swiper-slide"><img src="./img/libai.jpg" alt=""></div><div class="swiper-slide"><img src="./img/libai.jpg" alt=""></div></div><div class="swiper-pagination"></div></div></div>

網址：(https://ptestjava.liby.com.cn/wechat/goodsdetail.html)

總結

以上是生活随笔為你收集整理的图片的缩放与拖拽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。