手机端相册切换效果

最新推荐文章于 2024-04-15 20:45:43 发布

风清云淡_A

最新推荐文章于 2024-04-15 20:45:43 发布

阅读量667

点赞数

分类专栏：移动端文章标签：移动端 zepto css3

移动端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

跟着大神做了个相册效果，顺便记录下

基本的页面结构

<!DOCTYPE html>
<html>
  <head>
    <title>相册切换 beign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>"></script>
	<link href="./yuanma/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;}
     
	   .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" id="container">
	 	
	 </ul>
  </body>
</html>

2、动态生成相册结构

        var total = 17;
	 	var zWin = $(window);
	 	var render = function(){
	 		var padding = 2;
	 		var winWidth = zWin.width();
	 		var picWidth = Math.floor((winWidth-padding*4)/4)
	 		var tmpl = '';
	 		for(var i=1;i<=total;i++){
	 			var p = padding;
	 			var imgSrc = 'yuanma/'+i+'.jpg';
	 			tmpl += '<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+padding+'px;padding-top:'+p+'px;"><img src="'+imgSrc+'" /></li>';
	 		}
	 		$("#container").html(tmpl)
	 	}
	 	render()

页面效果

3、利用canvas动态载入图片

            for(var i=1;i<=total;i++){
	 			var p = padding;
	 			var imgSrc = 'yuanma/'+i+'.jpg';
	 			tmpl += '<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+padding+'px;padding-top:'+p+'px;"><canvas id="csv_'+i+'"></canvas></li>';
	 			var imageObj = new Image();
	 			imageObj.index = i;
	 			imageObj.onload = function(){
	 				var cvs = $('#csv_'+this.index)[0].getContext('2d');
	 				cvs.width = this.width;
	 				cvs.height = this.height;
	 				cvs.drawImage(this,0,0)
	 			}
	 			imageObj.src = imgSrc; //不要忘记添图片地址
	 		}

4、给每个li图片添加动态的载入效果

class="animated bounceIn"

5、轮播大图的html结构

<div class="large" style="display: none;">
	 <img id="large_img" />
</div>

6、点击展示大图

        var wImage = $('#large_img');
	 	var loadImg = function(id){
	 		$('#large_container').css({
	 			width : zWin.width(),
	 			height : zWin.height()
	 		}).show();
	 		var imgSrc = 'yuanma/'+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 paddingLeft = parseInt((winWidth-realw)/2)

	 			var realh = winWidth*h/w;
	 			var paddingTop = parseInt((winHeight-realh)/2)
	 			console.log(paddingTop)
	 			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(_id) {
	 		var _id = $(this).attr('data-id')  //li处加上自定义的data-id="i"
	 		loadImg(_id)
	 	});

效果

最终的源码:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap beign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://apps.bdimg.com/libs/zepto/1.1.4/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>

风清云淡_A

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
手机端相册切换效果

跟着大神做了个相册效果，顺便记录下基本的页面结构&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;相册切换 beign&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&
复制链接

扫一扫