<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>无缝滚动制作</title>
<style type="text/css">
#moocTitle{
line-height: 62px;
height: 62px;
font-size: 26px;
border: 1px solid ##f05e6f;
color: #fff;
position: relative;
padding-left: 30px;
background-color: #f05e6f;
width: 370px;
top: -26px;
}
#moocTitle a{
text-decoration: none;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
line-height: 24px;
display: inline;
color: #fff;
}
#moocBox{
height: 144px;
width: 335px;
margin-top: -55px;
overflow: hidden;
margin-left: 10px;
}
#moocBox ul li{
font-size: 13px;
height: 24px;
padding-left: 0px;
}
#moocBox ul li a{
text-decoration: none;
color: black;
overflow: hidden;
}
ul li span{
color: #999;
position: relative;
float: right;
font-size: 10px;
}
#moocBox ul li a:hover{
color: #ff0000;
position: relative;
}
ul{
list-style: none;
}
#mooc{
width: 399px;
border: 5px solid #ababab;
text-align: left;
position: relative;
left: 420px;
top: 70px;
border-radius: 10px 10px 10px 10px;
text-align: left;
height: 210px;
}
</style>
</head>
<body>
<div id="mooc">
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a></h3>
<div id="moocBox">
<ul id="content1">
<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="content2"></ul>
</div>
</div>
<script type="text/javascript">
var area = document.getElementById("moocBox");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
area.scrollTop = 0;
content2.innerHTML = content1.innerHTML;
setInterval(function(){
area.scrollTop++;
},50)
</script>
</body>
</html>李晓健
用户1127797