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

# Conflicts:
#	src/skin/default/layer.css

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,

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;