如何更改新聞速遞運動方向從左到右

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變量需要在改變爲負，因爲我們現在從左到右，而不是到左向右（對於文本的開始位置已經改變到相對軸）工作。