Question

嗨我想制作一个在新闻中滚动文字的栏。我有一个文本，它的最大宽度太长，溢出属性设置为overflow-x: auto;所以它被切割。但我正在寻找这样一个自动滚动我的文本（向右）的栏，当他完成时，向后滚动到另一个方向（左）。这是我在css中的文字：

#text {
display: block;
color: white;
position: absolute;
width: 50%;
left: 0%;
text-align: center;
font-size: 8vw;
margin-top: 8.5%;
font-variant: small-caps;
text-shadow: 0 0 20px #000;
text-align: center;
z-index: 2;
overflow-x: auto;
white-space: nowrap;
line-height: 100%;
}

有什么想法吗？实际上答案可以是css，js或jquery。没关系。

Answer 1

.marquee { width: 450px; background-color: yellow; color: black; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee p { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; text-transform: uppercase; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }标记已过时，如您所见：https://developer.mozilla.org/de/docs/Web/HTML/Element/marquee

你可以使用纯css，这是一个小提琴：

＆＃13;

<div class="marquee">
	<p>Lorem Ipsum</p>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

其中一些CodePen示例可能对您或其他人有用：

http://codepen.io/search/pens?q=marquee&limit=all&type=type-pens

我认为可以匹配您所寻找的大部分内容：http://codepen.io/jaredkc/pen/bmAph 它使用非常简单的jQuery来实现滚动和悬停暂停

$('.twitter-scroll').marquee({
  duration: 15000,
  pauseOnHover: true
});

唯一的例外是，当我击中左侧时，它不会“反弹”。

Answer 3

如前所述，有本机选框元素：

map!

＆安培;有jQuery Marquee plugin可以配置为无限制地运行文本。 [例如：https://codepen.io/aamirafridi/pen/qgutw]

<marquee scrollamount="2" behavior="alternate" direction="right" width="350">TEXT TO SCROLL</marquee>

你也可以使用任何轮播插件来使用列表＆amp;不是单行字符串。 this one

之类的东西

如何制作一个在新闻中像这样横向滚动文本的栏？

3 个答案: