Question

嗨我有这个JQuery，它会在左右按钮上左右移动div，但是当图像位置为0px时我需要它停止;

我当前的代码 - https://jsfiddle.net/38da9pca/2/

$(function() {
    $('#right').on('mouseenter', rscroll);
    $('#left').on('mouseenter', lscroll);
    $('#right, #left').on('mouseleave', function() {
        $('#bg').stop();
    });

    function rscroll() {
        $('#bg').animate({
            left: '-=25'
        }, 10, rscroll);
    }

    function lscroll() {
        $('#bg').animate({
            left: '+=25'
        }, 10, lscroll);
    }
});

但是，我无法跟踪#bg左侧位置。我已经累了.position().left和.offset().left，并且在console.log();时都会给出静态结果，而不是在滚动时进行虚幻变化。

Answer 1

您基本上必须检查元素是否已经触及其边界

如果是，不做任何事
如果没有，请检查下一个更改是否超出边界
- 如果可以，只移动剩余的距离。
- 如果不是，请按25像素移动

此外，您应该缓存jQuery对象以获得更好的性能，就像我在这里所做的那样。

（Demo）

$(function() {
    var bg = $('#bg'), left, maxLeft, maxRight;
    $('#right').on('mouseenter', rscroll);
    $('#left').on('mouseenter', lscroll);
    $('#right, #left').on('mouseleave', function() {
        bg.stop();
    });

    function rscroll() {
        maxRight = (bg.width() - $(window).width()) * -1;
        left = bg.position().left;
        if(left > maxRight) {
            bg.animate({
                left: '-=' + (left + 25 > maxRight ? 25 : left)
            }, 10, rscroll);
        }
    }

    function lscroll() {
        maxLeft = bg.width() - $(window).width();
        left = bg.position().left;
        if(left < 0) {
            bg.animate({
                left: '+=' + (maxLeft - left > 25 ? 25 : left)
            }, 10, lscroll);
        }
    }
});

Answer 2

试试这个：https://jsfiddle.net/38da9pca/4/

如果它没有比它的宽度滚动得更远 - 窗口内部宽度

，那么它只能说动画。

，如果它没有滚过0，则为左。

$(function () {
    var bg = $('#bg');
    $('#right').on('mouseenter', rscroll);
    $('#left').on('mouseenter', lscroll);
    $('#right, #left').on('mouseleave', function () {
        bg.stop();
    });

    function rscroll() {
        if (bg.position().left * -1 > bg.width() - $(window).innerWidth()) {
            bg.stop();
            return;
        }
        bg.animate({
            left: '-=25'
        }, 10, rscroll);
    }

    function lscroll() {
        if (bg.position().left > 0) {
            bg.stop();
            return;
        }
        bg.animate({
            left: '+=25'
        }, 10, lscroll);
    }
});

如何跟踪.animate左侧位置

2 个答案: