手機端圖片預覽查看_ZenDei技術網路在線

手機端圖片預覽查看

-Advertisement-

圖片預覽圖片預覽 --> ...

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

HTML5和CSS3實例教程中文版高清PDF掃描版

HTML5和CSS3實例教程共分3部分，集中討論了HTML5和CSS3規範及其技術的使用方法。首先是規範概述，介紹了新的結構化標簽、表單域及其功能（包括自動聚焦功能和占位文本）和CSS3的新選擇器。接下來是HTML對視頻和音頻的支持，講述了畫布上的圖形繪製及CSS陰影、漸變和變換的使用方法。最後介紹 ...
HTML5+CSS3網站設計教程 (張曉景,胡克) [iso]

《HTML5+CSS3網站設計教程》系統地講解了CSS的基礎理論和實際運用技術，並結合多個案例講解了採用CSS與層佈局相結合製作網頁的方法，在詳細講解各個案例的製作中，不僅介紹了CSS樣式設計的各方面知識，更重要的是結合實際網頁製作中可能遇到的問題提供瞭解決問題的思路、方法、技巧。即使是初學者，也可 ...
HTML5+CSS3從入門到精通隨書光碟 ISO 鏡像視頻教程

HTML5+CSS3從入門到精通（清華社“視頻大講堂”大系）通過基礎知識+中小實例+綜合案例的方式，講述了用HTML5+ CSS3設計構建網站的必備知識，相對於權威指南、高級程式設計、開髮指南同類圖書，本書是一本適合快速入手的自學教程。內容有：創建HTML5文檔，實戰HTML5表單，實戰HTML5繪 ...
HTML5+CSS3從入門到精通中文pdf版

HTML5+CSS3從入門到精通是通過基礎知識+中小實例+綜合案例的方式，講述了用HTML5+ CSS3設計構建網站的必備知識，相對於專業指南、高級程式設計、開髮指南同類圖書，本書是一本適合快速入手的自學教程。內容有：創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻， ...
百度前端學院-基礎學院-第二課

HTML是什麼，HTML5是什麼 HTML元素標簽、屬性都是什麼概念？文檔類型是什麼概念，起什麼作用？ meta標簽都用來做什麼的？ Web語義化是什麼，是為瞭解決什麼問題鏈接是什麼概念，對應什麼標簽？常用標簽都有哪些，都適合用在什麼場景表單標簽都有哪些，對應著什麼功能，都有哪些屬性 ol, ...
Javascript的console['']幾種常用輸入方法

1、console.log是最常用的輸入方法，正常化輸出語句，還具有print占位符整數（%d||%i），浮點數（%f），對象（%o），字元（%s）; 2、console.error輸出錯誤化的語句 3、console.info輸出一條信息化語句 4、console.warn輸出警告化的語句 5、c ...
JavaScript正則表達式

正則表達式在程式應用中的使用是非常廣泛的。首先正則表達式一般要寫兩個斜杠之間：/正則表達式/ 其次有兩個符號 ^ 和 $ ，符號 ^ 代表一個字元串的開始，而 $ 則代表一個字元串的結束。舉個例子：這裡聲明一個字元串str,聲明一個select,表示所有以asd開頭的字元串。表示所有以jkl ...
js利用數組實現隊列與堆棧效果

隊列實現堆棧實現 ...