Posted in Javascript onMarch 29, 2013
JS部份
$(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); }); function scrollNews(obj){ var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){ $self.css({"margin-top":"0px"}).find("li:first").appendTo($self); }) }
HTML部份
<style type="text/css"> .renav{ width:200px; height:150px; line-height:21px; overflow:hidden; background:#FFFFFF; } .renav li{ height:21px; } </style> <div class="renav"> <ul style="margin-top: 0px;"> <li><a>罗氏</a></li> <li><a>瑞声达</a></li> <li><a>未添加1</a></li> <li><a>未添加2</a></li> <li><a>未添加3</a></li> <li><a>未添加4</a></li> <li><a>西门子</a></li> <li><a>欧姆龙</a></li> </ul> </div>
jquery无缝向上滚动实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@