增加 相册层 放大缩小 旋转的功能 做的一般

src/skin/default/layer.css

@@ -149,7 +149,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
 /* photo模式 */
 .layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
 .layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
-.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
+.layui-layer-photos .layui-layer-phimg img{ width:100%; display: inline-block; *display:inline; *zoom:1; }
 .layui-layer-imguide,.layui-layer-imgbar{display:none;}
 .layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px;  margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
 .layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
@@ -162,6 +162,7 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
 .layui-layer-imgtit a{max-width:65%;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
 .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
 .layui-layer-imgtit em{padding-left:10px; font-style: normal;}
+.layui-layer-phimg {width: 100%; height: 100%; position: relative;}
 
 /* 关闭动画 */
 @-webkit-keyframes layer-bounceOut {
@@ -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: -1;
+    display: none;
+	moz-user-select: -moz-none;
+    -moz-user-select: none;
+    -o-user-select:none;
+    -khtml-user-select:none;
+    -webkit-user-select:none;
+    -ms-user-select:none;
+    user-select:none;
+}
+.image.active{
+	display:block;
+}
+.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;
+	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;
+}
 

test/demo.html

@@ -6,7 +6,7 @@
   <meta charset="utf-8">
   <title>layer-更懂你的web弹窗解决方案</title>
   <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
-  <script src="../build/layer.js"></script>
+  <script src="../src/layer.js"></script>
 
   <style>
   html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
@@ -18,7 +18,7 @@
   .layer_text{background-color:#fff; padding:20px;}
   .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
   .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
-  .photos-demo img{width:200px;}
+  .layer-photos-demo img{width:200px;}
   </style>
 </head>
 <body>
@@ -38,7 +38,12 @@
 六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
 </pre>
 </div>
-
+<div id="layer-photos-demo" class="layer-photos-demo">
+          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" alt="说好的，一起Fly" layer-index="0">
+          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" alt="LayIM" layer-index="1">
+          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" alt="佟丽娅女神" layer-index="2">
+          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" alt="凤姐是个好人" layer-index="3">
+        </div>
 <div class="box" style="text-align:center">
   <a href="http://layer.layui.com/" target="_blank">更多示例</a>
   <a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
@@ -49,23 +54,10 @@
 <script>
 ;!function(){
 
-
-//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
-layer.ready(function(){ 
-  //官网欢迎页
-  layer.open({
-    type: 2,
-    title: 'layer弹层组件官网',
-    fix: false,
-    maxmin: true,
-    shadeClose: true,
-    area: ['1100px', '600px'],
-    content: 'http://sentsin.com/jquery/layer/?form=local',
-    end: function(){
-      layer.tips('Hi', '#about', {tips: 1})
-    }
+layer.photos({
+  photos: '#layer-photos-demo'
   });
-});
+//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
 
 //关于
 $('#about').on('click', function(){