跟着慕课网做了第一个webApp,实现一个移动端的相册管理器
首先,页面的布局很简单:一个放置小图的ul,和一个放置大图的容器(在点击之后才显示,小图情况下是隐藏大图的)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webApp相册的实现</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--<link rel="stylesheet" href="../style/base.css">-->
<script src="../js/zepto.min.js"></script>
<link rel="stylesheet" href="../style/animate.css">
<link rel="stylesheet" href="../style/index.css">
</head>
<body>
<div>
<ul class="img-container" id="container">
</ul>
<div class="large animated fadeInDown " id="large_container" style="display: none">
<img id="large_img">
</div>
</div>
<script src="../js/index.js"></script>
</body>
</html>
css样式就不说了,很简单
具体说一下js的实现过程
1、小图页面,为了适配更多的设备,要动态的获取对应屏幕的大小来动态设置显示图片的宽高
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 <= total;i++){
var p = padding;
var imgSrc = '../image/'+i+".jpg";
if(i % 4 == 1){
// 如果是每一行的第一张图,则没有padding
p = 0;
}
tmpl += '<li data-id="'+i+'" class="animated zoomIn" style = "width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;' +
'padding-top:'+ padding+'px;"><canvas id="cvs_'+i+'" ></canvas></li>';
//用canvas将图片画在画布上,而不是直接使用img
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);
}
2、在触摸小图时,视频中老师讲到用一个代理去实现,这个地方还有点没懂,代码如下
$('#container').delegate('li','tap',function () {
//触摸的事件绑定,使用代理
var _id = cid = $(this).attr('data-id');
loadImg(_id);
});
3、在小图页面点击图片时,跳转到相应的大图并且显示放置大图的容器,那么要有一个loadImg的函数
函数,加载图片的时候,要看图片时一张横图还是竖图,进而设置图片的显示的宽高
var loadImg = function (id,callback) {
$('#large_container').css({
width:zWin.width(),
height:zWin.height()
}).show();
var imgsrc = '../image/'+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 = winHeight * h / w;
var paddingTop = parseInt((winHeight - realh) / 2);
wImage.css('width','auto').css('height' ,'auto');
wImage.css('padding-top','0').css('padding-left','0');
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;
callback&&callback();
}
4、显示大图之后,要实现图片的左右滑动,这就用到了zepto.js。这里面加入了移动端touch的相关代码,可以实现我们所需要的大部分移动端滑动,比如左滑右滑双击等。左右滑动时,要有一个把之前的设置的样式清除的一个动作,所以这里用到了removeClass,removeEventListener。这里的animated bounceInRight就是animated里面已经设置好的一些样式,直接设置类名就可以实现一个左右滑动的效果。
$('#large_container').swipeLeft(function () {
cid++;
if(cid > total){
cid = total;
}else{
loadImg(cid,function () {
domImage.addEventListener('webkitAnimationEnd',function () {
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
},false);
wImage.addClass('animated bounceInRight')
});
}
});
5、单击大图时,关闭大图片及存放其的容器
$('#large_container').tap(function () {
$(this).hide();
});
整个代码在火狐浏览器下可以很好的运行,但是谷歌浏览器还不能实现左右滑动的效果,不知道是不是版本适配的问题???有待解决!!!