如何利用jquery实现文本上下滚动效果

先看下效果，看看是否是自己需要的，代码荣耀已测试过暂时未发现问题。

代码很简单没有很复杂，只引用了一个JQ插件。

 如何利用jquery实现文本上下滚动效果，有需要的朋友可以参考一下。

这里引用了jquery 2.0，其他版本也可以，如果你的网站已经引用了jquery，这里就不用再引用了，直接添加代码就行了。

<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

CSS样式

<style type="text/css">
.b-videobottom {height:35px;background:#1d1d1d;text-align:left;left:0;}
.b-adicon {position:relative;font-size:12px;height:35px;line-height:35px;overflow:hidden;padding:0 5px;margin-left:5px;color:#fff;}
.b-adicon li { list-style-type: none;color:#fff;}
.b-adicon li a {color:#ee1a56;text-decoration:none;}
</style>

JS代码

<script type="text/javascript">
setInterval(function(){
    $('#notice').animate({
        marginTop:"-26px"
    },500,function(){
        $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
    });
}, 3000);
</script>

控制滚动时间，修改JS里面3000值

HTML代码

<div class="b-videobottom">
    <div class="b-adicon">
    	<ul id="notice">
            <li>这是一条消息0</li>
            <li>这是一条消息1</li>
            <li>这是一条消息2</li>
            <li>这是一条消息3</li>        
    	</ul>
   </div>
</div>

这里只是示例代码，实际情况根据自己的情况调整。