github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

新增 `layer.photos` 层的鼠标滚轮缩放功能

pull/1413/head
贤心 2023-10-31 08:29:00 +08:00
parent 0a6fff466a
commit 2e06f5f53e
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/modules/layer.js
View File

@ -1531,11 +1531,13 @@ layer.photos = function(options, loop, key){
// 一些动作 // 一些动作
dict.event = function(layero, index, that){ dict.event = function(layero, index, that){
// 上一张
dict.main.find('.layui-layer-photos-prev').on('click', function(event){ dict.main.find('.layui-layer-photos-prev').on('click', function(event){
event.preventDefault(); event.preventDefault();
dict.imgprev(true); dict.imgprev(true);
}); });
// 下一张
dict.main.find('.layui-layer-photos-next').on('click', function(event){ dict.main.find('.layui-layer-photos-next').on('click', function(event){
event.preventDefault(); event.preventDefault();
dict.imgnext(true); dict.imgnext(true);
@ -1545,7 +1547,8 @@ layer.photos = function(options, loop, key){
// 头部工具栏事件 // 头部工具栏事件
layero.off('click').on('click','*[toolbar-event]', function () { layero.off('click').on('click','*[toolbar-event]', function () {
var othis = $(this), event = othis.attr('toolbar-event'); var othis = $(this);
var event = othis.attr('toolbar-event');
switch (event) { switch (event) {
case 'rotate': case 'rotate':
dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360; dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360;
@ -1586,6 +1589,17 @@ layer.photos = function(options, loop, key){
that.auto(index); that.auto(index);
}); });
// 鼠标滚轮缩放图片事件
dict.main.children('img').on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var zoomElem = dict.main.find('[toolbar-event="zoom"]');
if (delta > 0) {
zoomElem.eq(0).trigger('click');
} else {
zoomElem.eq(1).trigger('click');
}
});
}; };
// 图片预加载 // 图片预加载