webApp做一個簡單的移動端相簿檢視管理器

阿新 • • 發佈：2019-01-19

跟著慕課網做了第一個webApp，實現一個移動端的相簿管理器

首先，頁面的佈局很簡單：一個放置小圖的ul，和一個放置大圖的容器（在點選之後才顯示，小圖情況下是隱藏大圖的）

html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webApp相簿的實現</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--<link rel="stylesheet" href="../style/base.css">-->
    <script src="../js/zepto.min.js"></script>
    <link rel="stylesheet" href="../style/animate.css">
    <link rel="stylesheet" href="../style/index.css">

</head>
<body>
<div>
    <ul class="img-container" id="container">
    </ul>

    <div class="large animated fadeInDown " id="large_container" style="display: none">
        <img id="large_img">
    </div>
</div>

<script src="../js/index.js"></script>

</body>
</html>

css樣式就不說了，很簡單

具體說一下js的實現過程

1、小圖頁面，為了適配更多的裝置，要動態的獲取對應螢幕的大小來動態設定顯示圖片的寬高

var render = function () {
    var padding = 2;
    var winWidth = zWin.width();
    var picWidth = Math.floor((winWidth - padding * 3) / 4);
    var tmpl = '';
    for(var i = 1;i <= total;i++){
        var p = padding;
        var imgSrc = '../image/'+i+".jpg";
        if(i % 4 == 1){
            // 如果是每一行的第一張圖，則沒有padding
            p = 0;
        }
        tmpl += '<li data-id="'+i+'" class="animated zoomIn" style = "width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;' +
            'padding-top:'+ padding+'px;"><canvas id="cvs_'+i+'" ></canvas></li>';
        //用canvas將圖片畫在畫布上，而不是直接使用img
        var imageObj = new Image();
        imageObj.index = i;
        imageObj.onload = function () {
            var cvs = $('#cvs_'+this.index)[0].getContext('2d');
            cvs.width = this.width;
            cvs.height = this.height;
            cvs.drawImage(this,0,0);
        }
        imageObj.src = imgSrc;

    }
    $('#container').html(tmpl);
}

2、在觸控小圖時，視訊中老師講到用一個代理去實現，這個地方還有點沒懂，程式碼如下

$('#container').delegate('li','tap',function () {
    //觸控的事件繫結，使用代理
    var _id = cid =  $(this).attr('data-id');
    loadImg(_id);
});

3、在小圖頁面點選圖片時，跳轉到相應的大圖並且顯示放置大圖的容器，那麼要有一個loadImg的函式

函式，載入圖片的時候，要看圖片時一張橫圖還是豎圖，進而設定圖片的顯示的寬高

var loadImg = function (id,callback) {
    $('#large_container').css({
        width:zWin.width(),
        height:zWin.height()
    }).show();

    var imgsrc = '../image/'+id+'.large.jpg';
    var imageObj = new Image();
    imageObj.onload = function () {
        var w = this.width;
        var h = this.height;
        var winWidth = zWin.width();
        var winHeight = zWin.height();
        var realw = winHeight * w / h;
        var paddingLeft = parseInt((winWidth - realw) / 2);
        var realh = winHeight * h / w;
        var paddingTop = parseInt((winHeight - realh) / 2);

        wImage.css('width','auto').css('height' ,'auto');
        wImage.css('padding-top','0').css('padding-left','0');
        if(h / w > 1.2){
            //圖片是一張長圖
            wImage.attr('src',imgsrc).css('height',winHeight).css('padding-left',paddingLeft);

        }else{
            //圖片是一張橫圖
            wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop);
        }
    }
    imageObj.src = imgsrc;
    callback&&callback();

}

4、顯示大圖之後，要實現圖片的左右滑動，這就用到了zepto.js。這裡面加入了移動端touch的相關程式碼，可以實現我們所需要的大部分移動端滑動，比如左滑右滑雙擊等。左右滑動時，要有一個把之前的設定的樣式清除的一個動作，所以這裡用到了removeClass，removeEventListener。這裡的animated bounceInRight就是animated裡面已經設定好的一些樣式，直接設定類名就可以實現一個左右滑動的效果。

$('#large_container').swipeLeft(function () {
    cid++;
    if(cid > total){
        cid = total;
    }else{
        loadImg(cid,function () {
            domImage.addEventListener('webkitAnimationEnd',function () {
                wImage.removeClass('animated bounceInRight');
                domImage.removeEventListener('webkitAnimationEnd');
            },false);
            wImage.addClass('animated bounceInRight')
        });
    }
});

5、單擊大圖時，關閉大圖片及存放其的容器

$('#large_container').tap(function () {
    $(this).hide();
});

整個程式碼在火狐瀏覽器下可以很好的執行，但是谷歌瀏覽器還不能實現左右滑動的效果，不知道是不是版本適配的問題？？？有待解決！！！

webApp做一個簡單的移動端相簿檢視管理器

webApp做一個簡單的移動端相簿檢視管理器

python---》客戶端與服務端的基礎（做一個簡單的客戶端與服務端）

web前端課程技術內容之如何做一個簡單的手機端頁面的翻頁

用Java GUI做一個簡單的管理系統

android篇-如何做一個簡單的安卓源碼查看器

使用Multiplayer Networking做一個簡單的多人遊戲例子-1/2

利用文件打開方式with open('文件名',方式) as 變量名做一個簡單的復制（排除大文件bug）

WebBrowser控件做一個簡單便捷的程序

C#做一個簡單的進行串口通信的上位機

tkinter做一個簡單的登陸頁面

原生js做一個簡單的進度條

Django2 + ORM 做一個簡單的登陸

基於python使用qqbot接入qq做一個簡單的文字消息自動回復

Django----做一個簡單網頁的教程(適合初學者)

如何使用CAD看圖軟體移動端對檢視的圖紙進行平移？

用 Vue 做一個簡單的購物app

用java做一個簡單的打字遊戲

ASP.NET MVC如何做一個簡單的非法登入攔截

原生js實現簡單移動端輪播圖

爬蟲教程」Python做一個簡單爬蟲，小白也能看懂的教程

webApp做一個簡單的移動端相簿檢視管理器

相關推薦