javascript - JavaScript 移动文本动画不起作用。完整代码
问题描述
JS:我的问题在于运行下面的 JS 脚本,我想它应该很容易,但我不明白为什么它不能运行。我刚刚开始编码,我已经陷入了这个问题。我希望文本上升(通过增加 CSS 中的底部)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>
解决方案
尝试这个
<!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>
推荐阅读
- css - 涉及内部 div 间距时的边距或填充?
- c# - 在保持默认值的同时使文本消失
- c - 将字符与指针用于“单词数组”
- ruby-on-rails - 使用 CSRF 通过 Curl 将删除发送到 Rails 后端
- javascript - 按下 Tab 键时将表格内容变为可编辑
- karate - 断言错误 - 无法将 java.lang.String 转换为 java.util.List
- node.js - 条带连接创建客户的正确电话号码格式
- highcharts - 在 Highcharts 中隐藏线段
- javascript - 传单:如何否决打开覆盖层?
- python - ModuleNotFoundError:没有名为 ERROR 的模块