入门手机端html,HTML5+CSS3从入门到精通 手机端图片如何预览查看

本篇教程探讨了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频道！