[英]JQuery scroll animation not sticking within DIV
我一直在嘗試在自己的網站上實施JQuery動畫,但遇到了問題。
一般的想法是,我在頁面上有一個頁腳,分為兩個TD。 第1部分是根據第二部分中滾動顯示的消息而變化的圖標。
我的HTML本質上是這樣的:
<div id="footer">
<div class="box-ticker round">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:60px;">
<tr>
<td style="width:12%;background:#6dc5ed;" align="center" valign="middle"><img id="image_scroll" /></td>
<td style="width:88%;background:#9f88e2;padding;10px" class="biggest" valign="middle">
<div id="ticker"></div>
</td>
</tr>
</table>
</div>
</div>
我的代碼來更新此:
編輯:變量“ html”是一個名稱不正確的JSON數組。 它包含我正在填充的數據。 例如:html [0] = {'title':'this is a message','icon':'icon.png'}
$('#ticker').html("<span class='scrollingtext' id='scroll_text'></span>");
cur_index=0;
max_index=html.length;
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
if (cur_index >= max_index) { cur_index = 0; }
obj = JSON.parse(html[cur_index]);
$('#image_scroll').attr('src',"img/"+obj.icon);
$('#scroll_text').html(obj.title);
var scrolling_text = $('#scroll_text');
var text_container = $('#ticker');
var tw = scrolling_text.width();
var ww = text_container.width();
scrolling_text.css({ right: -tw });
scrolling_text.animate({ right: ww }, 30000, 'linear', function() {
cur_index++;
scrolling_text.trigger('marquee');
});
}).trigger('marquee');
});
最后是我的CSS:
.box-ticker{
width:100%;
height:56px;
background:#d44d4d;
}
.round { border-radius: 20px; }
.scrollingtext{
position:absolute;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}
問題是,當消息在屏幕上滾動時,它似乎根本沒有被鎖定在“股票行情” DIV中,而是直接在頁面底部滾動,而似乎只是忽略了我在那里的每個DIV標簽。 當我在chrome控制台中觀察到對象更新時,HTML似乎出現在正確的位置。
還有一個奇怪的問題,就是動畫之后似乎有尾隨點。 這似乎沒有發生在Firefox中。
任何建議將不勝感激。
謝謝!
好的,找到它了。 您的問題似乎是CSS。 在這里查看工作示例
將此添加到您的CSS
#ticker{width:100%;overflow:hidden; display:block; }
.scrollingtext{
position:relative;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}
注意:我必須對您的html對象進行更改才能使其與jsfiddle一起使用。 如果您的js代碼沒有問題,則可以忽略js代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.