layer.photos 相册层 图片 增加鼠标滚轮放大缩小

公司要求在显示图片的地方加一个图片放大缩小的功能，原本前端ui用的是 layui 。本来想直接把这里插件换掉；百度了一圈发现，还是自己改会容易一点

主要就是这个js函数(function 应该是函数的意思)，百度里找到的。

function bigimg(obj){
    var zoom = parseInt(obj.style.zoom,10)||100;
    zoom += event.wheelDelta / 12;
    if(zoom > 0 )
        obj.style.zoom=zoom+'%';
    return false;
}

有了代码，基本上就完成了，往里套谁不会啊。
学习编程，你可以不会写，但是你需要“会找”和“会套”……
继续吧

//这个是常规的layer相册层的用法，我就不过多的解释了。
layer.photos({
  photos: json
  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
}); 

我们需要用到layer相册层的tab方法，然后在里面加上鼠标滚轮事件，然后在鼠标滚轮事件里调用上面我们说的bigimg 函数就好。

//这个是常规的layer相册层的用法，我就不过多的解释了。
layer.photos({
  photos: json
  ,anim: 5
  ,tab: function(pic, layero){
    console.log(pic) //当前图片的一些信息
    //给弹出层的图片加上鼠标滚轮滚动事件
    $(layero).find('.layui-layer-phimg>img').on('mousewheel',function (){
        // 用 F12 在图片和图片上面的每一层都测试一下，就找出来了。
        bigimg($(this).parents('.layui-layer-photos')[0]);
    });
  }
}); 

这样就好啦。下面来个测试。觉得可以的话，记得点赞哦！！！

点击测试一下吧(https://cdn.wxssk.ga/study/layer_photos)

您在本文章已经停留了大概 。
喜欢的话就点个赞吧！或着请我喝个冰可乐，我就太感谢你了！