jQuery滚动文本左右对齐

我见过Giva labs的marquee滚动条和SerialScroll但是无法弄清楚如何让它在div中从一边到另一边滚动文本。 我猜我需要一些其他类型的扩展。

基本上，我有一个宽度为100px的div和跨越200px的文本，而不是像一个选框一样滚动它，我想向左滚动直到它到达结束然后将它向右移回。 所以，左右滚动。

建议？

Answer 1

这个页面有一个左右滚动的字幕 – 可能值得一试。

Answer 2

我决定采用斯蒂芬德拉诺的答案 ，实际上让它发挥作用。 我也对它做了改进。

我的脚本在用鼠标hover时激活。

这是我的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标记：

 
 
This is the text that is too long to fit in the box
  

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

 .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源或所需的任何自定义内容。 使用他们的代码生成器，它使事情变得更容易，你有一个预览。

免责声明：我做到了这一点。