jQuery的滚动文字一侧到另一侧(jQuery scroll text side-to-side)

我见过GIVA Labs的字幕滚动和SerialScroll但无法弄清楚如何得到它从一个侧面格至侧涡文本。我的猜测是，我需要一些其他类型的扩展名。

基本上，我有宽100px的股利和文字跨越200像素和，而不是所有的方式，通过滚动它像一个大帐篷，我想滚动它离开，直到它到达终点，然后把它找回来。因此，一侧到另一侧滚动。

建议？

Answer 1:

此页面有一个字幕滚动一边到另一边-可能是值得检查出。

Answer 2:

我决定采取斯蒂芬·德拉诺的回答居然搞不定。我也上做了改进。

我的脚本激活与它悬停鼠标。

这是我的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到另一个号码。该数字越大，滚动速度较慢。

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

}