html:
<template><div id="knowledge-base"><div class="knowledge-title">{{documentName}}</div><!--<div class="knowledge-path">知识库-后台应用-端口</div>--><div class="knowledge-sub">{{documentSubtitle}}</div><div class="content" v-html="documentContent" id="unique"></div><section class="imgzoom_pack"><div class="imgzoom_x">X</div><div class="imgzoom_img"><img src=""/></div></section></div></template>
css:
#knowledge-base{position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: px2rem(66) px2rem(60) 0;.knowledge-title{color: #303030;font-size: px2rem(53);line-height: px2rem(74);}.knowledge-path{margin-top: px2rem(26);font-size: px2rem(46);color: #A5A5A5;line-height: px2rem(65);}.knowledge-sub{line-height: px2rem(73);font-size: px2rem(52);color: #32B29D;;margin-top: px2rem(66);}.content{line-height: px2rem(70);font-size: px2rem(50);color: #404040;margin-top: px2rem(114);img{max-width: 100%;}}.company-logo {display: flex;justify-content: space-between;background: #ffffff;padding: 0 px2rem(66) 0;.logo-l {line-height: px2rem(288);font-size: px2rem(53);color: #303030;}.logo-r {position: relative;.img-logo {width: px2rem(212);height: px2rem(212);margin: px2rem(40) px2rem(80) 0 0;}.skip {position: absolute;top: px2rem(120);right: 0;width: px2rem(28);height: px2rem(56);}}.upload {opacity: 0;position: absolute;}&:active {background: #ededed;}}}.bgM{max-width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;background-color: rgba(0,0,0,0.95);overflow: hidden;}.bgM img{max-width: 100%;max-height: 95%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1001;margin: auto;}/*弹框样式*/.imgzoom_pack{width:100%;height:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,0.95);display:none;}.imgzoom_pack .imgzoom_x{color:#000;height:px2rem(90);width:px2rem(90);line-height:px2rem(90);background: #ffffff;text-align:center;position:absolute;right:px2rem(30);top:px2rem(30);border-radius: 50%;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%;}
js:
<script>import '../flexible/scale'import knowledgeService from 'service/knowledgeBase';export default {name: "knowledgeBase",data() {return {documentContent: "",documentName: "",documentSubtitle: "",}},created: function () {this.getDetails();document.title = '资料详情';},mounted: function () {var self = this;setTimeout(function () {self.initImage();},1000);},components: {fileUpload: function (resolve) {require(['../components/fileUpload.vue'], resolve);},alert: function (resolve) {require(['../components/modal.vue'], resolve);},message: function (resolve) {require(['../components/msg.vue'], resolve);},},methods: {getDetails: function () {var token = this.$route.query.token;var param = {params: {id: this.$route.params.id}};knowledgeService.getKnowledgeDetails(this, token, param);},initImage: function () {ImagesZoom.init({"elem": "#unique"});}}}</script>
scale.js:
(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 = "";console.log(imgList,'imgList...');self.buffMove = 3; //缓冲系数self.buffScale = 2; //放大系数self.finger = false; //触摸手指的状态 false：单手指 true：多手指self._destroy();zoomMask.addEventListener("click", function(){this.style.cssText = "display:none";zoomImg.src = "";zoomImg.style.cssText = "";//self._destroy();//document.removeEventListener("touchmove", self.eventStop, false);}, false);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.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");self.finger = true;}else{if(imgWidth < self.imgBaseWidth){self.element.style.width = self.imgBaseWidth + "px";}}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();})(window);
引用的js库地址：
/appue/touchzoom
如果觉得《vue项目 h5图片放大后 支持手指缩放功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
