基於zepto.js實現仿手機QQ空間的大圖查看組件ImageView.js詳解

 這篇文章主要介紹了基於zepto.js實現仿手機QQ空間的大圖查看組件ImageView.js的源碼和使用方法，並附上一個使用ImageView.js的實例，這裡分享給大家，有需要的小伙伴參考下。

   

調用方式 :ImageView(index,imgData) --index參數 為圖片默認顯示的索引值，類型 為Number --imaData參數 為圖片url數組 ，類型為Array

使用之前要先引入 zepto.js 文件

ImageView.js具體代碼如下：

 

代碼如下:
/*
* ImageView v1.0.0
* --基於zepto.js的大圖查看
* --調用方法 ImageView(index,imgDada)
* --index 圖片默認值顯示索引,Number --imgData 圖片url數組,Array
* */
var ImageView=(function(window,$){
var _this=$("#slideView"),_ImgData=[],_index=0,_length=0,
_start=[],_org=[],_orgTime=null,
_lastTapDate=null,
_zoom=1,_zoomXY=[0,0],_transX=null,
_advancedSupport = false,
_doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = false,
isSlide=true,isDrag=false,timer=null,
winW=window.innerWidth,winH=window.innerHeight;
/**
* 事件對象 event
*/
var Event={
touchstart:function(e){
e.preventDefault();
if (_advancedSupport && e.touches && e.touches.length >= 2) {
var img = getImg();
$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});
_doubleZoomOrg = _zoom;
_doubleDistOrg = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);
isDoubleZoom = true;
return
}
e = e.touches ? e.touches[0] : e;
isDoubleZoom = false;
_start = [e.pageX, e.pageY];
_org = [e.pageX, e.pageY];
_orgTime = Date.now();
_transX = -_index * winW;
if(_zoom!=1){
_zoomXY = _zoomXY || [0, 0];
_orgZoomXY = [_zoomXY[0], _zoomXY[1]];
var img = getImg();
img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));
isDrag = true
}else{
_this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});
isSlide = true
}
},
touchmove:function(e){
e.preventDefault();
if (_advancedSupport && e.touches && e.touches.length >= 2) {
var newDist = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);
_zoom = (newDist/_doubleDistOrg) * _doubleZoomOrg
var img = getImg();
$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});
if (_zoom < 1) {
_zoom = 1;
_zoomXY = [0, 0];
$(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})
} else if (_zoom >getScale(img) * 2){
_zoom = getScale(img) * 2;
}
$(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});
return
}
if (isDoubleZoom){
return;
}
e = e.touches ? e.touches[0] : e;
if (_zoom != 1) {
var deltaX = (e.pageX - _start[0]) / _zoom;
var deltaY = (e.pageY - _start[1]) / _zoom;
_start = [e.pageX, e.pageY];
var img = getImg();
var newWidth = img.clientWidth *_zoom,
newHeight = img.clientHeight * _zoom;
var borderX = (newWidth - winW) / 2 / _zoom,
borderY = (newHeight - winH) / 2 / _zoom;
(borderX >= 0)&&(_zoomXY[0] < -borderX || _zoomXY[0] > borderX)&&(deltaX /= 3);
(borderY > 0)&&(_zoomXY[1] < -borderY || _zoomXY[1] > borderY)&&(deltaY /= 3);
_zoomXY[0] += deltaX;
_zoomXY[1] += deltaY;
(_length == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);
(_length == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);
$(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] +
"px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] +
"px," + _zoomXY[1] + "px)"})
}else{
if (!isSlide) return;
var deltaX = e.pageX - _start[0];
(_transX > 0 || _transX < -winW * (_length - 1))&&(deltaX /= 4);
_transX = -_index * winW + deltaX;
_this.find(".pv-inner").css({"-webkit-transform":"translate(" + _transX + "px,0px) translateZ(0)"});
}
},
touchend:function(e){
if (isDoubleZoom) {
return;
}
if (_zoom != 1) {
if (!isDrag){return;}
var img = getImg();
var newWidth = img.clientWidth *_zoom,
newHeight = img.clientHeight * _zoom;
var borderX = (newWidth - winW) / 2 / _zoom,
borderY = (newHeight - winH) / 2 / _zoom;
if (_length > 1 && borderX >= 0) {
var updateDelta = 0;
var switchDelta = winW / 6;
if (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _length - 1){
updateDelta = 1;
}else if (_zoomXY[0] > borderX + switchDelta / _zoom && _index > 0){
updateDelta = -1;
}
if (updateDelta != 0) {
scaleDown(img);
changeIndex(_index + updateDelta);
return
}
}
var delta = Date.now() - _orgTime;
if (delta < 300) {
(delta <= 10)&&(delta = 10);
var deltaDis = Math.pow(180 / delta, 2);
_zoomXY[0] += (_zoomXY[0] - _orgZoomXY[0]) * deltaDis;
_zoomXY[1] += (_zoomXY[1] - _orgZoomXY[1]) * deltaDis;
$(img).css({"-webkit-transition": "400ms cubic-bezier(0.08,0.65,0.79,1)","transition": "400ms cubic-bezier(0.08,0.65,0.79,1)"})
} else{
$(img).css({"-webkit-transition": "200ms linear","transition": "200ms linear"});
}
if (borderX >= 0){
if (_zoomXY[0] < -borderX){
_zoomXY[0] = -borderX;
}else if (_zoomXY[0] > borderX){
_zoomXY[0] = borderX;
}
}
if (borderY > 0){
if (_zoomXY[1] < -borderY){
_zoomXY[1] = -borderY;
}else if (_zoomXY[1] >borderY){
_zoomXY[1] = borderY;
}
}
if (Math.abs(_zoomXY[0]) < 10) {
$(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)"});
return
} else{
$(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});
}
isDrag = false
}else{
if (!isSlide){ return;}
var deltaX = _transX - -_index * winW;
var updateDelta = 0;
if (deltaX > 50){
updateDelta = -1;
}else if(deltaX < -50){
updateDelta = 1;
}
_index=_index+updateDelta;
changeIndex(_index);
isSlide =false
}