请问？为什么要把js代码放在body中才能执行，一开始放在head标签内就没有滚动的效果，为什么？xiexie
<<!DOCTYPE html>
<html>
<head>
<!-- -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>0916-2无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
font-size: 12px;
line-height: 24px;
}
ul{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
a:hover{
color: #00f;
}
#bigBox{
width: 400px;
border:5px solid #ababab;
border-radius: 15px;
margin: 50px auto 0;
text-align:left;
/* -moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 2px 2px 10px #ababab;*/
}
#topBox{
font-size: 26px;
height: 62px;
line-height: 62px;
overflow: hidden;
padding-left: 30px;
color: #fff;
background: #f00;
position: relative;
border:1px solid #f00;
border-radius:8px 8px 0 0;
/* -moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');*/
}
#topBox a{
position: absolute;/*父级relative子级absolute可具体定位*/
right: 10px;
bottom: 10px;
font-size: 14px;
line-height: 24px;
display: inline;
color: #fff;
}
#topBox a:hover{
color: #00f;
}
#bottomBox{
width: 335px;
height: 144px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden;
}
#bottomBox ul li{
height: 24px;
}
#bottomBox ul li a{
width: 180px;
height: 24px;
text-indent: 15px;
float: left;
display: block;
overflow: hidden;
}
#bottomBox ul li span{
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="bigBox">
<div id="topBox">
慕课网最新课程<a href="#">更多>></a>
</div>
<div id="bottomBox">
<!-- <marquee behavior="scroll" direction="up" loop=-1 scrollamount="2" scrolldelay="100" onmouseover="stop();" onmouseout="start();"> -->
<ul id="cont1">
<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="cont2">
</ul>
<!-- </marquee> -->
</div>
</div>
<script type="text/javascript">
var area=document.getElementById("bottomBox");
var cont1=document.getElementById("cont1");
var cont2=document.getElementById("cont2");
cont2.innerHTML=cont1.innerHTML;
var speed=50;
area.scrollTop=0;
function scrollUp(){
if (area.scrollTop>=cont1.scrollHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
}
var myScroll=setInterval("scrollUp()",speed);
area.onmouseover=function(){
clearInterval(myScroll);
}
area.onmouseout=function(){
myScroll=setInterval("scrollUp()",speed);
}
</script>
</body>
</html>
