jQuery 滚动文本左右移动

Question

我看过Giva Labs的跑马灯滚动条和SerialScroll，但无法弄清如何使它从左到右滚动div中的文本。我的猜测是我需要一些其他类型的扩展程序。

基本上，我有一个宽度为100px的div和跨越200px的文本，而不是像跑马灯一样将其全部滚动，我想将其向左滚动直到达到末尾，然后再向右移动。所以，左右滚动。

有什么建议吗？

- psychotik

Answer 1

这个 页面有一个左右滚动的跑马灯 - 值得一看。

- Andy Gaskell

Answer 2

我决定采用Stephen Delano的答案并使其实际运作。我还对它进行了改进。

我的脚本在鼠标悬停时启动。 这是我的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);
        });

如果您希望它自动滚动而无需等待任何鼠标事件，您可以这样做。

如果您想改变滚动的速度，只需将10更改为另一个数字。 数字越大，滚动速度越慢。

- Hanna

---

有没有想法如何调整代码，使得.scroll-box之外的内容可以使用省略号？ - Jay

@Jay 我不确定我理解你的意思。如果你只想使用省略号来截断内容，那么我会建议你使用 CSS。 - Hanna

我最终使用了CSS，并想出了这个。我在考虑一些可能像这个非滚动版本截断文本的东西，可以在这里看到。 - Jay

如果你只是在寻找CSS，它就是这样的：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - Hanna

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');
});

就是这样！一个不错的侧滚跑马灯。

免责声明：我甚至没有测试过这个，大部分都是凭记忆完成的，但是如果有小问题，你应该能够解决，因为基本概念已经在这里了。

- Stephen Delano

Answer 4

col3LongText: function()
{
    var $flightsPanel = $('#flightsPanel');
    $('.scrollBox', $flightsPanel).mouseover(function() 
    {
        var boxWidth = $(this).width();
        var textWidth = $('.deal-name', $(this)).width();

        if (textWidth > boxWidth) 
        {    
            var animSpeed = textWidth - boxWidth; // 50 pix per sec
            $('.deal-name', $(this)).animate({textIndent: -animSpeed}, 2000);
        }

     }).mouseout(function() {
        $('.deal-name', $(this)).stop().css({textIndent: 0});     
     })

}

- Kiel

Answer 5

你可以看一下jRollingNews。 你可以展示任何RSS订阅或者自定义内容。使用他们的代码生成器，这会使事情变得更加容易，并且你可以预览。 免责声明：这是我做的。

- scriptosaur.com