js的鼠标悬浮事件

直接看<script>标签，想要鼠标悬浮暂停怎样实现不扰乱自动翻滚

<html>
 <head>
  <title>文字的无缝滚动</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <style type="text/css">
   *{ 
    margin: 0;
    padding: 0;
   }
   body{
    font-size: 12px;
    line-height: 24px;
   }
   a{
    text-decoration: none;
    color:#333;
   }
   a:hover{
    color:#ff0000;
   }
   ul {
        list-style: outside none none;
   }
   #mooc{
    width: 399px;
    margin: 50 auto 0;
    border: 5px solid #BBBBBB;
    box-shadow: 2px 2px 10px #ababab;
    border-radius: 15px;
   }
   #mooc_head{
    height: 60px; /* Safari 5.1 - 6.0 */
           background: -webkit-linear-gradient(top, #f05e6f, #c9394a);
           background: -moz-linear-gradient(center top,#f05e6f, #c9394a);
           background: linear-gradient(to bottom, #f05e6f, #c9394a); /* Safari  /* Firefox 3.6 - 15  /* 标准的语法 */
           position: relative;
           padding-left: 30px;
           line-height: 60px;
    font-size: 24px;
    color:#FFFFFF;
    border-radius: 8px 8px 0px 0px;
   }
   #mooc_head a{
    right:10px;
    bottom: 10px;
    line-height: 30px;
    color:white;
    position: absolute;
    font-size: 12px;
   }
   #moocbox{
    height:150px;
    overflow: hidden;
    margin-left: 25px;
    width:335px;
   }
   #moocbox ul li{
    height: 24px; 
   }
   #moocbox ul li a{
    display:block;
    color:black;
    float:left;
    height: 24px;
    text-indent: 15px;
    overflow: hidden;
    width: 180px;
   }
   #moocbox ul li a:hover{
    color:red;
   }
   #mooc span{
    color:#999;
    float: right;
   }
  </style>
 </head>
 <body>
  <div id="mooc">
   <h3 id="mooc_head">慕课网最新课程
   <a href="#">更多>></a>
   </h3>
   <div id="moocbox">
    <ul id="con">
        <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>
   </div>
  </div> 
  <script type="text/javascript">
  var box = document.getElementById("moocbox");
  var con=document.getElementById("con");
  con.innerHTML+=con.innerHTML;
  box.scrollTop=0;
  var liHeight=24;//li的高度
  var speed=50;
  var delay=1000;
  function startMove(){
   box.scrollTop++;
//   console.log(box.scrollTop);
   time=setInterval(scrollUp,speed);
  }
  function scrollUp () {   
   if(box.scrollTop%liHeight==0){
    clearInterval(time);
    setTimeout(startMove,delay);
   }else{
    box.scrollTop++;
    if(box.scrollTop >= box.scrollHeight/2){
     box.scrollTop=0;
    }
   }
  }
  setTimeout(startMove,delay);
//  box.onmouseover=function(){
//   clearInterval();
//  }
//  box.onmouseout=function(){
//   startMove();
//  } 
  </script>
 </body>
</html>

时间啊

浏览 3808回答 1

1回答

慕郎_莲华

var timer = setInterval(function(){// 自动播放}，间隔时间)； museover 的时候 clearinterval 取消自动播放～～ mouseout的时候从新开启var timer ＝ setinterval ／／这个可以写成一个函数 autoplay（）

0 0

随时随地看视频慕课网APP