版权声明:未经本人同意,不得转发 https://blog.csdn.net/dgh112233/article/details/81434992
上图是效果截图,消息是垂直循环翻滚显示。
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都要修改为自己的那个值。
若有问题,请指正。