Question

我正在构建一个小应用程序，它可以让你通过人们的商业卡，3D风格。基本上，我有一个无序列表，包含10个列表项。每次按下左侧的向下箭头，我想删除第一个

（前面的那个）并将其推到后面（所以它成为最后一个

在列表中。）

此外，由于除了第一个项目之外的所有项目都具有负的transformZ值以将它们推回，我想重新排列它们以便每次按下向下btn时它们更靠近用户。现在他们每个人都有一个80 * i的transformZ值，我不知道如何在没有搞乱相同布局的情况下推动它们。

我试过做类似的事情，但不幸的是它没有做到这一点：

btnDown.addEventListener('click', function() {
        listItems[0].parentNode.removeChild(listItems[0]);
        for (i=0; i<=listItems.length-1;i++) {
            list.style.webkitTransform = "rotateX(0deg) translateZ(-" + (100*i) + "px)";    
        }

}，false）;

您还可以在此处找到完整的项目： http://codepen.io/gbnikolov/pen/cbdwl

提前致谢，非常感谢所有帮助！

Answer 1

btnDown.addEventListener('click', function() {  
  listItems[0].parentNode.appendChild(listItems[0]);
  // re-index list
  listItems = document.querySelectorAll('#primary ul li')
  for (i=0; i<=listItems.length-1; i++) {
    listItems[i].style.webkitTransform = "rotateX(0deg) translateZ(-" + (80*i) + "px) translateY(-" + i*20 + "px)";
  }
}, false);

你很亲密。而不是删除项目，将其移动到节点的末尾。然后重新应用webkitTransform。

btnUp.addEventListener('click', function() {  
 var lastItem = listItems[listItems.length-1]
  listItems[0].parentNode.insertBefore(lastItem, listItems[0]);
  listItems = document.querySelectorAll('#primary ul li');
  applyWebkitTransform();
}, false);

对于up按钮，使用insertBefore（）函数。请参阅：http://codepen.io/anon/pen/cAbKI

切换无序列表并更改列表项的位置

1 个答案: