问题一：鼠标移入时为什么会停止滚动？没看到js代码？问题二：我给a加了border后，必须给offsetHeight加上18（边框高度），我记得offsetHeight是content+2*padding+2*border，所以为什么要加上？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动制作</title>
<style type="text/css">
body{
font-size:12px;
line-height:24px;
text-align:center; /*页面内容居中*/
}
*{
margin:0;
padding:0; /*去掉所有标签的margin和padding的值*/
}
ul{
list-style: none; /*去掉ul标签默认的点样式*/
}
a img{
border:none; /*超链接下，图片的边框*/
}
a{
color: #333;
text-decoration:none; /*超链接样式*/
}
a:hover{
color:#ff0000;
}
#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;
text-align: left; /*让新闻内容靠左*/
}
/*头部样式*/
#moocTitle{
height:62px;
overflow: hidden; /*这个一定要加上，内容超出部分要隐藏，免得撑高头部*/
font-size: 26px;
line-height: 62px;
padding-left: 30px;
/*下面是为了背景颜色*/
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
border:1px solid #f05e6f;
-moz-border-radius:8px 8px 0 0; /*Gecko browsers*/
-webkit-border-radius:8px 8px 0 0; /*Webkit browsers*/
border-radius: 8px 8px 0 0;
color: #fff;
position: relative;
}
#moocTitle a{ border:1px solid green;
position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;
}
/*底部样式*/
/*中间样式*/
#moocBox{ /*border:1px solid green;*/
height: 144px;
width:355px;
margin-left: 10px;
overflow: hidden; /*这个一定要加，超出的内容部分隐藏，免得撑高中间部分*/
}
#mooc ul li{ /*border:1px solid blue;*/
height:24px;
}
#mooc ul li a{ border:1px solid blue;
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span{ /*border:1px solid green;*/
float: right;
color: #999;
}
</style>
</head>
<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc">
<!-- 头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a></h3>
<!-- 头部结束 -->
<!-- 中间 -->
<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>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area=document.getElementById('moocBox');
var con1=document.getElementById('con1'); // 把原始内容1克隆给内容2
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
area.scrollTop=0;
// alert(con1.offsetHeight);
// alert(con1.style.height);//只能获取行内样式，所以是空值
function scrollUp(){
if (area.scrollTop>=con1.offsetHeight+18) {//如果中间box部分向上滚动的距离>=ul的offset，就让box的向上滚动的距离为0
area.scrollTop=0;
} else { //否则，box向上滚动的距离+1
area.scrollTop++;
}
}
var time=200;
var myScroll=setInterval('scrollUp()',time);
</script>
</body>
</html>第80行代码我给a标签加了border，然后我在131行必须offsetHeight+18才能实现无缝滚动，难道offsetHeight是不包括子级的子级的border么？我给li加上border，则不用在offsetHeight加上18
还有第一个问题的为什么鼠标移入就会停止呢？没看到加事件啊
