新闻无缝滚动
<div id="news"> <ul></ul> </div>
ul,li { list-style: none; } #news{ height: 75px; overflow: hidden; padding: 1rem; } #news ul { padding: 0; line-height: 1.5rem; text-align:center; }
$(function() { var list = [ "1小时前 张*锋 186****0928 报名了西点班", "1小时前 李*锋 186****0928 报名了西点班", "1小时前 宋*锋 186****0928 报名了西点班", "1小时前 王*锋 186****0928 报名了西点班", "3分钟前 赵*锋 186****0928 报名了西点班", "刚刚 方*锋 186****0928 报名了西点班", "20分钟前 袁*锋 186****0928 报名了西点班" ]; for(i = 0;i<list.length;i++){ $("#news ul").append("<li>" + list[i] + "</li>"); } var $this = $("#news"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 2000); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("ul"); var lineHeight = $self.find("li:first").height(); $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() { $self.css({ marginTop: 0 }).find("li:first").appendTo($self); }) } })