上下滚动播报特效

html：

<div style="height:50px;overflow:hidden;font-size: 14px;font-weight: bold;">
<ul class="line">
<li style="line-height:25px;">
<span class="glyphicon glyphicon-hand-right"></span>
<span style="color:red;">最新播报1</span>  
<span style="color:#5CB85C;">test1</span>
<span class="glyphicon glyphicon-hand-right"></span>
<span style="color:red;">最新播报2</span>  
<span style="color:#5CB85C;">test2</span>
<span class="glyphicon glyphicon-hand-right"></span>
<span style="color:red;">最新播报3</span>  
<span style="color:#5CB85C;">test3</span>
</li>
</ul>
</div>

script：

<script>
$(function(){
var _wrap=$('ul.line');
var _interval=2000;
var _moving;
_wrap.hover(function(){
clearInterval(_moving);
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');
var _h=_field.height();
_field.animate({marginTop:-_h+'px'},600,function(){
_field.css('marginTop',0).appendTo(_wrap);
})
},_interval);
}).trigger('mouseleave');
});
</script>