javascript - 无缝滚动中间出现了空白间隙
本文介绍了javascript - 无缝滚动中间出现了空白间隙的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!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>
解决方案
ul margin-top:0;margin-bottom:0;
这篇关于javascript - 无缝滚动中间出现了空白间隙的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文