基于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操作文本框readOnly
May 15 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
原生js+css调节音量滑块
2020/01/15 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
利用python开发app实战的方法
2019/07/09 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
某公司面试题
2012/03/05 面试题
博士生求职信
2014/07/06 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
升学宴祝酒词
2015/08/11 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书