jQuery滚动文本并排

我见过Giva实验室的marquee scroller和SerialScroll，但无法弄清楚如何让它在一个div中滚动文本从一边到另一边。我的猜测是我需要一些其他类型的扩展。jQuery滚动文本并排

基本上，我有一个宽度为100px的div和跨越200px的文本，而不是像滚动一样滚动它，我想向左滚动它，直到到达结尾，然后将其恢复正确。所以，左右滚动。

对此提出建议？

来源

2009-09-11 psychotik

This页面有字幕滚动一边到另一边 - 可能是值得checking out。

来源

2009-09-11 05:10:46

昨天我遇到这个帖子的时候，当时我正在寻找一些做同样的事情。虽然我走了一条不同的路线，但我想出了如何实现这一目标。

首先，你需要你的标记。我们将使用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'); 
});

有你有它！一个不错的小对面选框。免责声明：我甚至没有测试过这个，大部分都没有考虑到我的头顶，但是如果有什么问题的话，你应该能够找出一些小问题，因为基本概念就在那里。

来源

2009-10-14 20:22:29

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

}

来源

2010-05-26 07:41:32 Kiel

我使用Markus Bordihn的jScroller。

我有一个样品在我的博客上工作：http://www.leniel.net/

马库斯也恰好有一个独立的版本，这是jScroller2。这个不需要jQuery。

可以从此处下载：http://jscroller.markusbordihn.de/download/

来源

2011-08-27 14:48:12

这个插件抛出错误，并不流畅，并且有一个奇怪的API。 – Oleander 2013-02-08 10:48:58

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

声明：我做到了。

来源

2012-03-20 09:42:56

我决定采取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更改为另一个数字即可。数字越大，滚动越慢。

来源

2013-09-05 23:46:00 Johannes

jQuery滚动文本并排

回答

相关问题