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

2024-12-21 14:49:38

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

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

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

调用方式 :ImageView(index,imgData) --index参数为图片默认显示的索引值,类型为Number --imaData参数为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码代码如下: /* * ImageView v1.0.0 * --基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,N
JavaScript实现相册弹窗功能（zepto.js)

先看看弹窗效果,如下: //放大图片 $(page).on('click','.popupImage img',function () { var that = $(this); that.popupImage({ this:that, width:"200px" }) }); //相册弹窗 $.fn.popupImage = function (obj) { var $this = obj.this; var sj_w = $this[0].naturalHeight; var sr
基于zepto.js实现手机相册功能

看完老师的视频做的一个手机相册,对我这种菜鸟来说还是直接上代码吧!里面用到17张小图,17张大图,还有animate.css和zepto.min.js ,都可以在网上找到. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="w
省市选择的简单实现(基于zepto.js)

效果如下: <div class="clList overflow-h mt75"> <select class="pull-left cl-35 select01" id="cityParent"> <option>请选择省</option> </select> <select class="pull-left cl-35 select02" id="
基于 Immutable.js 实现撤销重做功能的实例代码

浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂.许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性.不过为一个应用实现撤销重做功能并不是一件容易的事情. Redux官方文档中介绍了如何在 redux 应用中实现撤销重做功能.基于 redux 的撤销功能是一个自顶向下的方案:引入 redux-undo 之后所有的操作都变为了「可撤销的」,然后我们不断修改其配置使得撤销功能变得越来越好用(这也是 r
Android开发实现保存图片到手机相册功能

本文实例讲述了Android开发实现保存图片到手机相册功能.分享给大家供大家参考,具体如下: 有一种很常见的需求,当保存图片的时候,客户需要在相册里面看到那张图片.有时候确实是保存成功了(通过IO流将图片写入了SDCard),但打开相册却看不到那张图片,需要在文件管理软件上才能找到那张图片,在网上找了许多文章,貌似都保存不到相册那里,这应该就是手机品牌的原因,有的品牌的手机能显示在相册里,有的品牌的手机却不能.解决这种问题,最简单粗暴的方法是,用那台手机拍一张照片,然后找到它,查看它的路径详情,
基于zepto.js实现登录界面

最近使用Zepto.js写的登陆界面,纯js界面,留下来,以后再写登陆可以直接使用了. 下面是效果图直接再html中先引入zepto.js的库,再插入下面的代码就可以实现了 createLoginArea(); function createLoginArea() { var field = $('<fieldset />'); field.css({ position:'absolute', width:'60vmin', height:'40vmin', border: '1px sol
基于vue.js实现分页查询功能

利用vue.js实现数据库分页,供大家参考,具体内容如下最新项目有一个分页功能,画面风格很简朴给的样图就用[1]表示页码了, 因此,我没有上网上找插件,自己简单的做了一个.作为菜鸟,代码可能有点青涩,请见谅. 除了vue我还引用了Bootstrap的类和图标 html <div class="paging"> <ul class="pagination" style="margin: 13px"> <li clas
基于zepto.js简单实现上传图片

效果如下: html: <div class="otherPic"> <div id="showOtherImage"></div> <span class="pull-left position_relative" id="openIdCardImg"> <span class="icon color-blue addPic"></spa
基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m
JS基于面向对象实现的拖拽功能示例

本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

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

相关推荐

随机推荐