水平スライドモジュールを作成するにはどうすればよいですか? Web ページ要素のスライド イベントのコード例

この方法を理解するには、まだいくつかのことを完了する必要があります。現在、タッチ ジェスチャとマウス ドラッグが実装されています。

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

今度は戻り値を処理しましょう。これは、スワイプ イベントの登録を解除できるメソッドを含むオブジェクトになります。

そうです

これで完了です!最終的なコードを見てみましょう。

えー

それでは、テストをしてみましょう。このような DOM 要素があるとします。

rreee

スタイルは以下の通りです。

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

CSS を学習する必要がある学生は、php 中国語 Web サイトに注目してくださいCSS ビデオ チュートリアル 多くの CSS オンライン ビデオ チュートリアルを無料で視聴できます。

以上が水平スライドモジュールを作成するにはどうすればよいですか? Web ページ要素のスライド イベントのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。