photos增加旋转,翻转,放大,缩小功能
This commit is contained in:
parent
92ac009e41
commit
aa80260844
@ -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…
Reference in New Issue
Block a user