Javascript 使用JS移动元素

我发现了这个网站：

我真的很喜欢他们的左右移动文件。 我想知道，人们是如何做到这一点的

我尝试过的：

我试着只放置标准的HTML图像并绝对移动位置，虽然它有效，但没有实际的方法将它们循环回来或使其看起来……合法。。。。而不是哈奇

---

有什么建议或插件我可以使用吗？

他们就像你描述的那样做

实现这一点有不同的方法

阅读以下关于setInterval（）和setTimeout（）的文章，了解如何在JavaScript中创建循环：

或者更好的方法是requestAnimationFrame（）：

编辑： 你说过问题是循环回到起点，对吗

您可以使用setInterval函数，每N毫秒检查一次元素的“left”。如果它通过一个点，比如说300px，将其重置为0

比如：

var icon = document.getElementById("something");
var left = 0;
var speed = 1; // change this according to your taste

//... setup the image, position to absolute, etc...

setInterval(function() {
    left += speed;

    if(left >= 300) {
        left = 0;
    }
    icon.style.left = left + "px";
}, 100); //run every 0.1 seconds

这是一个非常基本的例子，不过

编辑2：处理多个对象

可以有更好的方法，但我会将所有内容都放在一个对象中，并创建这些对象的数组，如下所示：

var MAX_LEFT = 300;

function animatedIcon(id) {
    this.left = 0;
    this.opacity = 1;
    this.speed = 3;
    this.element = document.getElementById(id);
}

var icons = [];

for(var i = 1; i <= 20; i++) {
    // suposing you have the ids of your DOM elements like "icon1", "icon2", ...
    icons.push(new animatedIcon("icon"+i));
}

//You may want to tweek specific elements start position, speed or opacity, so icon can start from a different position
icons[2].left = 200;
icons[7].left = 17;
//...

setInterval(function() {
    for(i in icons) {
        icons[i].left += icons[i].speed;
        icons[i].opacity -= 0.01;
    }

    if(icons[i].left >= MAX_LEFT) {
        icons[i].left = 0;
        icons[i].opacity = 1;
    }

    icons[i].element.style.left = icons[i].left + "px";
    icons[i].element.opacity = icons[i].opacity;
}, 1000/60); //a basic "60 frames per second" rate.

var MAX_LEFT=300；
函数动画指令（id）{
这个左=0；
这是不透明度=1；
这个速度=3；
this.element=document.getElementById（id）；
}
var图标=[]；
对于（变量i=1；i=MAX_左）{
图标[i]。左=0；
图标[i]。不透明度=1；
}
图标[i].element.style.left=图标[i].left+“px”；
图标[i]。元素。不透明度=图标[i]。不透明度；
}, 1000/60); //基本的“每秒60帧”速率。

您描述的方法与网站使用的方法完全相同。您是否可以删除当前答案，然后在代码中编辑解决方案？在答案中添加了一个基本示例！好的，我会在5-10分钟内检查完美，如果我想使用其中的20个，你建议我如何设置功能？因此，我不必再次复制和粘贴X20编辑的答案，并使用一种可能的方法来处理多个对象。从那里，您可以添加其他功能，如沿垂直轴移动（有一个名为“top”的属性，从0开始，就像我们对“left”所做的那样）、更改颜色、更改图像等等