仿 腾讯新闻快讯 --无缝滚动
//无缝滚动 function AutoScroll(obj) { var autoScrollTimer=null,timer=null; timer=setTimeout(function(){ move(); },3000); function move(){ clearTime(autoScrollTimer); var liLen= $(obj).find('li').length; if(liLen === 1){//此处处理只有一条数据时 跳动效果 $(obj).find("ul:first").append($(obj).find('li').eq(0).clone()) } $(obj).find("ul:first").animate({ marginTop: "-25px" }, 500, function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); autoScrollTimer=window.setTimeout(move,3000); } function clearTime(time){ clearTimeout(time); time=null; } $(obj).find('li').hover(function(){ clearTime(autoScrollTimer); },function(){ move() }) } $(function(){ //无缝滚动 $(document).ready(function() { AutoScroll("#jvsNotice")//调用 }); })
<div class="jvsNotice" id="jvsNotice"> <ul> <li><a href="#">公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1</a></li> <li><a href="#">公告3公告3公告3公告3</a></li> <li><a href="#">公告4公告4公告4公告4</a></li> <li><a href="#">公告5公告5</a></li> <li><a href="#">公告6公告6</a></li> <li><a href="#">公告7公告7公告7</a></li> <li><a href="#">公告8公告8公告8公告8</a></li> </ul> </div>
*{margin:0;padding:0;} ul,ol,dl{ list-style: none; } .jvsNotice { height: 25px; line-height: 25px; border: #ccc 1px solid; overflow: hidden; } .jvsNotice>ul{ padding-left: 0; overflow: hidden; } .jvsNotice li { height: 25px; padding-left: 10px; text-align: center; white-space: nowrap; }