index1.html?__hbt=1553998985572:48 Uncaught TypeError: Cannot read property 'style' of null

来源:2-2 JS透明度动画

慕无忌1294876

2019-03-31 11:29

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>透明度</title>
  <style>
   *{
    margin: 0;
    padding: 0;
   }
   #div1{
    width:200px;
    height: 200px;
    background: red;
    filter: alpha(opacity:30);
    opacity:0.3;
   }
  </style>
  <script  type="text/javascript">
   window.onload = function(){
    var oDiv = document.getElementById("div1");
    oDiv.onmouseover = function(){
     startMove(100);
    }
    oDiv.onmouseout = function(){
     startMove(30);
    }
   }
   var timer = null;
   var alpha = 30;
   function startMove(iTarget){
    var oDiv = document.getElementById("#div1");
    clearInterval(timer);
    timer = setInterval(function(){
     var speed = 0;
     if(speed > iTarget){
       speed = -10;
      }else{
       speed = 10;
      }
     if(alpha == iTarget){
      clearInterval(timer);
     }else{
      alpha+=speed;
      oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
      oDiv.style.opacity = alpha/100;
     }
    },30)
   }
  </script>
 </head>
 <body>
  <div id="div1"></div>
 </body>
</html>

写回答 关注

2回答

  • 精慕门9383623
    2019-08-17 17:35:00

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

    这不是speed>Tarfet,而是alpha > Target


  • 慕移动3184862
    2019-04-02 22:34:46

    startMoe()函数中getElementById()的括号里写错了应该是"div1"

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113924 学习 · 1443 问题

查看课程

相似问题