javascript - 在 Div 中随机移动元素

Question

我目前正在开发一个新站点，我需要随机移动新闻提要 实际上，我用这些新闻列表构建了一个数组。该数组被打乱并放在新闻提要的地方。

这个技巧很有效，但我想添加一些动画效果来显示元素移动。

我的 HTML 如下:

<div class="wrapper">
   <a href="...">news content</a>
   <a href="...">news content</a>
   <a href="...">news content</a>
</div>

所以它是 <a>我需要在 <div> 中制作动画的元素

知道我该怎么做吗？

Answer 1

制作简单动画的最简单和最常用的方法是使用 jQuery。我希望你熟悉它，否则看看over here .

我做了 a JSFiddle我对你的问题的解决方案有很多评论。

该代码的基本作用是计算应移动的元素数量，然后以随机顺序为每个元素提供上边距。棘手的部分是跟踪已设置上边距的元素，因此我将它们的 ID 插入数组。

您还应该知道，我已经为每个链接元素指定了一个 id，如下所示:

<div class="wrapper">
    <a id="1">news content 1</a>
    <a id="2">news content 2</a>
    <a id="3">news content 3</a>
    <a id="4">news content 4</a>
    etc...
</div>

所有链接元素必须有一个这样的id。此外，所有链接都应在其 CSS 中包含 display: block; 属性。希望您喜欢我的解决方案，祝您好运!