没有白色的货币代码 space

Question

我想创建一个货币 ticker.A 查询从 yahoo Finance API 检索值并将它们显示为 text.The 主要问题是白色 space 在text.The 字幕脚本 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>

提前致谢。

Answer 1

问题是你给了 span 一个固定的宽度，如果文本较小，每个末尾都会有一个大的白色空白 space，所以通过调整 .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);
        });
  
        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 {
    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);
        });
  
        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 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>

没有白色的货币代码 space

currency ticker without white space

html

css

jquery

currency

ticker