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


Posted in Javascript onJuly 11, 2017

看完老师的视频做的一个手机相册,对我这种菜鸟来说还是直接上代码吧!里面用到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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
详解Webpack DLL用法以及功能
Jul 11 #Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 #Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 #Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
python+pyqt5编写md5生成器
2019/03/18 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
Java程序员面试90题
2013/10/19 面试题
党建示范点实施方案
2014/03/12 职场文书
数据保密承诺书
2014/06/03 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2014年村官工作总结
2014/11/24 职场文书
二婚主持词
2015/06/30 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS