                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /WebApp
                        
                        /移動(dòng)端的WEB相冊(cè)

這有什么問(wèn)題？？？

<!doctype html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<meta name='viewport'content='width=device-width,initial-scale=1.0'>
?? ?<title>Document</title>
?? ?<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script>
?? ?<link rel="stylesheet" >
?? ?<style>
?? ??? ?body,button,dd,dl,dt,fieldest,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul,img{padding:0;margin:0;}
?? ??? ?ul{list-style:none;}
?? ??? ?li{overflow:hidden;float:left;}
?? ??? ?.large{width:100%;height:100%;background: #000;position:absolute;left:0;top:0;display:none;}
?? ??? ?
?? ?</style>
</head>

<body>
?? ?<ul id="container">
?? ?</ul>
?? ?<div id='large_container'>
?? ??? ?<img id='large_img' src="" alt="">
?? ?</div>
</body>
</html>

<script>
?? ?var totale=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<=totale;i++){
?? ??? ??? ?var p=padding;
?? ??? ??? ?var imgSrc='webimg/'+i+'.jpg';
?? ??? ??? ?if(i%4==1){
?? ??? ??? ??? ?p=0;
?? ??? ??? ?}
?? ??? ??? ?/*tmpl+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px"><img src="'+imgSrc+'" alt=""></li>';*/
?? ??? ??? ?tmpl+='<li data-id="'+i+'" class="animated bounceIn" 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 loadImg=function(id){
?? ??? ?$('#container').css({height:zWin.height(),'overflow':'hidden'})
?? ??? ?$('#large_container').css({width:zWin.width(),height:zWin.height()}).show();
?? ??? ?var imgsrc='webimg/'+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 realH=winWidth*h/w;
?? ??? ??? ?var paddingLeft=parseInt((windWidth-realw)/2);
?? ??? ??? ?var paddingTop=parseInt((winHeight-realH)/2);
?? ??? ??? ?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;
?? ?}

?? ?$('#container').delegate('li','tap',function(){
?? ??? ?var _id=$(this).attr('data-id');
?? ??? ?alert(1);
?? ??? ?loadImg(_id);
?? ?})

</script>