基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx
《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx》由会员分享,可在线阅读,更多相关《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx(11页珍藏版)》请在冰豆网上搜索。
![基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx](https://file1.bdocx.com/fileroot1/2023-1/29/2d7ef045-2e1d-41e7-a632-acdd4af97700/2d7ef045-2e1d-41e7-a632-acdd4af977001.gif)
基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
这篇文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js的源码和使用方法,并附上一个使用ImageView.js的实例,这里分享给大家,有需要的小伙伴参考下。
调用方式:
ImageView(index,imgData)--index参数为图片默认显示的索引值,类型为Number--imaData参数为图片url数组,类型为Array
使用之前要先引入zepto.js文件
ImageView.js具体代码如下:
代码如下:
/*
*ImageViewv1.0.0
*--基于zepto.js的大图查看
*--调用方法ImageView(index,imgDada)
*--index图片默认值显示索引,Number--imgData图片url数组,Array
**/
varImageView=(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
*/
varEvent={
touchstart:
function(e){
e.preventDefault;
if(_advancedSupport&&e.touches&&e.touches.length>=2){
varimg=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]];
varimg=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){
varnewDist=getDist(e.touches[0].pageX,e.touches[0].pageY,e.touches[1].pageX,e.touches[1].pageY);
_zoom=(newDist/_doubleDistOrg)*_doubleZoomOrg
varimg=getImg;
$(img).css({"-webkit-transitionDuration":
"0ms","transitionDuration":
"0ms"});
if(_zoom _zoom=1;
_zoomXY=[0,0];
$(img).css({"-webkit-transitionDuration":
"200ms","transitionDuration":
"200ms"})
}elseif(_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){
vardeltaX=(e.pageX-_start[0])/_zoom;
vardeltaY=(e.pageY-_start[1])/_zoom;
_start=[e.pageX,e.pageY];
varimg=getImg;
varnewWidth=img.clientWidth*_zoom,
newHeight=img.clientHeight*_zoom;
varborderX=(newWidth-winW)/2/_zoom,
borderY=(newHeight-winH)/2/_zoom;
(borderX>=0)&&(_zoomXY[0]borderX)&&(deltaX/=3);
(borderY>0)&&(_zoomXY[1]borderY)&&(deltaY/=3);
_zoomXY[0]+=deltaX;
_zoomXY[1]+=deltaY;
(_length==1&&newWidth (_length==1&&newHeight $(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;
vardeltaX=e.pageX-_start[0];
(_transX>0||_transX _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;}
varimg=getImg;
varnewWidth=img.clientWidth*_zoom,
newHeight=img.clientHeight*_zoom;
varborderX=(newWidth-winW)/2/_zoom,
borderY=(newHeight-winH)/2/_zoom;
if(_length>1&&borderX>=0){
varupdateDelta=0;
varswitchDelta=winW/6;
if(_zoomXY[0] updateDelta=1;
}elseif(_zoomXY[0]>borderX+switchDelta/_zoom&&_index>0){
updateDelta=-1;
}
if(updateDelta!
=0){
scaleDown(img);
changeIndex(_index+updateDelta);
return
}
}
vardelta=Date.now-_orgTime;
if(delta (delta vardeltaDis=Math.pow(180/delta,2);
_zoomXY[0]+=(_zoomXY[0]-_orgZoomXY[0])*deltaDis;
_zoomXY[1]+=(_zoomXY[1]-_orgZoomXY[1])*deltaDis;
$(img).css({"-webkit-transition":
"400mscubic-bezier(0.08,0.65,0.79,1)","transition":
"400mscubic-bezier(0.08,0.65,0.79,1)"})
}else{
$(img).css({"-webkit-transition":
"200mslinear","transition":
"200mslinear"});
}
if(borderX>=0){
if(_zoomXY[0] _zoomXY[0]=-borderX;
}elseif(_zoomXY[0]>borderX){
_zoomXY[0]=borderX;
}
}
if(borderY>0){
if(_zoomXY[1] _zoomXY[1]=-borderY;
}elseif(_zoomXY[1]>borderY){
_zoomXY[1]=borderY;
}
}
if(Math.abs(_zoomXY[0]) $(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;}
vardeltaX=_transX--_index*winW;
varupdateDelta=0;
if(deltaX>50){
updateDelta=-1;
}elseif(deltaX updateDelta=1;
}
_index=_index+updateDelta;
changeIndex(_index);
isSlide=false
}
},
click:
function(e){
_zoom=1;
_zoomXY=[0,0];
_this.css("opacity","0");
timer=setTimeout(function{
_this.css({"display":
""}).html("");
unbind;
},150)
},
dobelTap:
function(e){
clearTimeout(timer);
varnow=newDate;
if(now-_lastTapDate return;
}
_lastTapDate=now;
varimg=getImg;
if(!
img){
return;
}
if(_zoom!
=1){
scaleDown(img);
}else{
scaleUp(img);
}
},
setView:
function(e){
winW=window.innerWidth;
winH=window.innerHeight;
_this.width(window.innerWidth).height(window.innerHeight);
translate((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);
scaleDown(getImg)
}
};
varhandleEvent=function(e){
switch(e.type){
case"touchstart":
Event.touchstart(e);
break;
case"touchmove":
Event.touchmove(e);
break;
case"touchcancel":
case"touchend":
Event.touchend(e);
break;
case"orientationchange":
case"resize":
Event.setView(e);
break
}
};
/**
*绑定事件
*/
varbind=function{
_this.on("singleTap",function(e){
e.preventDefault;
varnow=newDate;
if(now-_lastTapDate return;
}
_lastTapDate=now;
Event.click(e);
returnfalse;
}).on("doubleTap",function(e){
e.preventDefault;
Event.dobelTap(e);
returnfalse;
});
_this.on("touchstarttouchmovetouchendtouchcancel",function(e){
handleEvent(e);
});
Event.setView;
"onorientationchange"inwindow?
window.addEventListener("orientationchange",Event.setView,false):
window.addEventListener("resize",Event.setView,false);
};
/**
*解除事件
*/
varunbind=function{
_this.off;
"onorientationchange"inwindow?
window.removeEventListener("orientationchange",Event.setView,false):
window.removeEventListener("resize",Event.setView,false)
};
vargetDist=function(x1,y1,x2,y2){
returnMath.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2),2)
}
/**
*图片缩放
*/
vargetScale=function(img){
varh=img.naturalHeight,w=img.naturalWidth,
Scale=w*h/(img.clientHeight*img.clientWidth);
returnScale;
};
varscaleUp=function(img){
varscale=getScale(img);
if(scale>1)
$(img).css({"-webkit-transform":
"scale("+scale+")","transform":
"scale("+scale+")","-webkit-transition":
"200ms","transition":
"200ms"});
_zoom=scale;
};
varscaleDown=function(img){
_zoom=1;
_zoomXY=[0,0];
_doubleDistOrg=1;
_doubleZoomOrg=1;
$(img).css({"-webkit-transform":
"scale
(1)","transform":
"scale
(1)","-webkit-transition":
"200ms","transition":
"200ms"});
};
/**
*滑动效果
*dist
*/
vartranslate=function(distX,distY,speed,ele){
if(!
!
ele){ele=ele.style;}else{return;}
ele.webkitTransitionDuration=ele.MozTransitionDuration=ele.msTransitionDuration=ele.OTransitionDuration=ele.transitionDuration=speed+'ms';
ele.webkitTransform='translate('+distX+'px,'+distY+'px)'+'translateZ(0)';
ele.msTransform=ele.MozTransform=ele.OTransform='translateX('+distX+'px)translateY('+distY+'px)';
};
/**
*更改索引值_index
*/
varchangeIndex=function(index,force){
if(index index=0;
}elseif(index>=_length){
index=_length-1;
}
_index=index;
translate((-_index*window.innerWidth),0,force?
"0":
"200",$(".pv-inner")[0]);
$("#J_index").html(_index+1+"/"+_length);
imgLoad;
}
/**
*图片获取
*/
vargetImg=function(index){
varimg=_this.find("li").eq(index||_index).find("img");
if(img.size==1){
returnimg[0];
}else{
returnnull
}
}
/**
*图片加载
*/
varimgLoad=function{
if($(".pv-img").eq(_index).find("img")[0]){
$("#J_loading").css("display","");
return;
}else{
$("#J_loading").css("display","block");
vartempImg=newImage