請教大神,我的這個怎么沒滾動呢
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>無縫滾動</title>?
?<style type="text/css">
*{margin:0;padding:0;}
#odiv{width:300px;border:1px solid #000;background:#d8bfd8;}
h3{height:50px;line-height:50px;text-align: center;border:1px solid #000;color:white;}
#div1{overflow: hidden; height:150px;border:1px solid #000;}
ul{width:200px;margin:0 50px 0 50px;}
li{list-style: none;}
a{text-decoration: none;color:white;}
?</style>
?
</head>
<body>
<script type="text/javascript">
? window.onload=function(){
? ?var area=document.getElementById('div1');
? ?var con1=document.getElementById('con1');
? ?var con2=document.getElementById('con2');
? ?var speed=50;
? ?
?? con2.innerHTML=con1.innerHTML;
? ?function scroll(){
? ??if(area.scrollTop>=con1.scrollHeight)
? ??{
? ??area.scrollTop=0;
? ?}
? ?else{
? ??area.scrollTop++;
? ?}
?}
?var myscorll=setInterval("scroll()",speed);
? }
?
?</script>
?<div id="odiv">
?<h3>亞洲新歌榜實時趨勢</h3>
?<div id="div1">
?<ul id="con1">
??<li><a href="#" >1.玫瑰與小鹿----周深</a></li><br>
??<li><a href="#" >2.蜉蝣----華晨宇</a></li><br>
??<li><a href="#" >3.大夢想家----TFBOYS</a></li><br>
??<li><a href="#" >4.Rims----歐豪</a></li><br>
??<li><a href="#" >5.銀河----汪蘇瀧</a></li><br>
??<li><a href="#" >6.創作者----本兮</a></li><br>
??<li><a href="#" >7.做你的Gentleman----張陽陽</a></li><br>
??<li><a href="#" >7.做你的Gentleman----張陽陽</a></li><br>
??<li><a href="#" >7.做你的Gentleman----張陽陽</a></li><br>
??<li><a href="#" >7.做你的Gentleman----張陽陽</a></li><br>
??<li><a href="#" >7.做你的Gentleman----張陽陽</a></li><br>
??</ul>
??<ul id="con2"></ul>
?</div>
?</div>
</body>
</html>
2015-09-11
?if(area.scrollTop>=con1.scrollHeight), 首先這里,你可以自己去alert一下con1.scrollHeight. 初始值是為0的。所以這個判斷就不成立,應該是滾動的高度值>=con1自身的高度的時候再重新將scrollTop置0,所以應該是?if(area.scrollTop>=con1.offsetHeight);
最后就是 var myscorll=setInterval("scroll()",speed); setInterval 里去引用這個函數,有兩種引用scroll這個函數的方法,你這種在慕課里講是對的,但是奇怪我chromeF12后一直在報錯。所以我直接setInterval(scroll,speed)這樣。然后完美運轉。
<!DOCTYPE?html> <html> <head> ?<meta?charset="UTF-8"> ?<title>無縫滾動</title>? ?<style?type="text/css"> *{margin:0;padding:0;} #odiv{width:300px;border:1px?solid?#000;background:#d8bfd8;} h3{height:50px;line-height:50px;text-align:?center;border:1px?solid?#000;color:white;} #div1{overflow:?hidden;?height:150px;border:1px?solid?#000;} ul{width:200px;margin:0?50px?0?50px;} li{list-style:?none;} a{text-decoration:?none;color:white;} ?</style> ? </head> <body> <script?type="text/javascript"> ??window.onload=function(){ ???var?area=document.getElementById('div1'); ???var?con1=document.getElementById('con1'); ???var?con2=document.getElementById('con2'); ???var?speed=50; ???? ???con2.innerHTML=con1.innerHTML; function?scroll(){ ??if(area.scrollTop?>=?con1.offsetHeight){ ?????area.scrollTop=0; ??}else{ ????area.scrollTop++ ??} } ??var?myscorll=setInterval(scroll,speed); ? ?} ? ?</script> ?<div?id="odiv"> ?<h3>亞洲新歌榜實時趨勢</h3> ?<div?id="div1"> ?<ul?id="con1"> ??<li><a?href="#"?>1.玫瑰與小鹿----周深</a></li><br> ??<li><a?href="#"?>2.蜉蝣----華晨宇</a></li><br> ??<li><a?href="#"?>3.大夢想家----TFBOYS</a></li><br> ??<li><a?href="#"?>4.Rims----歐豪</a></li><br> ??<li><a?href="#"?>5.銀河----汪蘇瀧</a></li><br> ??<li><a?href="#"?>6.創作者----本兮</a></li><br> ??<li><a?href="#"?>7.做你的Gentleman----張陽陽</a></li><br> ??<li><a?href="#"?>7.做你的Gentleman----張陽陽</a></li><br> ??<li><a?href="#"?>7.做你的Gentleman----張陽陽</a></li><br> ??<li><a?href="#"?>7.做你的Gentleman----張陽陽</a></li><br> ??<li><a?href="#"?>7.做你的Gentleman----張陽陽</a></li><br> ??</ul> ??<ul?id="con2"></ul> ?</div> ?</div> </body> </html>