2

我将图像像一副纸牌一样堆叠在一起，并且每个图像的 z-Index 通过下面的代码依次更改，因此最终结果是动画。但是，它是线性的并且不会颠倒顺序，我希望它能够向前和向后设置动画。我不想要代码，但我确实想要知道可以做什么。我最终会想出代码=）

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)};
};
4

1 回答 1

0

您可以将指向图像的指针保存在数组中以使用Array.prototype.sortMDN。这样，您将拥有一个图像数组，可以按任何顺序进行操作。

 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)
})
于 2013-06-29T21:01:20.447 回答