layui-v.2.5.6实现图片弹层滚轮缩放功能

101 阅读 0 评论 67 点赞

我是靠谱客的博主故意眼睛，这篇文章主要介绍layui-v.2.5.6实现图片弹层滚轮缩放功能，现在分享给大家，希望可以做个参考。

layui-v.2.5.6实现图片弹层滚轮缩放功能

- 需求：后台管理中图片需要弹层，支持图片切换和滚轮缩放功能

需求：后台管理中图片需要弹层，支持图片切换和滚轮缩放功能

HTML代码（后端基于PHP-Laravel，blade模板引擎，自己根据情况修改数据循环部分）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="layui-form-item">
<label class="layui-form-label">图片</label>
<div onclick="show_img()" style="display: inline-block" id="layer-photos-demo" class="layer-photos-demo">
@if($info['pics'])
//blade模板引擎语法
$info是PHP传来的赋值变量
@foreach($info['pics'] as $pic)
<img src="{{$pic}}" width="200px" height="150px" alt="图片名" layer-src="{{$pic}}" >
@endforeach
@endif
</div>
</div>
<div class="layui-form-item">

JS代码（前提是框架加载了layui的js和css，使用了layout模板继承）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
//显示大图片
window.onload = function () {
show_img() //因为页面加载完，show_img方法没有注册，暂时不知什么原因。期待大神指点
}
function show_img() {
var $ = layui.jquery;
layer.photos(
{
photos:'#layer-photos-demo',
anim: 5,
tab: function (pic, layero) {
$(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});
});
}
});
}
</script>

这里引用了 https://www.cnblogs.com/interesting-whh/p/13918195.html

这里注意一点：mousewheel监听我放在了tab回调里面。不知道什么原因，在layer.photos的success的回调函数里，执行不了滚轮监听方法，可能是layer.photos对多图片的成功回调有其他情况吧？（我猜的,因为我在单图片的success回调里是可以执行滚轮缩放的），有知道的可留言告诉我 ^-^