js实现的新闻列表垂直滚动实现详解

浏览数：23 / 时间：2015年06月09日

js实现的新闻列表垂直滚动实现详解:
新闻列表垂直滚动效果在大量的网站都有应用，有点自然是不言而喻的，首先由于网页的空间有限，使用滚动代码可以使用最小的空间提供更多的信息量，还有让网页有了动态的效果，更为美观一些，下面就通过代码实例详细介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
body  
{ 
  margin:0px; 
  padding:0px; 
} 
#express li  
{ 
  height:25px; 
  border-bottom:dashed 1px #999; 
  line-height:20px; 
  font-size:12px; 
  list-style:none; 
} 
#demo  
{ 
  height:255px; 
  overflow:hidden; 
  margin-top:0px; 
} 
#book_class  
{ 
  width:200px; 
  height:260px; 
  border:3px solid #999; 
  margin-left:auto; 
  margin-right:auto; 
  margin-top:70px; 
  border-radius:5px 5px 5px 5px; 
  box-shadow:0px 0px 10px 10px #CECED1; 
} 
#express  
{ 
  margin-left:-30px; 
  margin-right:10px; 
  margin-bottom:0px; 
  margin-top:0px; 
} 
#book_class div div ul li a  
{ 
  text-decoration:none; 
  color:#333333; 
} 
#book_class div div ul li a:hover {text-decoration:underline;} 
</style> 
<script type="text/javascript">  
var speed=50; 
var timer=null; 
window.onload=function() 
{ 
  var demo=document.getElementById("demo");  
  var demo1=document.getElementById("demo1");  
  var demo2=document.getElementById("demo2");  
  demo2.innerHTML=demo1.innerHTML;   
  function moveTop() 
  {  
    if(demo1.offsetHeight-demo.scrollTop<=0) 
    {  
      demo.scrollTop=0;  
    } 
    else 
    {  
      demo.scrollTop++;  
    }  
  } 
  timer=setInterval(moveTop,speed);   
  demo.onmouseover=function(){clearInterval(timer);}  
  demo.onmouseout=function(){timer=setInterval(moveTop,speed);}  
} 
</script> 
</head> 
<body> 
<div id="book_class"> 
  <div id="demo"> 
    <div id="demo1"> 
      <ul id="express"> 
        <li><a href="#">·蚂蚁部落欢迎您...</a></li> 
        <li><a href="#">·努力奋斗才会有美好的明天...</a></li> 
        <li><a href="#">·没有人一开始就是高手...</a></li> 
        <li><a href="#">·分享和互助神是进步动力...</a></li> 
        <li><a href="#">·每一天都是新的，把握现在...</a></li> 
        <li><a href="#">·太阳出来了，好好享受生活...</a></li> 
        <li><a href="#">·新的一年里在各年都有进步...</a></li> 
        <li><a href="#">·网站的进步离不开大家的支持</a></li> 
        <li><a href="#">·人人都有可贵之处，在于发现</a></li> 
        <li><a href="#">·则是新闻的最后一条</a></li> 
      </ul> 
    </div> 
    <div id="demo2"></div> 
  </div> 
</div> 
</body> 
</html>

以上代码实现了我们的要求，新闻列表可以不间断垂直滚动效果，下面介绍一下它的实现过程。
一.代码注释:
1.var speed=50,设置新闻列表的滚动速度，数字越大滚动越慢。
2.var timer=null，声明一个变量并赋值null，此变量为了存储定时器函数setInterva()函数的返回值。
3.window.onload=function(){}，当稳当内容完全加载完毕再去执行函数中的代码。
4.var demo=document.getElementById("demo")，获取具有指定id属性值的元素对象。
5.demo2.innerHTML=demo1.innerHTML，将demo1的内容赋值一份到demo2元素，之所以这样就是为了当新闻列表滚动的时候，能够出现首尾相接连续效果，否则后面会一片空白现象。
6.function moveTop(){}，此函数是滚动效果的核心。
7.if(demo1.offsetHeight-demo.scrollTop<=0)，判断向上滚动的尺寸是否达到新闻列表的高度，也就是第一个新闻列表是否向上完全滚动完毕。
8.demo.scrollTop=0，将demo元素的scrollTop的属性值设置为0，也就是重新开始滚动。
9.demo.scrollTop++，如果没有到达滚动指定尺寸，则继续向上滚动。
10.timer=setInterval(moveTop,speed)，使用定时器函数，每隔50毫秒执行一次函数moveTop。
11.demo.onmouseover=function(){clearInterval(timer);}，当鼠标demo元素上的时候停止滚动。
12.demo.onmouseout=function(){timer=setInterval(moveTop,speed);} ，鼠标离开的时候继续滚动。
二.相关阅读:
1.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
2.offsetHeight属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
3.setInterval()函数可以参阅window对象的setInterval()方法一章节。
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。
5.onmouseover事件可以参阅javascript的onmouseover事件的定义和用法。
6.onmouseout事件可以参阅javascript的onmouseout事件详解一章节。