jquery / css：使 div 中的文本像新闻自动收报机一样水平滚动，没有插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12657029/
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 / css: make text inside div scroll horizontally like a news ticker no plugin
提问by IntricatePixels
anyone have some tips on how to make text inside a div scroll horizontally from right to left in a "news ticker" fashion without having to use a plugin. Here is an example of exactly what I'm trying to accomplish (this is a plugin solution: http://www.maaki.com/scrollingText.html).
任何人都有一些关于如何使 div 中的文本以“新闻自动收报”方式从右向左水平滚动而无需使用插件的技巧。这是我正在尝试完成的一个示例（这是一个插件解决方案：http: //www.maaki.com/scrollingText.html）。
回答by Korvin Szanto
Here's a quick solution to this: http://jsfiddle.net/4mTMw/8/
这是对此的快速解决方案：http: //jsfiddle.net/4mTMw/8/
var marquee = $('div.marquee');
marquee.each(function() {
var mar = $(this),indent = mar.width();
mar.marquee = function() {
indent--;
mar.css('text-indent',indent);
if (indent < -1 * mar.children('div.marquee-text').width()) {
indent = mar.width();
}
};
mar.data('interval',setInterval(mar.marquee,1000/60));
});?
Using the text-indentcss property, you can do this rather simply.
使用text-indentcss 属性，您可以相当简单地做到这一点。
回答by lewismcarey
I recently solved this with CSS keyframe animations.
我最近用 CSS 关键帧动画解决了这个问题。
Essentially your ticker needs a wrapper div with overflow hidden on it. The tickers contained items should display inline-block so they are in a line:
本质上，您的股票代码需要一个包装器 div，上面隐藏着溢出。包含项目的代码应该显示 inline-block 以便它们在一行中：
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Letterpress chambray brunch.</div>
<div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
<div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
</div>
</div>
Example CSS:
示例 CSS：
.ticker-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: rgba(51, 51, 51, 0.5);
padding-left: 100%; // offsets items to begin
}
.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%; // taken from container as display inline-block
}
.ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
I have a demothat uses the css keyframe animation to then transform the content all the way from one side to the other infinitely. n.b. Vendor prefixed versions not shown.
我有一个演示，它使用 css 关键帧动画将内容从一侧无限地转换到另一侧。nb 供应商前缀版本未显示。
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
The only tweak you need is to set the animation duration and apply it to .ticker.
您需要做的唯一调整是设置动画持续时间并将其应用到 .ticker。
.ticker {
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 25s; // tweak based on number of items/desired speed
}
You can see the full demo
你可以看到完整的演示
回答by Mario A
you could do something like this
你可以做这样的事情
<div id="scrollcontainer" style="postion:relative; overflow:hidden; width:100%;">
<span id="scrolltext" style="position:absolute; white-space:nowrap">this is the scrolling text</span>
</div>
and a js function
和一个js函数
function scroll() {
$('#scrolltext').css('left', $('#scrollcontainer').width());
$('#scrolltext').animate({
left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width())
}, 2000, function() {
scroll();
});
}
scroll();
tested. can be found here: http://jsfiddle.net/zrW5q/85/
测试。可以在这里找到：http: //jsfiddle.net/zrW5q/85/
