jquery - 如何将 "handle bar"添加到滑动 div

Question

我有一个小的初始页面和一个浏览器范围的 div 作为包装器，并且在 #wrapper 内部有一个 div 附加到 $.click(); 事件将包装 div 滑出以查看浏览器大小的背景照片。我想实现一个小按钮/链接，它会在包装器 div 隐藏后滑入右下角。

我知道它可能主要是 CSS，但我需要一些帮助。

预先感谢您的帮助!

PS:使用 jQuery 作为我的框架。

Answer 1

关键在于#wrapper 的动画回调。我假设:

1. 页面的全部内容都在#wrapper 中，并用它来计算内容的高度。
2. 内容有可能高于浏览器窗口。
3. 您将不支持 IE6，因此可以使用 position: fixed;。

CSS:

#toggler {
    position: fixed;
    width: 20px;
    height: 20px;
    left: 0;
    display: none;
    }

JS:

jQuery(document).ready(function() {
    var windowHeight = jQuery(window).height(),
        togglerHeight = jQuery('#toggler').height(),
        togglerTopPosition = windowHeight - togglerHeight;

    jQuery(#toggler).css('top', togglerTopPosition + 'px');

    jQuery('#wrapper').click(function() {
        // take care of hiding the #wrapper
        jQuery('#wrapper').animate({
            yourSettings, 
            yourDuration, 
            function() { jQuery(#toggler).show(); } // callback
        });
    });

    jQuery('#toggler').click(function() {
        jQuery(this).hide();
        jQuery('#wrapper').animate({...});
    });
});

您可以猜到，#toggler 是小按钮/链接。随意设置样式，并根据需要更改宽度和高度。