我正在构建一个小型应用程序,可让您浏览 3d 风格的名片。 基本上,我有一个无序列表,包含 10 个列表项。每次我按下左边的向下箭头,我想删除第一个
此外,由于除了第一个元素之外的所有元素都具有负的 transformZ 值以将它们推回,我想重新排列它们以便在每次按下向下按钮时它们更接近用户。现在他们每个人都有一个 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)";
}
}, 假);
您还可以在这里找到完整的元素: http://codepen.io/gbnikolov/pen/cbdwl
提前致谢,非常感谢所有帮助!
最佳答案
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);
对于向上按钮,使用 insertBefore() 函数。请参阅:http://codepen.io/anon/pen/cAbKI
关于javascript - 在无序列表中移动并更改其中列表项的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24505112/