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/