Question

请在http://jsfiddle.net/wlogeshwaran/NGL8P/4/

找到代码

这里我想让'hi'，'hello'看不见，当它离开那个绿色的盒子时。当他们离开绿色框时，我该怎么做才能让它们消失。

先谢谢。

Answer 1

您需要添加：

.block {
    overflow:hidden;
    }

.slide1, .slide2 {
      position:relative;  /* instead of fixed */
}

溢出：隐藏;将使任何离开div的元素不被渲染。

将位置切换为相对而不是固定将允许溢出生效。不同“位置范围”的溢出并不总是有效。这是其中没有的情况之一。隐藏溢出时：隐藏总是让孩子与父母的位置相同，以避免意外。

Answer 2

请看一下这个例子，告诉我这是不是你想要的：

http://jsfiddle.net/NGL8P/16/

Answer 3

我会将其更改为基于div而不是基于li，因此您可以重用相同的css类，而不是为每个css类创建新样式。可以通过http://jsfiddle.net/NGL8P/21/

找到更新的代码

的Javascript

自更改html后清理了abit

$("#right").click(function(){
  $(".slideHolder").animate({"left": "+=100px"}, "slow");
});

$("#left").click(function(){
  $(".slideHolder").animate({"left": "-=100px"}, "slow");
});

$(document).ready(function () {
  var TotalWidth = 0;
  $('.slides').each(function () {
    TotalWidth = TotalWidth + $(this).width();
  });
  $('.slideHolder').css({width: TotalWidth+"px"});
});

HTML

<button id="left">left</button> <button id="right">right</button>
<div class="webpage">
  <div class="block">
    <div class="slideHolder">    
      <div class="slides">hi</div>
      <div class="slides">hello</div>
    </div>
  </div>
</div>

CSS

.block {height:100px;width:100px;position:absolute;left:100px;background:green;overflow: hidden;}
.slides {position:relative;float:left;height:100px;width:100px;}
.slideHolder {position:absolute;left:0;}

当移出父DIV时，使Div不可见

3 个答案:

的Javascript

HTML

CSS