jquery 文字无缝滚动

最新推荐文章于 2024-04-23 11:28:13 发布

ange2017

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量1.9k

点赞数 1

分类专栏：前端js 文章标签：文字无缝滚动

本文链接：https://blog.csdn.net/ange2017/article/details/81537569

版权

前端js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

这里作为一个文字无缝滚动,简单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)
	})

}