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变量需要更改为负数，因为我们现在从左到右，而不是从右到左（文本的起始位置已更改为相反的轴）。

如何更改新闻自动收报机的运动方向从左到右

1 个答案: