个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有以下动画:
<!DOCTYPE HTML>
<html>
<head>
<style>
.example_path {
position: relative;
overflow: hidden;
width: 530px;
height: 30px;
border: 3px solid #000;
}
.example_path .example_block {
position: absolute;
background-color: blue;
width: 30px;
height: 20px;
padding-top: 10px;
text-align: center;
color: #fff;
font-size: 10px;
white-space: nowrap;
}
</style>
<script>
function move(elem) {
var left = 0
function frame() {
left+=10 // update parameters
elem.style.left = left + 'mm' // show frame
if (left == 10000) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 1ms
}
</script>
</head>
<body>
<div onclick="move(this.children[0])" class="example_path">
<div class="example_block"></div>
</div>
</body>
</html>
正如你所看到的，如果蓝色 block 穿过矩形，它就会移出矩形。我如何让蓝色 block 围绕矩形边框来回摆动，并始终保持速度恒定......
(在我的例子中，速度为 10 m/s 又名 10 mm/ms)
最佳答案
您需要将代码更新为:Here is working JSfiddle
function move(elem) {
var left = 0
var fwdMove = true;
function frame() {
if (left < 0) {
fwdMove = true;
} else if (left > 520) {
fwdMove = false;
}
fwdMove?left += 10:left -= 10
elem.style.left = left + 'px' // show frame
}
var id = setInterval(frame, 1) // draw every 1ms
}
关于JavaScript 振荡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17252683/
25
4
0
我有以下动画: .example_path { position: relative; overflow: hidden; width: 530px; heig
我真的不知道这是什么。 甚至都不知道如何找到它。 我将不胜感激任何帮助。 最佳答案 想一想祖父或其他基于钟摆的时钟的滴答声。在这种情况下，完整的滴答声周期通常为一秒钟。有了钟表，我们从重力和/或弹簧驱
有人可以指导我如何在 ImageView 上创建振荡动画吗？ 我有一个标签图像，我想将其设置为动画.. 任何 CABasicAnimation 的代码片段吗？？？ 最佳答案 您可以使用: + (voi
我正在使用 tensorflow 在 Audioset2017 数据集上训练 ResNet50在训练和验证结果期间，我的损失函数波动，总体趋势是下降的，但我担心这一点。 我已经运行了 100 个时期，
用户 U1 在时间 t1、t2、t3 穿过区域 Z1、Z2、Z3 用户 U1 在 t1、t2、t3、t4 来回穿过区域 Z1、Z2 这就是我所说的用户 « OSCILLATING »。 这被认为是一种
我是一名优秀的程序员,十分优秀！