diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..25daf751 --- /dev/null +++ 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}" + } + ] +} \ No newline at end of file diff --git a/src/layer.js b/src/layer.js index e906069e..bf0b9d75 100644 --- a/src/layer.js +++ b/src/layer.js @@ -31,7 +31,7 @@ var isLayui = window.layui && layui.define, $, win, ready = { btn: ['确定', '取消'], //五种原始层模式 - 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 @@ -156,6 +157,26 @@ var layer = { return options; }())); }, + + 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({ @@ -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: '
' - +''+ (data[start].alt||'') +'' - +'
' - +(data.length > 1 ? '' : '') - +'
'+ (data[start].alt||'') +''+ dict.imgIndex +'/'+ data.length +'
' - +'
' - +'
', + content: '
'+ + ''+ (data[start].alt||'') +''+ + '
'+ + ''+ + ''+ + ''+ + ''+ + '
'+ + ''+ + '
'+ + '
'+ + '
'+ + (data.length > 1 ? '' : '')+ + //'
'+ + '
'+ + '
'+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + '
'+ + '
'+ + //'
'+ + '
'+ + '
', 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(); + $("
"+percent+"%
").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); diff --git a/src/theme/default/icon/bigger.png b/src/theme/default/icon/bigger.png new file mode 100644 index 00000000..e9f198e9 Binary files /dev/null and b/src/theme/default/icon/bigger.png differ diff --git a/src/theme/default/icon/close_big.png b/src/theme/default/icon/close_big.png new file mode 100644 index 00000000..b51d6b60 Binary files /dev/null and b/src/theme/default/icon/close_big.png differ diff --git a/src/theme/default/icon/close_small.png b/src/theme/default/icon/close_small.png new file mode 100644 index 00000000..44ec85cd Binary files /dev/null and b/src/theme/default/icon/close_small.png differ diff --git a/src/theme/default/icon/download.png b/src/theme/default/icon/download.png new file mode 100644 index 00000000..0514c207 Binary files /dev/null and b/src/theme/default/icon/download.png differ diff --git a/src/theme/default/icon/full_screen.png b/src/theme/default/icon/full_screen.png new file mode 100644 index 00000000..f9bf06cc Binary files /dev/null and b/src/theme/default/icon/full_screen.png differ diff --git a/src/theme/default/icon/next.png b/src/theme/default/icon/next.png new file mode 100644 index 00000000..0a973df0 Binary files /dev/null and b/src/theme/default/icon/next.png differ diff --git a/src/theme/default/icon/prev.png b/src/theme/default/icon/prev.png new file mode 100644 index 00000000..5a421b36 Binary files /dev/null and b/src/theme/default/icon/prev.png differ diff --git a/src/theme/default/icon/rotate.png b/src/theme/default/icon/rotate.png new file mode 100644 index 00000000..e036d635 Binary files /dev/null and b/src/theme/default/icon/rotate.png differ diff --git a/src/theme/default/icon/smaller.png b/src/theme/default/icon/smaller.png new file mode 100644 index 00000000..8072df80 Binary files /dev/null and b/src/theme/default/icon/smaller.png differ diff --git a/src/theme/default/layer.css b/src/theme/default/layer.css index 73d7eb23..9d929765 100644 --- 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; +} diff --git a/src/theme/element/style.css b/src/theme/element/style.css new file mode 100644 index 00000000..aa909c74 --- /dev/null +++ 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} \ No newline at end of file diff --git a/test/demo.html b/test/demo.html index 1ce71e41..fcbb3733 100644 --- a/test/demo.html +++ b/test/demo.html @@ -1,15 +1,14 @@  - layer-更懂你的web弹窗解决方案 + + - - -
-
- @Name：layer-v 弹层组件说明
- @Author：贤心
- @Site：http://layer.layui.com/
-
-
-【注意事项】
-一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
-二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
-三、jquery需1.8+
-四、更多使用说明与演示，请参见layer官网。
-五、使用时请务必保留来源，请勿用于违反我国法律法规的web平台。
-六、layer遵循MIT开源协议，将永久性提供无偿服务。
-
+
+ + + + +
+