始终在选取框中显示文本答案

【问题标题】：Always show text in a marquee始终在选取框中显示文本
【发布时间】：2017-08-31 04:40:05
【问题描述】：

我的目标是始终在标签选取框上显示没有空格的文本。在这个通常的动画中应该总是出现一个文本。

我的目标是始终在标签选取框上显示没有空格的文本。一个文本应该总是出现在这个通常的动画中。在我的实际项目中，我不断收到推文并将它们放在选框中，我删除第一个，然后只要数量为 5，我就进行 .append（不是一个好的解决方案，如果 10 条推文以其次，用户不能很好地阅读选框。我想在选框内有 5 个跨度，在某个时刻，我的网页开始变慢，因为不断执行 .append 并有很多跨度元素。

使用设置的间隔，我模拟接收推文，但在某一时刻动画不流畅，或重新开始显示空间。我要显示的唯一空格是首字母，否则我不想显示空格。

我不知道如何解决这个问题，或者如果有一个事件或我可以做些什么来检测第一个跨度何时离开容器，以便添加一个新元素并且可以很好地读取选取框。

我尝试了几个库，但没有一个适合我的问题。

http://jsfiddle.net/fq2z6o99/

    <div id='container_marquee'>
     <marquee id='mymarquee' behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
               <span>first marquee text</span>
               <span>second marquee text</span>
               <span>third marquee text</span>
               <span>fourth marquee text</span>
               <span>fifth marquee text</span>
     </marquee>
    </div>

【问题讨论】：

stackoverflow.com/questions/21427999/…你试过了吗？
marquee 标签已过时 - 你最好编写代码来做 marquee 的工作，然后你可以做得更好
@Shubhranshu jsfiddle.net/rt87hdv5我已经重新创建了解决方案，但我不知道如何添加短语，就像我的真实示例一样，也许你可以帮助我。
@JaromandaX 我读过，但我看过几个例子和库，但它们并没有解决我的问题。
@yavg，然后您需要编写自己的解决方案

标签： javascript jquery

【解决方案1】：

您可以编写自定义 jQuery 代码来替换 marquee 标签。

试试下面的代码可能对你有帮助：

<html>
<head>
<style>
* {
    margin:0; padding:0
}
div {
    background: white;
    width: 600px;
    height: 40px;
    border: 2px solid red;
}
div p {
    position: relative;
}
</style>
</head
<body>
<div>
    <p>Lorem ipsum dollar sit, lorem ipsum dollar</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var animation = function() {
    $('div p').animate({left: '320'}, 5000,

    function() {
        $('div p').animate({left: '0'}, 5000);
        animation();
    });
};

animation();

</script>
</body>
</html>

【讨论】：

【解决方案2】：

使用选取框行为 = 替代。

【讨论】：

我已经看到它是如何工作的，但它并没有解决我的问题。
stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore
我试图将此报告为“不是答案”（因为 LQ 不可用），但被拒绝了。我仍然认为这对于 Stack Overflow 的回答来说不够实质性，应该是评论。

【解决方案3】：

我已经动态添加了第六个字幕文本。试试这样的：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
<style>
.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}
.marquee span{
	margin:0 15px;
}
</style>
</head>
<body>
<div class="marquee">
	<span>first marquee text</span>
	<span>second marquee text</span>
	<span>third marquee text</span>
	<span>fourth marquee text</span>
	<span>fifth marquee text</span>
</div>
</body>
<script>
$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 100,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});
$(".marquee span:last-child").after("<span>Sixth marquee text</span>");
</script>
</html>

【讨论】：

我最初尝试使用这个插件。但是，如果您在动态添加文本时不会停止或重新启动动画，我会选择您作为最佳答案。
这个会很有用，但是就像我说的，我需要在不重新启动整个选框的情况下添加一个句子
我的意思是，选框在显示新添加的句子jsfiddle.net/pt4rwo35之前重新启动