無縫滾動一次就完了,怎么回事???
無縫滾動一次就完了,怎么回事???
<!doctype?html> <html> <head> ????<meta?charset="utf-8"> ????<title>信息無縫滾動!</title> ????<!--?<meta?http-equiv="refresh"?content="2">?--> ????<style?type="text/css"> ????????*{ ????????????padding:?0px; ????????????margin:?0px; ????????} ????????.message{ ????????????width:?300px; ????????????border:8px?solid?gray; ????????????line-height:?24px; ????????????border-radius:?10px; ????????????position:?relative; ????????????margin:?20px?auto;???? ????????????box-shadow:?1px?2px?4px?gray;???????? ????????????font-size:?14px; ????????} ????????h3{ ?????????background-color:?#E25162; ?????????font-size:?26px; ?????????color:?#fff; ?????????height:?62px; ?????????line-height:?62px; ?????????padding-left:?30px; ????????} ????????span{ ????????????position:?absolute; ????????????right:?6px; ????????????top:17px; ????????????color:?#fff; ????????} ????????ol{ ????????????padding:10px?0?5px?26px;???????????? ????????} ????????#show{ ????????????height:?116px; ????????????overflow:?hidden; ????????} ????????li:hover{ ????????????color:?red; ????????} ????</style> </head> <body> ????<div> ????????<h3>最新課程</h3> ????????<span>more>></span> ????????<div?id="show"> ????????????<ol?id="ul0"> ????????????????<li>IIIIIIIIIIIIIIIIIIIII</li> ????????????????<li>lovelovelovelove</li> ????????????????<li>youyouyouyouyouyou</li> ????????????????<li>zhuyanzhuyanzhuyan</li> ????????????</ol> ????????????<ol?id="ul1"></ol> ????????</div> ????</div> ????<script?type="text/javascript"> ????????var?box=document.getElementById("show"); ????????var?mes1?=?document.getElementById("ul0"); ????????var?mes2?=?document.getElementById("ul1"); ????????var?speed?=?50;???????? ???? ????????mes2.innerHTML=mes1.innerHTML; ????????function?up(){ ????????????if(box.scrollTop?==?mes1.scrollHeight){ ????????????????box.scrollTop=0; ????????????}else{ ????????????????box.scrollTop?++; ????????????}???????????? ????????} ????????var?i=setInterval("up()",speed); ????????box.onmouseover=function?(){ ????????????clearInterval(i); ????????} ????????box.onmouseout=function(){ ????????????i=setInterval("up()",speed);//一定要賦值給變量i,否則會引起兩次調(diào)用計時器。 ????????}???????? ????</script> </body> </html>
2015-12-02
你這高度明顯計算錯誤了,兩個一樣的ol,height都是87,把#show的height改成87就可以了,這樣#show的scrollTop才會是87,==scrollHeight,才能重新scrollTop = 0,實現(xiàn)無縫滾動.
2016-07-01
老師的代碼就沒有要一樣啊