看完老師的視頻做的一個手機相冊，對我這種菜鳥來說還是直接上代碼吧！里面用到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=" width:'+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({ width: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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
