我一直在尝试在网站中实现 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':'这是一条消息', '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;
}
问题是,当消息在屏幕上滚动时,它似乎根本没有被锁定到“ticker”DIV 中,而是直接滚动到页面底部,并且似乎忽略了我在那里的每个 DIV 标签。当我观察 chrome 控制台中的对象更新时,HTML 似乎出现在正确的位置。
还有一个奇怪的问题,即动画后面的尾随点。这似乎不会发生在 Firefox 中。
如有任何建议,我们将不胜感激。
谢谢!
最佳答案
好的,找到了。你的问题似乎是你的CSS。请参阅工作示例 here
将其添加到您的 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代码没有问题的话可以忽略。
关于javascript - JQuery 滚动动画不粘在 DIV 内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18477312/