                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

if(oDiv.scrollTop % liHeight == 0) ？？？无法得到取余得0？

各位大神，今天在DW里测试了间歇滚动练习，依照视频步骤写，发现此处代码没起作用

if(oDiv.scrollTop % liHeight == 0)

整体代码如下：（变量和老师设的不一样）

window.onload=function(){

var time;

var liHeight = 24;

var oDiv=document.getElementById('div');

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

var con2=document.getElementById('con2');

con2.innerHTML = con1.innerHTML;

oDiv.scrollTop=0;

function move(){

oDiv.scrollTop++;

time=setInterval(startMove,30);

}

function startMove(){

//oDiv.scrollTop++;

if(oDiv.scrollTop % liHeight == 0){

clearInterval(time);

setTimeout(move,2000);

}else{

oDiv.scrollTop++;

if(oDiv.scrollTop>=con1.offsetHeight){

oDiv.scrollTop = 0;

}

setTimeout(move,2000);

}

程序不会间歇.....

单独改那句发现，oDiv.scrollTop递增值都是小数，用了如下方法测试

if(oDiv.scrollTop >=24){

clearInterval(time);

alert(oDiv.scrollTop);

弹出oDiv.scrollTop值为一堆小数，对24取余肯定不能得0，这是为什么，请指教谢谢

慕粉3737823

2016-10-06

源自：信息滚动效果制作 3-2

关注问题我要回答

711

操作

收起

1 回答

不起眼的魂
2016-10-08

我把你的代码放到我的模板里是没有问题的,是不是你的CSS有问题!,

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Js实现无缝滚动</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		#marqueeBox {
			margin: 100px auto;
			width: 200px;
			height: 100px;
			border: 1px solid lightgray;
			overflow: hidden;
		}
		
		ul {
			list-style: none;
			font-size: 12px;
			font-family: "microsoft sans serif";
		}
		
		li {
			height: 25px;
			line-height: 25px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	</style>
	<script>
		window.onload = function() {
			var time;
			var liHeight = 25;
			var oDiv = document.getElementById('marqueeBox');
			var con1 = document.getElementById('ul1');
			var con2 = document.getElementById('ul2');
			con2.innerHTML = con1.innerHTML;
			oDiv.scrollTop = 0;
			function move() {
				oDiv.scrollTop++;
				time = setInterval(startMove, 30);
			}

			function startMove() {
				//oDiv.scrollTop++;		
				if(oDiv.scrollTop % liHeight == 0) {
					clearInterval(time);
					setTimeout(move, 2000);
				} else {
					oDiv.scrollTop++;
					if(oDiv.scrollTop >= con1.offsetHeight) {
						oDiv.scrollTop = 0;
					}
				}
			}
			setTimeout(move, 2000);
		}
	</script>

	<body>
		<div id="marqueeBox">
			<ul id="ul1">
				<li>1.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>2.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>3.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>4.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>5.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>6.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>7.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>8.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.</li>
				<li>9.重要通知:内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可.s</li>
			</ul>
			<ul id="ul2"></ul>
		</div>

	</body>

</html>