无缝滚动中间出现了空白间隙

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无缝滚动</title>
<script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
}
li{list-style: none;}
li:hover{
    cursor: pointer;
}
.qimo8{
    height: 144px;
    width: 180px;
    border: 1px solid lightblue;
    margin-top: 50px;
    margin-left: 15px;
    overflow: hidden;
}
ul li{
    overflow: hidden;
    height: 24px;
}
#demo1{background: blue;}
#demo2{background: yellow;}
</style>
<div id="demo" class="qimo8">
    <ul id="demo1">
        <li>第1条滚动消息</li>
        <li>第2条滚动消息</li>
        <li>第3条滚动消息</li>    
        <li>第4条滚动消息</li>    
        <li>第5条滚动消息</li>    
        <li>第6条滚动消息</li>    
        <li>第7条滚动消息</li>  
        <li>第8条滚动消息</li> 
        <li>第9条滚动消息</li>          
    </ul><ul id="demo2">
    </ul>
</div>
<script type="text/javascript">
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML = demo1.innerHTML;
    function scrollUp() {
        if (demo.scrollTop >= demo2.offsetHeight){
            demo.scrollTop -= demo1.offsetHeight;
        }
        else{
            demo.scrollTop++;
        }
    }
    var myScroll = setInterval(scrollUp, 50);
    demo.mouseout = function(){ myscroll = setInterval(scrollUp,50); }
    demo.mouseover = function(){ clearInterval(myscroll); }
</script>
</body>
</html>

加magin：0；在#demo1{background: blue;}和#demo1{background: blue;}后面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无缝滚动</title>
<script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
}
li{list-style: none;}
li:hover{
    cursor: pointer;
}
.qimo8{
    height: 144px;
    width: 180px;
    border: 1px solid lightblue;
    margin-top: 50px;
    margin-left: 15px;
    overflow: hidden;
}
ul li{
    overflow: hidden;
    height: 24px;
}
#demo1{background: blue;margin: 0;}
#demo2{background: yellow;margin: 0;}
</style>
<div id="demo" class="qimo8">
    <ul id="demo1">
        <li>第1条滚动消息</li>
        <li>第2条滚动消息</li>
        <li>第3条滚动消息</li>    
        <li>第4条滚动消息</li>    
        <li>第5条滚动消息</li>    
        <li>第6条滚动消息</li>    
        <li>第7条滚动消息</li>  
        <li>第8条滚动消息</li> 
        <li>第9条滚动消息</li>          
    </ul><ul id="demo2">
    </ul>
</div>
<script type="text/javascript">
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML = demo1.innerHTML;
    function scrollUp() {
        if (demo.scrollTop >= demo2.offsetHeight){
            demo.scrollTop -= demo1.offsetHeight;
        }
        else{
            demo.scrollTop++;
        }
    }
    var myScroll = setInterval(scrollUp, 50);
    demo.mouseout = function(){ myscroll = setInterval(scrollUp,50); }
    demo.mouseover = function(){ clearInterval(myscroll); }
</script>
</body>
</html>

ul margin-top:0;margin-bottom:0;

【热门文章】