javascript - 为什么onmouseout不执行？？

问题描述

问 题

window.onload=function(){

    var oDiv = document.getElementById('div');
    var timer= null;

    oDiv.onmouseover=function(){
        startMove1();    
    }
    oDiv.onmouseout=function(){
        startMove2();
    }

    function startMove1(){
      clearInterval(timer);
      timer=setInterval(function(){
          if(oDiv.offsetLeft==0){
            clearInterval(timer);
          }else{
            console.log(111);
            oDiv.style.left=oDiv.offsetLeft+10+'px';
          }             
      },30);
    }

    
    function startMove2(){
      clearInterval(timer);
      timer=setInterval(function(){
          if(oDiv.offsetLeft==-150){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft-10+'px';
          }             
      },30);
    }

  }
  
  

<div id="div">

<div id="div1">分享到</div>

</div>

解决方案

问题1:

你是改变元素的 left 属性实现动画效果，至少 #div 元素是绝对或者固定定位的

问题2:

你在 mouseover 上结束动画的条件是 left 为 0，此外都是移动的。那么是不是说 left 默认不能设置为 0，否则你的动画不会运行。

问题3；

mouseout 上结束动画的条件是 left 为 -150, 按你每次 ＋10 和 －10 的移动方式，那么 left 默认设置必须是 10 或者 10 的倍数

这篇关于javascript - 为什么onmouseout不执行？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！