Question

我正在创建一个简单的图库。我的意思很简单：

 <div id="outerdiv" style="width:600px;height:400px; background:#ccc;padding:50px;">
  <div id="theGallery">
    <div class="thumbnailDiv" id="tn1">
      <div style="position: absolute;">
        <img id="1" src="pic1.jpg"/>
      </div>
    </div>
    <div class="galleryButtonLeft"></div>
  </div>
 </div>

我想向左滑动图像，以便在单击galleryButtonLeft时显示其他图像。继承人我的jQuery：

    $(function () {
    $(".galleryButtonLeft").mousedown(function (event) {
      event.preventDefault();
      $("#theGallery").animate({
      marginLeft: "-=300px"
       }, 1000);
      }).click(function (event) {
      event.preventDefault();
     });});

CSS：

       .galleryButtonLeft
         {
        height:130px;
           width:40px;
         border:#996663 solid 1px;
         background:#e9cbad;
        z-index:30;
      }

画廊向左滑动，但它只隐藏在galleryButtonleft div后面，而不是在我按钮左侧的outerdiv div部分后面。图库的z-index低于所有其他z-indexes。那么我如何隐藏theGallery所以它不显示在outerdiv div上，除了galleryButtonLeft右边的当前图像？

Answer 1

您可以在父容器上设置overflow: hidden。然后当元素离开父元素的边界时，它将被隐藏。

此外，不要为整个图库设置动画，只需img或它的包装。

编辑：

根据评论，这是一个更新的小提琴：

http://jsfiddle.net/6rHC2/3/

添加了一个固定大小且overflow:hidden的包装器。

jQuery和Z-index问题

1 个答案: