From 52a0a5090f24f66d3246a5dc2cc30f5bceaaba5b Mon Sep 17 00:00:00 2001 From: HuRui <390029659@qq.com> Date: Sat, 25 Feb 2017 22:03:09 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E5=86=8C=E5=B1=82=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F=E6=97=8B=E8=BD=AC?= =?UTF-8?q?=20=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + build/skin/default/layer.css | 2 +- src/layer.js | 470 +++++++++++++++++++++++++- src/skin/default/icon/bigger.png | Bin 0 -> 549 bytes src/skin/default/icon/close_big.png | Bin 0 -> 633 bytes src/skin/default/icon/close_small.png | Bin 0 -> 465 bytes src/skin/default/icon/download.png | Bin 0 -> 360 bytes src/skin/default/icon/full_screen.png | Bin 0 -> 244 bytes src/skin/default/icon/next.png | Bin 0 -> 1027 bytes src/skin/default/icon/prev.png | Bin 0 -> 1028 bytes src/skin/default/icon/rotate.png | Bin 0 -> 449 bytes src/skin/default/icon/smaller.png | Bin 0 -> 502 bytes src/skin/default/layer.css | 253 +++++++++++++- test/demo.html | 30 +- 14 files changed, 714 insertions(+), 42 deletions(-) create mode 100644 src/skin/default/icon/bigger.png create mode 100644 src/skin/default/icon/close_big.png create mode 100644 src/skin/default/icon/close_small.png create mode 100644 src/skin/default/icon/download.png create mode 100644 src/skin/default/icon/full_screen.png create mode 100644 src/skin/default/icon/next.png create mode 100644 src/skin/default/icon/prev.png create mode 100644 src/skin/default/icon/rotate.png create mode 100644 src/skin/default/icon/smaller.png diff --git a/CHANGELOG.md b/CHANGELOG.md index d3e99fd4..a0c07a82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ * 完善多按钮场景换行的间距（之前是紧贴在一起，略不雅观） * 弹出图片层的动画时间改为800ms * 修复按方向键切换图片层过快时重复弹出的bug +* 修复与animate.css可能存在的动画冲突 --- diff --git a/build/skin/default/layer.css b/build/skin/default/layer.css index b2b44bdf..83e36bfd 100644 --- a/build/skin/default/layer.css +++ b/build/skin/default/layer.css @@ -1 +1 @@ -.layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span,.layui-layer-title{text-overflow:ellipsis;white-space:nowrap}*html{background-image:url(about:blank);background-attachment:fixed}html #layuicss-skinlayercss{display:none;position:absolute;width:1989px}.layui-layer,.layui-layer-shade{position:fixed;_position:absolute;pointer-events:auto}.layui-layer-shade{top:0;left:0;width:100%;height:100%;_height:expression(document.body.offsetHeight+"px")}.layui-layer{-webkit-overflow-scrolling:touch;top:150px;left:0;margin:0;padding:0;background-color:#fff;-webkit-background-clip:content;box-shadow:1px 1px 50px rgba(0,0,0,.3)}.layui-layer-close{position:absolute}.layui-layer-content{position:relative}.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) center center no-repeat #eee}.layui-layer-ico{background:url(icon.png) no-repeat}.layui-layer-btn a,.layui-layer-dialog .layui-layer-ico,.layui-layer-setwin a{display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-move{display:none;position:fixed;*position:absolute;left:0;top:0;width:100%;height:100%;cursor:move;opacity:0;filter:alpha(opacity=0);background-color:#fff;z-index:2147483647}.layui-layer-resize{position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.layui-layer{border-radius:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.3s;animation-duration:.3s}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}.layer-anim-04{-webkit-animation-name:rollIn;animation-name:rollIn}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layui-layer-title{padding:0 80px 0 20px;height:42px;line-height:42px;border-bottom:1px solid #eee;font-size:14px;color:#333;overflow:hidden;background-color:#F8F8F8;border-radius:2px 2px 0 0}.layui-layer-setwin{position:absolute;right:15px;*right:0;top:15px;font-size:0;line-height:initial}.layui-layer-setwin a{position:relative;width:16px;height:16px;margin-left:10px;font-size:12px;_overflow:hidden}.layui-layer-setwin .layui-layer-min cite{position:absolute;width:14px;height:2px;left:0;top:50%;margin-top:-1px;background-color:#2E2D3C;cursor:pointer;_overflow:hidden}.layui-layer-setwin .layui-layer-min:hover cite{background-color:#2D93CA}.layui-layer-setwin .layui-layer-max{background-position:-32px -40px}.layui-layer-setwin .layui-layer-max:hover{background-position:-16px -40px}.layui-layer-setwin .layui-layer-maxmin{background-position:-65px -40px}.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:.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:hover{background-position:-180px -31px}.layui-layer-btn{text-align:right;padding:0 10px 12px;pointer-events:auto;user-select:none;-webkit-user-select:none}.layui-layer-btn a{height:28px;line-height:28px;margin:6px 6px 0;padding:0 15px;border:1px solid #dedede;background-color:#f1f1f1;color:#333;border-radius:2px;font-weight:400;cursor:pointer;text-decoration:none}.layui-layer-btn a:hover{opacity:.9;text-decoration:none}.layui-layer-btn a:active{opacity:.8}.layui-layer-btn .layui-layer-btn0{border-color:#4898d5;background-color:#2e8ded;color:#fff}.layui-layer-btn-l{text-align:left}.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-ico1{background-position:-30px 0}.layui-layer-ico2{background-position:-60px 0}.layui-layer-ico3{background-position:-90px 0}.layui-layer-ico4{background-position:-120px 0}.layui-layer-ico5{background-position:-150px 0}.layui-layer-ico6{background-position:-180px 0}.layui-layer-rim{border:6px solid #8D8D8D;border:6px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:none}.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,.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-page .layui-layer-content{position:relative;overflow:auto}.layui-layer-iframe .layui-layer-btn,.layui-layer-page .layui-layer-btn{padding-top:10px}.layui-layer-nobg{background:0 0}.layui-layer-iframe iframe{display:block;width:100%}.layui-layer-loading{border-radius:100%;background:0 0;box-shadow:none;border:none}.layui-layer-loading .layui-layer-content{width:60px;height:24px;background:url(loading-0.gif) no-repeat}.layui-layer-loading .layui-layer-loading1{width:37px;height:37px;background:url(loading-1.gif) no-repeat}.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2{width:32px;height:32px;background:url(loading-2.gif) no-repeat}.layui-layer-tips{background:0 0;box-shadow:none;border:none}.layui-layer-tips .layui-layer-content{position:relative;line-height:22px;min-width:12px;padding:5px 10px;font-size:12px;_float:left;border-radius:2px;box-shadow:1px 1px 3px rgba(0,0,0,.2);background-color:#000;color:#fff}.layui-layer-tips .layui-layer-close{right:-2px;top:-1px}.layui-layer-tips i.layui-layer-TipsG{position:absolute;width:0;height:0;border-width:8px;border-color:transparent;border-style:dashed;*overflow:hidden}.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{left:5px;border-right-style:solid;border-right-color:#000}.layui-layer-tips i.layui-layer-TipsT{bottom:-8px}.layui-layer-tips i.layui-layer-TipsB{top:-8px}.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{top:1px;border-bottom-style:solid;border-bottom-color:#000}.layui-layer-tips i.layui-layer-TipsR{left:-8px}.layui-layer-tips i.layui-layer-TipsL{right:-8px}.layui-layer-lan[type=dialog]{min-width:280px}.layui-layer-lan .layui-layer-title{background:#4476A7;color:#fff;border:none}.layui-layer-lan .layui-layer-btn{padding:5px 10px 10px;text-align:right;border-top:1px solid #E9E7E7}.layui-layer-lan .layui-layer-btn a{background:#BBB5B5;border:none}.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5}.layui-layer-molv .layui-layer-title{background:#009f95;color:#fff;border:none}.layui-layer-molv .layui-layer-btn a{background:#009f95}.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1}.layui-layer-iconext{background:url(icon-ext.png) no-repeat}.layui-layer-prompt .layui-layer-input{display:block;width:220px;height:30px;margin:0 auto;line-height:30px;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,.1) inset;color:#333}.layui-layer-prompt textarea.layui-layer-input{width:300px;height:100px;line-height:20px}.layui-layer-prompt .layui-layer-content{padding:20px}.layui-layer-prompt .layui-layer-btn{padding-top:0}.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{padding-left:0;border-bottom:1px solid #ccc;background-color:#eee;overflow:visible}.layui-layer-tab .layui-layer-title span{position:relative;float:left;min-width:80px;max-width:260px;padding:0 20px;text-align:center;cursor:default;overflow:hidden}.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{height:43px;border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff;z-index:10}.layui-layer-tab .layui-layer-title span:first-child{border-left:none}.layui-layer-tabmain{line-height:24px;clear:both}.layui-layer-tabmain .layui-layer-tabli{display:none}.layui-layer-tabmain .layui-layer-tabli.xubox_tab_layer{display:block}.xubox_tabclose{position:absolute;right:10px;top:5px;cursor:pointer}.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-imgbar,.layui-layer-imguide{display:none}.layui-layer-imgnext,.layui-layer-imgprev{position:absolute;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;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;overflow:hidden;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%;overflow:hidden;color:#fff}.layui-layer-imgtit a:hover{color:#fff;text-decoration:underline}.layui-layer-imgtit em{padding-left:10px;font-style:normal}@-webkit-keyframes bounceOut{100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes 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:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.2s;animation-duration:.2s}@media screen and (max-width:1100px){.layui-layer-iframe{overflow-y:auto;-webkit-overflow-scrolling:touch}} \ No newline at end of file +.layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span,.layui-layer-title{text-overflow:ellipsis;white-space:nowrap}*html{background-image:url(about:blank);background-attachment:fixed}html #layuicss-skinlayercss{display:none;position:absolute;width:1989px}.layui-layer,.layui-layer-shade{position:fixed;_position:absolute;pointer-events:auto}.layui-layer-shade{top:0;left:0;width:100%;height:100%;_height:expression(document.body.offsetHeight+"px")}.layui-layer{-webkit-overflow-scrolling:touch;top:150px;left:0;margin:0;padding:0;background-color:#fff;-webkit-background-clip:content;box-shadow:1px 1px 50px rgba(0,0,0,.3)}.layui-layer-close{position:absolute}.layui-layer-content{position:relative}.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) center center no-repeat #eee}.layui-layer-ico{background:url(icon.png) no-repeat}.layui-layer-btn a,.layui-layer-dialog .layui-layer-ico,.layui-layer-setwin a{display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-move{display:none;position:fixed;*position:absolute;left:0;top:0;width:100%;height:100%;cursor:move;opacity:0;filter:alpha(opacity=0);background-color:#fff;z-index:2147483647}.layui-layer-resize{position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.layui-layer{border-radius:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.3s;animation-duration:.3s}@-webkit-keyframes layer-bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layer-bounceIn{0%{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim{-webkit-animation-name:layer-bounceIn;animation-name:layer-bounceIn}@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown}@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft}@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0);-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn}@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layui-layer-title{padding:0 80px 0 20px;height:42px;line-height:42px;border-bottom:1px solid #eee;font-size:14px;color:#333;overflow:hidden;background-color:#F8F8F8;border-radius:2px 2px 0 0}.layui-layer-setwin{position:absolute;right:15px;*right:0;top:15px;font-size:0;line-height:initial}.layui-layer-setwin a{position:relative;width:16px;height:16px;margin-left:10px;font-size:12px;_overflow:hidden}.layui-layer-setwin .layui-layer-min cite{position:absolute;width:14px;height:2px;left:0;top:50%;margin-top:-1px;background-color:#2E2D3C;cursor:pointer;_overflow:hidden}.layui-layer-setwin .layui-layer-min:hover cite{background-color:#2D93CA}.layui-layer-setwin .layui-layer-max{background-position:-32px -40px}.layui-layer-setwin .layui-layer-max:hover{background-position:-16px -40px}.layui-layer-setwin .layui-layer-maxmin{background-position:-65px -40px}.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:.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:hover{background-position:-180px -31px}.layui-layer-btn{text-align:right;padding:0 10px 12px;pointer-events:auto;user-select:none;-webkit-user-select:none}.layui-layer-btn a{height:28px;line-height:28px;margin:6px 6px 0;padding:0 15px;border:1px solid #dedede;background-color:#f1f1f1;color:#333;border-radius:2px;font-weight:400;cursor:pointer;text-decoration:none}.layui-layer-btn a:hover{opacity:.9;text-decoration:none}.layui-layer-btn a:active{opacity:.8}.layui-layer-btn .layui-layer-btn0{border-color:#4898d5;background-color:#2e8ded;color:#fff}.layui-layer-btn-l{text-align:left}.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-ico1{background-position:-30px 0}.layui-layer-ico2{background-position:-60px 0}.layui-layer-ico3{background-position:-90px 0}.layui-layer-ico4{background-position:-120px 0}.layui-layer-ico5{background-position:-150px 0}.layui-layer-ico6{background-position:-180px 0}.layui-layer-rim{border:6px solid #8D8D8D;border:6px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:none}.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,.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-page .layui-layer-content{position:relative;overflow:auto}.layui-layer-iframe .layui-layer-btn,.layui-layer-page .layui-layer-btn{padding-top:10px}.layui-layer-nobg{background:0 0}.layui-layer-iframe iframe{display:block;width:100%}.layui-layer-loading{border-radius:100%;background:0 0;box-shadow:none;border:none}.layui-layer-loading .layui-layer-content{width:60px;height:24px;background:url(loading-0.gif) no-repeat}.layui-layer-loading .layui-layer-loading1{width:37px;height:37px;background:url(loading-1.gif) no-repeat}.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2{width:32px;height:32px;background:url(loading-2.gif) no-repeat}.layui-layer-tips{background:0 0;box-shadow:none;border:none}.layui-layer-tips .layui-layer-content{position:relative;line-height:22px;min-width:12px;padding:5px 10px;font-size:12px;_float:left;border-radius:2px;box-shadow:1px 1px 3px rgba(0,0,0,.2);background-color:#000;color:#fff}.layui-layer-tips .layui-layer-close{right:-2px;top:-1px}.layui-layer-tips i.layui-layer-TipsG{position:absolute;width:0;height:0;border-width:8px;border-color:transparent;border-style:dashed;*overflow:hidden}.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{left:5px;border-right-style:solid;border-right-color:#000}.layui-layer-tips i.layui-layer-TipsT{bottom:-8px}.layui-layer-tips i.layui-layer-TipsB{top:-8px}.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{top:1px;border-bottom-style:solid;border-bottom-color:#000}.layui-layer-tips i.layui-layer-TipsR{left:-8px}.layui-layer-tips i.layui-layer-TipsL{right:-8px}.layui-layer-lan[type=dialog]{min-width:280px}.layui-layer-lan .layui-layer-title{background:#4476A7;color:#fff;border:none}.layui-layer-lan .layui-layer-btn{padding:5px 10px 10px;text-align:right;border-top:1px solid #E9E7E7}.layui-layer-lan .layui-layer-btn a{background:#BBB5B5;border:none}.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5}.layui-layer-molv .layui-layer-title{background:#009f95;color:#fff;border:none}.layui-layer-molv .layui-layer-btn a{background:#009f95}.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1}.layui-layer-iconext{background:url(icon-ext.png) no-repeat}.layui-layer-prompt .layui-layer-input{display:block;width:220px;height:30px;margin:0 auto;line-height:30px;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,.1) inset;color:#333}.layui-layer-prompt textarea.layui-layer-input{width:300px;height:100px;line-height:20px}.layui-layer-prompt .layui-layer-content{padding:20px}.layui-layer-prompt .layui-layer-btn{padding-top:0}.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{padding-left:0;border-bottom:1px solid #ccc;background-color:#eee;overflow:visible}.layui-layer-tab .layui-layer-title span{position:relative;float:left;min-width:80px;max-width:260px;padding:0 20px;text-align:center;cursor:default;overflow:hidden}.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{height:43px;border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff;z-index:10}.layui-layer-tab .layui-layer-title span:first-child{border-left:none}.layui-layer-tabmain{line-height:24px;clear:both}.layui-layer-tabmain .layui-layer-tabli{display:none}.layui-layer-tabmain .layui-layer-tabli.xubox_tab_layer{display:block}.xubox_tabclose{position:absolute;right:10px;top:5px;cursor:pointer}.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-imgbar,.layui-layer-imguide{display:none}.layui-layer-imgnext,.layui-layer-imgprev{position:absolute;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;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;overflow:hidden;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%;overflow:hidden;color:#fff}.layui-layer-imgtit a:hover{color:#fff;text-decoration:underline}.layui-layer-imgtit em{padding-left:10px;font-style:normal}@-webkit-keyframes layer-bounceOut{100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);transform:scale(1)}}@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}} \ No newline at end of file diff --git a/src/layer.js b/src/layer.js index e7003ee2..05d299cc 100644 --- a/src/layer.js +++ b/src/layer.js @@ -1195,10 +1195,22 @@ layer.photos = function(options, loop, key){ anim: Math.random()*5|0, skin: 'layui-layer-photos' + skin('photos'), content: '
' - +''+ (data[start].alt||'') +'' + +'
' + +'' + +'' + +'
' + +'
' + +''+ (data[start].alt||'') +'' +'
' - +(data.length > 1 ? '' : '') - +'
'+ (data[start].alt||'') +''+ dict.imgIndex +'/'+ data.length +'
' + +(data.length > 1 ? '' : '') + +'
' + +'
' + +'
' + + +'' + + '' + + '' + + '' + + '' +'
' +'
', success: function(layero, index){ @@ -1206,7 +1218,457 @@ layer.photos = function(options, loop, key){ 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 = document.body.clientWidth; + cH = document.body.clientHeight; + 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.offset({ + 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("mouseenter",function(e){ + dragX = -1; + }).on("mouseout",function(e){ + $tool.hide(); + }).on("mousedown",function(e){ + dragX=e.pageX || e.clientX; + dragY=e.pageY || e.clientY; + + cW = document.body.clientWidth; + cH = document.body.clientHeight; + e.stopPropagation(); + }).on("mousemove",function(e){ + if(dragX > 0){ + var nextDragX=e.pageX || e.clientX; + var nextDragY=e.pageY || e.clientY ; + var o = $image.offset(), + left =o.left + (nextDragX - dragX), + top =o.top + (nextDragY - dragY), + w = $image.width(), + h = $image.height(); + + if(isVertical){ + w = [h, h = w][0]; + } + if(w > cW){ + if(left > 0){ + left = 0 ; + } + else if(left < cW - w){ + left = cW - w; + } + }else{ + left = o.left; + } + if(h > cH){ + if(top > 0){ + top = 0 ; + } + else if(top < cH - h){ + top = cH - h; + } + } else{ + top = o.top; + } + + $image.offset({ + left : left, + top : top + }); + dragX=nextDragX; + dragY=nextDragY; + setThumbnails(); //缩略图拖拽点 + } + }).on("mouseup",function(e){ + dragX = -1; + }); + + //全屏 + 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){ + layer.style(index, { + width: '100%', + height: '100%', + left:'0px', + top:'0px' + }); + isMax = true; + } + else { + layer.style(index, { + 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(){ + imageWidth = $image.width(); + imageHeight = $image.height(); + var imgarea = [imageWidth, imageHeight]; + 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"); + 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 > document.body.clientWidth || height > document.body.clientHeight){ + $thumbnails.show(); + setThumbnails(); + } else{ + $thumbnails.hide(); + } + } + + //重置图片宽高 + function resizeImage(rotateDeg){ + + var mH = document.body.clientHeight - windowMargin, + mW = document.body.clientWidth - 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"); + } + + //设置缩略图拖拽区域 + function setThumbnails(){ + var $img = $thumbnails.find("img"), + sW = $img.width(), + sH = $img.height(), + w = $image.width(), + h = $image.height(), + imf = $image.offset(), + imfl = imf.left, + imft = imf.top, + cW = document.body.clientWidth, + cH = document.body.clientHeight, + 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 0000000000000000000000000000000000000000..e9f198e9cee32e1f0975636cc495c38f7a3ab416 GIT binary patch literal 549 zcmV+=0^0qFP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400D_fL_t(I%dM0@NL6tZ z$3N#G{jvG+XfPgT5DuAOlgbkZhla>WvNku@7N-{HaLl%bbdy3HEFp<#sX=IHi4xo% zIs`3EeH^;b#T{06Q9)4&4o5?G6fKXqW#N9sp)q$cKqx~guggLSZ3^__Z|9!y?}a6mk=|mJ%YO3v|^RRbVS3j?U9=$vy#N z<%5AlD|5hj;dX$Z>QLbyM8w-t_%YC|1p+6)kK+4Q#XqUUHi56ziuTmxoYWO{G1srU zlbYcxAe&SJYw>sf->O3P9jY_x?F=ye4hwNs-B&O5SlyDkk=&G0(8B_H)-FF$U)Sz( zDPcl=uf9<4siW$3b*i|a1NE`mP$$*3YL$@zpZPyj+rU1s3oJ*3=eg8eM{V^`eO5cq n|Aelq(HCmD{r;5s5862e9%eMLjsW%l00000NkvXXu0mjf!y4vq literal 0 HcmV?d00001 diff --git a/src/skin/default/icon/close_big.png b/src/skin/default/icon/close_big.png new file mode 100644 index 0000000000000000000000000000000000000000..b51d6b604e25b40f614f1d9ad839e162ca33aadc GIT binary patch literal 633 zcmV-<0*3vGP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400G@eL_t(I%bk?ZYTGaz z$G?h`B`d=na(xJd8cG6cpeI8i50S^}X`4@dhAxn?k<0cLeuLzYIN*Z}G6uI@XKRQ3 z6cp#rVS*nr_E#TS`hF#be~nqarf1VP+fi+cUN~_aUzcV1Fquqx09w|7Cd8Rer|-+M ze2C-t8h~T83_wpQ^;v7Ji=ucM4u>v)b_2!$w8JpGEQ;buYps=1p8#}?t_9#C2!g(p z@|)IL=Xw6M0oy^8QZuc!mQv1xAm{_QAO;vwuYBJhrD^(uW}6YL1E6C=(lq_<`~C>P zmHkJIX8r)6?|I&>4I2ywTnORW5YO`jfIf}c+k%rYDdk*BIkzCUryxgRob&N^yIp8% zNs=r$=i^h5mIcxPDgdtlo*l<|tEy@ztm~RNj`IfKnKadztbqaO2q8SPoaJ))bG2Ii zGRqV~cw_)O2idbYNs@)@y7#W@-kW7ArDkCmUY^~brp2@;Hvn!p=VRN=W3U}0&-2+4 zcRo@bM575~0J>S0MJIC7p*o00mStZKjz|5jgR3=A9lx&I`x0{IHb9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8O2%U^Mk~aSYKoKXsB}-XRA8SNS6oyH5zQF6!W)FimOUVuwWz zT)O2ScrU32`8~d78ok>|r2EdzMH^fnN=Mv0n8}u+;B?AFd+*(w_W$1>O8xp{w_e5n zEoz=ZS4wT!_UN(i*|qMt=Oh+czJ_p-qpLfnRL(ok5I_5`&G~etATigE%iiexHXc`o-s2k zY`IpqE%)}jvfcU$A@Aa=tyZ$W{`zZg=B&eMn}6obdbYsp;MP--nY-_vn_C(M#p@vesOS@%CNYs(dD-M zOO>qsyhF+l7#QWO`u{Gz^VMqJuT{6Q9)INf|Ns7P)(W*r!YiHxfg+E=)78&qol`;+ E0M}`{@&Et; literal 0 HcmV?d00001 diff --git a/src/skin/default/icon/download.png b/src/skin/default/icon/download.png new file mode 100644 index 0000000000000000000000000000000000000000..0514c20700f062203cd23d79c4a421467dc67216 GIT binary patch literal 360 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRn!3HE-lJ=GZDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMH3o);76yi2K%s^g3=E|P3=FRl7#OT(FffQ0%-I!a1C(G(@^*It(m?Rjd3QaK z;w*f?>LQoPm4eZT+zu2ENI2yvMDD8(!Jaq@khYB@PFr=Z>fM^GXGgy`JYST};`QLs;+}$-bsT5jFs`}x xTtYwVga3`)t%@`5DNGMxUf%fYR>RX7d~u>V1ylFg&d>*W+SAp~Wt~$(69AZog1i6# literal 0 HcmV?d00001 diff --git a/src/skin/default/icon/full_screen.png b/src/skin/default/icon/full_screen.png new file mode 100644 index 0000000000000000000000000000000000000000..f9bf06ccb1b74eda6e4239037e20ab4024bd6a20 GIT binary patch literal 244 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweEpc6R~NK=9LfcRi5e zEbxddW?)Oy5tsqu{0R{Pp$4^37}lH!ZZ6GrR0^U;lkc fX@6g1$*YaJmGAYI004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400U=9L_t(Y$F0{-NF!Gq z!13=S?yUdf#x&d7xa+pEb-Q-gW?8T;loHlGv-$<9|;~Ok8)1HvrE9H|FQ(KNUh)LI`nmbhH+W#ja7UbJzIGi;Ih& zOWZJwzhbf2RX4cT#-9UjE-fv6DePew#vdaiBW-T+MxYJoP9~FIOT1JnJ&8u6m(LAf zTU+~H;<~QS_xJY)fjT#M6YxCnN-CB5LE?o%;pcET?01SQXYi1!s<+eW^iL8$JUsld zv$OM(Tf7-)Z*6Vu$z(FWNL+9@O4wrxmfex%o&{)mv0cv8mQ<6`(E<2()OLc3Q(*TU!ZL zRc`|!dqcgotgixigTbILpU;0M(Vd;0IltfkD$wp21)6iY+*cCa-Q9g03We?fSM1HI zxe~lU)85|R7ZT0oa=&+Ubli1|HfFQg&m_9PzyD`XPtR+>RiMQ&n#p7yNc7;~V70fm z_YI)KMr*zSJ9l$nVBj8b4Y=eO-PqXp zP@;xmWCjNZ?^8Xhey3>t%F4?7@-1N)Ms{du=$$iY&23)+E+&)70n4%syUp*7j*j*N zF9NMjP?>FWsZ{z^2qBJ-kF~L}v3G$^Hz-uAz!!~1yERRFJU%}Do{a|FpbGy#tD30Z x{uRKm;{>pr!m{1Sux!wDic0wG1n2g1^B004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400U@AL_t(Y$F0{vNF!Gm z!0~@#9Nk^rO+vPHv%A@C*tK1|YqKoa7NmrB5ADH%TXM0d_25Bzsq|v$sr6E!(2LMY z5h}G<$_5q!E$Cs*sa0r$N|i>43Th>0G@0y}m`q*|nb!{8OEcqxcbS3T`*`zx?|tLK z`EXgLkkjoDbpy>?TU&3H%jHKyLqqLAlevf^v~_7|>AqnY1tEmcG;IbrW4^PEwk#|x zykQu|kq|;ut5q!?kG~DH*@fLe%iP@DYt?EsXQEFhCnw(rE(2%nz%HOAkx1ODR4RW7 zA%tNV$5T^NL%C$DwQ1}gs9bOCo?lM9{@Lj0MOcKv@SrIo}Ru{ zE|)hY8jr_60y=?7}M=CQG{Yo$`@4^bbr`T6-zP4qcz zq?bgm>bm~BM3c$n=fF#j(Ba|X4qexOHBqs+xcDV-3wYi{n;J%AvDn38v6z%-DwX;g z=mI*Z=W4^Kr?0OsplRB?L|0c=zjcg8A`x#spHE0MolegJF9Vl=bGFcMIDFyg=;%j@ zW-^(_ilW>Bf)@0DSCtF!1OkC}RaL)}==S#ZPd=Zon|l4XHHtz#UC!ikxk-uc?(RPE zdcAjnD<m9Px`L4wYBdhu4&rOy}i9YJ6mCm`W$dcQIy*o8yk--kw1<^B3`?=%f#D& zprR;uHa9o_$z@elfAIVL=T8H_?DcwI+1c5dlXxzdn+gO1wr^pV8C5%QB^V6e-P_w+ zka#wm{R*2o{R|!oh3;ju*16~*z8F{xfbs25g~lg`^s{ezz6 y-;_J1emRsJwe%+LF&A(HRXLr)a$BDHx%nFqh!A0AIc^gG0000004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400AXQL_t(I%cYUAD}-?v z$3M?|C`zU)lTs&(NJ-f&!eUS+6QjvuVzHVH%0D2bvsf(t2f7W5;ZjWJ1}PtdH@$b= zxx4qi004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400CM_L_t(I%e9m*NMunI zhrc7@-#iQ!5#22o5j3d?27|#W>u$46wM?>@mx;Q~pf*v&;2%(y#iBvjU=dfa$xgFu z^4s8mkH?$m%rKsI&+nY?o_p>+H^?w`5?BC+fo|Xl_ywFq#4|Y-DbNJ)9e4otfP3H{ zFaXQ|OTacziHMgxFzPq;QvH+@)1|JfhiYFQY)(B_duhPb6?IpQEU{nxtri-ACGvi# zU$TUfT5bkb%PXqaS;Cn**etM?d!&9&`Z|DOL_D?v1g?Owq@y!q*Lh&P4&WvtP7~|D zKp__hRDnNrfYsEx0Nj3f5BGuP7GOnQ`+t`f+WQV`;+%S+_B04vQFk&YB@y(s27Paq z*VKdDSxzKOs6W*$bx|EvN7QMxtlp@rYKJYZpv seNZ=Y``IFNQ;oJzlgDpQnQze9|2|71BxJ$~tN;K207*qoM6N<$f*~Zv-v9sr literal 0 HcmV?d00001 diff --git a/src/skin/default/layer.css b/src/skin/default/layer.css index 200f50fc..84035a48 100644 --- a/src/skin/default/layer.css +++ b/src/skin/default/layer.css @@ -28,27 +28,27 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;} /* 动画 */ .layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;} -@-webkit-keyframes bounceIn { /* 默认 */ +@-webkit-keyframes layer-bounceIn { /* 默认 */ 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} } -@keyframes bounceIn { +@keyframes layer-bounceIn { 0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)} 100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)} } -.layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn} +.layer-anim{-webkit-animation-name: layer-bounceIn;animation-name: layer-bounceIn} -@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown} +@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown} -@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig} +@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig} -@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft} +@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft} -@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:rollIn;animation-name:rollIn} +@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn} -@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:fadeIn;animation-name:fadeIn} +@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn} -@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} +@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} /* 标题栏 */ .layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;} @@ -147,9 +147,10 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;} .xubox_tabclose{position:absolute; right:10px; top:5px; cursor:pointer;} /* photo模式 */ +.layui-layer-phimg{width: 100%;height: 100%;} .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{display: inline-block; *display:inline; *zoom:1; vertical-align:top;} .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;} @@ -163,21 +164,237 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;} .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} .layui-layer-imgtit em{padding-left:10px; font-style: normal;} -/* 关闭动画 */ -@-webkit-keyframes bounceOut { - 100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)} - 30% {-webkit-transform: scale(1.05); transform: scale(1.05)} - 0% {-webkit-transform: scale(1); transform: scale(1);} + +@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'); } -@keyframes bounceOut { +.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: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} +.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} @media screen and (max-width: 1100px) { .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;} } - +.image{ + position: absolute; + margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/ + padding:0; + z-index: -1; + display: none; +} +.image.active{ + display:block; +} +.tool{ + position: absolute; + width: 100%; + text-align: center; + display: none; + z-index: 99999; +} +.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; +} +.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 29b76bcb..4c3f376f 100644 --- a/test/demo.html +++ b/test/demo.html @@ -6,7 +6,7 @@ layer-更懂你的web弹窗解决方案 - + @@ -38,7 +38,12 @@ 六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
- +
+ 说好的，一起Fly + LayIM + 佟丽娅女神 + 凤姐是个好人 +
更多示例 使用文档 @@ -49,23 +54,10 @@