1. 程式人生 > >利用Js中的定時器實現圖片的淡入淡出

利用Js中的定時器實現圖片的淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1
    {
      height: 200px;
      width: 200px;
      background: #222222;
      filter: alpha(opacity:30);/**/
      opacity:0.3;/*不支援IE瀏覽器*/
    }
  </style>
</head>
<body>
  <div id="div1">
  </div>
  <script>
    var oDiv = document.getElementById('div1');
    var timer = null;
    var alpha = 30;/*alpha應該設定為全域性變數*/
    var speed = 0;
    oDiv.onmouseover = function ()
      {
        startMove(100);
      };
    oDiv.onmouseout = function ()
    {
      startMove(30);
    };
      function startMove(iTarget)
      {
        clearInterval(timer);
        timer = setInterval(function ()
        {
          if (alpha < iTarget)
          {
            speed = 10;
          }
          else
            {
            speed = -10;
            }
          if (alpha == iTarget)
          {
            clearInterval(timer);
          }
          else
            {
            alpha = alpha + speed;
            oDiv.style.filter = 'alpha(opacity:' + alpha + ')';
            oDiv.style.opacity = alpha / 100;
            }
        }, 200);
      }

  </script>
</body>
</html>