javascript公告栏跑马灯效果代码

不少网站有这样类似效果，在网站导航栏下部或者某个地方，公告会以跑马灯形式不断的滚动。

当鼠标放上去的时候可以停止滚动，当鼠标移开又开始滚动。

下面介绍一下如何实现此种功能。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>大家好，欢迎来到51前端</li>
       <li>div+css教程</li>
       <li>希望明天会更好，因为我们奋斗了</li>
       <li>春天是生机勃勃的，一切充满希望。</li>
       <li>时间不会因为我们的懒惰而停止</li>
     </ul>
     <ul id="copy">
     </ul>
  </div>
</div>
</body>
</html>

代码描述：javascript 公告栏跑马灯效果代码。javascript公告栏跑马灯效果代码

下载全部收藏

513 684

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册