本篇教程探讨了HTML5+CSS3从入门到精通 手机端图片如何预览查看,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
html>
图片预览/*正式样式 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%); }
图片预览
$(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
console.log(photoArr[i]);
innerhtml += '';
};
$('.photos-box').append(innerhtml);
imageViewerOpition({className:".img-list"});//图片预览
})
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!