javascript - 仅当图像进入某个定义位置时才显示图像

Question

我有一个垂直 slider 页面。在每张幻灯片中，我都有一张图片和 iphone 容器。喜欢

现在此页面垂直滑动显示下一张幻灯片位于中心，并且它还包含位于中心的图像。

现在我想要类似该图像的东西，只有当它出现在 iphone 容器中时才会显示。

在第二张图片中，我的图片甚至显示在 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>

Answer 1

您为手机创建了一个容器 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')" />

检查这个 fiddle :http://jsfiddle.net/qfzBk/2/