Question

我需要编写一个基于html的监控表面。

对于曲面，我需要编码从x移动到y的圆，并且只有当数字xy大于xy时才编码。难以解释，但实际上与他们有相似之处

https://www.solarweb.com

单击“单击以立即尝试预览”，然后单击“查看演示”并选择第一个系统“Fronius AT Sattledt Hybrid 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>

Answer 1

我认为您在这里要做的是动态创建您的图像元素，然后为它们制作动画。您还可以执行其他奇特的操作，例如在画布上渲染或使用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)

发表思路：

您可以静态定义图像元素并为多个元素设置动画。如果您已经知道如何为一个元素设置动画，那么您可以将相同的知识应用于多个元素。

Javascript移动圈子

1 个答案: