這是一個慕課網的實例：感謝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>
