搜索到
1
篇与
图片放大缩小
的结果
-
layer.photos 相册层 图片 增加鼠标滚轮放大缩小 公司要求在显示图片的地方加一个图片放大缩小的功能，原本前端ui用的是 layui 。本来想直接把这里插件换掉；百度了一圈发现，还是自己改会容易一点{mtitle title="上代码"/}主要就是这个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)
