請問？為什么要把js代碼放在body中才能執(zhí)行，一開始放在head標簽內(nèi)就沒有滾動的效果，為什么？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">
慕課網(wǎng)最新課程<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基礎(chǔ)課程(系列)</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.如何實現(xiàn)“新手引導”效果</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>
2016-09-16
head 部分一般都放js 加載的外部文件。頁面加載是按順序執(zhí)行的。js放在頭部沒有找到目標內(nèi)容就先加載了?？隙]效果啊