javascript - 如何将新闻收报机移动方向更改为从左到右

Question

我想将新闻滚动条从右到左更改为从左到右，因为我想使用阿拉伯语言，因此将移动方向更改为从左到右非常重要。我尝试了几天但没有找到任何解决方案

HTML:

$('#ticker2').html($('#ticker1').html());

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


$('#ticker2 li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#ticker2').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('ticker1','ticker2'); }, 10) }

     $(function(){
          $('#news_ticker').mouseenter(function() { window.clearInterval(intervalId); });
    $('#news_ticker').mouseleave(function() { start(); })
          start();
     });

.news {
  color: #0065b3;
  border-left: 1px solid #0065b3;
  border-bottom: 1px solid #0065b3;
  font-family: 'Cairo', sans-serif;
}


#ticker1 li, #ticker2 li { 
  list-style-type:none; 
  float:left; 
  padding-right:20px;
  position:absolute;
  left:0px;
  }

#ticker1, #ticker2 { 
  position:relative;
  display:block;
  width:4000px; 
  margin:0; 
  content=""; display:table;
  height:0px; 

   }

#news_ticker{
  height:37px;
  overflow:hidden;
  color: #0065b3 !important;
  border-bottom: 1px solid #0065b3;
  border-left: 1px solid #0065b3;
  font-family: 'Cairo', sans-serif;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="news_ticker">
  <div id ="ticker1"  class="w3-col l9 m8 s8  w3-center w3-xlarge">

    <li><a href="#"> العنصر الأول </a></li>

    <li><a href="#"> العنصر الثاني </a></li>

    <li><a href="#"> العنصر الثالث </a></li>

    <li><a href="#"> العنصر الرابع </a></li>

    <li><a href="#"> العنصر الخامس </a></li>

  </div>
  <div id="ticker2"  class="w3-col l9 m8 s8 w3-center w3-xlarge "></div>
</div>

Answer 1

需要对函数abc进行更改。

function abc(a,b) {  

    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));

    if((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});
    }
} 

股票行情元素的 margin-left 需要增加 +1 才能从左向右移动。此外，temp 变量需要更改为负数，因为我们现在从左到右工作，而不是从右到左(文本的起始位置已更改为相反的轴)。