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

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

岳小威子
2021-08-04 / 321 个字 / 0 评论 / 51 阅读 / 加载耗时:8ms / 正在检测是否收录...
温馨提示:
本文最后更新于2021年08月04日,已超过176天没有更新,若内容或图片失效,请留言反馈。

公司要求在显示图片的地方加一个图片放大缩小的功能,原本前端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)

文章到这里就结束了

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


0
打赏
拜谢打赏(☆ω☆)

感谢老板,老板大气。。

评论 (0)

取消