JS透明度动画（全代码）

JS透明度动画：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  #mainBody {
    width: 200px;
    height: 200px;
    background-color: red;
    opacity: 0.3;
  }

</style>
</head>
<body>
  <div id='mainBody'>
  </div>
  <script>
    var oDiv = document.getElementById('mainBody');
    window.onload = function() {
      oDiv.onmouseover = function() {
        startMove(100);
      }
      oDiv.onmouseout = function() {
        startMove(30);
      }
    }

    var timer = null;
    var opacityE = 30;

    function startMove(iTarget) {
      clearInterval(timer);
      timer = setInterval(function() {
        var speed = 0;
        if (opacityE > iTarget) {
          speed = -5;
        }
        else {
          speed = 5;
        }
        if (opacityE == iTarget) {
          clearInterval(timer);
        }
        else {
          opacityE += speed;
          oDiv.style.opacity = opacityE/100;
        }
      },20)
    }
  </script>
</body>
</html>
CNSDHH
浏览 1165回答 1
1回答

脑袋空空空想家
？？？
0 1
随时随地看视频慕课网APP