html jsp 文字翻滚 消息滚动播放 显示

上图是效果截图，消息是垂直循环翻滚显示。

html代码如下：这只是该滚动公告模块的代码，如要使用，请插入完整的html代码中，最外层的div的样式请自调。

<div>
    <b style="font-size:16px; font-weight:bold; display:inline-block;position: absolute; left: 20px; line-height: 50px; font-family: '黑体'; " >公告</b>

<ul class="news_li"
       style="line-height:50px;display:inline-block;font-size:16px;left:76px;top:0px; 
       position:absolute;font-family: '黑体'; ">


    <li style="list-style:none;font-family: '黑体';">公告1</li>
    <li style="list-style:none; font-family: '黑体';" >公告2</li>

</ul>

<ul class="swap"  style="line-height:50px;display:inline-block;font-size:16px; position:absolute;top:50px; left:76px;"></ul>

</div>

js的代码：实现了滚动效果。

<script>
    $(function () {
        $('.swap').html($('.news_li').html());
        x = $('.news_li');
        y = $('.swap');
        h = $('.news_li li').length * 50; //19为每个li的高度
        var aaa=setInterval(b,10000);
        $('.news_li li').hover(function () {
            clearInterval(aaa);
        },function () {
            aaa=setInterval(b,10000);
         });
    });

    function b() {
    t = parseInt(x.css('top'));
    y.css('top', '50px');
    x.animate({top: t - 50 + 'px'}, 'slow'); //19为每个li的高度    
    if (Math.abs(t) == h) { //50为每个li的高度
    y.animate({top: '0px'}, 'slow');
    z = x;
    x = y;
    y = z;
    }
</script>

注意：公告字体的大小可以自己调，此实例中的字体大小为16px，每一个公告块<li>公告内容</li>的高度为50px，如果自己要设置公告块的大小，请将html代码和js代码中的所有50都要修改为自己的那个值。

若有问题，请指正。