Javascript移动圆圈
问题描述：
我需要编写一个基于html的监控界面。Javascript移动圆圈
对于表面我需要编码从x移动到y的圆圈，只有当数字xy大于xy时。 很难解释，但实际上类似像他们有它
点击“按现在尝试预览”的顶部，比点击“查看演示”，然后选择第一个系统“福尼斯AT Sattledt的混合2“
并在左侧看到上面的动画。
我仍然能够从一个div的开头运行到最后。但只有1圈！是否有可能连续做更多的圆圈？
也许有人能帮助我:)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Bullet</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#energieFluss {
width: 900px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#bullet {
position: relative;
left: 50px;
top: 25px;
}
</style>
<body>
<div id="energieFluss" width="900px" height="500px" color="red">
<img id="bullet" src="ball-blau.png" height ="25" width= "25">
</div>
<script>
var Bullet = document.querySelector ("#bullet");
var currentPos = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function moveBullet() {
currentPos += 8;
Bullet.style.left = currentPos + "px";
if (Math.abs(currentPos) >= 900) {
currentPos = -50;
}
requestAnimationFrame(moveBullet);
}
moveBullet();
</script>
</body>
答
我想你会想在这里做什么是动态创建的图像元素，然后动画他们。你也可以做其他奇特的事情，比如在画布上渲染，或者使用JavaScript渲染库来更有效地完成它。
要动态创建的元素，做这样的事情：
var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)
后认为：
你可能只是静态地定义你的图像元素和动画多个元素。如果你已经知道如何动画一个元素，那么你可以将同样的知识应用于多个元素。
您的链接不起作用。我得到一个会话相关的失败。 – Chris
哦oke，对不起，也许试试开始页面：https：//www.solarweb.com/ – simpson
比点击solarweb prewiev顶部，比视图演示和比选择第一个系统（Fronius AT Sattledt Hybrid 2） – simpson