今天初三,先祝大家新年快乐,给大家拜年了,今天教大家做一个字幕滚动效果的案例,代码非常简单,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>
是不是非常简单。哈哈!