消息滚动播放的语句html,html jsp 文字翻滚 消息滚动播放 显示

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

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

公告

style="line-height:50px;display:inline-block;font-size:16px;left:76px;top:0px;

position:absolute;font-family: '黑体'; ">

公告1公告2

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

$(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;

}

注意：公告字体的大小可以自己调，此实例中的字体大小为16px，每一个公告块

公告内容的高度为50px，如果自己要设置公告块的大小，请将html代码和js代码中的所有50都要修改为自己的那个值。

若有问题，请指正。