[英]JavaScript moving text animation doesn't work. FULL CODE
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>
尝试这个
<!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>
第一件事是,为什么要声明要在圆顶节点数组上使用事件(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.