公告栏翻滚显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{font-size: 14px;font-family: "yahei";}
a {
text-decoration: none;
}
.clearfix{*zoom:1;}
.clearfix:after,.clearfix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
.fl{float:left;}
.fr{float:right;}
/* 公告 */
.notice-zb{
width:1190px;
height:60px;
margin:50px auto;
background: #f9f9f9;
line-height: 60px;
overflow:hidden;
color:#5e0000;
font-size: 14px;
}
.notice-zb .imgtxt{
display: inline-block;
width:132px;
}
.notice-zb img.naba{
display: inline-block;
width: 29px;
height: 25px;
margin:0px 12px 0 20px;
}
.notice-zb ul{
height:100%;
display: inline-block;
width:1045px;
padding-right:8px;
}
.notice-zb ul li{
width:100%;
height:100%;
line-height: 60px;
}
.notice-zb ul li a{
color:#5e0000;
}
.notice-zb ul li a:hover{
/*text-decoration: underline;*/
color:#d71326;
}
</style>
</head>
<body>
<!-- 公告 -->
<div class="notice-zb ">
<span class="imgtxt fl"><img class="naba" src="" alt="">公告信息：</span>
<ul class="fl">
<li class="clearfix">1.查询模块菜单名称更新公告<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/19</span></li>
<li class="clearfix">2.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li>
<li class="clearfix">3.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li>
</ul>
</div>
<script>
//公告滚动
(function(){
var timer;
auto();
function auto(){
timer = setInterval(function(){
var oUl = $('.notice-zb ul');
var aLi = oUl.find('li');
var oHeight = aLi.eq(0).height();
oUl.animate({'marginTop':-oHeight + 'px'},500,function(){
oUl.css('marginTop','0px').find('li:first').appendTo(oUl);
});
},3000);
}
$('.notice-zb').mouseenter(function(){
clearInterval(timer);
}).mouseleave(function(){
auto();
});
})();
</script>
</body>
</html>
不过这种写法当页面长期打开时，会有bug！
