我想创建货币代码。查询从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});
});
}
&#13;
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%;
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee">
<div>
</div>
</div>
&#13;
提前致谢。
答案 0 :(得分:1)
问题是你给了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);
});
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});
});
}
&#13;
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); }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee">
<div>
</div>
</div>
&#13;
根据评论更新
$(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});
});
}
&#13;
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); }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee">
<div>
</div>
</div>
&#13;