(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 || {}, imgIndex = 0; 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"), zoomDel = document.querySelector(".imgzoom-pack .imgzoom-del"), imgSrc = ""; self.buffMove = 3; //缓冲系数 self.buffScale = 2; //放大系数 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); zoomDel.addEventListener("click", function(){ zoomMask.style.cssText = "display:none"; zoomImg.src = ""; zoomImg.style.cssText = ""; var imgLi=document.querySelectorAll(params.elem + " li"); if(params.delBack){ params.delBack(imgIndex); }; 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(); })(this);