Question

我正在尝试制作一个模拟netflix的项目滑动列表。看看他们的源代码，我已经找到了html标记，我想我已经找到了它的概念。我只需要能够在悬停期间跟踪css正确的位置，并在悬停发生时通过另一个功能执行其他操作，而不是在悬停停止之后。

编辑：有关我正在尝试实现的概念的更多细节。当“集合”滑动时，我需要做两件事。

当一个“项目”滑出屏幕时，它需要从集合中移除然后重新插入到集合的另一端，所以我需要一种方法来知道它何时离开屏幕方向。
我需要知道这个集合在任何一个方向上滑动了它的全长，所以我可以重置它的位置。

我能想到实现无限滚动设置这种错觉的唯一方法是在设置滑动时跟踪css位置。我可以处理剩余部分，但我只需要知道如何插入.hover（）或其他方式来跟踪它而不会中断.hover（）。

如果.hover不合适，我愿意接受其他方法的建议。

这是我的代码

HTML：

<div id="slider">
            <div class="set">
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
            </div><!--end set-->

            <div class="prevBtn"></div>
            <div class="nextBtn"></div>
        </div><!--end slider-->

slider.js：

(function() {

    var Slider = {

        init: function() {
            var set = $('#slider .set'),
            setLength = set.children().length * 190,

            prev = $('.prevBtn'),
            next = $('.nextBtn');
            self = this;


            prev.hover(function() {
                set
                    .css({right: set.position().right})
                    .animate({right: '-' + setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });

            next.hover(function() {
                set
                    .css({left: set.position().right})
                    .animate({right: setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });
        }
    }


    Slider.init();
}());

谢谢

Answer 1

我发现这个jquery watch plugin回答了跟踪左侧位置的问题。它是有限的，因为它只检查DomAttrModified或propertychange，否则运行一个计时器来检查我出于性能原因我真的不想要的间隔位置。看起来替换将是“变异观察者”，尽管它似乎还没有足够的浏览器支持。

但后来我发现这个marquee plugin最终得到的代码少于试图跟踪位置并执行各种疯狂数学运算，速度计算，确定方向以及删除/附加图像。我去的地方看起来越来越复杂了。所以我想我会选择第二种解决方案。我能够通过用我的悬停函数替换它的setInterval来修改它，以根据悬停的按钮改变方向并运行/停止动画。

我将使用此功能并为此特定目的重写，并在接下来的一两天内将其发布。

如何在jquery悬停期间跟踪位置？不停止后（）

1 个答案: