1

私はjQueryに少し慣れていませんが、小さなカスタム画像回転子を書く必要があります. 基本的に、ポラロイドのように見える .png 画像の小さなスタックがあります。ローテーターは、一番上の 1 つを引き離し、右に移動し、Z-index を他の 2 つよりも低く設定してから、元に戻す必要があります。これは、写真のスタックを調べている場合と同様です。

これのほとんどはできると思いますが、うまくいかない問題は、これら3つの画像のZインデックスを継続的に交換する必要があることです（上の画像を右に移動し、Zインデックスを他の2つよりも低くリセットします、 戻ってくる）

HTMLには次のものがあります。

<img src="images/polariod_1.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_2.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_3.png" width="255" height="260" alt="Singer" class="headerrightgraphic">

これらの z-index を何度もハードコーディングせずにエレガントな方法で変更する方法についてのリードはありますか?

4

4 に答える 4

1

Z インデックスを変更する代わりに、すべての写真に同じ Z インデックスを与え、表示する必要がある順序で親ノードに再アタッチすることを検討してください。これにより、写真の上下にコンテンツを取得するための「無限」の Z インデックスが不要になります。

たとえば、ユーザーが 1 つをクリックして一番上にプルできる場合は、それを親ノードに再追加するだけです。

// assuming you have a handle to the element `photoElement`

photoElement.parentNode.appendChild(photoElement);
于 2012-04-24T14:07:13.213 に答える
0

JS のグローバル変数に値を格納する.dataか、jquery で関数を使用するか、いくつかの非表示の入力を使用して現在の z-index を保持することをお勧めします。

また、z-indexing を使用せずに、要素の配置を操作することもできます (dom ツリーの「下にある」要素が他の要素の上に表示されます)。そのため、サイトに移動して、最初の img の前に追加することもできます。 、スライドさせて元の位置に戻します。

于 2012-04-24T14:07:55.737 に答える
0

見えないの後ろdisplay:none;の画像で使用するにはどうすればよいですか?

于 2012-04-24T14:08:15.283 に答える
0

z-index を変更する代わりに、display:none / block を使用することを検討します。Z-index 画像ギャラリーは、過去に私に問題を引き起こしました。

これは私がグーグルで見つけたスニペットです。 ソース

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  3000);
});
于 2012-04-24T14:11:21.503 に答える