移动端的WEB相册实例

移动端的WEB相册实例代码

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap beign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="zepto.min.js"></script>
	<link href="animate.css" rel="stylesheet" type="text/css">
	<style>
	   blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
		margin: 0;
		padding: 0;
		}
	   body{background:black;overflow:hidden}
	   ul{list-style:none}
	   .clearfix:after{display: block; content: "\20"; height: 0; clear: both; overflow: hidden; visibility: hidden;}/*ie8以上*/
     
	   .img-container li img{}
	   .img-container li {overflow:hidden;float:left;}
	   .large{width:100%;height:100%;position:absolute;top:0px;left:0px;background-color:black}
	</style>
  <body>
	<ul class="img-container clearfix" id="container">
	</ul>
	<div class="large animated fadeInDown" id="large_container" style="display:none">
		<img id="large_img">
	</div>
	<script>
	var total = 17;
	var zWin = $(window);
	var render = function(){
		var tmpl = '';
		var padding = 2;
		var scrollBarWidth = 0;
		var winWidth = $(window).width();
		var picWidth = Math.floor((winWidth-padding*3-scrollBarWidth)/4);
		for(var i=1;i<=total;i++){
			var p = padding;
			if(i%4==1){
				p = 0;
			}
			tmpl+='<li data-id="'+i+'" class="animated bounceIn" style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><img src="img/'+i+'.jpg"></li>';
		}
		$('#container').html(tmpl);
	}
	render();
	var cid;
	var wImage = $('#large_img');
	var domImage = wImage[0];
	var loadImg = function(id,callback){
		$('#container').css({height:zWin.height(),'overflow':'hidden'})
		$('#large_container').css({
			width:zWin.width(),
			height:zWin.height()
			//top:$(window).scrollTop()
		}).show();
		var imgsrc = 'img/'+id+'.large.jpg';
		var ImageObj = new Image();
		ImageObj.src = imgsrc;
		ImageObj.onload = function(){
			var w = this.width;
			var h = this.height;
			var winWidth = zWin.width();
			var winHeight = zWin.height();
		    var realw = parseInt((winWidth - winHeight*w/h)/2);
			var realh = parseInt((winHeight - winWidth*h/w)/2);
			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',winHeight).css('padding-left',realw+'px');;
			}else{	
				 wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',realh+'px');
			}
			
			callback&&callback();
		}
		
	}
	$('#container').delegate('li','tap',function(){
		var _id = cid = $(this).attr('data-id');
		loadImg(_id);
	});
	$('#large_container').tap(function(){
		$('#container').css({height:'auto','overflow':'auto'})
		$('#large_container').hide();
	});
	$('#large_container').mousedown(function(e){
		e.preventDefault();
	});
	var lock = false;
	$('#large_container').swipeLeft(function(){
		if(lock){
			return;
		}
		cid++;
		
		lock =true;
		loadImg(cid,function(){
			domImage.addEventListener('webkitAnimationEnd',function(){
				wImage.removeClass('animated bounceInRight');
				domImage.removeEventListener('webkitAnimationEnd');
				lock = false;
			},false);
			wImage.addClass('animated bounceInRight');
		});
	});
	$('#large_container').swipeRight(function(){
		if(lock){
			return;
		}
		cid--;
		lock =true;
		if(cid>0){
			loadImg(cid,function(){
				domImage.addEventListener('webkitAnimationEnd',function(){
					wImage.removeClass('animated bounceInLeft');
					domImage.removeEventListener('webkitAnimationEnd');
					lock = false;
				},false);
				wImage.addClass('animated bounceInLeft');
			});
		}else{
			cid = 1;
		}
	});
	</script>
  </body>
</html>

慕课网移动端的WEB相册课程

 demo示例预览
 github地址

use your mobile phone

环境参数

CSS3

HTML5

animate.css

zepto.js

知识点

针对WEB相册的tap、touch事件

CSS3 动画

Zepto框架

Canvas等知识的应用。

这里存在一个问题，因为用的七牛的图床 url太多图片加载慢回头研究前端优化时候补上改进