手機端圖片預覽檢視

abcByme發表於2018-04-25
<!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>

 

相關文章