1

CSSを使用して、クラシックなiPhoneの「スワイプして表示」の外観に似たものを作成します例

私が目指しているコード構造は次のようなものです

<ul>
    <li>Top Content</li>
    <li>Bottom Content</li>
</ul>

そのため、javascript と css トランジションを使用して、最上層をスライドさせて最下層を表示できます。一番下のレイヤーを一番上に設定しようとしました: -(li の高さ) と z-index -1 は、このために div の間に大きなスペースがあることを除いて (それらはオーバーラップします)、動作します (マージン 0 パディング 0 はしませんでした)それを修正しないでください）

これを他にどのように実装できますか？

4

2 に答える 2

1

これを達成するために同じリストを使用することは、2つの異なるulのhttp://jsfiddle.net/8JYA2/を使用するだけのひどい考えだと本当に思います

<ul class="list-1">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
<ul class="list-2">
  <li>Back One</li>
  <li>Back Two</li>
  <li>Back Three</li>
  <li>Back Four</li>
</ul>

私は間違っているかもしれませんが、なぜそのコード構造を目指しているのですか?

于 2013-01-15T19:11:17.113 に答える
0

少しの助けと実験の後、私は今、実用的な解決策を手に入れました。

解決策は、1 つのリストを作成することでしたが、li ごとに 2 つの div を配置し、div をレイヤー化しました。次に、javascript を使用して、div の左右のパーセンテージを変更し、上部の div がスライドするようにします。コードは次のようになります

<ul>
  <li><div>Top Content</div></li>
  <li><div>Bottom Content</div></li>
</ul>

上部のコンテンツで z-index を高く設定することに関して、以前に考え出したことと組み合わせると、うまく機能します。

于 2013-01-20T16:13:16.847 に答える