Question

我正在试图弄清楚如何从页面底部滑动内容。我已经想出如何让它向下滚动到页面底部但不会关闭。例如，当单击图像时，它应该从页面底部滑落。问题是它只是推迟了内容。我想我需要一个overflow:hidden类型的东西

这是我到目前为止所拥有的。

HTML

<div id="myGallery">
    <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>

的JavaScript

$('#myGallery').click(function() {
    $(this).animate({
        top: $(document).height() + 300 }, 1500);
     return false;
});

小提琴：http://jsfiddle.net/BandonRandon/wykR7/4/
小提琴全屏：http://jsfiddle.net/BandonRandon/wykR7/4/embedded/result/

只有当正文内容不长于浏览器窗口时，

编辑 Overflow:hidden才会生效。从问题中看到更新的小提琴：
http://jsfiddle.net/BandonRandon/wykR7/11/
http://jsfiddle.net/BandonRandon/wykR7/11/embedded/result/

有关确切用法，请参阅http://bandonrandon.com/blog，（点击持灯的女孩）

Answer 1

是的 - 向body标签添加“overflow：hidden”为我解决了问题 - 至少在Chrome中是这样。

CSS补充道：

body {
    height: 100%;
    overflow: hidden;  
}

jsFiddle链接：http://jsfiddle.net/greglockwood/G63UJ/

Answer 2

<强> jsBin demo

CSS：

#girl{
    position:absolute;
    top:0px;
}
#content{
    position:absolute;
    top:20px;
    left:300px;
    width:400px; 
}
  #girl_wrapper{
    position:absolute;
    top:0px;
    overflow:hidden;
}

HTML：

<div id="girl">
    <img src="http://bandonrandon.com/wp-content/themes/BR2011/images/xmas/brooke_xmas.png" class="active" />
</div>

<div id="content">
  Cras volutpat mattis ullamcorper. Mauris sit amet sapien non quam  convallis fermentum. Nunc mauris est, dapibus in imperdiet commodo,  egestas et est. Sed tortor enim, adipiscing in consectetur quis, luc...

more and more IPSUM ...
</div>

jQuery的：

var girlW = $('#girl').width();

$('#girl').click(function() {
    var winH = $(window).height();
    $(this)
      .wrap('<div id="girl_wrapper" style="height:'+winH+'px; width: '+girlW+'px"/>')
      .animate({top: winH}, 1500 )
    ;
    return false; 
});

我有想法（在点击时）将带有图像的DIV包装成一个绝对定位元素，该元素将根据window height和girl image width动态设置其宽度和高度，但隐藏溢出。
这样做，女孩动画将发生在那个元素内。

动画完成后，我建议.remove()包装（如果你不再需要 girl 元素），以防止div禁止点击可能的未来下面的元素。

询问您是否有疑问！

快乐的编码/设计！

Jquery在页面底部滑动内容

2 个答案: