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);} ，鼠标离开的时候继续滚动。