首页 > 为什么onmouseout不执行??

为什么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>


首先,你的onmouseout的确是执行了的,只是你的style在js控制后你没有看到效果
根据的你代码我脑补你是要让你的div移动对吧,如果你要让css的left生效的话就一定要给这个元素添加position属性才能让left有效:


谁说onmouseout没有执行呢???你可以在事件中加一个console.log打印看看,分别是执行的很好。我想你的问题是为什么oDiv就不动呢?
是啊,它为什么就不动呢?明明有设置它的位置的oDiv.style.left=oDiv.offsetLeft-10+'px';

这要涉及到CSS的问题,因为当前oDiv的的定位方式是“流模式”,它的定位同浏览器实时计算所得,JS代码无法更改它的位置。如果你想要看看效果,可以把定位方式设置为position:absolute即可。刷新页面可以看到你的DIV在跳来跳去。


问题1:

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

问题2:

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

问题3;

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



【热门文章】
【热门文章】