自动收报机文字重叠

Question

我有这个漂亮的小连续文本自动收录器，但不幸的是，当文本达到一定长度时，它开始重叠。我无法为我的生活找到解决方案。

我已将所有内容设置为“display：block”，但这似乎没有什么区别。

$('#tick2').html($('#tick').html());
//alert($('#tick2').offset.left);

var temp=0,intervalId=0;
$('#tick li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#tick').css({'width':temp+1000, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});

function abc(a,b) {  

    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
    if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
        $("#"+a).css({'margin-left':(marginLefta-1)+'px'});
    } else {
        $("#"+a).css({'margin-left':temp});
    }
    if((-marginLeftb<=$("#"+b).width())){
        $("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
    } else {
        $("#"+b).css({'margin-left':temp});
    }
} 

     function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }

     $(function(){

          start();
     });

#tick li, #tick2 li { list-style-type:none; float:left; padding-right:20px; position:absolute; left:0px;}
#tick, #tick2 { position:relative; display:block; width:100%; margin:0; content=""; display:table; height:0px; }
#outer{width:100%;height:230px; overflow:hidden; background:#EEEEEE;}
#outer span {text-decoration:none; color:#333; font-size:46px; padding-right: 200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="outer">
  <ul id ="tick">
    <li><span>I am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am First</span></li>
    <li><span>I am Second</span></li>
    <li><span>I am Third</span></li>
  </ul>
  <div id="tick2"></div>
</div>

谢谢！

Answer 1

这是javascript如何确定＆＃34; width＆＃34;的问题。通常，当确定元素的宽度时，javascript只关心元素的可见部分。在这种情况下，您的宽度计算永远不会超过视口的宽度。解决此问题的一种方法是使用scrollWidth来计算元素的真实宽度。只需稍加调整，您的代码就可以进行调整，并将其用于left值。

＆＃13;

＆＃13;

$('#tick2').html($('#tick').html());
//alert($('#tick2').offset.left);

var temp=0,intervalId=0;
$('#tick li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':temp});
  temp=this.scrollWidth+temp;
  $(this).addClass('done');
});
$('#tick').css({'width':temp+1000, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});

function abc(a,b) {  

    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
    if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
        $("#"+a).css({'margin-left':(marginLefta-1)+'px'});
    } else {
        $("#"+a).css({'margin-left':temp});
    }
    if((-marginLeftb<=$("#"+b).width())){
        $("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
    } else {
        $("#"+b).css({'margin-left':temp});
    }
} 

     function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }

     $(function(){

          start();
     });

＆＃13;

#tick li, #tick2 li { list-style-type:none; float:left; padding-right:20px; position:absolute; left:0px;}
#tick, #tick2 { position:relative; display:block; width:100%; margin:0; content=""; display:table; height:0px; }
#outer{width:100%;height:230px; overflow:hidden; background:#EEEEEE;}
#outer span {text-decoration:none; color:#333; font-size:46px; padding-right: 200px;}


#tick li:not(.done), #tick2 li:not(.done) {
	overflow: scroll;
	width: 0px;
	white-space: nowrap;
	padding: 0px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="outer">
  <ul id ="tick">
    <li><span>I am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am FirstI am First</span></li>
    <li><span>I am Second</span></li>
    <li><span>I am Third</span></li>
  </ul>
  <div id="tick2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;