JavaScript图像在z索引中交错排列

JavaScript images deck shuffle through z-index

本文关键字：排列 索引 图像 JavaScript      更新时间：2023-09-26

我有像一副牌一样堆叠在一起的图像，每个图像的z索引都通过下面的代码按顺序更改，这样最终的结果就是一个动画。然而，它是线性的，不会颠倒顺序，我希望它能向前和向后设置动画。我不想要代码，但我确实想要可以做什么的想法。我最终会想出代码=）

var imageArray = [];
function placeImage(x) {
    var div = document.getElementById("div_picture");
    div.innerHTML = ""; // clear images
for (counter=1;counter<=x;counter++) {
    var image=document.createElement("img");
    image.src="bola/bola"+counter+".png";
    image.width="500";
    image.height="500";
    image.alt="bola"+counter;
    image.id="imagem"+counter;
    image.style.backgroundColor="rgb(255,255,255)"
    image.style.position="absolute";
    image.style.zIndex=counter;
    div.appendChild(image);
    imageArray[counter-1] = document.getElementById("imagem"+counter);
    }
};
var imageShuffle = function(x) {
    imageArray[x-1].style.zIndex=0;
    for (counter=0;counter<x;counter++) {
        imageArray[counter].style.zIndex++;
    }
    imageArray.splice(0, 0, imageArray[x-1]);
    imageArray.pop();
};
window.onload = function() {
    placeImage(14);
    document.getElementById("div_picture").onclick=function() {setInterval("imageShuffle(14)",1000/14)};
};

您可以保留指向数组中图像的指针，以便使用Array.prototype.sort MDN通过这种方式，您将拥有一个任意顺序的图像阵列，然后您可以对其进行操作。

 imgs = document.getElementsByTagName('img'); //In case you don't have the pics.
 //First we create function to sort by zIndex
function sortZ(a, b) {
    //Make sure z-index is defined if not set to zero
    var b = b.getAttribute('z-index') ? b.getAttribute('z-index') : 0;
    var a = a.getAttribute('z-index') ? a.getAttribute('z-index') : 0;
    if (a < b) {
        return -1;
    }
    if (a > b) {
        return 1;
    }
    return 0;
}
function convertDomObject(domObject) {
    var domArr = [];
    for (var i = 0; i < domObject.length; i++) {
        domArr.push(domObject[i]);
    }
    return domArr;
}
var imgsArr = convertDomObject(imgs); //Use it !
imgsArr.sort(function (a, b) {
    return sortZ(b, a)
})
相关文章：