jQuery 左右滚动文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1408641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery scroll text side-to-side
提问by psychotik
I've seen Giva labs' marquee scrollerand SerialScrollbut can't figure out how to get it to scroll text in a div from side to side. My guess is I need some other type of extension.
我见过Giva实验室的选框滚动器和SerialScroll，但不知道如何让它在 div 中左右滚动文本。我的猜测是我需要一些其他类型的扩展。
Basically, I have a div of width 100px and text that spans 200px and instead of scrolling it all the way through like a marquee, I want to scroll it left until it reaches the end and then bring it back right. So, side-to-side scrolling.
基本上，我有一个宽度为 100px 的 div 和跨越 200px 的文本，而不是像选取框一样一直滚动它，我想向左滚动它直到它到达末尾，然后将它向右拉回来。所以，左右滚动。
Suggestions?
建议？
回答by Andy Gaskell
Thispage has a marquee scrolling side to side - might be worth checking out.
回答by Hanna
I decided to take Stephen Delano's answerand actually get it working. I also made improvements on it.
我决定采纳Stephen Delano 的答案，并真正让它发挥作用。我也对其进行了改进。
My script activates on hovering over with it with the mouse.
我的脚本在用鼠标悬停在它上面时激活。
And here is just the script:
这里只是脚本：
$('.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);
});
If you wanted to have it auto-scroll and not wait for any mouse events you could do this.
如果您想让它自动滚动而不等待任何鼠标事件，您可以这样做。
If you would want to change the speed of the scroll, you'd just have to change the 10to another number. The bigger the number, the slower the scroll.
如果您想更改滚动速度，只需将 更改10为另一个数字。数字越大，滚动越慢。
回答by Stephen Delano
I came across this post yesterday when I was looking for something to do the same thing. Although I went a different route, I figured out how to get this accomplished.
昨天当我正在寻找做同样事情的东西时，我遇到了这篇文章。虽然我走了一条不同的路，但我想出了如何实现这一目标。
First, you need your markup. We are going to use DIV tags for this example:
首先，你需要你的标记。我们将在这个例子中使用 DIV 标签：
<div class="scroll-box">
<div class="scroll-text">This is the text that is too long to fit in the box</div>
</div>
Next, we need to style it:
接下来，我们需要对其进行样式设置：
.scroll-box {
width: 100px;
height: 1.2em;
overflow: hidden;
position: relative;
}
.scroll-text {
position: absolute;
white-space: nowrap;
}
Now we need some jQUery:
现在我们需要一些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');
});
And there you have it! A nice little side-to-side marquee.
你有它！一个漂亮的小边到边选框。
DISCLAIMER: I didn't even test this, and most of it is off the top of my head, but you should be able to work out the minor kinks if there are any because the basic concept is there.
免责声明：我什至没有测试过这个，而且大部分都在我的脑海中，但是如果有的话，你应该能够解决小问题，因为基本概念就在那里。
回答by Kiel
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});
})
}
回答by scriptosaur.com
You can give a look to jRollingNews. You can display any RSS feed or any custom content you want. Use their code generator, it makes things a lot easier and you have a preview.
你可以看看jRollingNews。您可以显示任何 RSS 提要或您想要的任何自定义内容。使用他们的代码生成器，它使事情变得容易得多，并且您可以进行预览。
Disclaimer: I made this.
免责声明：我做了这个。
