短視訊app原始碼，點選檢視圖片，雙指放大

短視訊app原始碼，點選檢視圖片，雙指放大實現的相關程式碼

 function openImgMain(value) {
 
    let urls = value.split(",");
    var datas = new Array();
    for (let i = 0; i < urls.length; i++) {
        var obj = new Object();
        // obj.alt = name;
        obj.pid = i;
        obj.src = "/files/" + urls[i];
        obj.thumb = "/files/" + urls[i];
        datas.push(obj);
    }
    var json = {
        "title": "監控圖片", //相簿標題
        "id": 123, //相簿id
        "start": 0, //初始顯示的圖片序號，預設0
        "data": datas
    };
 
    layer.photos({
        photos: json
        , anim: 5 //0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數）
        , closeBtn: "1"
        ,success: function() {
        //以滑鼠位置為中心的圖片滾動放大縮小
        $(document).on("mousewheel",".layui-layer-photos",function(ev){
            var oImg = this;
            var ev = event || window.event;//返回WheelEvent
            //ev.preventDefault();
            var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
            var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
                ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
                ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
                w = parseInt(oImg.offsetWidth * ratioDelta),
                h = parseInt(oImg.offsetHeight * ratioDelta),
                l = Math.round(ev.clientX - (w * ratioL)),
                t = Math.round(ev.clientY - (h * ratioT));
            $(".layui-layer-photos").css({
                width: w, height: h
                ,left: l, top: t
            });
            $("#layui-layer-photos").css({width: w, height: h});
            $("#layui-layer-photos>img").css({width: w, height: h});
        });
    }
       ,end: function(){ //銷燬回撥
 
    }
    });
 
 
}

以上就是短視訊app原始碼，點選檢視圖片，雙指放大實現的相關程式碼， 更多內容歡迎關注之後的文章