这是一个慕课网的实例：感谢vivain老师
现在看一下吧
第一次，我实现了滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/边框阴影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
area.scrollTop=0;//初识状态
var timer=50;//滚动时间
setInterval('area.scrollTop++',timer);
</script>
</html>
第二次（滚动到尾部时，停止了滚动，这里用到克隆）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/边框阴影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//让div1和div2完全相同
area.scrollTop=0;//初识状态
var timer=50;//滚动时间
setInterval('area.scrollTop++',timer);
</script>
</html>
第三次（第二次克隆成功了，但是仍然会停住的）
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//让div1和div2完全相同
//判断一下是否走完
//滚动的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何没执行完怎么办
else{
area.scrollTop++;
}
area.scrollTop=0;//初识状态
var timer=50;//滚动时间
setInterval('area.scrollTop++',timer);
</script>
第四次：实现了滚动
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//让div1和div2完全相同
var timer=50;//滚动时间
function scrollUp(){
//判断一下是否走完
//滚动的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何没执行完怎么办
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
</script>
实现效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/边框阴影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
* {
margin: 0px;
padding: 0px; / 去掉所有标签的marign和padding的值 /
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//让div1和div2完全相同
var timer=50;//滚动时间
function scrollUp(){
//判断一下是否走完
//滚动的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何没执行完怎么办
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
</script>
</html>
最后，我们加一个鼠标悬停的效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/边框阴影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
* {
margin: 0px;
padding: 0px; / 去掉所有标签的marign和padding的值 */
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//让div1和div2完全相同
var timer=50;//滚动时间
function scrollUp(){
//判断一下是否走完
//滚动的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何没执行完怎么办
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
//鼠标移入
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",timer);
}
</script>
</html>
