手机端图片预览查看
程序员文章站
2022-07-26 18:50:23
图片预览 图片预览 --> ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>图片预览</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/webuploader.css">
<style>
/*正式样式 start*/
.wrap {
width: 100%;
}
.head-box {
height: 40px;
background: #4ecbf3;
width: 100%;
text-align: center;
line-height: 40px;
}
.head-box h4 {
color: #fff;
}
/*内容*/
.photos-box{
width: 50px;
height: 50px;
}
.photos-box img{
width: 100%;
height: 100%;
}
/**/
#close {
font-size: 16px;
z-index: 999999;
width: 45px;
height: 45px;
top: 0;
right: 0;
opacity: .8;
position: absolute;
background:#333;
border-radius: 0 0 0 80%;
}
#close:before, #close:after {
content: " ";
width: 2px;
height: 20px;
background-color: hsl(0, 100%, 100%);
position: absolute;
top: 10px;
left: 24px;
}
#close:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.image-footer {
text-align: center;
font-size: 16px !important;
bottom: 20px !important;
}
.imgName{
font-size: 17px;
text-align:center;
display: block;
color:#fff;
margin:10px auto;
}
.image-viewer{position: fixed !important; bottom: 0;}
.image-viewer .viewer{ position: absolute; transform: translateY(-50%); }
</style>
</head>
<body>
<div class="wrap">
<!-- 头部 -->
<div class="head-box">
<h4>图片预览</h4>
</div>
<!-- 内容 -->
<div class="photos-box">
<!-- <img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览1">
<img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览2"><img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览3"><img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览4"><img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览5"><img class="img-list" src="http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw" alt="图片预览6"> -->
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<!-- <script src="js/light7.js"></script> -->
<!-- <script src="js/photoBrowser.js"></script>
<script src="js/uploader.js"></script> -->
<script type="text/javascript" src="js/imageViewer.min.js"></script>
<script>
$(function() {
var photos = 'http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzUzODgyNjlfOGJlOTc4ZjQtYzczMS00N2VmLWJmODQtY2M0Njg1ZDM0MWIw,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjM4NzU1ODg5NjNfOGM4MDI3MzQtNDViNS00NDA3LWI3MzQtN2IwOWE3Njg0M2M3,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MDk4MzlfOTA3ZDhlZmMtMTkwYy00M2YxLWEwNmYtZGRiMTBmZmYxNjY4,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MTMxNzVfYjI2Y2UwNGUtMWQ4ZC00N2JhLWJlZjEtYTA1MWU5NjY1MjUy,http://nim.nosdn.127.net/NDEzMTU1NQ==/bmltd18wXzE1MjQ2NDY2MTcwOTBfMjE3MmRjNWUtZGVjMC00MDdhLWE2NjMtN2U3NDY5NDFkZjI0';
//分割成数组
var photoArr = photos.split(',');
var innerhtml = '';
for(var i = 0;i<photoArr.length;i++){
console.log(photoArr[i]);
innerhtml += '<img class="img-list" src="'+photoArr[i]+'"/>';
};
$('.photos-box').append(innerhtml);
imageViewerOpition({className:".img-list"});//图片预览
})
</script>
</body>
</html>
上一篇： 外观性能俱佳 主打女性市场手机推荐
下一篇： Think in Python