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

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的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>

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

(0)

相关推荐

  • hammer.js实现图片手势放大效果

    本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下 //图片手势放大 var reqAnimationFrame = (function() { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var el = $('img');

  • 基于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图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下 这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • CSS+JS构建的图片查看器

    这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) {  if (document.getElementById) {   document.getElementById('placeholder').src = whichpic.href; if (whichp

  • js图片查看器插件用法示例

    本文实例讲述了js图片查看器插件.分享给大家供大家参考,具体如下: 首先 在github上下载 js,css点击打开链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/

  • jQuery 图片查看器插件 Viewer.js用法简单示例

    本文实例讲述了jQuery 图片查看器插件 Viewer.js用法.分享给大家供大家参考,具体如下: html: <!-- 引入文件 --> <link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" > <script src="/js/viewer.min.js"></script> &l

  • vue基于viewer实现的图片查看器功能

    vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 [http://fengyuanchen.github.io...] 插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画,所以vue2-viewer主要实用场景是现代浏览器中. 使用文档 安装 npm

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • 基于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

  • 基于代数方程库Algebra.js解二元一次方程功能示例

    本文实例讲述了基于代数方程库Algebra.js解二元一次方程功能.分享给大家供大家参考,具体如下: 假设二元一次方程如下: x + y = 11 x - y = 5 解方程如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont

随机推荐