호출 방법: ImageView(index,imgData) --index 매개변수는 기본적으로 이미지에 표시되는 인덱스 값, 유형은 Number입니다. --imaData 매개변수는 이미지 URL 배열, 유형은 Array
ImageView.js의 구체적인 코드는 다음과 같습니다.
/*
* 이미지뷰 v1.0.0
* --zepto.js 기반의 큰 이미지 보기
* -- 호출 방법 ImageView(index,imgDada)
* --index 이미지 기본값 표시 인덱스, 숫자 --imgData 이미지 URL 배열, Array
* */
var ImageView=(함수(창,$){
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;
/**
* 이벤트 대상 이벤트
*/
var 이벤트={
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);
~ : 그렇군요;
반품
}
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 ||
_orgZoomXY = [_zoomXY[0], _zoomXY[1]];
var img = getImg();
img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));
isDrag = true
}그밖에{
_this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});
isSlide = true
}
},
터치이동:기능(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 ") 번역(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") 번역(" _zoomXY[0] "px," _zoomXY[1] "px)"});
복귀
}
if (isDoubleZoom){
반품;
}
e = e.터치? 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)&&(deltaY /= 3);
_zoomXY[0] = 델타X;
_zoomXY[1] = 델타Y;
(_length == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);
(_length == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);
$(img).css({"-webkit-transform": "scale(" _zoom ") 번역(" _zoomXY[0]
"px," _zoomXY[1] "px)","transform": "scale(" _zoom ") 번역(" _zoomXY[0]
"px," _zoomXY[1] "px)"})
}그밖에{
if (!isSlide) 반환;
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:함수(e){
if (isDoubleZoom) {
반품;
}
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);
복귀
}
}
var delta = Date.now() - _orgTime;
if (델타 < 300) {
(델타 <= 10)&&(델타 = 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 3차 베지어(0.08,0.65,0.79,1)","transition": "400ms 3차 베지어(0.08,0.65,0.79,1)" })
} 그 외{
$(img).css({"-webkit-transition": "200ms 선형","transition": "200ms 선형"});
}
if (borderX >= 0){
if (_zoomXY[0] < -borderX){
_zoomXY[0] = -borderX;
}else if (_zoomXY[0] > borderX){
_zoomXY[0] = 테두리X;
}
}
if (borderY > 0){
if (_zoomXY[1] < -borderY){
_zoomXY[1] = -borderY;
}else if (_zoomXY[1] >borderY){
_zoomXY[1] = 테두리Y;
}
}
if (Math.abs(_zoomXY[0]) < 10) {
$(img).css({"-webkit-transform": "scale(" _zoom ") 번역(0px," _zoomXY[1] "px)","transform": "scale(" _zoom ") 번역(0px ," _zoomXY[1] "px)"});
복귀
} 그 외{
$(img).css({"-webkit-transform": "scale(" _zoom ") 번역(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") 번역(" _zoomXY[0] "px," _zoomXY[1] "px)"});
}
isDrag = 거짓
}그밖에{
if (!isSlide){ return;}
var deltaX = _transX - -_index * winW;
var updateDelta = 0;
if (deltaX > 50){
updateDelta = -1;
}그렇지 않은 경우(deltaX < -50){
updateDelta = 1;
}
_index=_index updateDelta;
ChangeIndex(_index);
isSlide =false
}
},
클릭:함수(e){
_zoom=1;
_zoomXY=[0,0];
_this.css("불투명도","0");
타이머=setTimeout(함수(){
_this.css({"display":""}).html("");
바인딩 해제();
},150)
},
dobelTap:함수(e){
ClearTimeout(타이머);
var now = 새 날짜;
if (현재 - _lastTapDate < 500){
반품;
}
_lastTapDate = 지금;
var img = getImg();
만약 (!img){
반품;
}
if (_zoom != 1){
scaleDown(img);
}그밖에{
scaleUp(img);
}
},
setView:함수(e){
winW=window.innerWidth;
winH=window.innerHeight;
_this.width(window.innerWidth).height(window.innerHeight);
번역((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);
scaleDown(getImg())
}
};
var handlerEvent=function(e){
스위치(e.type){
사례 "touchstart":
Event.touchstart(e);
휴식;
사례 "touchmove":
Event.touchmove(e);
휴식;
케이스 "touchcancel":
케이스 "touchend":
Event.touchend(e);
휴식;
사례 "방향 변경":
케이스 "크기 조정":
Event.setView(e);
휴식
}
};
/**
* 바인딩 이벤트
*/
var 바인딩=함수(){
_this.on("singleTap",function(e){
e.preventDefault();
var now = 새 날짜;
if (현재 - _lastTapDate < 500){
반품;
}
_lastTapDate = 지금;
Event.click(e);
false를 반환합니다.
}).on("doubleTap", function(e) {
e.preventDefault();
Event.dobelTap(e);
false를 반환합니다.
});
_this.on("touchstart touchmove touchend touchcancel", function(e) {
handlerEvent(e);
});
Event.setView();
창에서 "방향 변경"? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
};
/**
* * 이벤트 취소
*/
var unbind= function() {
_this.off();
창에서 "방향 변경"? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)
};
var getDist= 함수(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 - x1, 2) Math.pow(y2 - y1, 2), 2)
}
/**
* 이미지 확대
*/
var getScale=function(img) {
var h = img.naturalHeight, w = img.naturalWidth,
배율=w*h/(img.clientHeight*img.clientWidth);
반환 규모;
};
var scaleUp=function(img) {
var scale = getScale(img);
if (규모 > 1)
$(img).css({"-webkit-transform": "scale(" scale ")","transform": "scale(" scale ")","-webkit-transition": "200ms","transition ": "200ms"});
_zoom = 규모;
};
var scaleDown=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 "});
};
/**
* 슬라이딩 효과
* 거리
*/
var 번역 = 함수( 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
*/
var changeIndex=function(index,force){
if (index < 0){
index = 0;
}else if(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();
}
/**
* 图片获取
*/
var getImg=function(index) {
var img = _this.find("li").eq(index || _index).find("img");
if (img.size() == 1){
return img[0];
}else{
return null
}
}
/**
* 图片加载
*/
var imgLoad=function(){
if($(".pv-img").eq(_index).find("img")[0]){
$("#J_loading").css("display","");
return;
}else{
$("#J_loading").css("display","block");
var tempImg=new Image(),w,h,set;
tempImg.src=_ImgData[_index];
$(".pv-img").eq(_index)[0].appendChild(tempImg);
tempImg.onload=function(){
$("#J_loading").css("display","");
}
}
};
/**
* 创建大图查看Dome结构
*/
var Create=function(){
_this.append("
").append("
"+(_index+1)+"/"+_length+"
").append("
")
for(var i=0;i<_length;i++){
$(".pv-inner").append("
")
}
imgLoad();
};
/**
* 大图查看初始化
*/
var init=function(){
!!_this[0]||$("body").append("
");
_this=$("#slideView");
($.os.iphone || $.os.android && parsFloat($.os.version) >= 4)&&(_advancedSupport = true);
}();
/**
* * 큰 사진 보기 복귀 인터페이스 기능
* 이미지뷰(인덱스,데이터)
* 인덱스 초기 인덱스 값 번호
* 데이터 이미지 배열 배열
*/
var ImageView=함수(색인,데이터){
_ImgData=데이터;
_index=index;
_length=data.length;
//돔 구조 생성
생성();
//돔 구조 표시
_this.css("표시","차단");
//바인딩 이벤트
바인딩();
}
ImageView 반환;
})(창,Zepto);
ImageView.js에서 사용하는 CSS 코드는 다음과 같습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
