如何随机显示列表项的顺序

How do I display the order of list items randomly?

本文关键字：顺序 列表 何随机 显示      更新时间：2023-09-26

我有以下代码，当我使用div而不是列表项时，它可以工作。然而，我不知道如何按照列表项目的顺序随机淡出。我使用普通的Javascript和Greenlock（TweenMax）来制作项目的动画。

代码笔：http://codepen.io/dada78/pen/fd4f35272d48df628148f98c4a9e5459/

在我的HTML中，我有：

 <div id="spots">
      <ul>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
    </ul>
 </div>

在我的Javascript中：var spotsAll=document.querySelectorAll（"#spots"）；

 var tl = new TimelineMax(); 
 tl
   .set(spotsAll, {autoAlpha:0})
   .add(spotsIn);
 function spotsIn()
 {
  var spotsArray = [0, 1, 2, 3, 4, 5, 6];
  for(var i = 0; i < spotsArray.length; i++){
    tl.to(spotsAll[i], 0.5, {autoAlpha:1, ease: Back.easeOut.config(1.8)}, Math.random());}
 }

非常感谢您的建议！

您的spotsAll的选择器不正确。你只是在选择外部分区。

要修复它，只需将spotsAll选择器更改为：

var spotsAll = document.querySelectorAll("#spots li");
相关文章：