Call Method : ImageView (index, imgdata) -index 매개 변수는 기본값 이미지로 표시되는 색인 값입니다. 유형은 숫자입니다 -Imadata 매개 변수는 이미지 URL 배열, 유형은 배열입니다.
사용하기 전에 먼저 zepto.js 파일을 가져와야합니다.
ImageView.js의 특정 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
/*
* ImageView v1.0.0
Zepto.js를 기반으로 한 * -big 이미지
* -전달 방법 ImageView (INDEX, IMGDADA)
* -Index 사진 기본값 표시 표시 인덱스, 번호 -imgdata 사진 URL 어레이, 배열
* */
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 event = {
터치 스타트 : 함수 (e) {
e.preventDefault ();
if (_advancesupport && e.touches && e.touches.length> = 2) {
var img = getimg ();
$ (img) .css ({ "-WebKit-TransitionDuration": "0ms", "TransitionDuration": "0ms"});
_doublezoomorg = _zoom;
_doubleStorg = getDist (e.Touches [0] .Pagex, e.Touches [0] .Pagey, E.Touches [1] .Pagex, E.Touches [1] .pagey);
isdoublezoom = true;
반품
}
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
}또 다른{
_this.Find ( ". PV-Inner"). CSS ({ "-WebKit-TransitionDuration": "0ms", "TransitionDuration": "0ms"});
isslide = true
}
},
터치 모브 : 함수 (e) {
e.preventDefault ();
if (_advancesupport && 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 (" + _zy x + " +"px, " +" + " +" + " +" + " +" + " +" + "px. "px)"});
반품
}
if (isdoublezoom) {
반품;
}
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 + ") 번역 (" + _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)");
}
},
터치 엔드 : 함수 (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 (delta <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 입방 베 지어 (0.08,0.65,0.79,1)", "전환": "400ms 입방 베지어 (0.08,0.65,0.79,1)"))
} 또 다른{
$ (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] = 경계;
}
}
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 + ") translate (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + ") translate (" + _zy x + " +"px, " +" + " +" + " +" + " +" + " +" + "px. "px)"});
}
isdrag = false
}또 다른{
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
}
},
클릭 : 기능 (e) {
_zoom = 1;
_zoomxy = [0,0];
_this.css ( "불투명도", "0");
타이머 = settimeout (function () {
_this.css ({ "display": ""}). html ( "");
unbind ();
}, 150)
},
dobeltap : function (e) {
클리어 타임 아웃 (타이머);
var now = 새로운 날짜;
if (지금 -_lasttapdate <500) {
반품;
}
_lastTapDate = 지금;
var img = getimg ();
if (! img) {
반품;
}
if (_zoom! = 1) {
Scaledown (IMG);
}또 다른{
스케일 업 (IMG);
}
},
setView : function (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 handleEvent = function (e) {
스위치 (e.type) {
사례 "터치 스타트":
event.touchstart (e);
부서지다;
사례 "터치 모브":
event.touchmove (e);
부서지다;
사례 "TouchCancel":
사례 "터치 엔드":
event.touchend (e);
부서지다;
CASE "OrientationChange":
사례 "크기 조정":
event.setView (e);
부서지다
}
};
/**
* 바인딩 이벤트
*/
var bind = function () {
_this.on ( "Singletap", function (e) {
e.preventDefault ();
var now = 새로운 날짜;
if (지금 -_lasttapdate <500) {
반품;
}
_lastTapDate = 지금;
event.click (e);
거짓을 반환합니다.
}). on ( "DoubleTap", function (e) {
e.preventDefault ();
event.dobeltap (e);
거짓을 반환합니다.
});
_this.on ( "T
핸들 이벤트 (e);
});
event.setView ();
창에서 "onorientationChange"? Window.AdDeventListener ( "OrientationChange", event.setView, False) : window.addeventListener ( "resize", event.setView, False);
};
/**
* 릴리스 이벤트
*/
var unbind = function () {
_this.off ();
창에서 "onorientationChange"? window.removeEventListener ( "OrientationChange", event.setView, false) : window.removeEventListener ( "resize", event.setView, false)
};
var getdist = function (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,
scale = w*h/(img.clientheight*img.clientWidth);
리턴 스케일;
};
var scaleup = function (img) {
var scale = getScale (IMG);
if (scale> 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"});
};
/**
* 슬라이딩 효과
* dist
*/
var translate = 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)';
};
/**
* 색인 value_index를 변경합니다
*/
var ChangeIndex = 함수 (색인, 힘) {
if (index <0) {
색인 = 0;
} else if (index> = _length) {
인덱스 = _length -1;
}
_index = index;
번역 ((-_ index*wind
$ ( "#j_index"). html (_index+1+"/"+_ 길이);
imgload ();
}
/**
* 이미지 획득
*/
var getimg = function (index) {
var img = _this.find ( "li"). eq (index || _index) .find ( "img");
if (img.size () == 1) {
반환 IMG [0];
}또 다른{
널 리턴
}
}
/**
* 사진 로딩
*/
var imgload = function () {
if ($ ( ". pv-img"). eq (_index) .find ( "img") [0]) {
$ ( "#j_loading"). css ( "display", "");
반품;
}또 다른{
$ ( "#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", "");
}
}
};
/**
* 돔 구조를 볼 수있는 큰 이미지 생성
*/
var create = function () {
_this.append ( "<span class = 'pv-inner'> </ul>"). append ( "<p class = 'count'> <span class = 'value'id = 'j_index'>"+(_ index+1)+"/"+_ length+"</</p>") class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
for (var i = 0; i <_length; i ++) {
$ ( ". pv-inner"). Append ( "<li class = 'pv-img'> </li>")
}
imgload ();
};
/**
* 초기화를 볼 큰 이미지
*/
var init = function () {
!!
_this = $ ( "#slideview");
($ .os.iphone || $ .os.android && parsefloat ($. os.version)> = 4) && (_ advancedsupport = true);
} ();
/**
* 큰 이미지에서 리턴 인터페이스 함수를 봅니다
* ImageView (색인, 데이터)
* 색인 초기 색인 값 Nubmer
* 데이터 사진 배열 배열
*/
var imageView = function (색인, 데이터) {
_imgdata = 데이터;
_index = index;
_length = data.length;
// DOM 구조를 만듭니다
만들다();
// DOM 구조 디스플레이
_this.css ( "display", "block");
// 바인딩 이벤트
묶다();
}
반환 ImageView;
}) (창, Zepto);
ImageView.js에서 사용하는 CSS 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
/*큰 이미지보기*/
.slide-view {배경 : #000; 위치 : 고정; 폭; 폭; 높이 : 높이 : 100%; 오버플로 : 숨겨진; 상단 : 0; 왼쪽 : 0; z-index : 100; 불투명도 : 0; display : 없음; -webkit-animation : fadein .2s 선형 전방; 애니메이션 : Fadein .2S 선형 전방;-Whewebkit-wallout : 없음; -webkit-transform 스타일 : Preserve-3D; }
.slide-view .counts {위치 : 절대; 상단 : 5%; 왼쪽 : 0; 오른쪽 : 0; 텍스트-정렬 : 중심; font-size : 0; -webkit-transform 스타일 : preserve-3d; }
.slide-view .counts .value {Border-Radius : 9px; line-height : 18px; 패딩 : 0 6px; font-size : 11px; display : inline-block; 배경 색상 : RGBA (102,102,102, .6); 색상 : #f1f1f1;}
.pv-inner {위치 : 상대; z- 안수 : -1; 디스플레이 : -webkit-box; display : box; width : 100%; 높이 : 100%;-웹 키트 전환 : 모든 350ms 선형; -webkit-backface-visibility : hidden; 모든 350ms 선형; 뒷면-신경 : hidden;-webkit-to-wallout. 없음; -webkit-transform 스타일 : Preserve-3D; }
.pv-inner li {text-align : center; display : -webkit-box; display : box; -webkit-box-align : center; 오버플로 : 숨겨진; 너비 : 100%; 높이 : 100%;-WebKit-Touch-Callout : 없음; 뒷면-미시성 : 숨겨진; -webkit-transform-style : preserve-3d; }
.pv-inner img {Max-width : 97%; Max-Height : 100%;-WebKit-Transform : Scale (1) 번역 (0px, 0px); 전이 (1) 번역 (1) 번역 (0px, 0px); 가시적; -webkit 전환;-200ms : 200ms : webkit-select : none; 블록; 마진 : 0 자동; 백 페이스-가시성 : 숨겨진; -webkit-transform 스타일 : Preserve-3D; }
@-webkit-keyframes fadein {
0%{불투명도 : 0;}
100%{불투명도 : 1;}
}
@keyframes fadein {
0%{불투명도 : 0;}
100%{불투명도 : 100%;}
}
/*-------------------로드 -----------------------*/
.ui -loading {위치 : 절대; 왼쪽; 왼쪽 : 50%; 상단 : 50%; 디스플레이 : 없음; 수직 -정렬 : 중간; 글꼴 : 0/0 arial; 마진 : -5px 0 -10px;}
.ui-loading i {display : inline-block; width : 5px; 높이 : 12px; 배경 : #ffff; 수직-정상 : 상단; -webkit-animation : 로딩 스핀 1S 인피니트 선형; 애니메이션 :로드 스핀 1S 무한 선형;}.
.ui-loading i {-webkit-animation : 로딩 스핀 1S 무한 선형; 애니메이션 :로드 스핀 1s 무한 선형}}
.ui-loading i.t2 {마진 : 0 3px; -webkit-animation-name :로드 스핀-one; 애니메이션-이름 :로드 스핀-온}
.ui-loading i.t3 {-webkit-animation-name :로드 스핀-두 번째; 애니메이션-이름 :로드 스핀-두 번째}
@-webkit-keyframes loading-spin {
0% {불투명도 : 0}
30% {불투명도 : 1; -webkit-transform : scale (1,1.2)}
60% {불투명도 : 0; -webkit-transform : scale (1)}
100% {불투명도 : 0}
}
@-webkit-keyframes 로딩 스핀 -one {
0% {불투명도 : 0}
20% {불투명도 : 0}
50% {불투명도 : 1; -webkit-transform : scale (1,1.2)}
80% {불투명도 : 0; -webkit-transform : scale (1)}
100% {불투명도 : 0}
}
@-webkit-keyframes Loading-Spin-Two {
0% {불투명도 : 0}
40% {불투명도 : 0}
70% {불투명도 : 1; -webkit 변환 : 스케일 (1,1.2)}
100% {불투명도 : 0; -webkit-transform : scale (1)}
}
@keyframes 로딩 스핀 {
0% {불투명도 : 0}
30% {불투명도 : 1; 변환 : 스케일 (1,1.2)}
60% {불투명도 : 0; 변환 : 스케일 (1)}
100% {불투명도 : 0}
}
@keyframes 로딩 스핀 -one {
0% {불투명도 : 0}
20% {불투명도 : 0}
50% {불투명도 : 1; 변환 : 스케일 (1,1.2)}
80% {불투명도 : 0; 변환 : 스케일 (1)}
100% {불투명도 : 0}
}
@keyframes로드 스핀-두 {
0% {불투명도 : 0}
40% {불투명도 : 0}
70% {불투명도 : 1; 변환 : 스케일 (1,1.2)}
100% {불투명도 : 0; 변환 : 스케일 (1)}
}
/*-------------------로드 엔드 -----------------------*/
추신 : 코드 기능은 비교적 간단하며 많은 문제가있을 수 있습니다. 그러나 간신히 사용할 수 있습니다
다음은 ImageView.js를 사용하는 예입니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 최소 규모 = 1.0, 최대 규모 = 1.0, 사용자-규모 = no">
<title> 모바일 대형 이미지보기 </title>
<script type = "text/javaScript"src = "test_files/zepto.min.js">/script>
<script type = "text/javaScript"src = "test_files/imageview.js">/script>
</head>
<body>
<!-위는 HTML 페이지 구조->입니다
<!-다음은 ImageView 사용법의 예입니다->
<cript>
;(기능(){
// HTML에서 이미지 요소를 가져옵니다
var aimg = document.querySelectorall ( "IMG"),
AIMGSRC = [];
// 이미지의 클릭 이벤트를 바인딩합니다
for (var i = 0, l = aimg.length; i <l; 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를 호출합니다
ImageView ($ (obj) [0] .index, aimgsrc);
})
}
}) ();
</스크립트>
</body>
위는이 기사의 전체 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다