最近由于公司项目需要图片查看器，网上搜了一圈，感觉资料很少，所以决定基于百度的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"<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"-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)"-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 "-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"-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="/UploadFiles/2021-04-02/zepto.min.js">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）”评论...