增加放大、缩小、旋转（仿QQ）预览图片功能（修正后）

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "启动 Chrome 并打开 localhost",
+            "url": "http://localhost:8080/test/demo.html",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

src/theme/default/layer.css

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

src/theme/element/style.css

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