这篇文章给大家分享的是有关如何基于zepto.js实现手机相册功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<title>photo</title>
<link rel="stylesheet" href="animate.css"/>
<script src="zepto.min.js"></script>
<style type="text/css">
blockquote,body,button,dd,dl,dt,fieldset,form,h2,h3,h4,h5,h6,h7,hr,input,legend,li,ol,p,pre,td,textarea,ul,li,img{
margin: 0;
padding: 0;
}
.clearfix::before,.clearfix::after{
content:"";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
body{
background-color: black;overflow: hidden;
}
ul{
list-style: none;
}
.container li{
float: left;
overflow: hidden;
}
.large{
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: black;
}
</style>
</head>
<body>
<ul class="container clearfix" id="container">
</ul>
<div class="large animated fadeInDown" id="large_container" >
<img id="large_img" />
</div>
<script>
var num=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 <=num; i++) {
var p = padding;
var imgSrc='img/'+i+'.jpg';
if (i%4==1) {
p=0;
}
tmpl+='<li class="animated bounceIn" data-id="'+i+'" ><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 domImage = wImage[0]; //image对象的DOM应用
var loadImg = function (id,callback) {
$('#container').css({height:zWin.height(),'overflow':'hidden'})
// $('#container').css({'display':'none'})
$('#large_container').css({
width:zWin.width(),
height:zWin.height()
}).show();
//加载大图
var imgsrc = 'img/'+id+'.large.jpg';
var imageObj = new Image();
imageObj.onload = function () {
var w = this.width; //图片的宽高
var h = this.height;
var winWidth = zWin.width(); //window的宽高
var winHidth = zWin.height();
var realw = winHidth*w/h;
var paddingLeft = parseInt((winWidth - realw)/2);
var realh = winWidth*h/w;
var paddingTop = parseInt((winHidth - realh)/2);
//横图和竖图切换时需要重置大图的css样式
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',winHidth).css('padding-left',paddingLeft)
}else{
wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop)
}
callback&&callback();
}
imageObj.src = imgsrc;
}
var cid;
//给LI做事件绑定；
$('#container').delegate('li','tap',function(){
var _id = cid = $(this).attr('data-id')
loadImg(_id)
});
//点击大图，返回相册
$('#large_container').tap(function() {
$('#container').css({height:'auto','overflow':'auto'})
// $('#container').css({'display':'block'})
$(this).hide();
}).swipeLeft(function(){
cid++;
if(cid>num){
cid = num;
}else{
loadImg(cid,function(){ //事件监听
domImage.addEventListener('webkitAnimationEnd',function(){ //动画结束之后执行函数
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd')
},false) //控制事件是否冒泡用false参数
wImage.addClass('animated bounceInRight');
});
}
}).swipeRight(function(){
cid--;
if(cid<1){
cid = 1;
}else{
loadImg(cid,function(){
domImage.addEventListener('webkitAnimationEnd',function(){
wImage.removeClass('animated bounceInLeft');
domImage.removeEventListener('webkitAnimationEnd')
},false)
wImage.addClass('animated bounceInLeft');
});
}
})
</script>
</body>
</html>感谢各位的阅读！关于“如何基于zepto.js实现手机相册功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
