CSS部分:
.news {
height: .4rem;
line-height: .4rem;
overflow: hidden;
position: absolute;
top: 35%;
left: 1.6rem;
color: #666666;
}
.news>ul {
list-style: none;
}
JS部分:
$(function(){
var news_obj = $("#news");
var scrollTimer;
scrollTimer = setInterval(function() {
scrollNews(news_obj);
}, 1500);
function scrollNews(obj) {
var ul_obj = obj.find("ul:first");
var lineHeight = obj.find("li:first").height();
ul_obj.animate({
"marginTop": -lineHeight + "px"
}, 500, 'linear', function() {
ul_obj.css({
marginTop: 0
}).find("li:first").appendTo(ul_obj);
})
}
});
HTML:
<div class="news" id="news"> <ul> <li>文本1</li> <li>内容2</li> </ul> </div>