图片的缩放与拖拽

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