JQuery滚动动画不粘在DIV内

我有一个问题，我一直试图在我的网站内实现一个JQuery动画。JQuery滚动动画不粘在DIV内

总的想法是我的页面上有一个页脚，分成两个TD。第1部分是根据第2部分中滚动的消息而变化的图标。

我的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] = { '标题'： '这是一个消息'， '图标'： '的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内。

任何建议，将不胜感激。

谢谢！

来源

2013-08-27 insultant

什么是'html'？你应该不定义它吗？还是你的意思是这个'$（“html”）.length'？ – u54r

它是我用来填充对象的传入数据。对不起，它措辞相当糟糕，我会解决所有这一切，一旦我得到的东西终于正常工作。我已经更新了这个问题，使它更清晰一些。 – insultant

好的发现它。你的问题似乎是你的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代码。

来源

2013-08-28 00:50:12 u54r

完美的作品！非常感谢！ – insultant

JQuery滚动动画不粘在DIV内

回答

相关问题