console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下滚动公告</title>
<style>
*{margin: 0px; padding: 0px; list-style: none; line-height: 1;}
#notice{height: 30px; line-height: 30px; overflow: hidden; width: 120px; padding: 0px 20px;}
</style>
</head>
<body>
<div id="notice">
<ul>
<li>这是一条公告1</li>
<li>这是一条公告2</li>
<li>这是一条公告3</li>
<li>这是一条公告4</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function scrollNotice(){
var notice = $('#notice');
var ul = notice.find('ul');
var li = notice.find('li');
var noticeH = notice.height();
var duration = 3000;
var index = 0;
var timer = null;
init()
function toMove(){
index++;
notice.find('ul').animate({marginTop:-noticeH *index },'swing',function(){
if(index == notice.find('li').length - 1){
index = 0;
ul.css('marginTop',0)
}
})
}
function init(){
li.css({lineHeight:noticeH+'px'});
li.eq(0).clone().appendTo(ul);
timer = setInterval(toMove,duration)
bindEvent();
}
function bindEvent(){
ul.on('mouseover','li',function(){
clearInterval(timer);
timer = null
})
ul.on('mouseout','li',function(){
timer = setInterval(toMove,duration)
})
}
}
scrollNotice();
</script>
</body>
</html>