javascript - 如何使用 Jquery .animate() 函数创建连续滚动的内容？

标签 javascript jquery jquery-animate marquee scroller

<分区>

Possible Duplicate:
Implementing circular scroller in jquery

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

这就是我所拥有的... 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);

最佳答案

工作演示: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));
    });
});

关于javascript - 如何使用 Jquery .animate() 函数创建连续滚动的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13221777/

上一篇：用于在线测验的 JavaScript？

下一篇：javascript - 替换所有非单词字符，如 ?*+#

javascript - 使用 jQuery 将工具提示添加到 DataTable 中的 TD

javascript - 动画 jQuery 高度百分比

jQuery 动画在 IE8 上非常慢 - 修复了吗？

javascript - jQuery:动画宽度/高度，但保持居中

asp.net - 想要使用jquery弹出窗口，但从服务器端获取数据

javascript - 通过ajax向数据库发出持续请求的有效方法是什么？

javascript - nodejs (expressjs) 如何将信息从 2 个查询传递到 jade？

javascript - Jquery - 仅发送表单中的一些值

javascript - Internet Explorer 不加载选择框中的值