方法1
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0px;margin:0px;}html{height:100%;}body{height:100%;}.main{width: 3.75rem;position: relative;height:100%; margin: 0 auto; background: #eee}.main h1{font-size:0.16rem;}.main img{max-width: 100%}.box {width: 3.75rem;height:100%;background: #333;position: absolute;top:0px;left:0px;margin: 0 auto;align-items: center; /*定义body的元素垂直居中*/justify-content: center; /*定义body的里的元素水平居中*/display: none;overflow: hidden}.box img{width:100%;position: absolute;}</style><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script type="text/javascript">(function (doc, win) {//这段代码是做手机端rem适应的var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (clientWidth>640){clientWidth=640 }if (!clientWidth) return;else{docEl.style.fontSize = clientWidth / 3.75 + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);</script></head><body><div class="main"><h1>点击这个图片进行预览</h1><img src="/timg?image&quality=80&size=b9999_10000&sec=1545628346247&di=f2fcd4f88291e0f60d6599602ee8ab20&imgtype=jpg&src=http%3A%2F%2Fimg1.%2Fit%2Fu%3D3304533311%2C1137740692%26fm%3D214%26gp%3D0.jpg"/><div class="box"><img src="" /></div></div><script src="/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var pimg=document.querySelector("img");var oImg = document.querySelector(".box img");var oBox = document.querySelector(".box");pimg.onclick=function(){oBox.style.display="flex"oImg.src=pimg.src}oBox.onclick=function(){oBox.style.display="none"oImg.src=''}var hammer = new Hammer(oImg);//hammer实例化hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能hammer.on("panstart", function(event) {var left = oImg.offsetLeft;var tp = oImg.offsetTop;hammer.on("panmove", function(event) {oImg.style.left = left + event.deltaX + 'px';oImg.style.top = tp + event.deltaY + 'px';});})hammer.on("pinchstart", function(e) {hammer.on("pinchout", function(e) {oImg.style.transition = "-webkit-transform 300ms ease-out";oImg.style.webkitTransform = "scale(2.5)";});hammer.on("pinchin", function(e) {oImg.style.transition = "-webkit-transform 300ms ease-out";oImg.style.webkitTransform = "scale(1)";});})</script></body></html>
正常一般网站用到的都是插件，比如swiper，个人认为比较好用，直接引用代码就可以了，谢谢浏览
方法2
html实例代码:
缩放的图片需要放在class 为list 的div里面
<!doctype html>
X
实现缩放 需要导入 scale.css 和 scale.js
scale.css代码:
/rest/
body, ul, li, section, div{
padding:0;
margin:0;
}
body{
font-family:Arial,Roboto,‘Droid Sans’,‘Hiragino Sans GB’,STXihei,‘sans-serif’;
width:100%;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
ul,li{
list-style:none;
}
img{
border:0;
}
.list{
width:100%;
padding:10px 0;
}
.list li{
display:block;
margin-bottom:10px;
box-shadow:0 1px 2px rgba(0,0,0,.1), 0 -1px 2px rgba(0,0,0,.1);
}
.list li img{
width:100%;
height:auto;
}
/弹框样式/
.imgzoom_pack{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:rgba(0,0,0,.7);
display:none;
}
.imgzoom_pack .imgzoom_x{
color:#fff;
height:30px;
width:30px;
line-height:30px;
background:#000;
text-align:center;
position:absolute;
right:5px;
top:5px;
z-index:10;
cursor:pointer;
}
.imgzoom_pack .imgzoom_img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
overflow:hidden;
}
.imgzoom_pack .imgzoom_img img{
width:100%;
position:absolute;
top:50%;
}
scale.js的代码:
我对scale.js 做了一点修改 实现了同比例缩放:
self.element.style.height = imgHeight + “px” //实现同比例缩放 需要改变图片width的同时 改变height
self.element.style.height = self.imgBaseHeight + “px” //实现同比例缩放 需要改变图片width的同时 改变height
(function(window, undefined){
var document = window.document,
support = {
transform3d: (“WebKitCSSMatrix” in window && “m11” in new WebKitCSSMatrix()),
touch: (“ontouchstart” in window)
};
function getTranslate(x, y){var distX = x, distY = y;return support.transform3d ? "translate3d("+ distX +"px, "+ distY +"px, 0)" : "translate("+ distX +"px, "+ distY +"px)";}function getPage(event, page) {return support.touch ? event.changedTouches[0] : event;}var ImagesZoom = function(){};ImagesZoom.prototype = {// 给初始化数据init: function(param){var self = this,params = param || {};var imgList = document.querySelectorAll(params.elem + " img"),zoomMask = document.querySelector(".imgzoom_pack"),zoomImg = document.querySelector(".imgzoom_pack .imgzoom_img img"),zoomClose = document.querySelector(".imgzoom_pack .imgzoom_x"),imgSrc = "";self.buffMove = 3; //缓冲系数self.buffScale = 1.1; //放大系数self.finger = false; //触摸手指的状态 false：单手指 true：多手指self._destroy();zoomClose.addEventListener("click", function(){zoomMask.style.cssText = "display:none";zoomImg.src = "";zoomImg.style.cssText = "";self._destroy();document.removeEventListener("touchmove", self.eventStop, false);}, false);for(var len=imgList.length,i=0; i<len; i++){imgList[i].addEventListener("click", function(){imgSrc = this.getAttribute("src");zoomMask.style.cssText = "display:block";zoomImg.src = imgSrc;zoomImg.onload = function(){zoomImg.style.cssText = "margin-top:-"+(zoomImg.offsetHeight/2)+"px";// 禁止页面滚动document.addEventListener("touchmove", self.eventStop, false);self.imgBaseWidth = zoomImg.offsetWidth;self.imgBaseHeight = zoomImg.offsetHeight;self.addEventStart({wrapX: zoomMask.offsetWidth,wrapY: zoomMask.offsetHeight,mapX: zoomImg.width,mapY: zoomImg.height});}}, false);}},addEventStart: function(param){var self = this,params = param || {};self.element = document.querySelector(".imgzoom_pack img");//config setself.wrapX = params.wrapX || 0;//可视区域宽度self.wrapY = params.wrapY || 0;//可视区域高度self.mapX = params.mapX || 0;//地图宽度self.mapY = params.mapY || 0;//地图高度self.outDistY = (self.mapY - self.wrapY)/2; //图片超过一屏的时候有用self.width = self.mapX - self.wrapX; //地图的宽度减去可视区域的宽度self.height = self.mapY - self.wrapY; //地图的高度减去可视区域的高度self.element.addEventListener("touchstart",function(e){self._touchstart(e);},false);self.element.addEventListener("touchmove",function(e){self._touchmove(e);},false);self.element.addEventListener("touchend",function(e){self._touchend(e);},false);},// 重置坐标数据_destroy: function(){this.distX = 0;this.distY = 0;this.newX = 0;this.newY = 0;},// 更新地图信息_changeData: function(){this.mapX= this.element.offsetWidth;//地图宽度this.mapY= this.element.offsetHeight;//地图高度// this.outDistY = (this.mapY - this.wrapY)/2; //当图片高度超过屏幕的高度时候。图片是垂直居中的，这时移动有个高度做为缓冲带this.width = this.mapX - this.wrapX; //地图的宽度减去可视区域的宽度this.height = this.mapY - this.wrapY; //地图的高度减去可视区域的高度},_touchstart: function(e){var self = this;e.preventDefault();var touchTarget = e.targetTouches.length; //获得触控点数self._changeData(); //重新初始化图片、可视区域数据，由于放大会产生新的计算if(touchTarget == 1){// 获取开始坐标self.basePageX = getPage(e, "pageX");self.basePageY = getPage(e, "pageY");self.finger = false;}else{self.finger = true;self.startFingerDist = self.getTouchDist(e).dist;self.startFingerX = self.getTouchDist(e).x;self.startFingerY = self.getTouchDist(e).y;}console.log("pageX: "+getPage(e, "pageX"));console.log("pageY: "+getPage(e, "pageY"));},_touchmove: function(e){var self = this;e.preventDefault();e.stopPropagation();console.log("event.changedTouches[0].pageY: "+event.changedTouches[0].pageY);var touchTarget = e.targetTouches.length; //获得触控点数if(touchTarget == 1 && !self.finger){self._move(e);}if(touchTarget>=2){self._zoom(e);}},_touchend: function(e){var self = this;self._changeData(); //重新计算数据if(self.finger){self.distX = -self.imgNewX;self.distY = -self.imgNewY;}if( self.distX>0 ){self.newX = 0;}else if( self.distX<=0 && self.distX>=-self.width ){self.newX = self.distX;self.newY = self.distY;}else if( self.distX<-self.width ){self.newX = -self.width;}self.reset();},_move: function(e){var self = this,pageX = getPage(e, "pageX"), //获取移动坐标pageY = getPage(e, "pageY");// 禁止默认事件// e.preventDefault();// e.stopPropagation();// 获得移动距离self.distX = (pageX - self.basePageX) + self.newX;self.distY = (pageY - self.basePageY) + self.newY;if(self.distX > 0){self.moveX = Math.round(self.distX/self.buffMove);}else if( self.distX<=0 && self.distX>=-self.width ){self.moveX = self.distX;}else if(self.distX < -self.width ){self.moveX = -self.width+Math.round((self.distX+self.width)/self.buffMove);}self.movePos();self.finger = false;},// 图片缩放_zoom: function(e){var self = this;// e.preventDefault();// e.stopPropagation();var nowFingerDist = self.getTouchDist(e).dist, //获得当前长度ratio = nowFingerDist / self.startFingerDist, //计算缩放比imgWidth= Math.round(self.mapX * ratio), //计算图片宽度imgHeight= Math.round(self.mapY * ratio); //计算图片高度// 计算图片新的坐标self.imgNewX = Math.round(self.startFingerX * ratio - self.startFingerX - self.newX * ratio);self.imgNewY = Math.round((self.startFingerY * ratio - self.startFingerY)/2 - self.newY * ratio);if(imgWidth >= self.imgBaseWidth){self.element.style.width = imgWidth + "px";self.element.style.height = imgHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变heightself.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");self.finger = true; }else{if(imgWidth < self.imgBaseWidth){ //缩放时 当前图片的宽度width 小于 原本的图片宽度时self.element.style.width = self.imgBaseWidth + "px";self.element.style.height = self.imgBaseHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height}}self.finger = true;},// 移动坐标movePos: function(){var self = this;if(self.height<0){if(self.element.offsetWidth == self.imgBaseWidth){self.moveY = Math.round(self.distY/self.buffMove);}else{var moveTop = Math.round((self.element.offsetHeight-self.imgBaseHeight)/2);self.moveY = -moveTop + Math.round((self.distY + moveTop)/self.buffMove);}}else{var a = Math.round((self.wrapY - self.imgBaseHeight)/2),b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;if(self.distY >= -a){self.moveY = Math.round((self.distY + a)/self.buffMove) - a;}else if(self.distY <= -b){self.moveY = Math.round((self.distY + b)/self.buffMove) - b;}else{self.moveY = self.distY;}}self.refresh(self.moveX, self.moveY, "0s", "ease");},// 重置数据reset: function(){var self = this,hideTime = ".2s";if(self.height<0){self.newY = -Math.round(self.element.offsetHeight - self.imgBaseHeight)/2;}else{var a = Math.round((self.wrapY - self.imgBaseHeight)/2),b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;if(self.distY >= -a){self.newY = -a;}else if(self.distY <= -b){self.newY = -b;}else{self.newY = self.distY;}}self.refresh(self.newX, self.newY, hideTime, "ease-in-out");},// 执行图片移动refresh: function(x, y, timer, type){this.element.style.webkitTransitionProperty = "-webkit-transform";this.element.style.webkitTransitionDuration = timer;this.element.style.webkitTransitionTimingFunction = type;this.element.style.webkitTransform = getTranslate(x, y);},// 获取多点触控getTouchDist: function(e){var x1 = 0,y1 = 0,x2 = 0,y2 = 0,x3 = 0,y3 = 0,result = {};x1 = e.touches[0].pageX;x2 = e.touches[1].pageX;y1 = e.touches[0].pageY - document.body.scrollTop;y2 = e.touches[1].pageY - document.body.scrollTop;if(!x1 || !x2) return;if(x1<=x2){x3 = (x2-x1)/2+x1;}else{x3 = (x1-x2)/2+x2;}if(y1<=y2){y3 = (y2-y1)/2+y1;}else{y3 = (y1-y2)/2+y2;}result = {dist: Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))),x: Math.round(x3),y: Math.round(y3)};return result;},eventStop: function(e){e.preventDefault();e.stopPropagation();}};window.ImagesZoom = new ImagesZoom();
})(this);
以上代码 可以实现 点击一张图片 出现一个全屏的效果 点击全屏中的图片 可以进行双指 缩放
配合 Swiper 滑动插件时 出现了 点击打开全频 全屏在swiper遮挡在Swiper下面的问题html实例代码:
缩放的图片需要放在class 为list 的div里面
<!doctype html>
X
实现缩放 需要导入 scale.css 和 scale.js
scale.css代码:
/rest/
body, ul, li, section, div{
padding:0;
margin:0;
}
body{
font-family:Arial,Roboto,‘Droid Sans’,‘Hiragino Sans GB’,STXihei,‘sans-serif’;
width:100%;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
ul,li{
list-style:none;
}
img{
border:0;
}
.list{
width:100%;
padding:10px 0;
}
.list li{
display:block;
margin-bottom:10px;
box-shadow:0 1px 2px rgba(0,0,0,.1), 0 -1px 2px rgba(0,0,0,.1);
}
.list li img{
width:100%;
height:auto;
}
/弹框样式/
.imgzoom_pack{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:rgba(0,0,0,.7);
display:none;
}
.imgzoom_pack .imgzoom_x{
color:#fff;
height:30px;
width:30px;
line-height:30px;
background:#000;
text-align:center;
position:absolute;
right:5px;
top:5px;
z-index:10;
cursor:pointer;
}
.imgzoom_pack .imgzoom_img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
overflow:hidden;
}
.imgzoom_pack .imgzoom_img img{
width:100%;
position:absolute;
top:50%;
}
scale.js的代码:
我对scale.js 做了一点修改 实现了同比例缩放:
self.element.style.height = imgHeight + “px” //实现同比例缩放 需要改变图片width的同时 改变height
self.element.style.height = self.imgBaseHeight + “px” //实现同比例缩放 需要改变图片width的同时 改变height钱咖
(function(window, undefined){
var document = window.document,
support = {
transform3d: (“WebKitCSSMatrix” in window && “m11” in new WebKitCSSMatrix()),
touch: (“ontouchstart” in window)
};
function getTranslate(x, y){var distX = x, distY = y;return support.transform3d ? "translate3d("+ distX +"px, "+ distY +"px, 0)" : "translate("+ distX +"px, "+ distY +"px)";}function getPage(event, page) {return support.touch ? event.changedTouches[0] : event;}var ImagesZoom = function(){};ImagesZoom.prototype = {// 给初始化数据init: function(param){var self = this,params = param || {};var imgList = document.querySelectorAll(params.elem + " img"),zoomMask = document.querySelector(".imgzoom_pack"),zoomImg = document.querySelector(".imgzoom_pack .imgzoom_img img"),zoomClose = document.querySelector(".imgzoom_pack .imgzoom_x"),imgSrc = "";self.buffMove = 3; //缓冲系数self.buffScale = 1.1; //放大系数self.finger = false; //触摸手指的状态 false：单手指 true：多手指self._destroy();zoomClose.addEventListener("click", function(){zoomMask.style.cssText = "display:none";zoomImg.src = "";zoomImg.style.cssText = "";self._destroy();document.removeEventListener("touchmove", self.eventStop, false);}, false);for(var len=imgList.length,i=0; i<len; i++){imgList[i].addEventListener("click", function(){imgSrc = this.getAttribute("src");zoomMask.style.cssText = "display:block";zoomImg.src = imgSrc;zoomImg.onload = function(){zoomImg.style.cssText = "margin-top:-"+(zoomImg.offsetHeight/2)+"px";// 禁止页面滚动document.addEventListener("touchmove", self.eventStop, false);self.imgBaseWidth = zoomImg.offsetWidth;self.imgBaseHeight = zoomImg.offsetHeight;self.addEventStart({wrapX: zoomMask.offsetWidth,wrapY: zoomMask.offsetHeight,mapX: zoomImg.width,mapY: zoomImg.height});}}, false);}},addEventStart: function(param){var self = this,params = param || {};self.element = document.querySelector(".imgzoom_pack img");//config setself.wrapX = params.wrapX || 0;//可视区域宽度self.wrapY = params.wrapY || 0;//可视区域高度self.mapX = params.mapX || 0;//地图宽度self.mapY = params.mapY || 0;//地图高度self.outDistY = (self.mapY - self.wrapY)/2; //图片超过一屏的时候有用self.width = self.mapX - self.wrapX; //地图的宽度减去可视区域的宽度self.height = self.mapY - self.wrapY; //地图的高度减去可视区域的高度self.element.addEventListener("touchstart",function(e){self._touchstart(e);},false);self.element.addEventListener("touchmove",function(e){self._touchmove(e);},false);self.element.addEventListener("touchend",function(e){self._touchend(e);},false);},// 重置坐标数据_destroy: function(){this.distX = 0;this.distY = 0;this.newX = 0;this.newY = 0;},// 更新地图信息_changeData: function(){this.mapX= this.element.offsetWidth;//地图宽度this.mapY= this.element.offsetHeight;//地图高度// this.outDistY = (this.mapY - this.wrapY)/2; //当图片高度超过屏幕的高度时候。图片是垂直居中的，这时移动有个高度做为缓冲带this.width = this.mapX - this.wrapX; //地图的宽度减去可视区域的宽度this.height = this.mapY - this.wrapY; //地图的高度减去可视区域的高度},_touchstart: function(e){var self = this;e.preventDefault();var touchTarget = e.targetTouches.length; //获得触控点数self._changeData(); //重新初始化图片、可视区域数据，由于放大会产生新的计算if(touchTarget == 1){// 获取开始坐标self.basePageX = getPage(e, "pageX");self.basePageY = getPage(e, "pageY");self.finger = false;}else{self.finger = true;self.startFingerDist = self.getTouchDist(e).dist;self.startFingerX = self.getTouchDist(e).x;self.startFingerY = self.getTouchDist(e).y;}console.log("pageX: "+getPage(e, "pageX"));console.log("pageY: "+getPage(e, "pageY"));},_touchmove: function(e){var self = this;e.preventDefault();e.stopPropagation();console.log("event.changedTouches[0].pageY: "+event.changedTouches[0].pageY);var touchTarget = e.targetTouches.length; //获得触控点数if(touchTarget == 1 && !self.finger){self._move(e);}if(touchTarget>=2){self._zoom(e);}},_touchend: function(e){var self = this;self._changeData(); //重新计算数据if(self.finger){self.distX = -self.imgNewX;self.distY = -self.imgNewY;}if( self.distX>0 ){self.newX = 0;}else if( self.distX<=0 && self.distX>=-self.width ){self.newX = self.distX;self.newY = self.distY;}else if( self.distX<-self.width ){self.newX = -self.width;}self.reset();},_move: function(e){var self = this,pageX = getPage(e, "pageX"), //获取移动坐标pageY = getPage(e, "pageY");// 禁止默认事件// e.preventDefault();// e.stopPropagation();// 获得移动距离self.distX = (pageX - self.basePageX) + self.newX;self.distY = (pageY - self.basePageY) + self.newY;if(self.distX > 0){self.moveX = Math.round(self.distX/self.buffMove);}else if( self.distX<=0 && self.distX>=-self.width ){self.moveX = self.distX;}else if(self.distX < -self.width ){self.moveX = -self.width+Math.round((self.distX+self.width)/self.buffMove);}self.movePos();self.finger = false;},// 图片缩放_zoom: function(e){var self = this;// e.preventDefault();// e.stopPropagation();var nowFingerDist = self.getTouchDist(e).dist, //获得当前长度ratio = nowFingerDist / self.startFingerDist, //计算缩放比imgWidth= Math.round(self.mapX * ratio), //计算图片宽度imgHeight= Math.round(self.mapY * ratio); //计算图片高度// 计算图片新的坐标self.imgNewX = Math.round(self.startFingerX * ratio - self.startFingerX - self.newX * ratio);self.imgNewY = Math.round((self.startFingerY * ratio - self.startFingerY)/2 - self.newY * ratio);if(imgWidth >= self.imgBaseWidth){self.element.style.width = imgWidth + "px";self.element.style.height = imgHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变heightself.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");self.finger = true; }else{if(imgWidth < self.imgBaseWidth){ //缩放时 当前图片的宽度width 小于 原本的图片宽度时self.element.style.width = self.imgBaseWidth + "px";self.element.style.height = self.imgBaseHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height}}self.finger = true;},// 移动坐标movePos: function(){var self = this;if(self.height<0){if(self.element.offsetWidth == self.imgBaseWidth){self.moveY = Math.round(self.distY/self.buffMove);}else{var moveTop = Math.round((self.element.offsetHeight-self.imgBaseHeight)/2);self.moveY = -moveTop + Math.round((self.distY + moveTop)/self.buffMove);}}else{var a = Math.round((self.wrapY - self.imgBaseHeight)/2),b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;if(self.distY >= -a){self.moveY = Math.round((self.distY + a)/self.buffMove) - a;}else if(self.distY <= -b){self.moveY = Math.round((self.distY + b)/self.buffMove) - b;}else{self.moveY = self.distY;}}self.refresh(self.moveX, self.moveY, "0s", "ease");},// 重置数据reset: function(){var self = this,hideTime = ".2s";if(self.height<0){self.newY = -Math.round(self.element.offsetHeight - self.imgBaseHeight)/2;}else{var a = Math.round((self.wrapY - self.imgBaseHeight)/2),b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;if(self.distY >= -a){self.newY = -a;}else if(self.distY <= -b){self.newY = -b;}else{self.newY = self.distY;}}self.refresh(self.newX, self.newY, hideTime, "ease-in-out");},// 执行图片移动refresh: function(x, y, timer, type){this.element.style.webkitTransitionProperty = "-webkit-transform";this.element.style.webkitTransitionDuration = timer;this.element.style.webkitTransitionTimingFunction = type;this.element.style.webkitTransform = getTranslate(x, y);},// 获取多点触控getTouchDist: function(e){var x1 = 0,y1 = 0,x2 = 0,y2 = 0,x3 = 0,y3 = 0,result = {};x1 = e.touches[0].pageX;x2 = e.touches[1].pageX;y1 = e.touches[0].pageY - document.body.scrollTop;y2 = e.touches[1].pageY - document.body.scrollTop;if(!x1 || !x2) return;if(x1<=x2){x3 = (x2-x1)/2+x1;}else{x3 = (x1-x2)/2+x2;}if(y1<=y2){y3 = (y2-y1)/2+y1;}else{y3 = (y1-y2)/2+y2;}result = {dist: Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))),x: Math.round(x3),y: Math.round(y3)};return result;},eventStop: function(e){e.preventDefault();e.stopPropagation();}};window.ImagesZoom = new ImagesZoom();
})(this);
以上代码 可以实现 点击一张图片 出现一个全屏的效果 点击全屏中的图片 可以进行双指 缩放。闲赚米/
配合 Swiper 滑动插件时 出现了 点击打开全频 全屏在swiper遮挡在Swiper下面的问题
解决办法:
将 最外两层的 z-index 设置为0
2222
