JavaScript移動文本動畫不起作用。完整代碼

Question

JS：我的問題是運行以下JS腳本，我想這應該很容易，但是我不明白為什么它無法運行。 我剛剛開始編碼，但我已經陷在這個問題中了。 我希望文本上升（通過增加CSS的底部）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的結果將返回十二面體數組），所以要附加鼠標懸停並應用某種樣式，您必須在這些節點周圍循環。

第二件事在聲明設置間隔時，在mousemovehere使用鼠標沒用？

另外條件if是錯誤的，您正在使用分配，因此必須使用==或===進行比較。

請參見以下代碼段：

 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 個解決方案

解決方案1
0 2018-06-22 10:54:59

解決方案2
0 已采納 2018-06-22 11:17:48

JavaScript移動文本動畫不起作用。 完整代碼

問題描述

2 個解決方案

解決方案1 0 2018-06-22 10:54:59

解決方案2 0 已采納 2018-06-22 11:17:48

JavaScript移動文本動畫不起作用。完整代碼

解決方案1
0 2018-06-22 10:54:59

解決方案2
0 已采納 2018-06-22 11:17:48