公告栏跑马灯效果代码

公告栏跑马灯效果代码:
在不少的网站都有这样的效果,在网站导航栏下部或者某个地方,公司公告会以跑马灯形式不断的滚动,当鼠标放上去的时候可以停止滚动,当鼠标移开又开始滚动,效果还算是可以,下面就简单介绍一下如何实现此种功能,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul
{
  list-style:none;
  margin:0px;
  padding:0px;
  width:1500px;
  float:left;
}
ul li
{
  height:25px;
  line-height:25px;
  font-size:12px;
  float:left;
  width:300px;
  margin:0px;
  padding:0px;
}
#wrap
{
  width:3000px;
}
#scroll
{
  width:300px;
  overflow:scroll;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var speend=10;
  document.getElementById("copy").innerHTML=document.getElementById("list").innerHTML;
  function done()
  {
    if(document.getElementById("list").offsetWidth-document.getElementById("scroll").scrollLeft<=0)
    {
      document.getElementById("scroll").scrollLeft-=document.getElementById("list").offsetWidth;
    }
    else
    {
      document.getElementById("scroll").scrollLeft++;
    }
  }
  var flag=setInterval(done,speend);
  document.getElementById("scroll").onmouseover=function(){clearInterval(flag)}
  document.getElementById("scroll").onmouseout=function(){flag=setInterval(done,speend);}
}
</script>
</head>
<body>
<div id="scroll">
  <div id="wrap">
     <ul id="list">
       <li>大家好,欢迎来到蚂蚁部落</li>
       <li>div+css教程</li>
       <li>希望明天会更好,因为我们奋斗了</li>
       <li>春天是生机勃勃的,一切充满希望。</li>
       <li>时间不会因为我们的懒惰而停止</li>
     </ul>
     <ul id="copy">
     </ul>
  </div>
</div>
</body>
</html>

以上代码实现了新闻公告跑马灯效果,实现原理可以参阅产品图片无缝水平滚动效果代码

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=6187

更多内容可以参阅:http://www.softwhy.com/javascript/

你可能感兴趣的:(公告栏跑马灯效果代码)