모바일 개발 과정에서 우리는 종종 슬라이딩 이벤트에 직면합니다. 우리 모두 알다시피, 휴대폰을 미끄러 뜨리는 것은 주로 터치 이벤트에 의존합니다. 최근에 우리는 오버플로와 비슷한 영향을 미치는 두 페이지를 만났습니다. 일반적으로 CSS 설정을 통해 달성 할 수 있지만 (약간 추악하지만) 오버플로 : 자동 요소가 터치 이벤트에 응답하면 많은 불편 함이 있습니다. 예를 들어, 풀 페이지의 특정 요소는 자동으로 미끄러집니다. 슬라이딩시 요소가 다음 화면으로 미끄러지지 않도록하여 NormalsCrollElements를 사용할 수 있지만 요소가 바닥으로 미끄러지면 다음 화면 이벤트에 응답 할 수 없습니다. 위로 미끄러지는 것도 마찬가지입니다. 현재 터치 이벤트가 응답하려면 필요합니다. 향후 캡슐화의 편의를 위해 JQuery 플러그인이 단순히 캡슐화되며 동시에 jQuery 플러그인 개발 및 터치 이벤트도 검토합니다.
플러그인의 일반적인 아이디어는 다음과 같습니다. 상자의 영역은 고정 너비와 높이가 고정 된 부모 요소이며 (오버플로 세트 : 숨겨진) 자식 요소의 높이는 부모 요소의 높이보다 큽니다. 터치 이벤트에 응답하여 하위 요소의 번역 값을 변경합니다 (상단도 가능하지만 번역 효율은 높습니다). 물론,이 기간 동안, 우리는 자식 요소의 번역 값의 경계를 판단해야하며, 최대 값은 0이고 최소값은 자식 요소 부모 요소의 높이입니다.
추신 : 손가락에 따라 자식 요소를 이동하려면 손가락을 풀고 경계로 돌아온 후 다른 프로그램을 작성해야합니다.
단계별로 플러그인을 작성해 봅시다
첫 번째 단계는 안전한 범위를 설정하는 것입니다
; (function ($) {// insert code}) (jQuery) $ ( "#id")를 통해 호출 해야하는 경우 xx () 메소드, 아래와 같이 작성해야합니다. 여기에서 fn 및 jQuery의 프로토 타입; $ .extend ({exec : function () {}}) //이 확장자는 $ .fn.simuscroll = function (옵션) {var scrollobj = new simuscroll (this, 옵션); return scrollobj.init ();}을 호출합니다.위 코드에서 Simuscroll 메소드를 살펴 보겠습니다. 이것은 생성자입니다. 두 개의 매개 변수를 허용합니다. ELE는 현재 터치 이벤트를 수락하는 요소 (일반적으로 부모 요소로 설정할 수 있음), 옵션은 사용자가 전달하는 구성 매개 변수입니다. 예를 들어 번역 요소 변경, 상위 요소 하위 요소의 높이, 추가해야 할 높이, 상단 또는 하단으로 미끄러질 때 실행되는 콜백 기능 등입니다.
var simuscroll = function (ele, 옵션) {this.settings = {target : ele, // 이벤트 요소 Changetarget : ', OuterHeight :'800 ', // 외부 높이 내부 하이트 :'500 ', // innerHeight extra :'0 ', // 추가 거리 Swipeup : null, swipedown : verty}; jQuery.extend 새로운 객체를 얻으려면 this.opt = jQuery.extend ({}, this.settings, 옵션); this.initnumber = this.lastnumber = this.lastnumber = this.result = 0; this.flag = false; // 하위 요소와 부모 요소의 거리 차이를 계산하여 요소의 최대 슬라이딩 거리를 결정하십시오. <0? 0 : this.diff; this.direction = '';};jQuery 프로토 타입을 연장 할 때 첫 번째 단계는 위의 생성자를 인스턴스화하는 것이며, 두 번째 단계는 생성자의 초기 방법을 직접 호출합니다. 자세한 내용은 아래 참고 사항을 참조하십시오.
init : function () {// jQuery 객체는 터치 이벤트를 직접 바인딩하여 이벤트를 얻습니다. 기본 객체의 이벤트 속성을 얻어야합니다. // jQuery 객체는 pagex event.originalevent.touches [0] .pagex // dom object.touches [0] .pagex var target = this.opt.target.get (0); // 하위 요소의 높이가 부모 요소보다 크면 슬라이딩 이벤트를 실행하고 그렇지 않으면 콜백 함수를 실행하십시오. this.flag = this.diff> 0? 'translate': 'exec';/*요소가 변환, 스케일 및 회전을 설정 한 경우 변환을 직접 설정합니다. Transform : Translatey (10px)를 직접 설정하고 초기 세트 속성을 덮어 씁니다. 따라서 요소의 행렬 값을 얻어 원래 속성을 보장 할뿐만 아니라 값*/var csstext = this.opt.changetarget.css ( '-webkit-transform'); if (csstext == 'none') {// 요소가 변환 속성을 설정하지 않았습니다. 'translatey': 'translatex';} else {this.str = csstext; var reg = /-?/d+/ .?/d*/g; // 정규 표현식/*매트릭스의 각 매개 변수에 의해 직접 얻은 행렬 값을 얻는 것은 행렬 (1,0,0,1,0,0)과 유사하며 매트릭스 (1,0,0,1,0,0)에 의해 얻어지면 요소의 번역 값으로 특정 값의 5 번째 항목을 임의로 수정할 수 있도록하십시오. this.str.match (reg); this.matrix = this.opt.vertical? 6 : 5; // 전달 된 매개 변수를 기반으로 번역 또는 translatex로 수정 될 값을 결정할 수 있습니다.} var _this = this; // 부모 요소는 터치 이벤트를 바인딩하고 이벤트 객체를 전달하고 전달합니다. ContextTarget.addeventListener ( 't move ', function (e) {_ this.move (e, _this)}); target.addeventListener ('touchend ', function (e) {_ this.end (e, _this)};}터치 스타트 방법은 비교적 간단하며 손가락의 초기 값은 스크린에 닿는 방향에 따라 기록됩니다.
시작 : 함수 (e, context) {e.preventDefault (); var touches = e.touches [0]; context.initnumber = context.opt.vertical? touches.pagey : touches.pagex;},TouchMove 방법은 주로 손가락 슬라이딩 거리를 기반으로 요소의 CSS 속성을 동적으로 변경하여 요소가 손가락으로 움직일 수 있습니다.
setNumber 메소드에는 하나의 문장이 있습니다.
움직임 : 함수 (e, context) {e.preventDefault (); var touches = e.touches [0]; number = context.opt.vertical? touches.pagey : t 0 : context.result; context.result = -Context.Result> Context.Diff? -Context.diff : context.result; // 요소 css 속성의 동적 설정 if (context.matrix) {switch (context.matrix) {case 6 : context.setnumber (6, context.result) break; 사례 5 : context.setNumber (5, context.result) break;} context.opt.changetarget.css ( '-webkit-transform', 'matrix ('+context.par ams.join ( ',')+')')} else {context.opt.changetarget.css ( '-webkit-transform', context.str+'('+context.result+'px)}},터치 엔드 콜백 기능을 릴리스 중에 실행 해야하는지 결정합니다.
끝 : 함수 (e, context) {e.preventDefault (); var touches = e.changedTouches [0]; var number = context.opt.vertical? touches.pagey : t && context.lastnumber == -Context.diff && context.opt.swipeup) {context.opt.swipeup ();} // 여러 연속 슬라이딩 상황을 보장하기 위해 결과 값으로 상수를 설정합니다.기본적으로 간단한 jQuery 플러그인이 완료되며 프레임 워크는 다음과 같습니다.
; ($) {var a = function (m, n) {// function content}; a.prototype = {init : function ()}, start : function () {{{{), move : function () {}, end : function ()}, setNumber : function () {}}} $. obj.init ()}}) (jQuery)호출되면 다음은 다음과 같습니다.
$ ( ". OUTER"). SIMUSCROLL ({ 'OUTERHEIGHT': $ ( ". OUTER"). HEIGHT (), '내부 하이트': $ ( '. 내부'). 높이 (), 'ChangeTarget': $ ( ". 내부"), 'swipeup': function () {console.log ( 'up')}, 'swipedown': function () {console.log ( 'down')}, vertical : true})위의 것은 편집기가 소개 한 JS+CSS3 시뮬레이션 오버플로 스크롤 효과입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!