photoswipe 相冊組件 · PHP筆記

PhotoSwipe 是一個專門針對移動設備的圖像畫廊兼容大量的移動設備 ``` (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 = ""; 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); 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 set self.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; } }, _touchmove: function(e){ var self = this; e.preventDefault(); e.stopPropagation(); 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(); })(this); ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no"> <title></title> <style> 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; } /*彈框樣式*/ .imgzoom_pack { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .7); display: none; } .imgzoom_pack .imgzoom_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; background: black; } .imgzoom_pack .imgzoom_img img { width: 100%; position: absolute; top: 50%; } .informBlock { margin: 0 11% 22px; width: 78%; text-align: center; } .informBlock img { margin-bottom: 5px; max-height: 250px; max-width: 100%; border-radius: 2%; } </style> </head> <body> <div class='informBlock'> <img class="image_click" src="image_1.png"/> </div> <section class="imgzoom_pack"> <div class="imgzoom_x"> <div class="imgzoom_img"><img src=""/></div> </div> </section> <script src="js/scale.js"></script> <script type="text/javascript"> ImagesZoom.init({ "elem": ".informBlock" }); </script> </body> </html> ```