图片的缩放与拖拽

这里写图片描述

这个图片的缩放的流畅度还是很好的，需要引入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>