1. 程式人生 > >jquery 文字無縫滾動

jquery 文字無縫滾動

這裡作為一個文字無縫滾動,簡單js寫法記錄

html:

<!-- box-move 滾動的盒子
	 ul1 滾動列表
	 ul2 銜接列表
 -->
<div id="box-move" style="height: 78px; overflow: hidden;">
	<ul id="ul1">		 
		<li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li>
		<li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li>
		<li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li>
		<li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li>		 
	</ul>
	<ul id="ul2">
	</ul>
</div>

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)
	})

}