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

Merge branch 'master' of https://github.com/390029659/layer 

# Conflicts:
#	src/skin/default/layer.css
pull/43/head
hurui 2017-03-02 11:33:16 +08:00
parent f6b7f7fe24 71229dd1c9
commit cf1db9b6ca
2 changed files with 39 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/layer.js
View File

@ -1188,7 +1188,7 @@ layer.photos = function(options, loop, key){
shade: 0.9, shade: 0.9,
shadeClose: true, shadeClose: true,
closeBtn: false, closeBtn: false,
move: '.layui-layer-phimg img', move: '.layui-layer-phimg',
moveType: 1, moveType: 1,
scrollbar: false, scrollbar: false,
moveOut: true, moveOut: true,
@ -1264,8 +1264,8 @@ layer.photos = function(options, loop, key){
thumbX=e.pageX || e.clientX; thumbX=e.pageX || e.clientX;
thumbY=e.pageY || e.clientY; thumbY=e.pageY || e.clientY;
cW = document.body.clientWidth; cW = $gallery.width();
cH = document.body.clientHeight; cH = $gallery.height();
e.stopPropagation(); e.stopPropagation();
}).on("mousemove",function(e){ }).on("mousemove",function(e){
if(thumbX > 0){ if(thumbX > 0){
@ -1313,7 +1313,7 @@ layer.photos = function(options, loop, key){
if(imageHeight < cH ) top = (cH - imageHeight) / 2; if(imageHeight < cH ) top = (cH - imageHeight) / 2;
else top = -imageHeight * (top-it) / thumbImgHeight; else top = -imageHeight * (top-it) / thumbImgHeight;
$image.offset({ $image.css({
left : left, left : left,
top : top top : top
}); });
@ -1329,61 +1329,8 @@ layer.photos = function(options, loop, key){
$gallery.on("mouseover",function(e){ $gallery.on("mouseover",function(e){
$tool.show(); $tool.show();
}).on("mouseenter",function(e){
dragX = -1;
}).on("mouseout",function(e){ }).on("mouseout",function(e){
$tool.hide(); $tool.hide();
}).on("mousedown",function(e){
dragX=e.pageX || e.clientX;
dragY=e.pageY || e.clientY;
cW = document.body.clientWidth;
cH = document.body.clientHeight;
e.stopPropagation();
}).on("mousemove",function(e){
if(dragX > 0){
var nextDragX=e.pageX || e.clientX;
var nextDragY=e.pageY || e.clientY ;
var o = $image.offset(),
left =o.left + (nextDragX - dragX),
top =o.top + (nextDragY - dragY),
w = $image.width(),
h = $image.height();
if(isVertical){
w = [h, h = w][0];
}
if(w > cW){
if(left > 0){
left = 0 ;
}
else if(left < cW - w){
left = cW - w;
}
}else{
left = o.left;
}
if(h > cH){
if(top > 0){
top = 0 ;
}
else if(top < cH - h){
top = cH - h;
}
} else{
top = o.top;
}
$image.offset({
left : left,
top : top
});
dragX=nextDragX;
dragY=nextDragY;
setThumbnails(); //缩略图拖拽点
}
}).on("mouseup",function(e){
dragX = -1;
}); });
//全屏 //全屏
@ -1483,9 +1430,7 @@ layer.photos = function(options, loop, key){
} }
function toggleImage(){ function toggleImage(){
imageWidth = $image.width(); var imgarea = [$image.width(), $image.height()];
imageHeight = $image.height();
var imgarea = [imageWidth, imageHeight];
var winarea = [$(window).width() - 100, $(window).height() - 100]; var winarea = [$(window).width() - 100, $(window).height() - 100];
if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){//如果 实际图片的宽或者高比 屏幕大（那么进行缩放） if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){//如果 实际图片的宽或者高比 屏幕大（那么进行缩放）
var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取 宽度 缩放比例 高度缩放比例 var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取 宽度 缩放比例 高度缩放比例
@ -1500,6 +1445,8 @@ layer.photos = function(options, loop, key){
} }
$image.width(imgarea[0] + "px"); $image.width(imgarea[0] + "px");
$image.height(imgarea[1] + "px"); $image.height(imgarea[1] + "px");
imageWidth = $image.width();
imageHeight = $image.height();
imgRatio = imageWidth/ imageHeight; imgRatio = imageWidth/ imageHeight;
$thumbImg = $thumbnails.find("img").attr("src", $image.attr("src")); $thumbImg = $thumbnails.find("img").attr("src", $image.attr("src"));
$thumbnails.find("img").removeAttr("class").removeAttr("style"); $thumbnails.find("img").removeAttr("class").removeAttr("style");
@ -1561,7 +1508,7 @@ layer.photos = function(options, loop, key){
//显示缩略图 //显示缩略图
function showThumbnails(width, height){ function showThumbnails(width, height){
if(isVertical) width = [height, height = width][0]; if(isVertical) width = [height, height = width][0];
if(width > document.body.clientWidth || height > document.body.clientHeight){ if(width > $gallery.width() || height > $gallery.height()){
$thumbnails.show(); $thumbnails.show();
setThumbnails(); setThumbnails();
} else{ } else{
@ -1572,8 +1519,8 @@ layer.photos = function(options, loop, key){
//重置图片宽高 //重置图片宽高
function resizeImage(rotateDeg){ function resizeImage(rotateDeg){
var mH = document.body.clientHeight - windowMargin, var mH = $gallery.height() - windowMargin,
mW = document.body.clientWidth - windowMargin; mW = $gallery.width() - windowMargin;
if(rotateDeg == '90' || rotateDeg == '270'){ if(rotateDeg == '90' || rotateDeg == '270'){
mW = [mH, mH = mW][0]; mW = [mH, mH = mW][0];
} }
@ -1633,11 +1580,11 @@ layer.photos = function(options, loop, key){
sH = $img.height(), sH = $img.height(),
w = $image.width(), w = $image.width(),
h = $image.height(), h = $image.height(),
imf = $image.offset(), imf = $image.position(),
imfl = imf.left, imfl = imf.left,
imft = imf.top, imft = imf.top,
cW = document.body.clientWidth, cW = $gallery.width(),
cH = document.body.clientHeight, cH = $gallery.height(),
tW, tW,
tH, tH,
tl, tl,

27
src/skin/default/layer.css
View File

@ -149,7 +149,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
/* photo模式 */ /* photo模式 */
.layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;} .layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;} .layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;} .layui-layer-photos .layui-layer-phimg img{ width:100%; display: inline-block; *display:inline; *zoom:1; }
.layui-layer-imguide,.layui-layer-imgbar{display:none;} .layui-layer-imguide,.layui-layer-imgbar{display:none;}
.layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());} .layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
.layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;} .layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
@ -162,6 +162,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;} .layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
.layui-layer-imgtit em{padding-left:10px; font-style: normal;} .layui-layer-imgtit em{padding-left:10px; font-style: normal;}
.layui-layer-phimg {width: 100%; height: 100%; position: relative;}
/* 关闭动画 */ /* 关闭动画 */
@-webkit-keyframes layer-bounceOut { @-webkit-keyframes layer-bounceOut {
@ -268,12 +269,29 @@ i{
transform: rotate(270deg); transform: rotate(270deg);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
} }
@keyframes layer-bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
@media screen and (max-width: 1100px) {
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
}
.image{ .image{
position: absolute; position: absolute;
margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/ margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/
padding:0; padding:0;
z-index: -1; z-index: -1;
display: none; display: none;
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
} }
.image.active{ .image.active{
display:block; display:block;
@ -367,6 +385,13 @@ i{
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
} }
.oper{ .oper{
position: absolute; position: absolute;