Javascript振荡_Javascript_Animation

Javascript振荡

javascript animation

Javascript振荡,javascript,animation,Javascript,Animation,我有以下动画： <!DOCTYPE HTML> <html> <head> <style> .example_path { position: relative; overflow: hidden; width: 530px; height: 30px; border: 3px solid #000; } .example_path .example_block { position: absolu

我有以下动画：

<!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>


.示例_路径{
位置：相对位置；
溢出：隐藏；
宽度：530px；
高度：30px；
边框：3倍实心#000；
}
.example\u路径。example\u块{
位置：绝对位置；
背景颜色：蓝色；
宽度：30px；
高度：20px；
填充顶部：10px；
文本对齐：居中；
颜色：#fff；
字体大小：10px；
空白：nowrap；
}
功能移动（elem）{
左变量=0
函数框架（）{
左+=10//更新参数
elem.style.left=left+'mm'//显示帧
if（left==10000）//检查完成条件
清除间隔（id）
}
var id=setInterval（帧，1）//每1ms绘制一次
}

如您所见，如果蓝色块与矩形相交，它将移出矩形。如何使蓝色方块在矩形边界上来回摆动，以保持速度恒定

（在我的情况下，速度是10米/秒，又称10毫米/秒）

您需要将代码更新为：

功能移动（elem）{
左变量=0
var fwdMove=真；
函数框架（）{
if（左<0）{
fwdMove=true；
}否则如果（左>520）{
fwdMove=false；
}
fwdMove？左+=10：左-=10
elem.style.left=left+'px'//显示帧
}    
var id=setInterval（帧，1）//每1ms绘制一次
}

您需要将代码更新为：

功能移动（elem）{
左变量=0
var fwdMove=真；
函数框架（）{
if（左<0）{
fwdMove=true；
}否则如果（左>520）{
fwdMove=false；
}
fwdMove？左+=10：左-=10
elem.style.left=left+'px'//显示帧
}    
var id=setInterval（帧，1）//每1ms绘制一次
}

我们首先添加一个变量来跟踪我们前进的方向。我们不想修改您移动的速度，因此我们使用正1或负1来影响位置

var direction = 1; // 1=Right, -1=Left
var left = 0

function frame() {
    left+=(10 * direction);  // update parameters

因为mm是一个打印单元，我们在浏览器中工作，所以我们将它改为使用px。如果您真的需要使用mm，您必须找到一种在它们之间转换的方法，以使长方体在适当的位置停止

elem.style.left = left + 'px' // show frame

最后，我们检查是否已经越过了框的边界，如果是，我们将其放回框中并反转方向

if (left <= 0) {
    direction = 1; // Begin moving to the left
    left = 0; // Put the box back in the path
} else if (left >= (530 - 20)) {
    direction = -1; // Begin moving to the right
    left = (530 - 20); // Put the box back in the path
}

if（左=（530-20））{
方向=-1；//开始向右移动
left=（530-20）；//将框放回路径中
}

我们首先添加一个变量来跟踪我们前进的方向。我们不想修改您移动的速度，因此我们使用正1或负1来影响位置

var direction = 1; // 1=Right, -1=Left
var left = 0

function frame() {
    left+=(10 * direction);  // update parameters

elem.style.left = left + 'px' // show frame

最后，我们检查是否已经越过了框的边界，如果是，我们将其放回框中并反转方向

if (left <= 0) {
    direction = 1; // Begin moving to the left
    left = 0; // Put the box back in the path
} else if (left >= (530 - 20)) {
    direction = -1; // Begin moving to the right
    left = (530 - 20); // Put the box back in the path
}

if（左=（530-20））{
方向=-1；//开始向右移动
left=（530-20）；//将框放回路径中
}

请添加更多详细信息，您需要从该代码中获得什么？您是否复制了代码并将其粘贴到文本编辑器中，请尝试并告诉我发生了什么？这个街区穿过右边的边界，对吗@Zaheerahmede这是一个问题的答案。我建议为将来的问题添加一个CSS3此功能已从javascript移动到动画属性-您应该看看这里请添加更多详细信息，您需要从该代码中获得什么？您是否复制了代码并将其粘贴到文本编辑器中，请尝试并告诉我发生了什么？这个街区穿过右边的边界，对吗@Zaheerahmede这是一个问题的答案。我建议为将来的问题添加一个CSS3。此功能已从javascript移到动画属性-您应该在此处查看是的，太棒了，非常感谢，您当然应该接受！还有一张赞成票！你能用毫米而不是几秒钟告诉我同样的事情吗？我试着用毫米来代替px，但是块在外面的某个地方停了下来是的，太棒了，非常感谢，你当然应该接受！还有一张赞成票！你能用毫米而不是几秒钟告诉我同样的事情吗？我试着用毫米替换px，但是块在外面某处停止了