移动端 预览图片 手势改变图片大小

引用js库

 <script src="asset/transform.js"></script>
 <script src="alloy_finger.js"></script>
 <script src="asset/to.js"></script>

预览代码

//点击图片进入预览
    var target;
    var $Dom = document.querySelector("#picurlimg");
    $Dom.onclick = function() {
    var temp = this.src;
    var objE = document.createElement("div");
    objE.innerHTML = '<div class="bgM" >' +
            '<img src="'+temp+'"  id="imgView" class="img-custom-img2"/>' +
        '</div>';
    document.body.appendChild(objE.children[0]);
    //退出图片预览事件
    var $bg = document.querySelector(".bgM");
    $bg.onclick = function() {
        var dm = document.querySelector(".bgM");
        document.body.removeChild(dm);
    }
    //阻止事件冒泡
    var $img = document.querySelector(".img-custom-img2");
    $img.onclick = function(event) {
       event.stopPropagation();
    }
}

手势改变图片大小,移动

var targetImg = document.getElementById("imgView");
    Transform(targetImg);
    var initScale = 1;
    new AlloyFinger(targetImg, {
 // 移动
 pressMove: function(evt) {
            targetImg.translateX += evt.deltaX;
            targetImg.translateY += evt.deltaY;
            evt.preventDefault();
        },
   // 多点触摸开始
 multipointStart: function() {
            initScale = targetImg.scaleX;
        },
        // 缩放
 pinch: function(evt) {
            targetImg.scaleX = targetImg.scaleY = initScale * evt.scale;
        }
    });

官方示例

http://alloyteam.github.io/AlloyFinger/

还可以使用photoswipe.js 这个没有研究但是感觉也挺好的

 微信页面可以

if (typeof window.WeixinJSBridge != 'undefined') {
         WeixinJSBridge.invoke('imagePreview', {
             'current' : imgDate[groupid][index],//当前地址
             'urls' : imgDate[groupid] //组
         });
     }else{
         alert(groupid+"请在微信中查看"+index, null, function(){});
     }