实战-10行代码写字幕滚动效果

709 阅读1分钟

今天初三,先祝大家新年快乐,给大家拜年了,今天教大家做一个字幕滚动效果的案例,代码非常简单,JS代码也就十行左右。 不多说,开撸!

<!-- 设置外层容器,一定要设置高度以及overflow -->
 <div id="container" style='height:20px;overflow:hidden;'>
	<ul id="list">
		<li><a href="#">11111111</a></li>
		<li><a href="#">222222222</a></li>
		<li><a href="#">33333333 </a></li>
		<li><a href="#">44444444444</a></li>
		<li><a href="#">55555555</a></li>
		<li><a href="#">666666666</a></li>
	</ul>
</div>
<script type="text/javascript">
	// 计时器时间
	var SPEED=40;
	function Marquee(){
		var c=document.getElementById("container");
		var l=document.getElementById("list");
		c.scrollTop++;
		// 设置无限滚动
		if (c.scrollTop == l.offsetHeight)
		{
			c.scrollTop = 0;
		}
	};
	// 初始化
	var MyMar=setInterval(Marquee,SPEED);
	// 鼠标事件,悬浮停止滚动,移开启动滚动
	c.onmouseover=function() {clearInterval(MyMar)}
	c.onmouseout=function() {MyMar=setInterval(Marquee,SPEED)}
</script>

是不是非常简单。哈哈!