0

1 つの垂直スライダー ページがあります。すべてのスライドに 1 つの画像があり、iphone コンテナーがあります。お気に入り

デモ

ここに画像の説明を入力

現在、このページのスライドは垂直に表示され、次のスライドが中央に表示され、中央に画像も含まれています。

今、その画像がiphoneコンテナに入ったときにのみ表示されるようなものが欲しいです。

ここの2番目の画像のように、私の画像はiPhoneコンテナの外でも表示されているので、そうしたくありません

私のコード

<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>


<div class="port_list">
        <div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
            <div class="proj_brief"></div>
            <div class="">
                <div class="">
                    <img src="" />                    
                </div>
            </div>
        </div>
        <div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
            <div class="proj_brief"></div>
            <div class="">
                <div class="">
                    <img src="" />                    
                </div>
            </div>
        </div>
        <div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
            <div class="proj_brief"></div>
            <div class="">
                <div class="">
                    <img src="" />                    
                </div>
            </div>
        </div>
</div>
4

1 に答える 1

0

携帯電話用のコンテナー div を作成し、そこに sildes 用の div を配置します。overflow:hidden を使用すると、追加のコンテンツを非表示にできます。

<div id="phone">
  <div id="slides">
      <img src="pic1.png" />
      <img src="pic2.png" />
      <img src="pic3.png" />
  </div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />

このフィドルを確認してください：http://jsfiddle.net/qfzBk/2/

于 2013-06-28T12:04:05.190 に答える