我正在构建一个股票代码,我正在尝试使用Smooth Div Scroll插件,但我无法使用动态创建的段落标记。它不是创建滚动的水平列表,而只是将P标签垂直转储到页面上。如果静态添加段落标记,则会定位并正确滚动它们。当我在Firebug中将静态版本与此动态版本进行比较时,html看起来是一样的,所以我猜它是一个CSS问题,但我没有运气。
编辑:这是jsFiddle
有什么建议吗? 感谢
这是代码
$(window).load(function () {
var $divScrollableArea = $(".scrollableArea");
var $stocks = new Array("GOLD", "SSRI", "PTM", "PAL", "USD", "SH", "DJI");
$.each($stocks, function (index, item) {
var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + item + "%22)%0A%09%09&&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$(function () {
var jqxhr = $.getJSON(url, function (json) {
$divScrollableArea.append("<p>" + item + "<br /><span class='left'>" + json.query.results.quote.BidRealtime +
"</span><span class='right'>" + json.query.results.quote.Change_PercentChange + "</span></p>");
})
.success(function () { BuildScroll(); });
});
});
function BuildScroll() {
$("div#scrollingText").smoothDivScroll({
autoScroll: "always",
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15
});
}
});
<style type="text/css">
.stock
{
font: bold .8em Verdana;
padding: 5px;
width: 100%;
}
.innerStock
{
float: left;
margin-right: 20px;
}
.left
{
font: normal .7em Verdana;
text-align: left;
width: 30%;
padding-right: 15px;
}
.right
{
font: normal .7em Verdana;
text-align: right;
color: red;
}
#scrollingText
{
width: 100px;
height: 35px;
border: solid 1px #ccc;
position: relative;
padding: 2px 0px;
}
#scrollingText div.scrollableArea p
{
display: block;
float: left;
margin: 0;
padding-right: 7px;
padding-top: 1px;
font-family: Courier, Arial, Sans-Serif;
font-size: 12px;
line-height: 12px;
font-weight: normal;
background-color: #fff;
color: #000;
white-space: nowrap;
width:300px;
}
</style>
<div id="scrollingText">
<div class="scrollWrapper">
<div class="scrollableArea">
</div>
</div>
</div>
答案 0 :(得分:0)
你是对的,这是一个CSS问题。
更具体地说,#scrollingText
(100px)的宽度会导致换行符。如果你删除这个属性,你的段落将被浮动(它也会减少段落的宽度)。
如果您想保持#scrollingText
的大小不变,则需要为div.scrollWrapper
定义样式,如下所示:
div.scrollWrapper {
display: block;
width: 800px;
}
确保宽度大于所包含段落的所有宽度之和。 我已经更新了你的小提琴(不是我也调整了段落的宽度):http://jsfiddle.net/RZBUJ/2/
答案 1 :(得分:0)
更改你的CSS
<style type="text/css">
.stock
{
font: bold .8em Verdana;
padding: 5px;
width: 100%;
}
.innerStock
{
float: left;
margin-right: 20px;
}
.left
{
font: normal .7em Verdana;
text-align: left;
width: 30%;
padding-right: 15px;
}
.right
{
font: normal .7em Verdana;
text-align: right;
color: red;
}
#scrollingText
{
width: 400px;
height: 80px;
border: solid 1px #ccc;
position: relative;
padding: 2px 0px;
overflow:auto;
}
#scrollingText div.scrollableArea p
{
display: block;
float: left;
margin: 0;
padding-right: 7px;
padding-top: 1px;
font-family: Courier, Arial, Sans-Serif;
font-size: 12px;
line-height: 12px;
font-weight: normal;
background-color: #fff;
color: #000;
white-space: nowrap;
width:300px;
}
</style>