新增 `layer.photos` 图片层的旋转、放大、缩小、还原、关闭等功能的头部工具栏

photos增加旋转,翻转,放大,缩小功能
pull/1344/head
贤心 1 year ago committed by GitHub
commit cc4b64026d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1497,9 +1497,29 @@ layer.photos = function(options, loop, key){
layer.close(dict.index);
return layer.photos(options, true, key);
}
dict.isNumber = function (n) {
return typeof n === 'number' && !isNaN(n);
}
dict.getTransform = function(options){
var transforms = [];
var rotate = options.rotate;
var scaleX = options.scaleX;
if (dict.isNumber(rotate) && rotate !== 0) {
transforms.push('rotate(' + rotate + 'deg)');
}
if (dict.isNumber(scaleX) && scaleX !== 1) {
transforms.push('scaleX(' + scaleX + ')');
}
return transforms.length ? transforms.join(' ') : 'none';
}
// 一些动作
dict.event = function(){
dict.event = function(layero, index){
/*
dict.bigimg.hover(function(){
dict.imgsee.show();
@ -1519,6 +1539,64 @@ layer.photos = function(options, loop, key){
});
$(document).on('keyup', dict.keyup);
var scalexFlag = true;
//工具栏事件
layero.off('click').on('click','*[toolbar-event]', function () {
var othis = $(this), event = othis.attr('toolbar-event');
switch (event) {
case 'rotate':
dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360;
dict.imgElem.css({
transform: dict.getTransform(dict.image)
});
break;
case 'scalex':
if (scalexFlag){
dict.image.scaleX = -1;
scalexFlag = false;
}else {
dict.image.scaleX = 1;
scalexFlag = true;
}
scalexFlag !== scalexFlag;
dict.imgElem.css({
transform: dict.getTransform(dict.image)
});
break;
case 'zoom':
var ratio = Number(othis.attr('data-option'));
if (ratio < 0) {
ratio = 1 / (1 - ratio);
} else {
ratio = 1 + ratio;
}
dict.image.width = dict.image.width * ratio;
dict.image.height = dict.image.height * ratio;
dict.imgElem.css({
width: dict.image.width,
height: dict.image.height,
transform: dict.getTransform(dict.image)
});
break;
case 'reset':
scalexFlag = true;
dict.image.scaleX = 1;
dict.image.rotate = 0;
dict.image.width = dict.image.oldWidth;
dict.image.height = dict.image.oldHeight;
dict.imgElem.css({
width: dict.image.oldWidth,
height: dict.image.oldHeight,
transform: 'none'
});
break;
case 'close':
layer.close(index);
break;
}
});
};
// 图片预加载
@ -1570,7 +1648,12 @@ layer.photos = function(options, loop, key){
imgarea[1] = imgarea[1]/wh[1];
}
}
dict.image = {
oldWidth : imgarea[0],
oldHeight : imgarea[1],
width : imgarea[0],
height : imgarea[1],
};
return [imgarea[0]+'px', imgarea[1]+'px'];
}(),
title: false,
@ -1607,6 +1690,22 @@ layer.photos = function(options, loop, key){
,'</div>'
,'</div>'].join(''));
}
//工具栏
if (options.toolbar){
arr.push([
'<div class="layui-layer-images-toolbar">',
'<div class="layer-images-tool-item">',
'<span toolbar-event="rotate" data-option="-15" title="向左旋转15°" style="transform: scaleX(-1);"><i class="layui-icon layui-icon-refresh rotate"></i></span>',
'<span toolbar-event="rotate" data-option="15" title="向右旋转15°"><i class="layui-icon layui-icon-refresh"></i></span>',
'<span toolbar-event="scalex" title="翻转"><i class="layui-icon layui-icon-slider"></i></span>',
'<span toolbar-event="zoom" data-option="0.1" title="放大图片"><i class="layui-icon layui-icon-add-circle"></i></span>',
'<span toolbar-event="zoom" data-option="-0.1" title="缩小图片"><i class="layui-icon layui-icon-reduce-circle"></i></span>',
'<span toolbar-event="reset" title="重置图片"><i class="layui-icon layui-icon-refresh-1"></i></span>',
'<span toolbar-event="close" title="关闭"><i class="layui-icon layui-icon-close"></i></span>',
'</div>',
'</div>'
].join(''));
}
arr.push('</div>');
return arr.join('');
@ -1615,7 +1714,15 @@ layer.photos = function(options, loop, key){
success: function(layero, index){
dict.bigimg = layero.find('.layui-layer-phimg');
dict.imgsee = layero.find('.layui-layer-imgbar');
dict.event(layero);
if (options.toolbar){
layero.find('.layui-layer-content').addClass('layui-layer-images-toolbar-mode');
dict.imgElem = dict.bigimg.find('img');
dict.imgElem.css({
width : dict.image.width,
height : dict.image.height
});
}
dict.event(layero, index);
options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero);
}, end: function(){

Loading…
Cancel
Save