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

MDNを使用するために、配列内の画像へのポインターを保持できArray.prototype.sortます。このようにして、操作可能な任意の順序で画像の配列を取得できます。

 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 に答える