1

次のスクリプトを使用して、要素の左または右へのマウスの動きを検出しています。

それはうまく機能し、方向に応じて、画像スライダーをトリガーして左右にスライドさせます。ただし、これに別の変数を追加する方法を理解するのに問題があります。X ピクセルの後にのみイベントを発生させたいと考えています。したがって、マウスが 200 ピクセル左に移動すると、イベントが発生します。

これが私の現在のセットアップのフィドルです。http://jsfiddle.net/wMMrh/1/

に追加しようとしましif (i++ > 200) { //do something }たmousemovementが、役に立ちませんでした。

(function ($) {
        var options = {};
        var oldx = 0;
        var direction = "";
        var stop_timeout = false;
        var stop_check_time = 150;
        $.mousedirection = function (opts) {
            var defaults = {};
            options = $.extend(defaults, opts);
            $(document).bind("mousemove", function (e) {
                var activeElement = e.target || e.srcElement;

                if (e.pageX > oldx) {
                    direction = "right";
                } else if (e.pageX < oldx) {
                    direction = "left";
                }

                clearTimeout(stop_timeout);
                stop_timeout = setTimeout(function () {
                    direction = "stop";
                    $(activeElement).trigger(direction);
                    $(activeElement).trigger({
                        type: "mousedirection",
                        direction: direction
                    });
                }, stop_check_time);

                $(activeElement).trigger(direction);
                $(activeElement).trigger({
                    type: "mousedirection",
                    direction: direction
                });
                oldx = e.pageX;
            });
        }
    })(jQuery)

    $(function () {
        $.mousedirection();
        $(".iosSlider").bind("mousedirection", function (e) {

            if (!$(".iosSlider").hasClass("moving")) {

            if (e.direction == "left")
                $(".iosSlider").iosSlider('nextSlide');
            else
                $(".iosSlider").iosSlider('prevSlide');
            }

        });
    });
4

1 に答える 1

1 
var oldx = null; // note, not equal to 0, since 0 is a valid mouse position
// ...
       $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;

            clearTimeout(stop_timeout);
            stop_timeout = setTimeout(function () {
                console.log("timeout!");
                direction = "stop";
                $(activeElement).trigger("stop");
                $(activeElement).trigger({
                    type: "mousedirection",
                    direction: "stop"
                });
            }, stop_check_time);

            if (oldx) {
                var max = +oldx + 200;
                var min = +oldx - 200;
                console.log("e.pageX = " + e.pageX + ", max = " + max + ", min = " + min);
                if (e.pageX > max) {
                    direction = "right";
                } else if (e.pageX < min) {
                    direction = "left";
                } else {
                    return;
                }
            } else {
                console.log("setting oldx to " + e.pageX);
                oldx = +e.pageX;
                return;
            }
            console.log("survived. e.pageX = " + e.pageX);

            // Not sure if you want both triggers here, but I'll assume you do
            $(activeElement).trigger(direction);
            $(activeElement).trigger({
                type: "mousedirection",
                direction: direction
            });
            // changing this to null so my code above will trigger properly next time
            oldx = null;
        });

あなたは近づいていましたが、いくつかのことをする必要がありました.

0 は有効なマウス位置になる可能性があるため、最初に に設定oldxします。null一番下の に設定oldxしていたところをe.pageXに戻しましたnull。

次に、しきい値を確認するために最大変数と最小変数を設定します。, に注意し+oldxて、変数が文字列ではなく数値として扱われるようにします ("2" + 200 = 202 ではなく 2200 であるため)。

何が起こっているのかを示すために、多くのコンソール メッセージを追加しました。タイマーがトップではなく「右」になる理由については、まだ取り組んでいます。

これが最新のフィドルの更新です。

于 2013-08-06T14:46:14.813 に答える