vue项目，h5图片放大后，支持手指缩放功能
html:
{{documentName}}
{{documentSubtitle}}
X
![]()
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:
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][page] : event[page];
}
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=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库地址：
https://github.com/appue/touchzoom