5

私は、25 の動物のスプライト (画像を含むキャンバス) を作成し、それらを農場 (背景画像のある div) に配置する教育会社向けの学習モジュールを作成しています。次に、背景上の位置に応じて z-index を並べ替え、近いスプライトが遠いスプライトの上に表示されるようにします (背景の DIV とスプライトはどちらもposition:absolute; です)。

これは、スプライトを再配置する関数です。

Array.prototype.sortIndices = function (func) {
    var i = j = this.length,
        that = this;

    while (i--) {
        this[i] = { k: i, v: this[i] };
    }

    this.sort(function (a, b) {
        return func ? func.call(that, a.v, b.v) : 
                      a.v < b.v ? -1 : a.v > b.v ? 1 : 0;
    });

    while (j--) {
        this[j] = this[j].k;
    }
}

function rearrangeSprites() {
    var zSprites = new Array();
    for (var i = 0; i < sprites.length; i++) {
        var a = $('#sprite_'+i).css('bottom');
        a = a.substr(0, a.length - 2);
        zSprites[i] = { b : -a*1 };
    }
    zSprites.sortIndices(function(a,b) { return a.b - b.b; });

    for (var i = 0; i < zSprites.length; i++) {
        spriteObjects[zSprites[i]].style.zIndex = (1001 + i) + '';
    }
}

IE と Firefox では問題なく動作しますが、Chrome は z-index の順序を尊重しません。

何か案は？

回答への対応:

justspamjustin:ある時点で、記事が指摘しているように、負の z-indices を試しました。次のコードを使用して、オブジェクトの並べ替えも試みました。

    $('.sprite').detach();
    for (var i = 0; i < zSprites.length; i++) {
        $('#Stage_udi_meadow').append(spriteObjects[zSprites[i]]);
        spriteObjects[zSprites[i]].style.zIndex = (i + 1000) + '';
    }

灘！

Francis:キャンバス機能を中心に多くのコードが構築されているため、キャンバスをたとえば DIV に置き換えるのは大変なことです。また、透過性、PNG シャドウを使用し、単純な DIV では機能しないドラッグのヒット テストを行っているため、キャンバスにする必要があるため、このおいしいオプションを最後に保存します。

apsillers: CSS (要求に応じて):

スプライトの場合:

element.style {
width: 60.674351585014406px;
height: 60.674351585014406px;
left: 204.55043227665706px;
top: 22.550432276657062px;
cursor: pointer;
z-index: 1003;
}

.sprite {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
overflow: hidden;
position: absolute;
z-index: 140;
}

.EDGE-122375087, .EDGE-122375087 * {
-webkit-transform: translateX(0px);
}

背景用:

element.style {
position: absolute;
margin: 0px;
left: 0px;
top: 177px;
width: 566px;
height: 347px;
right: auto;
bottom: auto;
background-size: 100%;
background-image: url(http://localhost:9090/cet_html5/publish/images/udi_meadow.png);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 1;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}

#Stage_udi_meadow {
}

.EDGE-122375087, .EDGE-122375087 * {
-webkit-transform: translateX(0px);
}

user agent stylesheetdiv {
display: block;
}

Inherited from body
Style Attribute {
cursor: auto;
}
4

1 に答える 1

1

z-index が少し扱いに​​くい場合があります。W3 のこの記事が役立つかもしれません。しかし、その仕様は少し混乱するかもしれません。z-index が機能しない場合は、DOM 内の要素が適切に並べられていることを確認します。一般に、DOM の下位にある要素ほど、可視性の設定が高くなります。したがって、いくつかの条件下では、これが当てはまる場合があります。

<div style="z-index:9999">I'm on bottom</div>
<div>I'm on top</div>

DOM 内の要素を並べ替えてみてください。

于 2012-10-30T21:34:57.143 に答える