diff --git a/src/layer.js b/src/layer.js index 05d299c..5dbd8c6 100644 --- a/src/layer.js +++ b/src/layer.js @@ -1188,7 +1188,7 @@ layer.photos = function(options, loop, key){ shade: 0.9, shadeClose: true, closeBtn: false, - move: '.layui-layer-phimg img', + move: '.layui-layer-phimg', moveType: 1, scrollbar: false, moveOut: true, @@ -1264,8 +1264,8 @@ layer.photos = function(options, loop, key){ thumbX=e.pageX || e.clientX; thumbY=e.pageY || e.clientY; - cW = document.body.clientWidth; - cH = document.body.clientHeight; + cW = $gallery.width(); + cH = $gallery.height(); e.stopPropagation(); }).on("mousemove",function(e){ if(thumbX > 0){ @@ -1313,7 +1313,7 @@ layer.photos = function(options, loop, key){ if(imageHeight < cH ) top = (cH - imageHeight) / 2; else top = -imageHeight * (top-it) / thumbImgHeight; - $image.offset({ + $image.css({ left : left, top : top }); @@ -1329,61 +1329,8 @@ layer.photos = function(options, loop, key){ $gallery.on("mouseover",function(e){ $tool.show(); - }).on("mouseenter",function(e){ - dragX = -1; }).on("mouseout",function(e){ $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(){ - imageWidth = $image.width(); - imageHeight = $image.height(); - var imgarea = [imageWidth, imageHeight]; + var imgarea = [$image.width(), $image.height()]; var winarea = [$(window).width() - 100, $(window).height() - 100]; if(!options.full && (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.height(imgarea[1] + "px"); + imageWidth = $image.width(); + imageHeight = $image.height(); imgRatio = imageWidth/ imageHeight; $thumbImg = $thumbnails.find("img").attr("src", $image.attr("src")); $thumbnails.find("img").removeAttr("class").removeAttr("style"); @@ -1561,7 +1508,7 @@ layer.photos = function(options, loop, key){ //显示缩略图 function showThumbnails(width, height){ 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(); setThumbnails(); } else{ @@ -1572,8 +1519,8 @@ layer.photos = function(options, loop, key){ //重置图片宽高 function resizeImage(rotateDeg){ - var mH = document.body.clientHeight - windowMargin, - mW = document.body.clientWidth - windowMargin; + var mH = $gallery.height() - windowMargin, + mW = $gallery.width() - windowMargin; if(rotateDeg == '90' || rotateDeg == '270'){ mW = [mH, mH = mW][0]; } @@ -1633,11 +1580,11 @@ layer.photos = function(options, loop, key){ sH = $img.height(), w = $image.width(), h = $image.height(), - imf = $image.offset(), + imf = $image.position(), imfl = imf.left, imft = imf.top, - cW = document.body.clientWidth, - cH = document.body.clientHeight, + cW = $gallery.width(), + cH = $gallery.height(), tW, tH, tl, diff --git a/src/skin/default/layer.css b/src/skin/default/layer.css index aa48dcc..5fddbd5 100644 --- a/src/skin/default/layer.css +++ b/src/skin/default/layer.css @@ -149,7 +149,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;} /* photo模式 */ .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-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-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;} @@ -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:hover{color:#fff; text-decoration:underline;} .layui-layer-imgtit em{padding-left:10px; font-style: normal;} +.layui-layer-phimg {width: 100%; height: 100%; position: relative;} /* 关闭动画 */ @-webkit-keyframes layer-bounceOut { @@ -268,12 +269,29 @@ i{ 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{ position: absolute; margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/ padding:0; z-index: -1; 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{ display:block; @@ -367,6 +385,13 @@ i{ left: 0; right: 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{ position: absolute;