0

我正在尝试制作一个滑动项目列表来模仿 netflix。查看他们的源代码，我已经弄清楚了 html 标记，并且我想我已经大致了解了它的概念。我只需要能够在悬停期间跟踪 css 正确位置，并在悬停发生时而不是在悬停停止后通过另一个功能用它做其他事情。

编辑：有关我要实现的概念的更多详细信息。在“set”滑动时，我需要做两件事。

  1. 当一个“项目”滑出屏幕时，它需要从集合中移除，然后重新插入集合的另一端，所以我需要一种方法来知道它何时在任一方向离开屏幕。

  2. 我需要知道该装置何时在任一方向上滑动它的全长，以便我可以重置它的位置。

我能想到的实现这种无限滚动集合的幻觉的唯一方法是在集合滑动时跟踪 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-->

滑块.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();
}());

谢谢

4

1 回答 1

0

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

但后来我发现这个选框插件比试图跟踪位置和执行各种疯狂的数学、速度计算、确定方向和删除/附加图像要少。我要去的地方看起来越来越复杂。所以我想我将采用第二种解决方案。我可以通过用悬停函数替换它的 setInterval 来修改它，以根据悬停的按钮更改方向并运行/停止动画。

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

于 2013-02-14T02:07:05.453 回答