關于無縫滾動
<!DOCTYPE?html>
<html>
<head>
??<meta?charset="UTF-8">
??<meta?http-equiv="X-UA-Compatile"?content="IE=Edge">
??<meta?name="viewport"?content="width=device-width,initial-scale=1.0">
??<link?rel="stylesheet"?href="bootstrap.min.css">
??<style>
????*?{margin:?0;padding:?0;}
????li?{
??????list-style:?none;
??????margin-top:?10px;
??????}
????p?{
??????margin-left:?350px;
??????margin-top:?10px;
??????cursor:?pointer;
????}
????ul?{
??????margin-bottom:?0;
??????text-indent:?3em;
??????border:?1px?solid?transparent;
????}
????#warpper?{
??????margin:50px?auto;
??????width:?450px;
??????border:?3px?solid?#bbb;
??????border-radius:?10px;
??????overflow:?hidden;
????}
????.nav?{
??????position:?relative;
??????text-indent:?2em;
??????height:?80px;
??????line-height:?80px;
????}
????#movebox?{
??????height:?230px;
??????overflow:?hidden;
????}
????.pull-left{
??????float:?left;
????}
????.pull-right?{
??????float:?right;
??????margin-right:?20px;
????}
????.
??</style>
??<title>信息滾動</title>
</head>
<body>
??<div?id="warpper">
????<div?class="nav?bg-primary">
??????<h1>慕課網最新課程</h1>
??????<p>更多>></p>
????</div>
????<div?id="movebox">
??????<ul?id="list1">
????????<li><a?href="#1">1.HTML</a>?<span>2013-11-01</span></li>
????????<li><a?href="#2">2.CSS</a><span>2013-11-06</span></li>
????????<li><a?href="#3">3.JavaScript</a><span>2013-11-08</span></li>
????????<li><a?href="#4">4.HTML5</a><span>2013-11-10</span></li>
????????<li><a?href="#5">5.CSS3</a><span>2013-11-11</span></li>
????????<li><a?href="#6">6.bootstrap</a><span>2013-11-12</span></li>
????????<li><a?href="#7">7.jQuery</a><span>2013-11-13</span></li>
????????<li><a?href="#9">8.Ajax</a><span>2013-11-14</span></li>
??????</ul>
??????<ul?id="list2">
??????</ul>
????</div>
??</div>
<script>
var?box?=?document.getElementById('movebox'),
????list1?=?document.getElementById('list1'),
????list2?=?document.getElementById('list2');
????time?=?50;
????list2.innerHTML?=?list1.innerHTML;
function?scroll()?{
??if(box.scrollTop?>=?list1.offsetHeight)?{
??????box.scrollTop?=?0;
????}
????else?{
??????box.scrollTop++;
????}
}
setInterval(scroll,time)
</script>
</body>
</html>求解：1.教程里邊的源碼并沒有設置ul的border；
? ? ? ? ? 2.為什么我的全局聲明*{margin:0;padding:0}對ul無效了，還要單獨設置margin-bottom:0;
說明：1.如果我不設置ul的border就做不大無縫滾動；
? ? ? ? ? 2.不設置margin-bottom，兩個ul間有間距；
望大神解答，萬分感謝??！
2016-12-06
加了border反而滾一圈就滾不動了，不加border就可以，不過會突然跳一下。
就是因為加了border所以兩個ul有間距。