webApp做一个简单的移动端相册查看管理器

跟着慕课网做了第一个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做一个简单的移动端相册查看管理器

猜你喜欢