                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息滾動效果制作

問題一：鼠標移入時為什么會停止滾動？沒看到js代碼？問題二：我給a加了border后，必須給offsetHeight加上18（邊框高度），我記得offsetHeight是content+2padding+2border，所以為什么要加上？

<!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

還有第一個問題的為什么鼠標移入就會停止呢？沒看到加事件啊