jquery / css：使div内的文本水平滚动，就像新闻自动收报机没有插件一样
任何人都有一些提示，如何在“新闻自动收报机”的方式从右到左水平地在div内滚动文本而不必使用插件。 以下是我正在尝试完成的示例（这是一个插件解决方案： http ： //www.maaki.com/scrollingText.html ）。
这是一个快速的解决方案： 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)); });
使用text-indent css属性，您可以相当简单地执行此操作。
我最近用CSS关键帧动画解决了这个问题。
基本上你的股票代码需要一个包含div的包装div。 包含的代码应该显示内联块，以便它们排成一行：
Letterpress chambray brunch. Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica. Ugh PBR&B kale chips Echo Park.
示例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; }
我有一个使用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); } }
您需要的唯一调整是设置动画持续时间并将其应用于.ticker。
.ticker { animation-name: ticker; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 25s; // tweak based on number of items/desired speed }
你可以看到完整的演示
你可以做这样的事情
this is the scrolling text
和一个jsfunction
function scroll() { $('#scrolltext').css('left', $('#scrollcontainer').width()); $('#scrolltext').animate({ left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width()) }, 2000, function() { scroll(); }); } scroll();
测试。 可以在这里找到： http ： //jsfiddle.net/zrW5q/85/