Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
419 changes: 414 additions & 5 deletions src/layer.js

Large diffs are not rendered by default.

Binary file added src/skin/default/icon/bigger.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/close_big.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/close_small.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/download.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/full_screen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/next.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/prev.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/rotate.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/skin/default/icon/smaller.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
244 changes: 243 additions & 1 deletion src/skin/default/layer.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand All @@ -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 {
Expand All @@ -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;
}

30 changes: 11 additions & 19 deletions test/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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:'微软雅黑'}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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(){
Expand Down