手机端图片预览查看
<!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>