如何使用 Jquery .animate() 函数创建连续滚动内容？ [复制]

Posted 2023-05-08

【中文标题】如何使用 Jquery .animate() 函数创建连续滚动内容？ [复制]

【英文标题】：How to create continuous scrolling content using Jquery .animate() function? [duplicate]

【发布时间】：2012-10-24 16:17:51

【问题描述】：

可能重复：Implementing circular scroller in jquery

我想创建垂直滚动条，它的工作方式与选取框完全一样。但我希望它是连续的，就像当我们使用 marquee 时，整个内容只有在它完全上升后才会回来，但我希望它是连续的。

这就是我所拥有的...http://jsfiddle.net/JWfaf/1/

我只想要一个方向并继续滚动。我希望我已经清除了我想要实现的目标

html

<div class="con">
   <ul>
      <li></li>
      <li></li>
      <li></li>
       <li></li>
   </ul>
</div>​

javascript

function animatethis(targetElement, speed) 
$(targetElement).animate( marginTop: "+=250px",

    duration: speed,
    complete: function ()
    
        targetElement.animate( marginTop: "-=250px" ,
        
            duration: speed,
            complete: function ()
            
                animatethis(targetElement, speed);
            
        );
    
);
;

animatethis($('.con ul li:first-child'), 10000);​

【问题讨论】：

当然，我现在要接受完美答案

@RobertKoritnik 我检查了问题，但答案并没有解决问题，这些答案中发布的大部分链接都已损坏。

@vikasdevde：接受的答案的链接仍然有效，并显示垂直循环滚动你所追求的。种类有点不同，但我相信如果您仔细检查代码，它们会很有帮助。

@vikasdevde：为什么要等这个问题的答案？您的其他问题已经得到充分回答，应该被接受。 如果您希望我们做我们的，就去做您的本分...

【参考方案1】：

工作演示：http://jsfiddle.net/rNXs9/1/

HTML：

<div id="verticalScroller">
    <div>1 Lorem ipsum dolor sit</div>
    <div>2 Lorem ipsum dolor sit</div>
    <div>3 Lorem ipsum dolor sit</div>
    <div>4 Lorem ipsum dolor sit</div>
</div>
​

CSS：

#verticalScroller 
    position: absolute;
    width:52px;
    height: 180px;
    overflow: hidden;


#verticalScroller > div 
    position:absolute;
    width:50px;
    height:50px;

​

JS：

window.verticalScroller = function($elem) 
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('#verticalScroller > div').height();
    if(top < temp) 
        top = $('#verticalScroller').height()
        $elem.css("top", top);
    
    $elem.animate( top: (parseInt(top)-60) , 600, function () 
      window.verticalScroller($(this))
    );



$(document).ready(function() 
    var i = 0;
    $("#verticalScroller > div").each(function () 
          $(this).css("top", i);
          i += 60;
          window.verticalScroller($(this));
    );
);

​

【讨论】：

哇，你打败了我：P。我分叉了你的版本，所以它有线性缓动。 jsfiddle.net/howderek/N9PWn

@howderek 你让它干净无瑕......

@howderek 我能多一点帮助吗，我现在添加了停止功能来停止悬停动画，但无法弄清楚如何在鼠标悬停后恢复动画。 jsfiddle.net/testtracker/4whf6/2

我暂时无法使用 comp 进行 SO（现在我在 kindle 上），但您应该尝试将动画包装在 if 语句中，如果 a 允许动画运行var running 等于 1。然后使用 mouseover 和 mouseout 使 running 0 和 1

不错的解决方案。我对其进行了一些扩展，并允许可变项目高度、鼠标悬停滚动暂停以及每页多个选取框：jsfiddle.net/y3uoepxx。我还在 Github 上将其作为 JQuery 插件发布：github.com/aoloe/jquery-verticalscroll。

【参考方案2】：

Here你很好，先生。

代码

JS：

function animatethis(targetElement, speed) 
    $(targetElement).animate( marginTop: "300px",
    
        duration: speed,
        complete: function ()
        
            $(targetElement).css('marginTop','-450px');
            animatethis(targetElement, speed);
        
    );
;

animatethis($('.con ul li:first-child'), 10000);​

CSS：

uldisplay:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;
lidisplay:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;
.condisplay:block;width:200px;height:300px;overflow:hidden;

HTML：

<a href="#" class="click">click</a>
<div class="con">
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
</ul></div>​

【讨论】：

这在附近。它完全下降然后又回来，我希望隐藏在底部的li立即加入顶部以保持连续流动。

啊，我明白了，那将是一个更困难的问题；D

从过去 3 小时开始尝试，希望 SO 还活着。我希望有人能提供所需的解决方案。顺便说一句，感谢您的帮助...为此 +1

我目前正在构建这个无限滚动：D。我认为这对我来说是一个挑战。

好的，现在我正在构建一个 API 来动态创建滑块。