Question

我的目标是始终在没有空格的标记选框上显示文字。应该始终显示一个文本，显示在这个通常的动画中。

我的目标是始终在没有空格的标签选框上显示文字。在这个通常的动画中应始终显示文本。在我的真实项目中，我经常接收推文，我将它们放在选框中，我删除了第一个，然后只要数量为5就制作.append（不是一个好的解决方案，如果10个推文到达第二，用户无法很好地阅读选框。我希望在选框内有5个跨度，在某个时刻我的网页开始变慢，不断执行.append并且有很多span元素。）

使用设置的时间间隔我模拟就像接收推文一样，但是在某一点上动画不流畅，或者重新开始显示空格。我想要展示的唯一空间是初始空间，否则我不想显示空格。

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

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

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>

Answer 1

使用选框行为=替代。

Answer 2

我动态添加了第六个字幕文本。尝试这样的事情：

<!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>

Answer 3

您可以编写自定义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>

始终在选取框中显示文本

3 个答案: