JS实现简单的手机相册(从略缩图到大图)

1、先准备好animate.css文件和zetpo.js
2、结构层HTML代码：

<ul id="smallImg"></ul>
    <div class="mark"><!--遮罩层-->
        <img class="largeImg" src="" />
    </div>
</body>

3、样式层CSS，不要忘了链接animate

*{padding:0;margin:0;}
    ul{list-style:none;}
    ul li{float:left;}
    .mark{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background-color: #000000;
        display: none;
    }

4、（重点来啦）行为层JavaScript代码，不要忘了链接zepto轻量级框架

    $(function(){
    //渲染页面
    var num=14,
        marginL=2,
        smallImg=$("#smallImg"),
        largeImg=$('.largeImg'),
        index=0;
    renderSmallImg();

    function renderSmallImg(){
        var str="";
        var m=4;//一行显示几张
        var winW=$(window).width();
        var smallImgW=(winW-m*marginL)/m;
        for(var i=1;i<=num;i++){
            str+="<li data-id='"+i+"' class='animated zoomInDown' style='margin-left:"+marginL+"px';>"+
            "<canvas data-id='"+i+"' id='cvs"+i+"' width='"+smallImgW+"' height='"+smallImgW+"'>此浏览器不支持canvas</canvas>"+
                 "</li>";                       
            var img=new Image();
            img.k=i;
            //加载图片
            img.onload=function(){
                //获取canvas元素
                //zepto转换为js（1、[0]；2、get(0)）
                var cvs=$("#cvs"+this.k).get(0);
                var ctx=cvs.getContext('2d');
                ctx.drawImage(this,0,0,smallImgW,smallImgW)
            }
            //图片的路径
            img.src="img/"+i+".jpg";
        }
        //把图片放到canvas里面
        smallImg.html(str);         
    }

    //窗口尺寸改变，重新渲染图片
    $(window).resize(function(){
        renderSmallImg()
    })

    smallImg.on('tap','li',function(){
        var id=$(this).data('id');
        index=id;
        renderBidImg(id);


    })
    //渲染大图函数
    function renderBidImg(id,callBack){
        //点击小图，显示遮罩层
        $('.mark').show();
        //获取大图片路径
        var largeImgSrc="img/"+id+".large.jpg";
        //实例化图片
        var imgL=new Image();
        //加载图片
        imgL.onload=function(){
            largeImg.attr('src',largeImgSrc);
            var winW=$(window).width();
            var winH=$(window).height();
            imgW=this.width;
            imgH=this.height;
            //图片的宽度大于高度时，水平显示
            if(imgW>imgH){
                bl=winW/imgW;
                largeImg.css({
                    'width':imgW*bl+'px',
                    'height':imgH*bl+'px',
                    'margin-top':(winH-imgH*bl)/2+'px',
                    'margin-left':'0'
                })
            }else{
                blH=winH/imgH;                      
                blW=winW/imgW;
                largeImg.css({
                    'width':imgW*blW+'px',
                    'height':imgH*blH+'px',
                    'margin-left':(winW-imgW*blW)/2+'px',
                    'margin-top':'0'
                })
            }
        }
        //图片路径
        imgL.src=largeImgSrc;
        if(callBack){
            callBack();
        }

    }
    //点击遮罩层，隐藏遮罩层
    $('.mark').tap(function(){
        $(this).hide();
    }).swipeLeft(function(){
        //向左滑动显示下一张
        index++;
        if(index>num){//显示到最后一张图片时，回到第一张
            index=1;
        }
        renderBidImg(index,function(){
            largeImg.addClass('animated bounceInRight').on('webkitAnimationEnd',function(){
                $(this).removeClass().off('webkitAnimationEnd');
            })
        });
    }).swipeRight(function(){
        //向左滑动显示上一张
        index--;
        if(index<1){//显示到第一张图片时，回到最后一张
            index=num;
        }
        renderBidImg(index,function(){
            largeImg.addClass('animated bounceInLeft').on('webkitAnimationEnd',function(){
                $(this).removeClass().off('webkitAnimationEnd');
            })
        });
    })
})