看完老师的视频做的一个手机相册，对我这种菜鸟来说还是直接上代码吧！里面用到17张小图，17张大图，还有animate.css和zepto.min.js ,都可以在网上找到。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> <title>photo</title> <link rel="stylesheet" href="animate.css"/> <script src="zepto.min.js"></script> <style type="text/css"> blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,ul,li,img{ margin: 0; padding: 0; } .clearfix::before,.clearfix::after{ content:""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } body{ background-color: black;overflow: hidden; } ul{ list-style: none; } .container li{ float: left; overflow: hidden; } .large{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; background-color: black; } </style> </head> <body> <ul class="container clearfix" id="container"> </ul> <div class="large animated fadeInDown" id="large_container" style="display: none;"> <img id="large_img" /> </div> <script> var num=17; var zWin=$(window); 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 <=num; i++) { var p = padding; var imgSrc='img/'+i+'.jpg'; if (i%4==1) { p=0; } tmpl+='<li class="animated bounceIn" data-id="'+i+'" style=" '+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px "><canvas id="cvs_'+i+'"></canvas></li>' 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); } render(); var wImage = $('#large_img'); var domImage = wImage[0]; //image对象的DOM应用 var loadImg = function (id,callback) { $('#container').css({height:zWin.height(),'overflow':'hidden'}) // $('#container').css({'display':'none'}) $('#large_container').css({ zWin.width(), height:zWin.height() }).show(); //加载大图 var imgsrc = 'img/'+id+'.large.jpg'; var imageObj = new Image(); imageObj.onload = function () { var w = this.width; //图片的宽高 var h = this.height; var winWidth = zWin.width(); //window的宽高 var winHidth = zWin.height(); var realw = winHidth*w/h; var paddingLeft = parseInt((winWidth - realw)/2); var realh = winWidth*h/w; var paddingTop = parseInt((winHidth - realh)/2); //横图和竖图切换时需要重置大图的css样式 wImage.css('width','auto').css('height','auto'); wImage.css('padding-left','0px').css('padding-top','0px'); //计算图片的宽高比，判断是横图还是竖图 if (h/w>1.2) { //图片显示出来 wImage.attr('src',imgsrc).css('height',winHidth).css('padding-left',paddingLeft) }else{ wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop) } callback&&callback(); } imageObj.src = imgsrc; } var cid; //给LI做事件绑定； $('#container').delegate('li','tap',function(){ var _id = cid = $(this).attr('data-id') loadImg(_id) }); //点击大图，返回相册 $('#large_container').tap(function() { $('#container').css({height:'auto','overflow':'auto'}) // $('#container').css({'display':'block'}) $(this).hide(); }).swipeLeft(function(){ cid++; if(cid>num){ cid = num; }else{ loadImg(cid,function(){ //事件监听 domImage.addEventListener('webkitAnimationEnd',function(){ //动画结束之后执行函数 wImage.removeClass('animated bounceInRight'); domImage.removeEventListener('webkitAnimationEnd') },false) //控制事件是否冒泡用false参数 wImage.addClass('animated bounceInRight'); }); } }).swipeRight(function(){ cid--; if(cid<1){ cid = 1; }else{ loadImg(cid,function(){ domImage.addEventListener('webkitAnimationEnd',function(){ wImage.removeClass('animated bounceInLeft'); domImage.removeEventListener('webkitAnimationEnd') },false) wImage.addClass('animated bounceInLeft'); }); } }) </script> </body> </html>