jquery 文字无缝滚动

这里作为一个文字无缝滚动,简单js写法记录

html:



js:

//热点新闻无缝滚动
window.onload=function(){
	//先获取三个元素	
	var area = $("#box-move"), ul1 = $("#ul1"), ul2 = $("#ul2");
	area.scrollTop(0);

	//克隆一个列表ul2,作为衔接滚动;
	ul2.html(ul1.html()); 
	//按照指定的周期(以毫秒计)来调用函数。
	var myscroll = setInterval(function(){scroll()}, 50)
	var top = area.scrollTop();
	 function scroll(){
	 	if (area.scrollTop() >= ul1.height()) {
	 		top = 0;area.scrollTop(0)
	 	}else{		 		
	 		area.scrollTop(top++);
	 	}
	}

	//鼠标移入清除滚动
	area.mouseover(function(){
		clearInterval(myscroll)
	})
	//鼠标移出滚动继续
	area.mouseout(function(){
		myscroll = setInterval(function(){scroll()}, 50)
	})

}

 

你可能感兴趣的:(前端js)