作者:马彭的小窝 | 来源:互联网 | 2022-09-20 15:39
向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧,接下来为大家介绍下jquery实现无缝间歇滚动,感兴趣的朋友可以参考下哈,希望可以帮助到你们
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部份 代码如下: