                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動(dòng)效果制作

怎么不動(dòng)？求大神指點(diǎn)

<body>

? <div id="newstitle">最新課程<a href="#" target="_self">更多>></a></div>

?  ?

? <div id="news-box">

? ? <ul id="con1">

? ? ? <li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</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>

? ?

? </div>

?

<div id="news-boot"></div>?

</div>

?var area=document.getElementById('news-box');

?var con1=document.getElementById('con1');

?area.innerHTML+=area.innerHTML;

?area.scrollTop=0;

?

?function scrollUp(){

?if(area.scrollTop>=con1.offsetHeight){ area.scrollTop=0;}

?else{area.scrollTop++;}

?}

?var time=50;

?setInterval("scrollUp()",time);

</script>

</body>

hznn

2015-07-27

源自：信息滾動(dòng)效果制作 2-2

關(guān)注問題我要回答

640

操作

收起

2 回答

小王子抓貓咪
2015-11-11

function scrollUp(){

?if(area.scrollTop>=con1.offsetHeight){ area.scrollTop=0;}

?else{area.scrollTop++;}

?}

你這里的代碼是照老師抄的，老師寫錯(cuò)了，應(yīng)該是scrollHeight,而不是offsetHeight，

這個(gè)坑太害人了。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

arlenhui
2015-07-28

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>子選擇符</title>
<style?type="text/css">
.first>span{color:red;}
#second>span{color:green;}
</style>
</head>
<body>
????<body>
<div?id="news">
<!--top-->
??<div?id="newstitle">最新課程<a?href="#"?target="_self">更多>></a></div>
??<!--content-->??
??<div?id="news-box">
????<ul?id="con1">
??????<li><a?href="#">1.學(xué)會(huì)html5?絕對(duì)的屌絲逆襲（案例）</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>
???
??</div>
<!--bottom-->?
<div?id="news-boot"></div>?
</div>
<script?type="text/javascript">
?var?area=document.getElementById('news-box');
?var?con1=document.getElementById('con1');
?area.innerHTML+=area.innerHTML;
?document.body.scrollTop=0;
?
?function?scrollUp(){
?????
?if(document.body.scrollTop?>=area.offsetHeight-document.documentElement.clientHeight){?console.log(area.offsetHeight);document.body.scrollTop=0;}
?else{console.log(document.body.scrollTop);document.body.scrollTop++;}
?}
?var?time=50;
?setInterval("scrollUp()",time);

</script>
</body>
</body>
</html>

判斷有問題，具體判斷的話···我也測試了幾個(gè)都用不好，不過效果是有了