jQuery上下滚动文本

Question

我看过Giva labs的marquee scroller和SerialScroll，但不知道如何让它在div中左右滚动文本。我猜我需要一些其他类型的扩展。

基本上，我有一个宽度为100px的div和一个跨度为200px的文本，而不是像字幕一样滚动它，我想向左滚动它，直到它到达结尾，然后再将它带回右边。所以，侧向滚动。

有什么建议吗？

Answer 1

This页面有一个左右滚动的字幕--可能值得使用checking out。

Answer 2

我决定使用Stephen Delano's answer并让它真正工作起来。我也对它进行了改进。

我的脚本在鼠标悬停时被激活。

Here is my JSFiddle.

这就是脚本：

$('.scroll-box').mouseenter(function () {
            $(this).stop();
            var boxWidth = $(this).width();
            var textWidth = $('.scroll-text', $(this)).width();
            if (textWidth > boxWidth) {
                var animSpeed = textWidth * 10;
                $(this).animate({
                    scrollLeft: (textWidth - boxWidth)
                }, animSpeed, function () {
                    $(this).animate({
                        scrollLeft: 0
                    }, animSpeed, function () {
                        $(this).trigger('mouseenter');
                    });
                });
            }
        }).mouseleave(function () {
            var animSpeed = $(this).scrollLeft() * 10;
            $(this).stop().animate({
                scrollLeft: 0
            }, animSpeed);
        });

如果你想让它自动滚动，而不是等待任何鼠标事件，you could do this。

如果你想改变滚动的速度，你只需要把10改成另一个数字。数字越大，滚动速度就越慢。

Answer 3

昨天，当我在寻找做同样事情的东西时，我偶然发现了这篇文章。虽然我走了一条不同的路线，但我想出了如何实现这一点。

首先，你需要你的标记。我们将在此示例中使用DIV标记：

<div class="scroll-box">
  <div class="scroll-text">This is the text that is too long to fit in the box</div>
</div>

接下来，我们需要设置它的样式：

.scroll-box {
  width: 100px;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}
.scroll-text {
  position: absolute;
  white-space: nowrap;
}

现在我们需要一些jQUery：

$(document).ready(function() {
  $('.scroll-box').bind('marquee', function() {
    var boxWidth = $(this).width;
    var textWidth = $('.scroll-text', $(this)).width();
    if (textWidth > boxWidth) {
      var animSpeed = textWidth - boxWidth * 20; // 50 pix per sec
      $(this)
        .animate({scrollLeft: textWidth - scrollWidth}, animSpeed)
        .animate({scrollLeft: 0}, animSpeed, function() {
          $(this).trigger(marquee);
        });
    }
  }).trigger('marquee');
});

现在你就知道了！一个漂亮的侧面对侧面的小字幕。

免责声明:我甚至没有测试过这一点，而且大部分都是我想不到的，但如果有任何小问题，你应该能够解决，因为基本概念已经存在了。