跟着大神做了个相册效果,顺便记录下
基本的页面结构
<!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>