<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,div,h2,a,ul,li{margin:0;padding:0;}
body{font-size:14px;}
li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover{color:#FF002F;}
#mooc{width:400px;border:5px solid #ccc;border-radius:15px;box-shadow:2px 2px 5px #ccc;margin:20px auto;}
#moocTit{padding-left:30px;background-image:linear-gradient(to bottom,#f05e6f, #c9394a);border-radius:8px 8px 0 0;height:82px;line-height:82px;color:#fff;}
#moocTit h2{float:left;}
#moocTit a{float:right;margin-right:15px;color:#fff;}
#moocTit a:hover{text-decoration:underline;}
#moocBox{height:180px;margin:0 20px;backround-color:#fff;overflow:hidden;}
#moocBox ul{height:270px;}
#moocBox li{height:30px;line-height:20px;}
#moocBox span{float:right;}
</style>
</head>
<body>
<div id="mooc">
<div id="moocTit">
<h2>最新课程</h2>
<a>更多>></a>
</div>
<div id="moocBox">
<ul id="con1">
<li><a href="javascript:;">1.学会html5 绝对的屌丝逆袭(案例)<span>2013-09-18</span></a></li>
<li><a href="javascript:;">2.tab页面切换效果(案例)<span>2013-10-09</span></a></li>
<li><a href="javascript:;">3.圆角水晶按钮制作(案例)<span>2013-10-21</span></a></li>
<li><a href="javascript:;">4.HTML+CSS基础课程(系列)<span>2013-11-01</span></a></li>
<li><a href="javascript:;">5.分页页码制作(案例)<span>2013-11-06</span></a></li>
<li><a href="javascript:;">6.导航条菜单的制作(案例)<span>2013-11-08</span></a></li>
<li><a href="javascript:;">7.信息列表制作(案例)<span>2013-11-15</span></a></li>
<li><a href="javascript:;">8.下拉菜单制作(案例)<span>2013-11-22</span></a></li>
<li><a href="javascript:;">9.如何实现“新手引导”效果<span>2013-12-06</span></a></li>
</ul>
<ul id="con2"></ul>
</div>
</div>
<script>
var area=document.getElementById('mooc');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var timer;
con2.innerHTML=con1.innerHTML;//将con1内容复制给con2
timer=setInterval(scrollUp,50);
function scrollUp(){
if(area.scrollTop==con1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
}
area.onmouseover=function(){
clearInterval(timer);//鼠标移入清除定时器
}
area.onmouseout=function(){
timer=setInterval(scrollUp,50);//鼠标移出定义定时器
}
</script>
</body>
</html>