Merge 5084a73c6f into 0018e1a54f

2018-04-19 06:47:38 +00:00 · 2018-04-19 06:47:38 +00:00 · ff8ebc466d
parent 0018e1a54f 5084a73c6f
commit ff8ebc466d
14 changed files with 840 additions and 61 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "启动 Chrome 并打开 localhost",
+            "url": "http://localhost:8080/test/demo.html",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/src/layer.js
+++ b/src/layer.js
@ -31,7 +31,7 @@ var isLayui = window.layui && layui.define, $, win, ready = {
  btn: ['&#x786E;&#x5B9A;', '&#x53D6;&#x6D88;'],

  //五种原始层模式
-  type: ['dialog', 'page', 'iframe', 'loading', 'tips'],
+  type: ['dialog', 'page', 'iframe', 'loading', 'tips', 'notice'],
  
  //获取节点的style属性值
  getStyle: function(node, name){
@ -144,7 +144,8 @@ var layer = {
      closeBtn: false,
      btn: false,
      resize: false,
-      end: end
+      end: end,
+      anim: 1
    }, (type && !ready.config.skin) ? {
      skin: skin + ' layui-layer-hui',
      anim: anim
@ -157,6 +158,26 @@ var layer = {
    }()));  
  },

+  notice: function(content, options, end){ //最常用提示层
+    var type = typeof options === 'function', rskin = ready.config.skin;
+    var skin = (rskin ? rskin + ' ' + rskin + '-notice' : '')||'layui-layer-notice';
+    if(type) end = options;
+    return layer.open($.extend({
+      content: content,
+      shade: false,
+      skin: skin,
+      time: 3000,
+      btn: false,
+      area: '330px',
+      resize: false,
+      type: 5,
+      anim:5,
+      offset: 'notice',
+      tipsMore: true,
+      end: end
+    }, type ? {} : options));  
+  },
+  
  load: function(icon, options){
    return layer.open($.extend({
      type: 3,
@ -193,7 +214,7 @@ Class.pt = Class.prototype;

 //缓存常用字符
 var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
-doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
+doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06','layer-anim-07'];

 //默认配置
 Class.pt.config = {
@ -304,6 +325,10 @@ Class.pt.creat = function(){
      config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
      config.tipsMore || layer.closeAll('tips');
    break;
+    case 5:
+      config.btn = ('btn' in config) ? config.btn : ready.btn[0];
+      config.tipsMore || layer.closeAll('notice');
+    break;
  }
  
  //建立容器
@ -343,7 +368,17 @@ Class.pt.creat = function(){
  }
  
  config.time <= 0 || setTimeout(function(){
-    layer.close(that.index)
+    if(config.type == 5){
+      $.each($('.'+doms[0]+'-notice'), function(i, item){
+        var othis = $(this);  
+        if(othis.attr('times') > that.index){
+          othis.offset({top:(othis.offset().top - that.layero.outerHeight() - 16)});
+        }          
+      });
+      layer.close(that.index)
+    }else{
+      layer.close(that.index)
+    }
  }, config.time);
  that.move().callback();
  
@ -436,6 +471,19 @@ Class.pt.offset = function(){
    } else if(config.offset === 'rb'){ //右下角
      that.offsetTop = win.height() - area[1];
      that.offsetLeft = win.width() - area[0];
+    } else if(config.offset === 'notice'){ 
+      var top = 0;
+      if($('.'+doms[0]+'-notice').length > 1){
+        $.each($('.'+doms[0]+'-notice'), function(){
+          var othis = $(this);  
+          if(this.id !== layero[0].id) {
+            top = top > othis.offset().top ? top : othis.offset().top;
+          }
+        });
+        top = top + area[1];
+      }
+      that.offsetTop = top + 16;
+      that.offsetLeft = win.width() - area[0] - 16;
    } else {
      that.offsetTop = config.offset;
    }
@ -656,6 +704,14 @@ Class.pt.callback = function(){
  function cancel(){
    var close = config.cancel && config.cancel(that.index, layero);
    close === false || layer.close(that.index);
+    if(that.config.type === 5){
+        $.each($('.'+doms[0]+'-notice'), function(i, item){
+          var othis = $(this);  
+          if(othis.attr('times') > that.index){
+            othis.offset({top:(othis.offset().top - layero.outerHeight() - 16)});
+          }          
+        });
+    }
  }
  
  //右上角关闭回调
@ -1225,13 +1281,15 @@ layer.photos = function(options, loop, key){
            imgarea[1] = imgarea[1]/wh[1];
          }
        }
-        
+        if(imgarea[0]<600)
+			imgarea[0] = 600;
+		if(imgarea[1]<400)
+			imgarea[1] = 400;
        return [imgarea[0]+'px', imgarea[1]+'px']; 
      }(),
      title: false,
-      shade: 0.9,
-      shadeClose: true,
-      closeBtn: false,
+      shade: 0,
+      closeBtn: true,
      move: '.layui-layer-phimg img',
      moveType: 1,
      scrollbar: false,
@ -1239,19 +1297,438 @@ layer.photos = function(options, loop, key){
      //anim: Math.random()*5|0,
      isOutAnim: false,
      skin: 'layui-layer-photos' + skin('photos'),
-      content: '<div class="layui-layer-phimg">'
-        +'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
-        +'<div class="layui-layer-imgsee">'
-          +(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : '')
-          +'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt||'') +'</a><em>'+ dict.imgIndex +'/'+ data.length +'</em></span></div>'
-        +'</div>'
-      +'</div>',
+      content: '<div class="layui-layer-phimg">'+
+					'<img class="image active" src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'+
+					'<div class="thumbnails">'+
+						'<span class="thumbClose" title="关闭缩略图">'+
+							'<i class="icon_close-small"></i>'+
+						'</span>'+
+						'<img ondragstart="return false;"/>'+
+						'<div class="thumbDrag">'+
+							'<span></span>'+
+						'</div>'+
+					'</div>'+
+					'<div class="layui-layer-imgsee">'+
+						(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev" title="'+ dict.imgIndex +'/'+ data.length +'"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext" title="'+ dict.imgIndex +'/'+ data.length +'"></a></span>' : '')+
+						//'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'">'+
+							'<div class="tool" style="display:'+ (key ? 'block' : '') +'">'+
+								'<div class="toolct">'+
+									'<span class="oper_fullscreen" title="查看全屏"><i class="icon_tool-fullscreen"></i></span>'+
+									'<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>'+
+									'<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>'+
+									'<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>'+
+									'<a class="oper_download" title="下载图片" href="'+data[start].src+'" download="'+(data[start].alt || 5 * Math.random() | 0)+'">'+
+										'<i class="icon_tool-download"></i>'+
+									'</a>'+
+								'</div>'+
+							'</div>'+
+						//'</div> '+
+					'</div> '+
+				'</div>',
      success: function(layero, index){
        dict.bigimg = layero.find('.layui-layer-phimg');
        dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar');
        dict.event(layero);
        options.tab && options.tab(data[start], layero);
-        typeof success === 'function' && success(layero);
+	typeof success === 'function' && success(layero);
+
+		/*
+		图片查看插件
+        */
+		var windowMargin = 8;
+                        var isFirefox = navigator.userAgent.indexOf("Firefox") > -1 ;
+                        var MOUSEWHEEL_EVENT = isFirefox ? "DOMMouseScroll" : "mousewheel";
+                        var o = {
+                            //图片缩放倍率
+                            ratio: 1.2,
+                            //右下角缩略图宽度
+                            thumbnailsWidth: 180,
+                            //右下角缩略图高度
+                            thumbnailsHeight: 120
+                        };
+                        var $tool = $(".layui-layer-phimg").find(".tool"),
+                            $fullscreen = $(".layui-layer-phimg").find(".oper_fullscreen"),
+                            $bigger = $(".layui-layer-phimg").find(".oper_bigger"),
+                            $smaller =  $(".layui-layer-phimg").find(".oper_smaller"),
+                            $rotate = $(".layui-layer-phimg").find(".oper_rotate"),
+                            $download = $(".layui-layer-phimg").find(".oper_download"),
+                            $thumbnails = $(".layui-layer-phimg").find(".thumbnails"),
+                            $gallery = $(".layui-layer-phimg"),
+                            $image = $(".layui-layer-phimg>.image"),
+                            $thumbImg,
+                            imageWidth,
+                            imageHeight,
+                            imgRatio,
+                            dragX,
+                            dragY,
+                            cW,
+                            cH,
+                            w,h,isVertical,
+                            thumbX,
+                            thumbY;
+                        //缩略图
+                        $thumbnails.css({
+                            height: o.thumbnailsHeight,
+                            width : o.thumbnailsWidth
+                        }).on("mouseenter",function(e){
+                            thumbX = -1;
+                        }).on("mousedown",function(e){
+                            thumbX=e.pageX || e.clientX;
+                            thumbY=e.pageY || e.clientY;
+
+                            cW = $gallery.width();
+                            cH = $gallery.height();
+                            e.stopPropagation();
+                        }).on("mousemove",function(e){
+                            if(thumbX > 0){
+                                var nextDragX=e.pageX || e.clientX;
+                                var nextDragY=e.pageY || e.clientY;
+                                var $td= $(this).find(".thumbDrag"),
+                                    imageWidth = $image.width(),
+                                    imageHeight = $image.height(),
+                                    thumbImgWidth = $thumbImg.width(),
+                                    thumbImgHeight = $thumbImg.height(),
+                                    left =parseFloat($td.css("left")) +  (nextDragX - thumbX),
+                                    top =parseFloat($td.css("top")) + (nextDragY - thumbY),
+                                    w = $td.width(),
+                                    h = $td.height(),
+                                    it,
+                                    il,
+                                    maxL,
+                                    maxT;
+
+                                if(isVertical){
+                                    thumbImgWidth = [thumbImgHeight, thumbImgHeight = thumbImgWidth][0];
+                                    imageWidth = [imageHeight, imageHeight = imageWidth][0];
+                                }
+                                it = (o.thumbnailsHeight - thumbImgHeight) / 2 ,
+                                    il = (o.thumbnailsWidth - thumbImgWidth) / 2,
+                                    maxL = o.thumbnailsWidth - w - il - 2, //减去2像素边框部分
+                                    maxT = o.thumbnailsHeight - h - it - 2;
+
+                                if(left < il ) left = il;
+                                else if(left > maxL) left = maxL;
+
+                                if(top < it ) top = it;
+                                else if(top > maxT) top = maxT;
+
+                                $td.css({
+                                    left : left,
+                                    top : top
+                                })
+                                thumbX=nextDragX;
+                                thumbY=nextDragY;
+
+                                if(imageWidth < cW) left = (cW - imageWidth) / 2;
+                                else left = -imageWidth * (left-il) / thumbImgWidth;
+
+                                if(imageHeight < cH ) top = (cH - imageHeight) / 2;
+                                else top = -imageHeight * (top-it) / thumbImgHeight;
+
+                                $image.css({
+                                    left : left,
+                                    top : top
+                                });
+                            }
+                        }).on("mouseup",function(e){
+                            thumbX = -1;
+                        });
+                        $thumbnails.find(".thumbClose").on("click",function(){
+                            $thumbnails.hide();
+                        });
+
+                        //显示工具栏
+                        $gallery.on("mouseover",function(e){
+                            $tool.show();
+
+                        }).on("mouseout",function(e){
+                            $tool.hide();
+                        });
+
+                        //全屏
+                        var isMax,
+                            preWidth= $gallery.width(),
+                            preHeight= $gallery.height(),
+                            preTop= $("#layui-layer"+index).css("top"),
+                            preLeft= $("#layui-layer"+index).css("left");
+                        $fullscreen.on("click", function(){
+                            if(!isMax){
+                                $("#layui-layer"+index).css({
+                                    width: '100%',
+                                    height: '100%',
+                                    left:'0px',
+                                    top:'0px'
+                                });
+                                isMax = true;
+                            }
+                            else {
+                                $("#layui-layer"+index).css({
+                                    width: preWidth,
+                                    height: preHeight,
+                                    left:preLeft,
+                                    top:preTop
+                                });
+                                isMax = false;
+                            }
+                            setImagePosition();
+                        });
+
+                        //放大图片
+                        $bigger.on("click", function(){
+                            biggerImage();
+                        });
+
+                        //缩小图片
+                        $smaller.on("click", function(){
+                            smallerImage();
+                        });
+
+                        //旋转
+                        $rotate.on("click", function(){
+
+                            var rotateClass = $image.attr("class").match(/(rotate)(\d*)/);
+
+                            if(rotateClass){
+                                var nextDeg = (rotateClass[2] * 1 + 90) % 360;
+                                $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
+                                $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
+                                resizeImage(nextDeg);
+                                resizeThumbImg(nextDeg);
+                                isVertical = nextDeg == 90 || nextDeg == 270;
+                            } else{
+                                $image.addClass("rotate90");
+                                $thumbImg.addClass("rotate90");
+                                resizeImage("90");
+                                resizeThumbImg("90");
+                                isVertical = true;
+                            }
+                        });
+
+                        // //下载
+                        // $download.on("click", function(){
+                        //     var imgUrl = $image.attr("src");
+                        //     if(!imgUrl) return;
+                        //     alert("没有找到兼容所有浏览器方法，所以暂不实现");
+                        // });
+
+                        $(window).on("resize",function(){
+                            setImagePosition();
+                        });
+
+                        if(document.attachEvent){
+                            document.attachEvent("on"+MOUSEWHEEL_EVENT, function(e){
+                                mouseWheelScroll(e);
+                            });
+                        } else if(document.addEventListener){
+                            document.addEventListener(MOUSEWHEEL_EVENT, function(e){
+                                mouseWheelScroll(e);
+                            }, false);
+                        }
+
+                        function mouseWheelScroll(e){
+                            var _delta = parseInt(e.wheelDelta || -e.detail);
+                            //向上滚动
+                            if (_delta > 0) {
+                                biggerImage();
+                            }
+                            //向下滚动
+                            else {
+                                smallerImage();
+                            }
+                        }
+
+                        function init(){
+                            toggleImage();
+                        }
+
+                        function toggleImage(){
+							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]];//取 宽度 缩放比例 高度缩放比例
+								if(wh[0] > wh[1]){//取缩放比例最大的进行缩放
+									imgarea[0] = imgarea[0]/wh[0];
+									imgarea[1] = imgarea[1]/wh[0];
+								}
+								else if(wh[0] < wh[1]){
+									imgarea[0] = imgarea[0]/wh[1];
+									imgarea[1] = imgarea[1]/wh[1];
+								}
+							}
+                            $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");
+                            isVertical = false;
+                            $thumbnails.hide();
+                            setImagePosition();
+                        }
+
+                        function biggerImage(){
+                            var w = $image.width(),
+                                h = $image.height(),
+                                nextW = w * o.ratio,
+                                nextH = h * o.ratio;
+                            if(nextW - w < 1) nextW = Math.ceil(nextW);
+                            var percent =  (nextW / imageWidth * 100).toFixed(0) ;
+                            if(percent > 90 && percent < 110){
+                                percent = 100;
+                                nextW = imageWidth;
+                                nextH = imageHeight;
+                            }
+                            else if(percent > 1600) {
+                                percent = 1600;
+                                nextW = imageWidth * 16;
+                                nextH = imageHeight * 16;
+                            }
+
+                            $image.width(nextW).height(nextH);
+                            setImagePosition();
+                            showPercentTip(percent);
+                            showThumbnails(nextW, nextH);
+                        }
+
+                        function smallerImage(){
+                            var w = $image.width(),
+                                h = $image.height(),
+                                nextW,
+                                nextH;
+                            var percent =  (w / o.ratio / imageWidth * 100).toFixed(0) ;
+                            if(percent < 5) {
+                                percent = 5;
+                                nextW = imageWidth / 20;
+                                nextH = imageHeight / 20;
+                            }
+                            else if(percent > 90 && percent < 110){
+                                percent = 100;
+                                nextW = imageWidth;
+                                nextH = imageHeight;
+                            } else{
+                                nextW = w / o.ratio;
+                                nextH = h / o.ratio;
+                            }
+
+                            $image.width(nextW).height(nextH);
+                            setImagePosition();
+                            showPercentTip(percent);
+                            showThumbnails(nextW, nextH);
+                        }
+
+                        //显示缩略图
+                        function showThumbnails(width, height){
+                            if(isVertical) width = [height, height = width][0];
+                            if(width > $gallery.width() || height > $gallery.height()){
+                                $thumbnails.show();
+                                setThumbnails();
+                            } else{
+                                $thumbnails.hide();
+                            }
+                        }
+
+                        //重置图片宽高
+                        function resizeImage(rotateDeg){
+
+                            var mH = $gallery.height() - windowMargin,
+                                mW = $gallery.width() - windowMargin;
+                            if(rotateDeg == '90' || rotateDeg == '270'){
+                                mW = [mH, mH = mW][0];
+                            }
+
+                            var width, height;
+                            width = Math.min(imageWidth, mW);
+                            height = Math.min(imageHeight, mH);
+
+                            if(width / height > imgRatio){
+                                width = height * imgRatio;
+                            } else{
+                                height = width / imgRatio;
+                            }
+
+                            $image.css({
+                                width:width,
+                                height:height
+                            });
+                            setImagePosition();
+                        }
+
+                        function resizeThumbImg(rotateDeg){
+                            var maxW = o.thumbnailsWidth, maxH = o.thumbnailsHeight;
+                            if(rotateDeg == '90' || rotateDeg == '270'){
+                                maxW = [maxH, maxH = maxW][0];
+                            }
+                            $thumbImg.css({
+                                maxWidth : maxW,
+                                maxHeight : maxH
+                            });
+                            $thumbnails.hide();
+                        }
+
+                        //显示百分比提示
+                        function showPercentTip(percent){
+                            $gallery.find(".percentTip").remove();
+                            $("<div class='percentTip'><span>"+percent+"%</span></div>").appendTo($gallery).fadeOut(1500);
+                        }
+
+                        //设置图片位置
+                        function setImagePosition(){
+                            var w = $image.width(),
+                                h = $image.height(),
+                                cW = $gallery.width(),
+                                cH = $gallery.height();
+
+                            var left = (cW - w)/2,
+                                top = (cH - h)/2;
+
+                            $image.css("left", left+"px").css("top", top+"px");
+							$tool.css("left",($gallery.width()-$tool.width())/2);
+                        }
+
+                        //设置缩略图拖拽区域
+                        function setThumbnails(){
+                            var $img = $thumbnails.find("img"),
+                                sW = $img.width(),
+                                sH = $img.height(),
+                                w = $image.width(),
+                                h =  $image.height(),
+                                imf = $image.position(),
+                                imfl = imf.left,
+                                imft = imf.top,
+                                cW = $gallery.width(),
+                                cH = $gallery.height(),
+                                tW,
+                                tH,
+                                tl,
+                                tt;
+
+                            if(isVertical){
+                                sW = [sH, sH = sW][0];
+                                w = [h, h = w][0];
+                            }
+
+                            tW = sW / (w / cW);
+                            if(w < cW) tW = sW;
+                            tH = sH / (h / cH);
+                            if(h < cH) tH = sH;
+                            tl = (o.thumbnailsWidth - sW)/2 + -imfl/w * sW ;
+                            if(w < cW) tl = (o.thumbnailsWidth - sW)/2;
+                            tt = (o.thumbnailsHeight - sH)/2 + -imft/h * sH ;
+                            if(h < cH) tt = (o.thumbnailsHeight - sH)/2;
+                            $thumbnails.find(".thumbDrag").css({
+                                width: tW,
+                                height: tH,
+                                left: tl,
+                                top: tt
+                            });
+                        }
+
+                        init();
+
+                        /*
+                        图片查看器结束
+                         */
      }, end: function(){
        dict.end = true;
        $(document).off('keyup', dict.keyup);
--- a/src/theme/default/icon/bigger.png
+++ b/src/theme/default/icon/bigger.png
--- a/src/theme/default/icon/close_big.png
+++ b/src/theme/default/icon/close_big.png
--- a/src/theme/default/icon/close_small.png
+++ b/src/theme/default/icon/close_small.png
--- a/src/theme/default/icon/download.png
+++ b/src/theme/default/icon/download.png
--- a/src/theme/default/icon/full_screen.png
+++ b/src/theme/default/icon/full_screen.png
--- a/src/theme/default/icon/next.png
+++ b/src/theme/default/icon/next.png
--- a/src/theme/default/icon/prev.png
+++ b/src/theme/default/icon/prev.png
--- a/src/theme/default/icon/rotate.png
+++ b/src/theme/default/icon/rotate.png
--- a/src/theme/default/icon/smaller.png
+++ b/src/theme/default/icon/smaller.png
--- a/src/theme/default/layer.css
+++ b/src/theme/default/layer.css
@ -18,7 +18,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
 .layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;}
 .layui-layer-ico{ background:url(icon.png) no-repeat;}
-.layui-layer-dialog .layui-layer-ico,
+.layui-layer-dialog .layui-layer-ico,.layui-layer-notice .layui-layer-ico,
 .layui-layer-setwin a,
 .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}

@ -62,7 +62,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-setwin .layui-layer-maxmin:hover{background-position:-49px -40px;}
 .layui-layer-setwin .layui-layer-close1{background-position: 1px -40px; cursor: pointer;}
 .layui-layer-setwin .layui-layer-close1:hover{opacity:0.7;}
-.layui-layer-setwin .layui-layer-close2{position:absolute; right:-28px; top:-28px; width:30px; height:30px;  margin-left:0; background-position:-149px -31px; *right:-18px; _display:none;}
+.layui-layer-setwin .layui-layer-close2{position:absolute; right:-28px; top:-28px; width:30px; height:30px;  margin-left:0; background-position:-149px -31px; *right:-18px; _display:none;z-index:11}
 .layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;}

 /* 按钮栏 */
@ -75,9 +75,9 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-btn-c{text-align: center;}

 /* 定制化 */
-.layui-layer-dialog{min-width:260px;}
-.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
-.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;}
+.layui-layer-dialog,.layui-layer-notice{min-width:260px;}
+.layui-layer-dialog .layui-layer-content,.layui-layer-notice .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
+.layui-layer-dialog .layui-layer-content .layui-layer-ico,.layui-layer-notice .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;}
 .layui-layer-ico1{background-position:-30px 0 }
 .layui-layer-ico2{background-position:-60px 0;}
 .layui-layer-ico3{background-position:-90px 0;}
@ -88,7 +88,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;}
 .layui-layer-hui{min-width:100px;  background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
 .layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;}
-.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;}
+.layui-layer-dialog .layui-layer-padding,.layui-layer-notice .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;}
 .layui-layer-page .layui-layer-content{position:relative; overflow:auto;}
 .layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;}
 .layui-layer-nobg{background:none;}
@ -147,19 +147,19 @@ html #layuicss-layer{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;}
 .layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;}
 .layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
 .layui-layer-imgnext:hover{background-position:-33px -50px; _background-position:-120px -50px;}
-.layui-layer-imgbar{position:absolute; left:0; bottom:0; width:100%; height:32px; line-height:32px; background-color:rgba(0,0,0,.8); background-color:#000\9; filter:Alpha(opacity=80); color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
-.layui-layer-imgtit{/*position:absolute; left:20px;*/}
+.layui-layer-imgbar{position:absolute; left:0; bottom:0; width:220px; height:32px; line-height:32px; color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
 .layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;}
 .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 {
@ -177,5 +177,234 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
@media screen and (max-width: 1100px) {
  .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
 }
-
+ .winControl {
+	position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 99999;
+}
+.winControl span {
+    display: inline-block;
+    padding: 4px 6px;
+    cursor: pointer;
+    line-height: 10px;
+}
+.winControl span:hover {
+    background: #E82B45;
+}
+[drag] {
+    -webkit-app-region: drag;
+}
+[noDrag] {
+    -webkit-app-region: no-drag;
+}
+i{
+    position: relative;
+	z-index:99999;
+	display: inline-block;
+}
+.icon_close-big{
+    width: 18px;
+    height: 18px;
+	background-image: url('icon/close_big.png');
+}
+.icon_close-small{
+    width: 13px;
+    height: 13px;
+	background-image: url('icon/close_small.png');
+	display: inline-block;
+}
+.icon_tool-fullscreen{
+    width: 18px;
+    height: 18px;
+	background-image: url('icon/full_screen.png');
+}
+.icon_tool-bigger{
+    width: 20px;
+    height: 19px;
+	background-image: url('icon/bigger.png');
+}
+.icon_tool-smaller{
+    width: 20px;
+    height: 19px;
+	background-image: url('icon/smaller.png');
+}
+.icon_tool-rotate{
+    width: 17px;
+    height: 20px;
+	background-image: url('icon/rotate.png');
+}
+.icon_tool-download{
+    width: 16px;
+    height: 20px;
+	background-image: url('icon/download.png');
+}
+.icon_tool-prev{
+    width: 22px;
+    height: 38px;
+	background-image: url('icon/prev.png');
+}
+.icon_tool-next{
+    width: 22px;
+    height: 38px;
+	background-image: url('icon/next.png');
+}
+/* 效果 */
+.rotate0{ 
+	transform: rotate(0deg); 
+	-webkit-transform: rotate(0deg); 
+} 
+.rotate90{ 
+	transform: rotate(90deg); 
+	-webkit-transform: rotate(90deg); 
+} 
+.rotate180{ 
+	transform: rotate(180deg); 
+	-webkit-transform: rotate(180deg); 
+} 
+.rotate270{ 
+	transform: rotate(270deg); 
+	-webkit-transform: rotate(270deg); 
+}
+.image{
+    position: absolute;
+    margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/
+    padding:0;
+    z-index: 10;
+    display: 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;
+}
+.tool{
+    position: absolute;
+    text-align: center;
+    display: none;
+    z-index: 99999;
+	bottom: 0px;
+}
+.toolct{
+    display: inline-block;
+    height: 30px;
+    background-color: #6f6965;
+    padding: 5px 14px;
+    box-sizing: border-box;
+    border-radius: 6px;
+}
+.toolct a{
+    margin-right: 20px;
+}
+.toolct span{
+    margin-right: 20px;
+}
+.toolct i{
+	display: inline-block;
+	cursor: pointer;
+}
+.percentTip{
+	position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
+    width: 100px;
+    height: 30px;
+    z-index: 9999;
+    text-align: center;
+    line-height: 30px;
+    font-size: 16px;
+    border-radius: 8px;
+    color: #ffffff;
+	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F504E',endColorStr='#151313',gradientType='1');
+	background: linear-gradient(315deg, #4F504E, #151313);
+	background: -moz-linear-gradient(315deg, #4F504E, #151313);
+	background: -o-linear-gradient(left,#4F504E, #151313);
+	background: -webkit-gradient(linear,100%  0%, 100% 0%, from(#4F504E), to(#151313));
+}
+.thumbnails{
+	position: absolute;
+    right: 1px;
+    bottom: 1px;
+    border: 1px solid #ffffff;
+    z-index: 99999;
+    border-radius: 5px;
+    background-color: rgba(177, 177, 177, 0.5);
+    display: none;
+}
+.thumbnails .thumbDrag{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    box-sizing: border-box;
+}
+.thumbnails .thumbDrag span{
+	width:100%;
+	height:100%;
+	border: 1px solid white;
+	display: block;
+    box-sizing: border-box;
+}
+.thumbnails .thumbClose{
+	position: absolute;
+    right: 1px;
+    top: -2px;
+    cursor: pointer;
+    height: 13px;
+}
+.thumbnails img{
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -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;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
+    height: 38px;
+    z-index: 99999;
+}
+.oper i{
+    display: none;
+    cursor: pointer;
+}
+.oper span{
+	width: 22px;
+    height: 38px;
+}
+.oper .prev{
+	float:left;
+	margin-left: 9px;
+}
+.oper .next{
+	float:right;
+	margin-right: 9px;
+}
+.oper .prev.active i, .oper .next.active i{
+	display: inline-block;
+}

--- a/src/theme/element/style.css
+++ b/src/theme/element/style.css
@ -0,0 +1,52 @@
+.layer-element{
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+.layer-element .layui-layer-title{
+    font-size: 18px;
+    color: #303133;
+    background-color: #fff;
+    border-bottom:none;
+}
+.layer-element-notice .layui-layer-title{
+    font-weight: 700;
+    font-size: 16px;
+    color: #303133;
+    margin: 0;
+    padding-left:27px;
+    height: 30px;
+    border-radius: 16px;
+}
+.layer-element-notice{
+    border-radius: 16px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+.layer-element-notice .layui-layer-content{
+    padding: 5px 27px 13px 27px;
+    font-size: 14px;
+    line-height: 21px;
+    color: #606266;
+    text-align: justify;
+}
+
+
+
+@-webkit-keyframes 
+layer-zoomInRight{
+	0%
+	{opacity:0;-webkit-transform:translateX(400px);
+	transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear}
+	60%
+	{opacity:1;-webkit-transform: translateX(0);
+	transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}}
+@keyframes 
+layer-zoomInRight{
+	0%
+	{opacity:0;-webkit-transform:translateX(400px);
+	transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear}
+	60%
+	{opacity:1;-webkit-transform: translateX(0);
+	transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}}
+    .layer-anim-07{-webkit-animation-name:layer-zoomInRight;animation-name:layer-zoomInRight;animation-duration: 0.8s;-webkit-animation-duration: 0.8s}
--- a/test/demo.html
+++ b/test/demo.html
@ -1,15 +1,14 @@


-
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>
+  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
+  <script src="../src/layer.js"></script>

  <style>
-  html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
-  a,a:hover{ text-decoration:none;}
  pre{font-family:'微软雅黑'}
  .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
  .box a{padding-right:15px;}
@ -17,59 +16,66 @@
  .layer_text{background-color:#fff; padding:20px;}
  .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
  .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
-  .photos-demo img{width:200px;}
+  .layer-photos-demo img{width:200px;}
  </style>
-  
-  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
-  <script src="../dist/layer.js"></script>
 </head>
 <body>
 <div class="box">
-<pre>
- @Name：layer-v<script>document.write(layer.v)</script> 弹层组件说明
- @Author：贤心
- @Site：<a href="http://layer.layui.com/"  target="_blank">http://layer.layui.com/</a>
-
-
-<strong>【注意事项】</strong>
-一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
-二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
-三、jquery需1.8+
-四、更多使用说明与演示，请参见layer官网。
-五、使用时请务必保留来源，请勿用于违反我国法律法规的web平台。
-六、layer遵循MIT开源协议，将永久性提供无偿服务。
-</pre>
+<div>
+  <button id="alert">alert</button>
+  <button id="confirm">confirm</button>
+  <button id="msg">msg</button>
+  <button id="Notice">Notice</button>
 </div>
+</div>
+<!-- <div id="layer-photos-demo" class="layer-photos-demo">

+        </div>
 <div class="box" style="text-align:center">
  <a href="http://layer.layui.com/" target="_blank">更多示例</a>
  <a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
  <a href="http://fly.layui.com/" id="suggest">交流反馈</a>
  <a href="javascript:;" id="about">关于</a>
-</div>
+</div> -->

 <script>
 ;!function(){

-
-//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
-layer.ready(function(){ 
-  layer.open({
-    type: 2,
-    title: '欢迎页',
-    maxmin: true,
-    area: ['800px', '500px'],
-    content: 'http://layer.layui.com/test/welcome.html',
-    end: function(){
-      layer.tips('Hi', '#about', {tips: 1})
-    }
+  layer.config({
+    extend: 'element/style.css', //加载新皮肤
+    skin: 'layer-element' //一旦设定，所有弹层风格都采用此主题。
  });
-});
+
+layer.photos({
+  photos: '#layer-photos-demo'
+  });
+//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕

 //关于
 $('#about').on('click', function(){
  layer.alert(layer.v + ' - 贤心出品 sentsin.com');
 });
+$('#alert').on('click',function(){
+  layer.alert('内容',{anim:0,icon: 1});//, {icon: 1}
+});
+$('#confirm').on('click',function(){
+  layer.confirm('您是如何看待前端开发？', {
+    btn: ['重要','奇葩'] //按钮
+  }, function(){
+    layer.msg('的确很重要', {icon: 1});
+  }, function(){
+    layer.msg('也可以这样', {
+      time: 20000, //20s后自动关闭
+      btn: ['明白了', '知道了']
+    });
+  });
+});
+$('#msg').on('click',function(){
+  layer.msg('内容',{anim:3,icon: 1})//, {icon: 1}
+});
+$('#Notice').on('click',function(){
+  layer.notice('内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',{title:'提示',anim:7,icon: 1})//, {icon: 1}
+});

 }();
 </script>