移动端 图片放大缩小 （双手指） 单手指移动

<style>
    .container{width: 100%;height: 200px;text-align: center;}
    .imgMax{width: 100%;}
    .containerBg{background-color: black;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index: 111}
    .containerBg img{width: 100%;margin: auto;}
</style>
<div class="container"><img class="imgMax" src="/static/wap/images/220150.png" alt=""></div>
<div class="containerBg" style="display: none;">
    <img class="containerBgImg" style="transform: translate(0px,0px) translateZ(0px)" src="/static/wap/images/220150.png" alt="">
    <span style="color: #FFFFFF;">11111111111111</span>
</div>
<script>
    var dis = [];
    var x ;
    var y ;
    var disMinOld = 1;
    var disMin =1 ;
    var transX;
    var transY;
    var posX=0;
    var posY=0;
    $(".imgMax").on('click',function () {
        $(".containerBg").show();
    });
    $(document).on('touchstart','.containerBgImg',function (e) {
        var evt = e.originalEvent;
//        if(evt.touches.length == 2) {
            x = Number(evt.touches[0].clientX);
            y = Number(evt.touches[0].clientY);
//        }
        var matrix = $(".containerBgImg").css('transform');
         transX =   parseFloat(matrix.split("(")[1].split(")")[0].split(", ")[4]);
         transY =   parseFloat(matrix.split("(")[1].split(")")[0].split(", ")[5]);
    });
    $(document).on('touchmove','.containerBgImg',function (e) {
        touchMoveImg(e)
    });
    $(".containerBgImg").on('touchend',function (e) {
        dis = [];
        disMinOld = disMin;
    });
    function touchMoveImg(e) {
        e.preventDefault();
        var evt = e.originalEvent;
        try {
            if(evt.touches.length == 2){
                var x1 = Number(evt.touches[1].clientX);
                var y1 = Number(evt.touches[1].clientY);
                dis.push(Math.sqrt(Math.pow(x-x1,2) + Math.pow(y-y1,2)));
                if(dis.length > 1){
                     disMin = dis[dis.length-1]/dis[0];
                    disMin = disMinOld*disMin;
                    $(".containerBgImg").css({
                        'webkitTransform':'scale('+disMin+') translate('+transX+'px,'+transY+'px)'
                    })
                }
            }else if(evt.touches.length == 1){
                var x1 = Number(evt.touches[0].clientX);
                var y1 = Number(evt.touches[0].clientY);
                   posX = parseFloat(x1-x);
                   posY = parseFloat(y1-y);
                   posX = posX+transX;
                   posY = posY+transY;
                    $(".containerBgImg").css({
                        'transform':'translate('+posX+'px,'+posY+'px) scale('+disMinOld+')',
                        '-webkit-transform':'translate('+posX+'px,'+posY+'px) scale('+disMinOld+')',
                        '-ms-transform':'translate('+posX+'px,'+posY+'px) scale('+disMinOld+')'
                    })

            }
        }catch (e) {
            alert('touchMoveFunc：' + e.message);
        }

    }
</script>