js事件onmouseout无效

发布于
2017-10-19

新手上路，请多包涵

用js写了一个移入移出的onmouseover和onmouseout的交互事件，但是只有onmouseover起作用，onmouseout无效，请问是哪里出了问题，我该如何去修改呢？

以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>淡入淡出</title>
  <script>
  window.onload=function ()
  {
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function ()
    {
      demo(1);
    };
    oDiv.onmouseout=function ()
    {
      demo(0.3);
    };
  };



  function demo(iTarget)
  {
    var oDiv=document.getElementById('div1');
    var timer=null;
    var alpha=0.3;

    clearInterval(timer);
    timer=setInterval(function ()
    {
      var speed=0;

      if(alpha<iTarget)
      {
        speed= 0.1;
      }
      else
      {
        speed= -0.1;
      }

      if(alpha==iTarget)
      {
        clearInterval(timer);
      }
      else
      {
        alpha+=speed;
        // oDiv.style.filter='alpha(opacity:'+alpha+')';
        oDiv.style.opacity=alpha;
      }

    },30)
  };
  </script>
  <style>
#div1
{
  width: 200px;
  height: 200px;
  background: red;
  /*filter: alpha(opacity:30);*/
  opacity:0.3;
}
  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

javascript

阅读 4.4k

3 个回答

陌路凡歌

✓ 已被采纳

var timer=null;
var alpha=0.3;

这两个写在demo(iTarget)外面,另外最好是用整数加减，然后再除以100，小数加减会出现计算精度损失的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>淡入淡出</title>
  <script>
  window.onload=function ()
  {
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function ()
    {
      demo(100);
    };
    oDiv.onmouseout=function ()
    {  
      demo(30);
    };
  };


  var timer=null;
    var alpha=30;
  function demo(iTarget)
  {
    var oDiv=document.getElementById('div1');

    clearInterval(timer);
    timer=setInterval(function ()
    {
      var speed=0;

      if(alpha<iTarget)
      {
        speed= 10;
      }
      else
      {
        speed= -10;
      }

      if(alpha==iTarget)
      {
        clearInterval(timer);
      }
      else
      {
        alpha+=speed;
        // oDiv.style.filter='alpha(opacity:'+alpha+')';
        oDiv.style.opacity=alpha/100;
      }

    },30)
  };
  </script>
  <style>
#div1
{
  width: 200px;
  height: 200px;
  background: red;
  /*filter: alpha(opacity:30);*/
  opacity:0.3;
}
  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

SlaneYang

3.7k1115

发布于
2017-10-19

你的定时器变量timer作用域放的有问题，导致鼠标移出后，并没有清除之前的定时器

  window.onload=function () {
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function () {
      demo(1);
    };
    oDiv.onmouseout=function () {
      demo(0.3);
    };
  };

  var timer=null;  // ++++++++++++++++++++timer 放到这里
  function demo(iTarget) {
    var oDiv=document.getElementById('div1');
    
    var alpha=0.3;

    clearInterval(timer);
    timer=setInterval(function () {
      var speed=0;

      if(alpha<iTarget) {
        speed= 0.1;
      } else {
        speed= -0.1;
      }

      if(alpha==iTarget) {
        clearInterval(timer);
      } else {
        alpha+=speed;
        // oDiv.style.filter='alpha(opacity:'+alpha+')';
        oDiv.style.opacity=alpha;
      }
    },30)
  };