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

标签 javascript html css animation

JS: 我的问题是运行以下 JS 脚本,我认为它应该很容易,但我不明白为什么它不能运行。我刚开始编码,我已经陷入了这个问题。我希望文本向上(通过增加 CSS 中的 bottom)5px 直到它到达 pos=6 ;然后 clearInterval 应该完成它的工作。

CSS: 我已经将 div 的位置设置为 RELATIVE,就像我在一些教程中读到的那样,但没有将“容器”的位置设置为 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>

最佳答案

首先,为什么声明要在圆顶节点数组上使用事件(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 移动文本动画不起作用。完整代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50986083/

相关文章:

javascript - JS 倒计时器(小时/秒)在 Safari 中不起作用

javascript - 当我更改状态时,功能组件会重新渲染

javascript - VueJS获取Div的宽度

javascript - 如何在鼠标位置缩放图像并在 div 上显示结果

html - 在响应式 iframe 上 Div 高度为 0px

javascript - 为什么我的输入永远不会被隐藏?

javascript - 显示事件不适用于 Bootstrap Collapse

javascript - 如何在 HTML 框中放置输入框(表单)并使用 JQuery 定位它

html - 如何创建复选框来更改文档的 CSS 和 Javascript?背景颜色切换

asp.net - 如何从 C# 代码隐藏设置 iframe 的最小高度?