如何創造一個水平的滑動模組？網頁元素的滑動事件實例程式碼

我們還需要完成一些事情，才能搞定這個方法。目前，我們已經實現了觸控手勢和滑鼠拖曳。

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

現在我們來處理回傳值。這將是一個包含能夠註銷滑動事件的方法的物件。

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);
        }
    };
}

現在我們來進行一個測試。假設有這樣一個 DOM 元素。

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

樣式如下。

#demo_gesture {
    max-width: 800px;
    height: 20px;
    background-color: #EEE;
    border: 1px solid #CCC;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
#demo_gesture > #demo_gesture_fore {
    color: #CCC;
    text-align: center;
    width: 20px;
    height: 20px;
    background-color: #CCC;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: pointer;
}

當文件元素載入完畢後，我們執行以下程式碼。

var adjustPosition = function (ele, x) {
    x = (ele.position || 0) + x;
    if (x < 0)
        x = 0;
    else if (x > ele.parentElement.offsetWidth - ele.offsetWidth)
        x = ele.parentElement.offsetWidth - ele.offsetWidth;
    ele.style.left = x + "px";
    return x;
};
addSlide("demo_gesture_fore", {
    moving: function (ele, pos) {
        adjustPosition(ele, pos.x);
    },
    moveEnd: function (ele, pos) {
        ele.position = adjustPosition(ele, pos.x);
    }
});

需要學習CSS的同學請關注php中文網CSS影片教學，眾多css線上影片教學可以免費觀看！

以上是如何創造一個水平的滑動模組？網頁元素的滑動事件實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！