수평 슬라이딩 모듈을 만드는 방법은 무엇입니까? 웹 페이지 요소의 슬라이딩 이벤트에 대한 예제 코드

이 방법을 알아내려면 아직 몇 가지 작업을 완료해야 합니다. 현재 터치 제스처와 마우스 드래그를 구현했습니다.

function addSlide(element, options) {
    // Validate arguments...
    // Resolve element...
    // Touch supports...
    // Mouse supports...
 
    // ToDo: Implement it.
    return null;
}

이제 반환 값을 다루겠습니다. 이는 스와이프 이벤트 등록을 취소할 수 있는 메서드를 포함하는 개체입니다.

아아아아

이제 끝났습니다! 최종 코드를 살펴보겠습니다.

아아아아

이제 테스트를 해보자. 이와 같은 DOM 요소가 있다고 가정해 보겠습니다.

return {
    dispose: function () {
        // Remove touch events.
        ele.removeEventListener("touchstart", touchStart, false);
        if (!!touchMove)
            ele.removeEventListener("touchmove", touchMove, false);
        ele.removeEventListener("touchend", touchEnd, false);
 
        // Remove mouse event.
        ele.removeEventListener("mousedown", mouseDown, false);
    }
};

스타일은 다음과 같습니다.

/**
  * Adds gesture handlers.
  * @param element  the target element.
  * @param options  the options.
  */
function addSlide(element, options) {
    if (!options || !element) return {
        dispose: function () { }
    };
 
    // Get the element.
    var ele = !!element && typeof element === "string" ? document.getElementById(element) : element;
    if (!ele) return {
        dispose: function () { }
    };
 
    // Get the minimum moving distances.
    var minX = options.minX;
    var minY = options.minY;
    if (minX == null || minX < 0) minX = 1;
    minX = Math.abs(minX);
    if (minY == null || minY < 0) minY = 1;
    minY = Math.abs(minY);
 
    // The handler occured after moving.
    var moved = function (x, y) {
        var isX = !y || (Math.abs(x) / Math.abs(y)
            > (minX + 0.01) / (minY + 0.01));
        if (isX) {
            if (x > minX && !!options.turnLeft)
                options.turnLeft(ele, x);
            else if (x < -minX && !!options.turnRight)
                options.turnRight(ele, -x);
        } else {
            if (y > minY && !!options.turnUp)
                options.turnUp(ele, y);
            else if (y < -minY && !!options.turnDown)
                options.turnDown(ele, -y);
        }
 
        if (!!options.moveEnd)
            options.moveEnd(ele, x, y);
    };
 
    // Touch starting event handler.
    var start = null;
    var touchStart = function (ev) {
        start = {
            x: ev.targetTouches[0].pageX,
            y: ev.targetTouches[0].pageY
 
        };
        if (!!options.moveStart)
            options.moveStart(ele);
    };
    ele.addEventListener("touchstart", touchStart, false);
 
    // Touch moving event handler.
    var touchMove = !!options.moving
        ? function (ev) {
            var point = ev.touches ? ev.touches[0] : ev;
            if (!point) return;
            var coor = {
                x: point.pageX - start.x,
                y: point.pageY - start.y
            };
            options.moving(ele, coor.x, coor.y);
        }
        : null;
    if (!!touchMove)
        ele.addEventListener("touchmove", touchMove, false);
 
    // Touch ending event handler.
    var touchEnd = function (ev) {
        if (start == null) return;
        var x = ev.changedTouches[0].pageX - start.x;
        var y = ev.changedTouches[0].pageY - start.y;
        start = null;
        moved(x, y);
    };
    ele.addEventListener("touchend", touchEnd, false);
 
    // Mouse event handler.
    var mouseDown = function (ev) {
        // Record current mouse position
        // when mouse down.
        var mStartP = getMousePosition();
 
        // Mouse moving event handler.
        var mouseMove = function (ev) {
            var mCurP = getMousePosition();
            var x = mCurP.x - mStartP.x;
            var y = mCurP.y - mStartP.y;
            options.moving(ele, x, y);
        };
        document.body.addEventListener("mousemove", mouseMove, false);
 
        // Mouse up event handler.
        // Need remove all mouse event handlers.
        var mouseUpHandlers = [];
        var mouseUp = function (ev) {
            mouseUpHandlers.forEach(function (h, hi, ha) {
                h(ev);
            });
        };
        mouseUpHandlers.push(
            function () {
                document.body.removeEventListener("mousemove", mouseMove, false);
            },
            function () {
                document.body.removeEventListener("mouseup", mouseUp, false);
            },
            function (ev) {
                var mCurP = getMousePosition();
                var x = mCurP.x - mStartP.x;
                var y = mCurP.y - mStartP.y;
                moved(x, y);
            }
        );
        document.body.addEventListener("mouseup", mouseUp, false);
    };
    ele.addEventListener("mousedown", mouseDown, false);
 
    // Return a disposable object
    // for removing all event handlers.
    return {
        dispose: function () {
            // Remove touch events.
            ele.removeEventListener("touchstart", touchStart, false);
            if (!!touchMove)
                ele.removeEventListener("touchmove", touchMove, false);
            ele.removeEventListener("touchend", touchEnd, false);
 
            // Remove mouse event.
            ele.removeEventListener("mousedown", mouseDown, false);
        }
    };
}

문서 요소가 로드되면 다음 코드를 실행합니다.

<p id="demo_gesture">
    <p id="demo_gesture_fore">
          
    </p>
</p>

CSS를 배워야 하는 학생들은 PHP 중국어 웹사이트 CSS 비디오 튜토리얼에 주목하세요. 많은 CSS 온라인 비디오 튜토리얼을 무료로 시청할 수 있습니다!

위 내용은 수평 슬라이딩 모듈을 만드는 방법은 무엇입니까? 웹 페이지 요소의 슬라이딩 이벤트에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!