zepto.js_javascript 기술을 기반으로 휴대폰 QQ 공간을 모방한 대형 이미지 보기 컴포넌트인 ImageView.js에 대한 자세한 설명

호출 방법: ImageView(index,imgData) --index 매개변수는 기본적으로 이미지에 표시되는 인덱스 값, 유형은 Number입니다. --imaData 매개변수는 이미지 URL 배열, 유형은 Array

사용 전 zepto.js 파일 소개

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 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/*大图查看*/
.slide-view {배경: #000;위치: 고정;너비: 100%;높이: 100%;오버플로: 숨김;상단: 0;왼쪽: 0;z-색인: 100;불투명도:0;표시: 없음; -webkit-animation:fadeIn .2s 선형 전달;animation:fadeIn .2s 선형 전달;-webkit-touch-callout: 없음;-webkit-transform-style: presents-3d; }
.slide-view .counts {위치: 절대; 상단: 5%; 왼쪽: 0; 오른쪽: 0; 텍스트 정렬: 중앙; 글꼴 크기: 0;-webkit-transform-style: 보존-3d; }
.slide-view .counts .value {테두리 반경: 9px; 줄 높이: 18px; 패딩: 0 6px; 글꼴 크기: 11px; 디스플레이: 인라인 블록; 배경 색상: rgba(102,102,102,.6); 색상: #f1f1f1;}
.pv-inner {위치: 상대;z-색인: -1;디스플레이: -webkit-box;디스플레이: 상자;너비: 100%;높이: 100%;-webkit-transition: 모두 350ms 선형;-webkit-backface -가시성: 숨김;전환: 모두 350ms 선형; 뒷면-가시성: 숨김;-webkit-touch-callout: 없음;-webkit-transform-style: 보존-3d; }
.pv-inner li {text-align: 센터;디스플레이: -webkit-box;디스플레이: 상자;-webkit-box-align: 센터;오버플로: 숨김;너비: 100%;높이: 100%;-webkit-touch -설명선: 없음; 뒷면 가시성: 숨김; -webkit-변환 스타일: 보존-3d; }
.pv-inner img {최대 너비: 97%;최대 높이: 100%;-webkit-transform: 규모(1) 번역(0px,0px);변형: 규모(1) 번역(0px,0px);가시성 : 표시;-웹킷-전환: 200ms;전환: 200ms;-웹킷-사용자-선택: 없음;사용자 선택: 없음;표시: 차단;여백: 0 자동;뒷면-가시성: 숨김;-웹킷-변형-스타일 : 보존-3d; }
@-webkit-keyframes fadeIn{
    0%{불투명도:0;}
    100%{불투명도:1;}
}
@keyframes fadeIn{
    0%{불투명도:0;}
    100%{불투명도:100%;}
}
/*-------로딩------------*/
.ui-loading {위치: 절대;왼쪽: 50%;위: 50%;디스플레이: 없음;세로 정렬: 중간;글꼴: 0/0 arial;여백: -5px 0 0 -10px;}
.ui-loading i {display: inline-block;폭: 5px;height: 12px;배경: #fff;vertical-align: top;-webkit-animation: 로딩-스핀 1s 무한 선형;애니메이션: 로딩-스핀 1s 무한 선형;}
.ui-loading i {-webkit-animation: 로딩-스핀 1s 무한 선형;애니메이션: 로딩-스핀 1s 무한 선형}
.ui-loading i.t2 {margin: 0 3px;-webkit-animation-name: loading-spin-one;animation-name: loading-spin-one}
.ui-loading i.t3 {-webkit-animation-name: loading-spin-two;animation-name: loading-spin-two}
@-webkit-keyframes 로딩-스핀 {
    0% {불투명도: 0}
    30% {불투명도: 1;-webkit-transform: scale(1,1.2)}
    60% {불투명도: 0;-webkit-transform: scale(1)}
    100% {불투명도: 0}
}
@-webkit-keyframes 로딩-스핀-원 {
    0% {불투명도: 0}
    20% {불투명도: 0}
    50% {불투명도: 1;-webkit-transform: scale(1,1.2)}
    80% {불투명도: 0;-webkit-transform: scale(1)}
    100% {불투명도: 0}
}
@-webkit-keyframes 로딩-스핀-2 {
    0% {불투명도: 0}
    40% {불투명도: 0}
    70% {불투명도: 1;-webkit-transform: scale(1,1.2)}
    100% {불투명도: 0;-webkit-transform: scale(1)}
}
@keyframes 로딩-스핀 {
    0% {불투명도: 0}
    30% {불투명도: 1;변형: 크기(1,1.2)}
    60% {불투명도: 0;변환: 배율(1)}
    100% {불투명도: 0}
}
@keyframes 로딩-스핀-원 {
    0% {불투명도: 0}
    20% {불투명도: 0}
    50% {불투명도: 1;변형: 크기(1,1.2)}
    80% {불투명도: 0;변환: 배율(1)}
    100% {불투명도: 0}
}
@keyframes 로딩-스핀-2 {
    0% {불투명도: 0}
    40% {불투명도: 0}
    70% {불투명도: 1;변형: 크기(1,1.2)}
    100% {불투명도: 0;변환: 배율(1)}
}
/*---------로딩 종료---------*/

ps:代码功能比较简单，可能会存在诸多问题。但也能勉强使用了

다운로드용 ImageView.js의 一个例子：

复主代码 代码如下:

          
           
>            
          


            
           
> ;(함수(){
//html에서 이미지 요소 가져오기
              var aImg=document.querySelectorAll("img"),
aImgSrc=[];
//클릭 이벤트를 이미지에 바인딩
for(var i=0,l=aImg.length;i                     aImg[i].index=i;
                     aImg[i].className =" conPic";
aImgSrc.push(aImg[i].src);
                }
for(var i=0;i<$(".conPic").length;i ){
If($(".conPic")[i].complete){
                          addTap($(".conPic")[i])
                      }그밖에{
$(".conPic")[i].onload=function(){
                            addTap(this);
|                  }
                }
함수 addTap(obj){
$(obj).on("탭",function(){
//이미지뷰 호출
ImageView($(obj)[0].index,aImgSrc);
                     })
                }
             })();
>



위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다