Question

JS：我的问题是运行以下JS脚本，我想这应该很容易，但是我不明白为什么它无法运行。我刚刚开始编码，但我已经陷在这个问题中了。我希望文本上升（通过增加CSS中的 bottom ）5px，直到达到pos = 6为止；那么 clearInterval 应该做好它的工作。

CSS：我已经将div的位置设置为RELATIVE，就像我在一些教程中阅读的那样，但是没有将“ container”的位置设置为ABSOLUTE，这可能是问题所在吗？

 <html>

        <head>
          <style>
    html {
      height: 100%;
    }

    body {
      height: ;
      width: 100%;
      background-color: ;
      margin: 0px;
      padding: 0px;
    }

    #generale {
      height: 100%;
      width: 100%;
    }

    #intestazione {
      height: 7%;
      width: 100%;
      float: left;
      background-image: url(immagini/sfumatura.png);
      position: static;
    }

    #profilo {
      position: static;
      float: right;
      width: 12%;
      height: 100%;
    }

    .testo_rialzato {
      position: relative;
      float: right;
      width: auto;
      height: 100%;
      padding-left: 20px;
      padding-right: 20px;
      background-color: transparent;
    }
    </style>
        </head>

        <body>
          <div id="generale">
            <div id="intestazione">


              
                <div id="profilo"></div>
              


              
                <div class="testo_rialzato sumba">
                  <p>Sp</p>
                </div>
              



              
                <div class="testo_rialzato ap">
                  <p>App</p>
                </div>
              



              
                <div class="testo_rialzato te">
                  <p>Te</p>
                </div>
             
        


              
                <div class="testo_rialzato do">
                  <p>Dom</p>
                </div>
              


              
                <div class="testo_rialzato big">
                  <p style="line-height:70%; margin-top:8px; text-align:center;">Big</p>
                </div>
              
            </div>

            <script>
    var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
        ez.onmouseover = alza();
    var intervallo = setInterval(alza, 100);

    function alza() {

      var pos = 0;
      if (pos = 6) {
        clearInterval(intervallo);
      } else {
        ez.style.bottom = pos + "px";
      }
    }
    </script>
          </div>
        </body>

        </html>

Answer 1

尝试

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p> 

<div id ="container">
<div id ="animate">ggg</div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

Answer 2

第一件事是，为什么要声明您正在对圆顶节点数组使用事件（querySelectorAll的结果将返回十二指肠数组），所以为了附加鼠标悬停并应用某种样式，您必须在这些节点周围循环。

第二个东西在声明设置间隔的同时，无法在这里使用mousemove吗？

如果条件错误，则说明您正在使用分配，因此必须使用==或===进行比较。

请参见以下代码段：

var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
var pos = 0;


var intervallo = setInterval(alza, 100);

ez.forEach(function(el){
  el.addEventListener("mouseover", alza);
})


function alza() {
   
  if (pos == 25) {
    clearInterval(intervallo);
  } else {
    ez.forEach(function(el){
      el.style.bottom = pos + "px";
    });
    pos++;
  }
}

.sumba, .ap {
  position:absolute;
}

.ap {
  color:red;
  left:40px
}

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="sumba">Text</div>

<div class="ap">Text 2</div>

JavaScript移动文本动画不起作用。完整代码

2 个答案: