基于zepto.js实现手机相册功能

更新时间：2017年07月11日 17:19:16 作者：罗点点

这篇文章主要为大家详细介绍了基于zepto.js实现手机相册功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

看完老师的视频做的一个手机相册，对我这种菜鸟来说还是直接上代码吧！里面用到17张小图，17张大图，还有animate.css和zepto.min.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,h1,h2,h3,h4,h5,h6,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" style="display: none;">
 <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+'" style=" width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px "><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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js常用代码段收集
以下是平时收集的几个常用代码段，大多数是从网上搜集而来。也均为未找到是谁谁原创，是否允许转载等要求，所以如果看到的朋友发现其中有些代码是自己写的，还请原谅在下转帖出来。
2011-10-10
js中设置元素class的三种方法小结
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
2011-08-08
不使用中间变量，交换int型的 a, b两个变量的值。
群中的题目，不过这样大众脸的题想必大家都见过，就看能玩出什么新花招
2010-10-10
javascript实现动态显示颜色块的报表效果
本文主要介绍了javascript实现动态显示颜色块的报表效果的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
如何防止JavaScript中的正则表达式回溯
某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击,本文就来介绍一下如何防止JavaScript中的正则表达式回溯,感兴趣的可以了解一下
2023-08-08
JS实现状态栏跑马灯文字效果代码
这篇文章主要介绍了JS实现状态栏跑马灯文字效果代码,涉及JavaScript定时函数及流程控制的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
js保存当前路径(cookies记录)
曾经做了一个取消订单的功能。这个功能在个人中心里面有，在订单的详细页面也有。按照正常的思路，这两块都可以提交到相同的action去处理，但是返回的页面是不一样的，都是返回到当前页面就可以了。
2010-12-12
JavaScript函数防抖与函数节流的定义及使用详解
这篇文章主要为大家详细介绍一下JavaScript中函数防抖与函数节流的定义及使用，文中的示例代码讲解详细，对我们学习JS有一定帮助，需要的可以参考一下
2022-08-08
js控制网页背景音乐播放与停止的方法
这篇文章主要介绍了js控制网页背景音乐播放与停止的方法,实例分析了javascript控制背景音乐的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
javascript实现缓动动画效果
这篇文章主要为大家详细介绍了javascript实现缓动动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09