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

为什么只能悬停一次，之后就一直加速

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>    
    <style type="text/css">
*{margin:0;padding:0;}
#odiv{width:300px;border:1px solid #000;background:#d8bfd8;}
h3{height:50px;line-height:50px;text-align: center;border:1px solid #000;color:white;}
#div1{overflow: hidden; height:150px;border:1px solid #000;}
ul{width:200px;margin:0 50px 0 50px;}
li{list-style: none;}
a{text-decoration: none;color:white;}


    </style>
    
</head>
<body>
<script type="text/javascript">
  window.onload=function(){
      var area=document.getElementById('div1');
      var con1=document.getElementById('con1');
      var con2=document.getElementById('con2');
      var speed=50;
       area.scrollTop=0;
   con2.innerHTML=con1.innerHTML;
   function scroll(){
   if(area.scrollTop>=con1.offsetHeight)
          {
          area.scrollTop=0;
      }
      else{
          area.scrollTop++;
      }
  }
 var myscorll=setInterval(scroll,speed);

 area.onmouseover =function(){
     clearInterval(myscorll);
 }
 area.onmouseout =function(){
     setInterval(scroll,speed);
 }
  }
    </script>
    <div id="odiv">
    <h3>亚洲新歌榜实时趋势</h3>
    <div id="div1">
    <ul id="con1">
        <li><a href="#" >1.玫瑰与小鹿----周深</a></li><br>
        <li><a href="#" >2.蜉蝣----华晨宇</a></li><br>
        <li><a href="#" >3.大梦想家----TFBOYS</a></li><br>
        <li><a href="#" >4.Rims----欧豪</a></li><br>
        <li><a href="#" >5.银河----汪苏泷</a></li><br>
        <li><a href="#" >6.创作者----本兮</a></li><br>
        <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
        <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
        <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
        <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
        <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
        </ul>
        <ul id="con2"></ul>
    </div>
    </div>
</body>
</html>

源ying

2015-09-15

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

关注问题我要回答

597

操作

收起

4 回答

小感冒回答被采纳 +3 积分
2016-02-06

43行setInterval(scroll,speed);改为myscorll=setInterval(scroll,speed);

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

收起回答

源ying 提问者

非常感谢！

2016-02-22 回复有任何疑惑可以回复我~

飘移的鼻毛
2015-09-26

不是有个清除的效果的嘛

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

收起回答

ruiy
2015-09-18

我知道为什么了，，再一次设置定时器的时候要返回值给myscroll，不然就每次鼠标移动的时候都消除不了上次的定时器，但是每次移出的时候都会再设置一个定时器，而这个定时器没有被消掉，导致scrollTop加速，应该就酱。

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

收起回答

ruiy
2015-09-18

我也遇到这种问题了，请问怎么解决呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现无缝滚动</title>
</head>

<style type="text/css">
*{
margin:0px;
padding:0px;
}
#mookBox{
width: 300px;
height: 50px;
background:#CF6;
overflow:hidden;
}
</style>
<body>
<div id='mookBox'>
<div id='div1'>
<p>
<a href="#">hello!小伙伴</a><br>
<a href="#">新案例出炉</a><br>
<a href="#">一个学习型网站</a><br>
<a href="#">如果有建议请提交给我们</a><br>
<a href="#">非常感谢大家经常光顾</a><br>
</p>
</div>
<div id='div2'>
</div>
</div>
<script type="text/javascript">
var area = document.getElementById('mookBox');
//alert(area.onscroll);
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv2.innerHTML = oDiv1.innerHTML;
function scrollUp () {
if(area.scrollTop>=oDiv1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
var time = 50;
var myScroll = setInterval(scrollUp,time);
area.onmouseover = function(){
clearInterval(myScroll);
};
area.onmouseout = function(){
setInterval(scrollUp,time);
};
</script>
</body>
</html>

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

收起回答