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

你有它！一个漂亮的小侧面选框。

免责声明：我甚至没有对此进行测试，其中大部分内容都不在我的脑海中，但如果存在任何原因，您应该能够解决这些问题，因为基本概念已经存在。

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

}

Answer 5

您可以查看jRollingNews。您可以显示任何RSS源或所需的任何自定义内容。使用他们的代码生成器，它使事情变得更容易，并且您有预览。

免责声明：我做到了。

jQuery滚动文本左右对齐

5 个答案: