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

为什么鼠标不停上下移动，滚动就会越来越快

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>demo</title>

<style type="text/css">

*{margin:0;padding:0;}

div{width:50px;

overflow:hidden;

height:50px;margin:10px auto;

}

ul{

height: 72px;

overflow:hidden;

border:1px solid #ccc;

}

</style>

</head>

<body>

<div id="box">

<ul id="con1">

<li>哈哈哈</li>

<li>ooooo</li>

<li>cccc</li>

<li>qqqqqqq</li>

</ul>

<ul id="con2"></ul>

</div>

<script type="text/javascript">

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

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

var bb=document.getElementById('gundongbody');

cc.innerHTML=gg.innerHTML;

mydd=setTimeout(startwork,600);

function startwork(){

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

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

var bb=document.getElementById('box');

bbk=setInterval(function(){

if(bb.scrollTop%28==0)

{

clearInterval(bbk);

setTimeout(startwork,600);

}

bb.scrollTop++;

if(bb.scrollTop>=gg.offsetHeight)

{

bb.scrollTop=0;

}

},50)

bb.onmouseover=function(){

clearInterval(bbk);

}

bb.onmouseout=function(){

startwork();

}

}

</script>

</body>

</html>

qq_浮世_4

2016-12-30

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

关注问题我要回答

1233

操作

收起

4 回答

清风流光
2017-05-06

还一种不用清除器的方法，在函数内部开头用无限定时器调用自身，外部执行这个函数就行

0 回复有任何疑惑可以回复我~

清风流光
2017-05-06

你没有消除定时器，每隔一定时间重新掉一次，上次还没执行完，这次又叠加上去了，一般用定时器都要加相应的清除器在函数头部清除

0 回复有任何疑惑可以回复我~

Altas____3623972
2016-12-31

		
var gg = document.getElementById('con1');
		var cc = document.getElementById('con2');
		var bb = document.getElementById('gundongbody');
		cc.innerHTML = gg.innerHTML;
		mydd = setTimeout(startwork, 600);

		function startwork() {
			var gg = document.getElementById('con1');
			var cc = document.getElementById('con2');
			var bb = document.getElementById('box');
			bbk = setInterval(function () {
				if (bb.scrollTop % 28 == 0) {
					clearInterval(bbk);
					setTimeout(startwork, 600);
				}
				bb.scrollTop++;

				if (bb.scrollTop >= gg.offsetHeight) {
					bb.scrollTop = 0;
				}
			}, 50)
		}

		bb.onmouseover = function () {
			clearInterval(bbk);
		}
		bb.onmouseout = function () {
			startwork();
		}

再试试,我验证的话是没有越滚越快的

0 回复有任何疑惑可以回复我~

#1

慕粉1847419605

是没有越滚越快呀但是也不停了大哥。局部变量外面用不了了。两个都失效了

2017-01-09 回复有任何疑惑可以回复我~

Altas____3623972
2016-12-31

bb.onmouseover=function(){
clearInterval(bbk);
}
bb.onmouseout=function(){
startwork();
}

把这两行代码从startWork()函数体中拿出来就可以了，不这样做应该是会造成定时器冲突导致clearInterval()没有办法清楚全部的定时器

0 回复有任何疑惑可以回复我~

#1

qq_浮世_4 提问者

拿出来结果还是一样的呀

2016-12-31 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

信息滚动效果制作

参与学习 47735 人
解答问题 333 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

为什么鼠标不停上下移动，滚动就会越来越快

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号