layer.photos 图片弹出无法滚轮放大缩写的问题解决

59 阅读 0 评论 39 点赞

我是靠谱客的博主帅气电话，最近开发中收集的这篇文章主要介绍layer.photos 图片弹出无法滚轮放大缩写的问题解决，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

layui的版本问题，在旧版本中下列方式可以实现滚轮放大缩小，但是出现新的业务场景，需要增加评价项，如图。评价项需要引用rate.js，但是旧版本中没有，引用了新版本后，发现照片可以预览，但是滚轮放大缩小失效了
在这里插入图片描述

HTML

<div class="layui-form-item">
     <label class="layui-form-label">故障图片：</label>
     <div class="layui-input-inline" style="margin: 10px" v-for="imageUrl in imageList">
        <img :src="imageUrl" style="width: 150px;height: 150px;" aria-readonly="true"
                             @click="iamgeUrlAmplify">
     </div>
</div>

iamgeUrlAmplify: function (e) {
                var url = e.target.src;
                layer.photos({
                    photos: {"data": [{"src": e.target.src}]},
                });
            },

解决办法
在原JS中加入下面这段代码即可放大缩小

$(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});
                        });

完整JS

iamgeUrlAmplify: function (e) {
                var url = e.target.src;
                layer.photos({
                    photos: {"data": [{"src": e.target.src}]},
                    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(){ //销毁回调

                    }
                });