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

求各位大神指点

怎么给间歇性循环滚动加鼠标移入停止，移出继续滚动的效果？？

咿呀咿呀哒哒

2016-09-01

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

关注问题我要回答

434

操作

收起

1 回答

李小希
2016-09-01

<!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>
*{
   margin:0;
   padding:0;
   }
#mooc{
   width:200px;
   height:78px;
   }
#moocTitle{
   width:200px;
   height:30px;
   background:#f00;
   }
#moocBox{
   width:200px;
   height:48px;
   overflow:hidden;
   }
p{
   width:180px;
   padding-left:20px;
   height:24px;
   }
p:hover{
   color:red;
   }
</style>
</head>

<body>
<div id="mooc">
   <div id="moocTitle">MOOC TITLE</div>
    <div id="moocBox">
       <div id="con1">
           <p>1.XXXXXXXX</p>
            <p>2.XXXXXXXX</p>
            <p>3.XXXXXXXX</p>
            <p>4.XXXXXXXX</p>
            <p>5.XXXXXXXX</p>
            <p>6.XXXXXXXX</p>
            <p>7.XXXXXXXX</p>
            <p>8.XXXXXXXX</p>
            <p>9.XXXXXXXX</p>
            <p>10.XXXXXXXX</p>
        </div>

    </div>
</div>
<script>
var area=document.getElementById('moocBox');//滚动区域
var lineHeight=48;//两倍p的高度
var timer=null;//定时器
area.innerHTML+=area.innerHTML; //克隆
area.scrollTop=0;//初值
function marquee(){//运动
   area.scrollTop++;
   if(area.scrollTop%lineHeight==0){//检测等待
       clearInterval(timer);
       timer=setTimeout("timer=setInterval('marquee()',50)",2000);//等待后再滚动
       }else{
           if(area.scrollTop>=area.scrollHeight/2){//无缝滚动
               area.scrollTop=0;
               }
           }
   }
timer=setInterval('marquee()',50);
area.onmousemove=function(){//移入停止
   clearInterval(timer);
   clearTimeout(timer);
   }
area.onmouseout=function(){//移出继续
   clearTimeout(timer);
   timer=setInterval('marquee()',50);
   }
</script>
</body>
</html>