валютный тикер без пробела

Я хочу создать тикер валюты. Запрос извлекает значения из yahoo Finance API и отображает их как текст. Основная проблема - это пробел в конце текста. Шаблон выделения marquee plugin решает проблему разрыва. SetInterval разрушает движущийся текст, потому что он начинается с начала.валютный тикер без пробела

 $(document).ready(function() { 
 
     //StockPriceTicker(); 
 
     setInterval(StockPriceTicker, 5000); 
 
    }); 
 

 
    function StockPriceTicker() { 
 
     var Symbol = "", 
 
     CompName = "", 
 
     Price = "", 
 
     ChnageInPrice = "", 
 
     PercentChnageInPrice = ""; 
 
     var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L"; 
 
     var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys"; 
 
     var StockTickerHTML = ""; 
 

 
     var StockTickerXML = $.get(flickerAPI, function(xml) { 
 
     $(xml).find("quote").each(function() { 
 
      Symbol = $(this).attr("symbol"); 
 
      $(this).find("Name").each(function() { 
 
      CompName = $(this).text(); 
 
      }); 
 
      $(this).find("LastTradePriceOnly").each(function() { 
 
      Price = $(this).text(); 
 
      }); 
 
      $(this).find("Change").each(function() { 
 
      ChnageInPrice = $(this).text(); 
 
      }); 
 
      $(this).find("PercentChange").each(function() { 
 
      PercentChnageInPrice = $(this).text(); 
 
      }); 
 

 
      StockTickerHTML += "<span>" + CompName + " " + Price + "</span>"; 
 
     }); 
 

 
     $(".marquee div").html(StockTickerHTML); 
 
     //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2}); 
 
     }); 
 
    }

body { 
 
    margin: 20px; 
 
} 
 
.marquee { 
 
    height: 25px; 
 
    width: 420px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.marquee div { 
 
    display: block; 
 
    width: 200%; 
 
    height: 30px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    animation: marquee 5s linear infinite; 
 
} 
 
.marquee span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
@keyframes marquee { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="marquee"> 
 
    <div> 
 

 
    </div> 
 
</div>

Спасибо заранее.

источник

2017-01-25 Marios Nikolaou

трудно без чего-то, что на самом деле работает, хотя одна вещь, которую я сразу же реагирует на это '.marquee пядь { плыть налево; ширина: 50%; } '. Удалите «width: 50%» или измените его на. .marquee span {display: inline-block; } 'может решить вашу проблему, так как это приведет к тому, что' span' отрегулирует его содержимое. – LGSon

Я знаю, что много пробовал, не повезло. Надеюсь, кто-то может помочь. –

Не могли бы вы сообщить мне, что не работает с ответом дано, так что я смогу настроить и вас принять? – LGSon

Проблема в том, вы дали фиксированную ширину span, и если текст меньше он будет иметь большое белое пустое пространство в конце каждого из них, так что, регулируя .marquee span правила, как это решить этот вопрос

.marquee span { 
    display: inline-block; 
} 
.marquee span ~ span::before { 
    content:'|'; 
    color: red; 
    padding: 0 5px 
}

прерывание текста вызывается фиксированной ширины на .marquee div, так что я сделал некоторые изменения в том, что один слишком

.marquee div { 
    display: inline-block; 
    padding-left: 100%;   /* start from right, can be removed */ 
    animation: marquee 25s linear 2s infinite; 
}

Пример сниппета

$(document).ready(function() { 
 
      //StockPriceTicker(); 
 
      setInterval(StockPriceTicker , 1000); 
 
     }); 
 
\t \t 
 
     function StockPriceTicker() { 
 
      var Symbol = "", CompName = "", Price = "", ChnageInPrice = "", PercentChnageInPrice = ""; 
 
      var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L"; 
 
      var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys"; 
 
      var StockTickerHTML = ""; 
 
      
 
      var StockTickerXML = $.get(flickerAPI, function(xml) { 
 
       $(xml).find("quote").each(function() { 
 
        Symbol = $(this).attr("symbol"); 
 
        $(this).find("Name").each(function() { 
 
         CompName = $(this).text(); 
 
        }); 
 
        $(this).find("LastTradePriceOnly").each(function() { 
 
         Price = $(this).text(); 
 
        }); 
 
        $(this).find("Change").each(function() { 
 
         ChnageInPrice = $(this).text(); 
 
        }); 
 
        $(this).find("PercentChange").each(function() { 
 
         PercentChnageInPrice = $(this).text(); 
 
        }); 
 
        
 
        StockTickerHTML += "<span>"+CompName+" "+Price+"</span>"; 
 
       }); 
 
\t \t \t 
 
       $(".marquee div").html(StockTickerHTML); 
 
       //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2}); 
 
      }); 
 
     }

body { margin: 20px; } 
 

 
.marquee { 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    border: 1px green solid; 
 
} 
 

 
.marquee span { 
 
    display: inline-block; 
 
} 
 
.marquee span ~ span::before { 
 
    content:'*'; 
 
    padding: 0 25px; 
 
} 
 

 
.marquee div { 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: marquee 12s linear 1s infinite; 
 
} 
 

 
@keyframes marquee { 
 
    0% { transform: translate(0, 0); } 
 
    100% { transform: translate(-100%, 0); } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="marquee"> 
 
    <div> 
 
    </div> 
 
</div>

Обновление на основе комментариев

$(document).ready(function() { 
 
      //StockPriceTicker(); 
 
      setInterval(StockPriceTicker , 5000); 
 
     }); 
 
\t \t 
 
     function StockPriceTicker() { 
 
      var Symbol = "", CompName = "", Price = "", ChnageInPrice = "", PercentChnageInPrice = ""; 
 
      var CNames = "^FTSE,HSBA.L,SL.L,BATS.L,BLND.L,FLG.L,RBS.L,RMG.L,VOD.L"; 
 
      var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys"; 
 
      var StockTickerHTML = ""; 
 
      
 
      var StockTickerXML = $.get(flickerAPI, function(xml) { 
 
       $(xml).find("quote").each(function() { 
 
        Symbol = $(this).attr("symbol"); 
 
        $(this).find("Name").each(function() { 
 
         CompName = $(this).text(); 
 
        }); 
 
        $(this).find("LastTradePriceOnly").each(function() { 
 
         Price = $(this).text(); 
 
        }); 
 
        $(this).find("Change").each(function() { 
 
         ChnageInPrice = $(this).text(); 
 
        }); 
 
        $(this).find("PercentChange").each(function() { 
 
         PercentChnageInPrice = $(this).text(); 
 
        }); 
 
        
 
        StockTickerHTML += "<span>"+CompName+" "+Price+"</span>"; 
 
       }); 
 
\t \t \t 
 
       $(".marquee div").html(StockTickerHTML); 
 
       //$("#dvStockTicker").jStockTicker({interval: 30, speed: 2}); 
 
      }); 
 
     }

body { margin: 20px 0; } 
 

 
.marquee { 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    border: 1px green solid; 
 
} 
 
.marquee span { 
 
    display: inline-block; 
 
    background: lightgray; 
 
} 
 
.marquee span ~ span::before { 
 
    content:'|'; 
 
    color: red; 
 
    padding: 0 5px; 
 
} 
 
.marquee div { 
 
    display: inline-block; 
 
    animation: marquee 6s linear 2s infinite; 
 
} 
 

 
@keyframes marquee { 
 
    0% { transform: translate(0, 0); } 
 
    100% { transform: translate(calc(-100% + 100vw), 0); } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="marquee"> 
 
    <div> 
 
    </div> 
 
</div>

источник

2017-01-25 21:09:01 LGSon

ОК, поскольку вы можете заметить, что что-то прерывает плавную прокрутку текста. –

@MariosNikolaou Обновлено мой ответ – LGSon

Спасибо за вашу помощь, если вы заметили, что в конце текста у него есть место, как я могу его удалить? –

ответ

Смежные вопросы