javascript 如何在 JQuery 中创建水平循环自动收报机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15755525/
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
How to create a horizontal looping ticker in JQuery
提问by Emanegux
I am working on a ticker that loops text within the body of a div. I can get it to move the text at a specified rate but I am having trouble figuring out how to get JQuery to loop the text. Once the contents in the div have reached the end, how do I loop it back while still showing rest of the contents from the tail?
我正在研究一个在 div 主体内循环文本的股票代码。我可以让它以指定的速率移动文本，但我无法弄清楚如何让 JQuery 循环文本。一旦 div 中的内容到达末尾，如何在仍然显示尾部的其余内容的同时将其循环回来？
Code:
代码：
var left = -500;
$(document).ready(function(e){
function tick() {
left++;
$(".ticker-text").css("margin-left", -left + "px");
setTimeout(tick, 16);
}
tick();
});
html:
html：
<div class = "ticker-container">
<div class = "ticker-text">
start text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text end
</div>
</div>
回答by Asad Saeeduddin
Just reset the margin when it gets too far left:
只需在左边距太远时重置边距：
var width = $('.ticker-text').width(),
containerwidth = $('.ticker-container').width(),
left = containerwidth;
$(document).ready(function(e){
function tick() {
if(--left < -width){
left = containerwidth;
}
$(".ticker-text").css("margin-left", left + "px");
setTimeout(tick, 16);
}
tick();
});
Note that the CSS must be changed so that .ticker-textassumes the width of its contents, and not 1000%as you specified:
请注意，必须更改 CSS 以便.ticker-text假定其内容的宽度，而不是1000%您指定的宽度：
.ticker-text {
height: 150%;
white-space:nowrap;
display:inline-block;
}
Here is a demonstration: http://jsfiddle.net/fHd4Z/
这是一个演示：http: //jsfiddle.net/fHd4Z/
回答by Chris O'Kelly
Just to flesh my comment out into an answer:
只是为了将我的评论充实为答案：
As above, I believe you'd be best of using one of the pre existing frameworks designed for this. In terms of a quick knock up of the feature, you could start with something like this: http://jsfiddle.net/B9ruA/
如上所述，我相信您最好使用专为此设计的现有框架之一。就快速启动该功能而言，您可以从以下内容开始：http: //jsfiddle.net/B9ruA/
JS:
JS：
var tickerId="#tickerText";
function tickify(e) {
var text=$(e).text().split("");
var newText="";
for (var i=0;i<text.length;i++) {
newText+="<span class='tickerChar'>" + text[i] + "</span>";
}
$(e).html(newText);
}
tickify(tickerId);
function tick(){
$(tickerId + " span.tickerChar:first").hide("slide",{direction:"left"},50,function(){$(this).appendTo($(tickerId)).show("slide",{direction:"right"},50);});
}
setInterval(function(){tick()},200);
HTML:
HTML：
<div id="tickerText"> woo, here is some text for ticking, text that ticks, ticky text to test with </div>
CSS:
CSS：
div.ui-effects-wrapper {
display:inline;
}
notes:
笔记：
I had to add some css to stop the animated characters being displayed as block (and thus on their own line). You would probably make the selector more specific to not screw with other animations on the page (if you have any).
我不得不添加一些 css 来阻止动画角色显示为块（因此在他们自己的行上）。您可能会使选择器更加具体，以免与页面上的其他动画（如果有的话）混淆。
Obviously this could do with some timing readjustments for smoothness sake - I couldn't be bothered doing the niggly trial and error work behind that but have fun (another reason to use a framework).
显然，为了平滑起见，这可以通过一些时间重新调整来实现 - 我不会被打扰在后面进行琐碎的试错工作，但要玩得开心（使用框架的另一个原因）。
in my comment I mentioned the methods slideLeft and slideRight - they don't exist. my bad.
在我的评论中，我提到了方法 slideLeft 和 slideRight - 它们不存在。我的错。
