简体繁体 English

jQuery-悬停时连续滚动div

[英]jQuery - Continuously scroll div on hover

原文 2013-10-14 09:11:18 7 1 javascript/ jquery/ scroll/ jquery-animate

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. 我希望像在Netflix上那样建立一个内容架子，当您将鼠标悬停在两端的箭头上时，架子将以连续的速度滚动。 Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly. 理想情况下，我也想这样做，因此，当您单击箭头时，它会沿滚动条滚动，因此您可以选择像单击一样单击以快速通过书架。

This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll. 这将使用延迟加载，因此您不必担心重复内容，但是显然它没有设定的宽度（否则外部容器是100％具有溢出滚动的。

Also, this needs to be actually scrollable, so it will work on tablets/phones. 另外，它实际上需要滚动，因此可以在平板电脑/手机上使用。

I have no idea here to start so any directions would be great. 我不知道从这里开始，所以任何方向都很好。

Thanks, Jake! 谢谢，杰克！

Image of netflix shelf. netflix架子的图像。

1 个解决方案

UPDATE: Check out the Smooth Div Scroll jQuery plugin . 更新：查看Smooth Div Scroll jQuery插件。 It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward. 它会在图像中连续滑动，您可以将鼠标悬停在div上，然后手动前后滚动。

Original answer: I might be off with that, but check out these two plugins: 原始答案：我可能不满意，但请查看以下两个插件：

jQuery Coverflow plugin or the jQuery Imageflow plugin jQuery Coverflow插件或jQuery Imageflow插件

I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. 我认为您要查找的关键字是“流”，并且有多个jQuery的流插件。 Hope this helps. 希望这可以帮助。

Best regards, Michael 最好的问候，迈克尔