基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）
菜鸟阿文 人气:0最近由于公司项目需要图片查看器，网上搜了一圈，感觉资料很少，所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件，实现了左右滑动，双指缩放，双击缩放功能，基本使用还行，但是有时候还是不太顺畅，后续会慢慢完善；写的不好的地方望各位能够给出好的建议，谢谢！
源码地址：https://github.com/GLwen/molong_photoSwipe.git
演示：http://runjs.cnhttps://img.qb5200.com/download-x/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>
加载全部内容