当前位置： 移动技术网 > IT编程>网页制作>Html5 > 手机端图片预览查看

手机端图片预览查看

2018年04月26日  | 移动技术网IT编程  | 我要评论

张歆艺邂逅金伯利钻石,鞍前马后是什么意思,杨继周

<!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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网