基于zepto.js实现仿手机QQ空间的大图查看组件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<1){
_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||_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;
vardeltaX=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;}
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]<-borderX-switchDelta/_zoom&&_index<_length-1){
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<300){
(delta<=10)&&(delta=10);
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]<-borderX){
_zoomXY[0]=-borderX;
}elseif(_zoomXY[0]>borderX){
_zoomXY[0]=borderX;
}
}
if(borderY>0){
if(_zoomXY[1]<-borderY){
_zoomXY[1]=-borderY;
}elseif(_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;}
vardeltaX=_transX--_index*winW;
varupdateDelta=0;
if(deltaX>50){
updateDelta=-1;
}elseif(deltaX<-50){
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<500){
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<500){
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<0){
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(),w,h,set;
tempImg.src=_ImgData[_index];
$(".pv-img").eq(_index)[0].appendChild(tempImg);
tempImg.onload=function(){
$("#J_loading").css("display","");
}
}
};
/**
*创建大图查看Dome结构
*/
varCreate=function(){
_this.append("<ulclass='pv-inner'></ul>").append("<pclass='counts'><spanclass='value'id='J_index'>"+(_index+1)+"/"+_length+"</span></p>").append("<spanclass='ui-loading'id='J_loading'><iclass='t1'></i><iclass='t2'></i><iclass='t3'></i></span>")
for(vari=0;i<_length;i++){
$(".pv-inner").append("<liclass='pv-img'></li>")
}
imgLoad();
};
/**
*大图查看初始化
*/
varinit=function(){
!!_this[0]||$("body").append("<divclass='slide-view'id='slideView'></div>");
_this=$("#slideView");
($.os.iphone||$.os.android&&parseFloat($.os.version)>=4)&&(_advancedSupport=true);
}();
/**
*大图查看返回接口函数
*ImageView(index,data)
*index初始索引值nubmer
*data图片数组array
*/
varImageView=function(index,data){
_ImgData=data;
_index=index;
_length=data.length;
//创建dom结构
Create();
//dom结构显示
_this.css("display","block");
//绑定事件
bind();
}
returnImageView;
})(window,Zepto);
ImageView.js用到的css代码如下：
/*大图查看*/
.slide-view{background:#000;position:fixed;width:100%;height:100%;overflow:hidden;top:0;left:0;z-index:100;opacity:0;display:none;-webkit-animation:fadeIn.2slinearforwards;animation:fadeIn.2slinearforwards;-webkit-touch-callout:none;-webkit-transform-style:preserve-3d;}
.slide-view.counts{position:absolute;top:5%;left:0;right:0;text-align:center;font-size:0;-webkit-transform-style:preserve-3d;}
.slide-view.counts.value{border-radius:9px;line-height:18px;padding:06px;font-size:11px;display:inline-block;background-color:rgba(102,102,102,.6);color:#f1f1f1;}
.pv-inner{position:relative;z-index:-1;display:-webkit-box;display:box;width:100%;height:100%;-webkit-transition:all350mslinear;-webkit-backface-visibility:hidden;transition:all350mslinear;backface-visibility:hidden;-webkit-touch-callout:none;-webkit-transform-style:preserve-3d;}
.pv-innerli{text-align:center;display:-webkit-box;display:box;-webkit-box-align:center;overflow:hidden;width:100%;height:100%;-webkit-touch-callout:none;backface-visibility:hidden;-webkit-transform-style:preserve-3d;}
.pv-innerimg{max-width:97%;max-height:100%;-webkit-transform:scale(1)translate(0px,0px);transform:scale(1)translate(0px,0px);visibility:visible;-webkit-transition:200ms;transition:200ms;-webkit-user-select:none;user-select:none;display:block;margin:0auto;backface-visibility:hidden;-webkit-transform-style:preserve-3d;}
@-webkit-keyframesfadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframesfadeIn{
0%{opacity:0;}
100%{opacity:100%;}
}
/*--------------------loading-----------------------*/
.ui-loading{position:absolute;left:50%;top:50%;display:none;vertical-align:middle;font:0/0arial;margin:-5px00-10px;}
.ui-loadingi{display:inline-block;width:5px;height:12px;background:#fff;vertical-align:top;-webkit-animation:loading-spin1sinfinitelinear;animation:loading-spin1sinfinitelinear;}
.ui-loadingi{-webkit-animation:loading-spin1sinfinitelinear;animation:loading-spin1sinfinitelinear}
.ui-loadingi.t2{margin:03px;-webkit-animation-name:loading-spin-one;animation-name:loading-spin-one}
.ui-loadingi.t3{-webkit-animation-name:loading-spin-two;animation-name:loading-spin-two}
@-webkit-keyframesloading-spin{
0%{opacity:0}
30%{opacity:1;-webkit-transform:scale(1,1.2)}
60%{opacity:0;-webkit-transform:scale(1)}
100%{opacity:0}
}
@-webkit-keyframesloading-spin-one{
0%{opacity:0}
20%{opacity:0}
50%{opacity:1;-webkit-transform:scale(1,1.2)}
80%{opacity:0;-webkit-transform:scale(1)}
100%{opacity:0}
}
@-webkit-keyframesloading-spin-two{
0%{opacity:0}
40%{opacity:0}
70%{opacity:1;-webkit-transform:scale(1,1.2)}
100%{opacity:0;-webkit-transform:scale(1)}
}
@keyframesloading-spin{
0%{opacity:0}
30%{opacity:1;transform:scale(1,1.2)}
60%{opacity:0;transform:scale(1)}
100%{opacity:0}
}
@keyframesloading-spin-one{
0%{opacity:0}
20%{opacity:0}
50%{opacity:1;transform:scale(1,1.2)}
80%{opacity:0;transform:scale(1)}
100%{opacity:0}
}
@keyframesloading-spin-two{
0%{opacity:0}
40%{opacity:0}
70%{opacity:1;transform:scale(1,1.2)}
100%{opacity:0;transform:scale(1)}
}
/*--------------------loading-end----------------------*/
ps:代码功能比较简单，可能会存在诸多问题。但也能勉强使用了
下用是使用ImageView.js的一个例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>移动端大图查看</title>
<scripttype="text/javascript"src="test_files/zepto.min.js"></script>
<scripttype="text/javascript"src="test_files/ImageView.js"></script>
</head>
<body>
<!--以上为HTML页面结构-->
<!--以下为ImageView使用例子-->
<script>
;(function(){
//获取html中的图片元素
varaImg=document.querySelectorAll("img"),
aImgSrc=[];
//为图片绑定单击事件
for(vari=0,l=aImg.length;i<l;i++){
aImg[i].index=i;
aImg[i].className+="conPic";
aImgSrc.push(aImg[i].src);
}
for(vari=0;i<$(".conPic").length;i++){
if($(".conPic")[i].complete){
addTap($(".conPic")[i])
}else{
$(".conPic")[i].onload=function(){
addTap(this);
}
}
}
functionaddTap(obj){
$(obj).on("tap",function(){
//调用ImageView
ImageView($(obj)[0].index,aImgSrc);
})
}
})();
</script>
</body>
以上就是本文的全部内容了，希望大家能够喜欢