当前代码，当鼠标快速滑动时，滚动速度变得非常快，各位大神帮忙看看啊！怎么才能让鼠标来回移入时，滚动不再变快
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{text-decoration:none;color: #333;}
a:hover {
color: #ff0000;
}
*{margin:0;padding:0;font-size:12px;font-family:微软雅黑}
#odiv{height:200px;width:400px;border:3px solid #999;margin:0 auto;margin-top:20px;border-radius:15px;box-shadow:2px 2px 4px #CCC}
#div1{background:#C00;height:50px;width:370px;display:block;color:#FFF;font-size:20px;line-height:50px;padding-left:30px;border-top-left-radius:12px;border-top-right-radius:12px;margin:0 auto;position: relative;}
#div1 a{text-decoration:none;position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;}
#div2{width:396px;height:146px;margin-left:15px;overflow:hidden}
ul{list-style:none}
#div2 ul li{height:25px;}
#div2 ul li a{width:300px;float:left;height:25px;display:block;}
#div2 ul li span{width:80px;height:25px;text-align:center;margin-right:5px;colos:#CCC;}
</style>
</head>
<body>
<div id="odiv">
<div id="div1">
最新课程
<a href="#">更多《</a>
</div>
<div id="div2">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
<script type="text/javascript">
var area=document.getElementById("div2");
var ul1=document.getElementById("con1");
var ul2=document.getElementById("con2");
ul2.innerHTML=ul1.innerHTML;
var speed=50;
var time;
var liheight=25
area.scrollTop=0;
function startscroll(){
time=setInterval(scrollUp,speed);
area.scrollTop++;
}
function scrollUp(){
if(area.scrollTop % liheight==0){
clearInterval(time);
var time2=setTimeout(startscroll,2000);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout("startscroll()",50);
area.onmouseover=function(){
clearInterval(time);
area.scrollTop=area.scrollTop
}
area.onmouseout=function(){
clearInterval(time);
startscroll();
}
</script>
</body>
</html>
大黑虎1回答
-
ppo_YXWU
主要是这句的问题： var time2=setTimeout(startscroll,2000);这句是两秒后调用startscroll函数，但是当在这两秒内你再移动鼠标离开元素触发area.onmouseout=function(){clearInterval(time); startscroll(); }时，就会调用多次的startscroll函数，这时time=setInterval(scrollUp,speed);这句多次赋值，会造成多个循环调用，而且time只会指向最后一次赋值的循环调用。所以后面的clearInterval(time);只能清除一次循环调用，而对之前的毫无作用。所以就会形成恶性循环，越来越快。解决方法：可以在赋值语句time=setInterval(scrollUp,speed);前加个清除循环语句：clearInterval(time);既function startscroll(){clearInterval(time);time=setInterval(scrollUp,speed);area.scrollTop++;}
随时随地看视频慕课网APP
JavaScript
Html/CSS
前端工具