diff --git a/README.md b/README.md
index a888c4a..349e31a 100644
--- a/README.md
+++ b/README.md
@@ -12,4 +12,4 @@ layer致力于打造国内最盛行的弹层组件,为web开发提供强劲动
## 相关
-[官网](http://layer.layui.com/)、[社区交流](http://fly.layui.com)
\ No newline at end of file
+[官网](http://layer.layui.com/)、[社区](http://fly.layui.com)
\ No newline at end of file
diff --git a/src/layer.js b/src/layer.js
index 0cc4e0d..18db4c7 100644
--- a/src/layer.js
+++ b/src/layer.js
@@ -1191,13 +1191,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,
@@ -1205,19 +1207,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[start].src +')
'
- +'
'
- +(data.length > 1 ? '
' : '')
- +'
'
- +'
'
- +'
',
+ content: ''+
+ '
!['+ (data[start].alt||'') +']('+ data[start].src +')
'+
+ '
'+
+ '
'+
+ ''+
+ ''+
+ '
![]()
'+
+ '
'+
+ ''+
+ '
'+
+ '
'+
+ '
'+
+ (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/skin/default/icon/bigger.png b/src/skin/default/icon/bigger.png
new file mode 100644
index 0000000..e9f198e
Binary files /dev/null and b/src/skin/default/icon/bigger.png differ
diff --git a/src/skin/default/icon/close_big.png b/src/skin/default/icon/close_big.png
new file mode 100644
index 0000000..b51d6b6
Binary files /dev/null and b/src/skin/default/icon/close_big.png differ
diff --git a/src/skin/default/icon/close_small.png b/src/skin/default/icon/close_small.png
new file mode 100644
index 0000000..44ec85c
Binary files /dev/null and b/src/skin/default/icon/close_small.png differ
diff --git a/src/skin/default/icon/download.png b/src/skin/default/icon/download.png
new file mode 100644
index 0000000..0514c20
Binary files /dev/null and b/src/skin/default/icon/download.png differ
diff --git a/src/skin/default/icon/full_screen.png b/src/skin/default/icon/full_screen.png
new file mode 100644
index 0000000..f9bf06c
Binary files /dev/null and b/src/skin/default/icon/full_screen.png differ
diff --git a/src/skin/default/icon/next.png b/src/skin/default/icon/next.png
new file mode 100644
index 0000000..0a973df
Binary files /dev/null and b/src/skin/default/icon/next.png differ
diff --git a/src/skin/default/icon/prev.png b/src/skin/default/icon/prev.png
new file mode 100644
index 0000000..5a421b3
Binary files /dev/null and b/src/skin/default/icon/prev.png differ
diff --git a/src/skin/default/icon/rotate.png b/src/skin/default/icon/rotate.png
new file mode 100644
index 0000000..e036d63
Binary files /dev/null and b/src/skin/default/icon/rotate.png differ
diff --git a/src/skin/default/icon/smaller.png b/src/skin/default/icon/smaller.png
new file mode 100644
index 0000000..8072df8
Binary files /dev/null and b/src/skin/default/icon/smaller.png differ
diff --git a/src/skin/default/layer.css b/src/skin/default/layer.css
index 5fc667e..abbf0ed 100644
--- a/src/skin/default/layer.css
+++ b/src/skin/default/layer.css
@@ -62,7 +62,7 @@ html #layuicss-skinlayercss{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;}
/* 按钮栏 */
@@ -149,19 +149,20 @@ 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;}
.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-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{/*position:absolute; left:20px;*/}
.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 {
@@ -179,5 +180,246 @@ html #layuicss-skinlayercss{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);
+}
+@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: 10;
+ 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;
+}
+.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: -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;
+ 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/test/demo.html b/test/demo.html
index 003235a..4c3f376 100644
--- a/test/demo.html
+++ b/test/demo.html
@@ -1,11 +1,12 @@
-
layer-更懂你的web弹窗解决方案
+
+
-
-
-
@@ -36,11 +34,16 @@
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过layer.config()来配置(详见官网API页)
三、jquery需1.8+
四、更多使用说明与演示,请参见layer官网。
-五、使用时请务必保留来源,请勿用于违反我国法律法规的web平台。
-六、layer遵循MIT开源协议,将永久性提供无偿服务。
+五、使用时请务必保留来源,请勿用于违反我国法律的web平台。
+六、layer遵循LGPL协议,将永久性提供无偿服务。版权最终解释权:贤心。
-
+