自己寫了一下html/css,但加上js后執(zhí)行不了,希望大家?guī)兔纯?/h1>
<!DOCTYPE?HTML>
<html>
<head>
<title>滾動欄</title>
<style?type="text/css">
*{margin:0;
??padding:0;}
a:link{color:black;text-decoration:none;}
a:visited{color:black;text-decoration:none;}
a:hover{color:red;text-decoration:none;}
.imooc{height:px;
???????width:400px;
???????margin:0?auto;
???????border:2px?solid?black;
???border-radius:?15px;
???position:relative;
???top:50px;
}
.imooc?.new{background:#f05e6f;
height:70px;
border-top-left-radius:15px;
border-top-right-radius:15px;
color:#fff;
}
.imooc?.new?h1{padding:5px?0?0?8px;;
}
.imooc?.new?p{float:right;
???margin-bottom:10px;
}
.imooc?.newclass?ul{list-style:none;
?font-size:12px;
}
.imooc?.newclass?ul?li{padding:5px?0?5px?20px;
}
.imooc?.newclass?ul?span{float:right;
???padding-right:30px;
???color:#ababab;
}
</style>
</head>
<body>
<div?class="imooc">
<div?class="new">
<h1>最新課程</h1>
<p>更多>></p>
</div>
<div?class="newclass">
<ul?id="con1">
?<li><a?href="#">1.學(xué)會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.導(dǎo)航條菜單的制作(案例)</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.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul?id="con2">
</ul>
</div>
</div>
<script?type="text/javascript">
?var?area?=?document.getElementById('newclass');
?var?con1?=?document.getElementById('con1');
?var?con2?=?document.getElementById('con2');
?var?speed?=?50;
?area.scrollTop?=?0;
?con2.innerHTML?=?con1.innerHTML;
?function?scrollUp(){
?if(area.scrollTop?>=?con1.scrollHeight)?{
?area.scrollTop?=?10;
?}else{
???area.scrollTop?++;?
?}?
}
var?myScroll?=?setInterval("scrollUp()",speed);
area.onmouseover?=?function(){
?clearInterval(myScroll);
}
area.onmouseout?=?function(){
?myScroll?=?setInterval("scrollUp()",speed);
}
?</script>
</body>
</html>
谷歌瀏覽器報(bào)錯(cuò)為:Cannot set property 'scrollTop' of null
可能是我的css代碼有問題,但個(gè)人能力有限,希望大家?guī)臀铱聪?/p>
<!DOCTYPE?HTML> <html> <head> <title>滾動欄</title> <style?type="text/css"> *{margin:0; ??padding:0;} a:link{color:black;text-decoration:none;} a:visited{color:black;text-decoration:none;} a:hover{color:red;text-decoration:none;} .imooc{height:px; ???????width:400px; ???????margin:0?auto; ???????border:2px?solid?black; ???border-radius:?15px; ???position:relative; ???top:50px; } .imooc?.new{background:#f05e6f; height:70px; border-top-left-radius:15px; border-top-right-radius:15px; color:#fff; } .imooc?.new?h1{padding:5px?0?0?8px;; } .imooc?.new?p{float:right; ???margin-bottom:10px; } .imooc?.newclass?ul{list-style:none; ?font-size:12px; } .imooc?.newclass?ul?li{padding:5px?0?5px?20px; } .imooc?.newclass?ul?span{float:right; ???padding-right:30px; ???color:#ababab; } </style> </head> <body> <div?class="imooc"> <div?class="new"> <h1>最新課程</h1> <p>更多>></p> </div> <div?class="newclass"> <ul?id="con1"> ?<li><a?href="#">1.學(xué)會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.導(dǎo)航條菜單的制作(案例)</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.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li> </ul> <ul?id="con2"> </ul> </div> </div> <script?type="text/javascript"> ?var?area?=?document.getElementById('newclass'); ?var?con1?=?document.getElementById('con1'); ?var?con2?=?document.getElementById('con2'); ?var?speed?=?50; ?area.scrollTop?=?0; ?con2.innerHTML?=?con1.innerHTML; ?function?scrollUp(){ ?if(area.scrollTop?>=?con1.scrollHeight)?{ ?area.scrollTop?=?10; ?}else{ ???area.scrollTop?++;? ?}? } var?myScroll?=?setInterval("scrollUp()",speed); area.onmouseover?=?function(){ ?clearInterval(myScroll); } area.onmouseout?=?function(){ ?myScroll?=?setInterval("scrollUp()",speed); } ?</script> </body> </html>
谷歌瀏覽器報(bào)錯(cuò)為:Cannot set property 'scrollTop' of null
可能是我的css代碼有問題,但個(gè)人能力有限,希望大家?guī)臀铱聪?/p>
2016-07-26
你的area獲取不到是因?yàn)橛玫膇d來獲取的,你的newclass命名的是類名,一個(gè)基礎(chǔ)問題