基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)


Posted in Javascript onNovember 17, 2016

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善;写的不好的地方望各位能够给出好的建议,谢谢!

源码地址:https://github.com/GLwen/molong_photoSwipe.git

演示:http://runjs.cn/detail/iceaaogh

molong.css

*{padding:0;margin: 0;list-style: none;}
.syswin-swipe-show{display: block;}
.syswin-swipe-hide{display: none;}
/***大图****/
.molong-swiper{ position: fixed; top:0; left: 0; border: 1px solid #777e8c; overflow: hidden; z-index: 999; }
.molong-swiper-item{ float: left; overflow: scroll; background: #333333; text-align: center; }
.molong-swiper-item .img-div{ background-size: contain; background-position: center; background-repeat: no-repeat; }

.molong-img-list { list-style: none; padding: 0; margin: 0;}
.molong-img-list li { float: left; position: relative;margin-right: 10px;}
.molong-img-list li .img-bg { display: block; width: 100%; height: 100%;border: none;background-size:cover;background-position: center;background-repeat: no-repeat;}

molong.js

var molong=molong?molong:{};
molong.photoSwipe=function(options){
  //给大图查看器添加一个独立的容器
  var bigContainerString="<div class=\"molong-swiper syswin-swipe-hide\">"+
    "<ul id=\"bigImg\"></ul>"+
    "</div>";
  $("body").append(bigContainerString);
  var swipeSelf=this;
  var screenHeight=window.innerHeight;
  var screenWidth=window.innerWidth;
  var minImageWidth=screenWidth*0.25;//显示小图的宽高
  var bigIndex=0;     //大图索引
  var bigImgOffset=0;    //大图滑动的位置
  var bigImgLength=0;  //大图数量
  //缩放设置
  var initialScale = 1;  //初始缩放比例
  var currentScale=1;   //当前缩放比例
  var pinchSelf;     //当前缩放比例的对象
  var dragSelf;     //当前拖拽的对象
  //解析参数
  swipeSelf.options=$.extend({
    listContainer:$("ul"),
    swipeRigth:true,
    swipeLeft:true,
    pinch:true
  },options);
  //容器
  swipeSelf.listContainer=options.listContainer; //小图容器

  swipeSelf.swipeContainer=$("#bigImg"); //大图容器
  //阻止touchstart默认事件
  touch.on(this.swipeContainer, 'touchstart', function(ev){
    ev.preventDefault();
  });
  swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.3s");//设置动画事件
  //显示大图
  swipeSelf.showBigImg=function(){
    var imgs=swipeSelf.listContainer.find("li");
    var bigImgsUrl=[];
    var bigImgString="";
    bigImgLength=imgs.length;
    bigImgOffset=-screenWidth*bigIndex;
    for(var i=0;i<bigImgLength;i++){
      var bigImgUrl=$(imgs[i]).attr("big-url");
      bigImgsUrl.push(bigImgUrl);
      bigImgString+='<li class="molong-swiper-item"><div class="img-div" style="background-image: url('+bigImgUrl+')"></div></li>';
    }
    swipeSelf.swipeContainer.html(bigImgString);
    swipeSelf.swipeContainer.height(screenHeight);
    swipeSelf.swipeContainer.width(screenWidth*bigImgLength);
    $(".molong-swiper-item").height(screenHeight);
    $(".molong-swiper-item").width(screenWidth);
    $(".img-div").height(screenHeight);
    $(".img-div").width(screenWidth);
    swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
    $(".molong-swiper").show();
    //添加事件监听,监听查看大图
    if(swipeSelf.listenShow){
      swipeSelf.listenShow();
    }
  }
  //隐藏大图
  swipeSelf.hideBigImg=function() {
    $(".molong-swiper").hide();
    swipeSelf.swipeContainer.html("");
    if(swipeSelf.listenHide){
      swipeSelf.listenHide();
    }
  }
  //右滑动
  swipeSelf.swipeRight=function(){
    touch.on(swipeSelf.swipeContainer, 'swiperight',"li", function(ev){
      console.log("swiperight");
      if(swipeSelf.options.swipeRigth){
        //$(".img-div").css("-webkit-transform","translate3d(0px, 0px, 0px)");//元素移动复位
        swipeSelf.dx=0;
        swipeSelf.dy=0;
        console.log("向右滑动.");
        if(pinchSelf){
          pinchSelf.style.webkitTransform = 'scale(1)';
          currentScale=1;
        }
        bigImgOffset+=screenWidth;
        bigImgOffset=bigImgOffset>=0?0:bigImgOffset;
        swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.5s");//设置动画事件
        swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
      }
    });
  }
  //左滑动
  swipeSelf.swipeLeft=function(){
    touch.on(swipeSelf.swipeContainer, 'swipeleft','li', function(ev){
      console.log("swipeleft");
      if(swipeSelf.options.swipeLeft){
        console.log("向左滑动.");
        // $(".img-div").css("-webkit-transform","translate3d(0px, 0px, 0px)");//元素移动复位
        swipeSelf.dx=0;
        swipeSelf.dy=0;
        if(pinchSelf){
          pinchSelf.style.webkitTransform = 'scale(1)';
          currentScale=1;
        }
        bigImgOffset-=screenWidth;
        bigImgOffset=Math.abs(bigImgOffset)>=(screenWidth*bigImgLength)?(-screenWidth*(bigImgLength-1)):bigImgOffset;
        swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.5s");//设置动画事件
        swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
      }
    });
  }
  //缩放
  swipeSelf.pinche=function(){
    touch.on(swipeSelf.swipeContainer, 'pinchend',".img-div", function(ev){
      console.log("pinchend");
      if(swipeSelf.options.pinch){
        pinchSelf=this;
        currentScale = ev.scale - 1;
        currentScale = initialScale + currentScale;
        currentScale = currentScale > 2 ? 2 : currentScale;
        currentScale = currentScale < 1 ? 1 : currentScale;
        swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
        this.style.webkitTransform = 'scale(' + currentScale + ')';
        console.log("当前缩放比例为:" + currentScale + ".");
      }
    });
  }
  //双击放大缩小
  swipeSelf.doubletap=function(){
    touch.on(swipeSelf.swipeContainer, 'doubletap','.img-div', function(ev){
      //console.log(ev.type);
      pinchSelf=this;
      currentScale=currentScale>1?2:1;
      if(currentScale==1){
        currentScale=2;
        swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
        this.style.webkitTransform = 'scale(' + currentScale + ')';
      }else{
        currentScale=1;
        swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
        this.style.webkitTransform = 'scale(' + currentScale + ')';
      }
    });
  }
  //拖拽
  swipeSelf.dx=0;
  swipeSelf.dy=0;
  swipeSelf.drag=function(){
    touch.on(swipeSelf.swipeContainer, 'drag','.img-div', function(ev){
      if(currentScale>1){
        console.log("drag");
        dragSelf=this;
        swipeSelf.options.swipeLeft=false;
        swipeSelf.options.swipeRigth=false;
        swipeSelf.dx = swipeSelf.dx || 0;
        swipeSelf.dy = swipeSelf.dy || 0;
        console.log("当前x值为:" + swipeSelf.dx + ", 当前y值为:" + swipeSelf.dy +".");
        var offx = swipeSelf.dx + ev.x + "px";
        var offy = swipeSelf.dy + ev.y + "px";
        this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)"+" scale(" +currentScale +")";
      }
    });
    touch.on(swipeSelf.swipeContainer, 'dragend','.img-div', function(ev){
      console.log("dragend");
      swipeSelf.dx += ev.x;
      swipeSelf.dy += ev.y;
      swipeSelf.options.swipeLeft=true;
      swipeSelf.options.swipeRigth=true;
    });
  }
  //触发,查看大图
  swipeSelf.init=function(){
    //设置小图
    swipeSelf.listContainer.find(".img-bg").width(minImageWidth);
    swipeSelf.listContainer.find(".img-bg").height(minImageWidth);
    //添加绑定查看大图事件
    swipeSelf.listContainer.on("tap","li",function(){
      bigIndex=$(this).index();
      swipeSelf.showBigImg();
    });
    swipeSelf.swipeRight();//右滑动
    swipeSelf.swipeLeft();//左滑动
    swipeSelf.pinche();//缩放
    swipeSelf.drag();//拖拽
    swipeSelf.doubletap();//双击放大缩小
  }
  //事件监听
  swipeSelf.listen=function(type,callback){
    swipeSelf[type]=callback;
  }
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>图片查看器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <link rel="stylesheet" href="css/molong.css">
</head>
<body>
<ul id="imgList" class="molong-img-list">
  <li big-url="imges/1.jpg"><div class='img-bg' style="background-image:url(imges/1.jpg);"></div></li>
  <li big-url="imges/2.jpg"><div class='img-bg' style="background-image:url(imges/2.jpg);"></div></li>
  <li big-url="imges/3.jpg"><div class='img-bg' style="background-image:url(imges/3.jpg);"></div></li>
</ul>
<ul style="position: absolute;top:300px;left:0;z-index: 9999999;">
  <li><input style="height: 40px;width: 90px;text-align: center;" type="button" value="addImg" id="addBtn"/></li>
  <li style="margin-top: 30px;"><input style="height: 40px;width: 90px;text-align: center;" type="button" value="closeImg" id="addClose"/></li>
</ul>
<script src="js/zepto.min.js"></script>
<script src="js/touch.min.js"></script>
<script src="js/molong.js"></script>
<script>
  $(function(){
    //添加大图容器
    var screenHeight=window.innerHeight;
    var screenWidth=window.innerWidth;
    var minImageWidth=screenWidth*0.25;//显示小图的宽高
    var mySwipe=new molong.photoSwipe({listContainer:$("#imgList")});
    mySwipe.init();
    //关闭图片查看器
    $("#addClose").on("tap",function(){
      mySwipe.hideBigImg();
    });
    $("#addBtn").on("click",function(){
      console.log(this);
      var addImg1='<li big-url="imges/4.jpg"><div class="img-bg" style="background-image:url(imges/4.jpg);"></div></li>';
      mySwipe.listContainer.append(addImg1);
      mySwipe.listContainer.find(".img-bg").width(minImageWidth);
      mySwipe.listContainer.find(".img-bg").height(minImageWidth);
    })
    //显示大图监听
    mySwipe.listen("listenShow",function(){
      alert("打开大图");
    });
    //关闭大图监听
    mySwipe.listen("listenHide",function(){
      alert("关闭大图");
    });
  });
</script>
</body>
</html>

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

Javascript 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
移动端js图片查看器
Nov 17 #Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 #Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 #Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 #Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP微信分享开发详解
2017/01/14 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python如何统计序列中元素
2020/07/31 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python 爬取疫情数据的源码
2020/02/09 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python自动化发送邮件实例讲解
2021/01/04 Python
小学教师事迹材料
2014/01/13 职场文书
大家检讨书5000字
2014/02/03 职场文书
班级德育工作实施方案
2014/02/21 职场文书
中学生家长评语大全
2014/04/16 职场文书
詹天佑教学反思
2014/04/30 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书