Question

任何人都知道如何获得下面网站上的底部页脚选项卡的好教程或技巧？ “更多资源”标签

http://www.washington.edu/maps/

Answer 1

该技术非常简单 - 有一个具有绝对定位的div，底部位置设置为页脚内容高度的负值（在它们的情况下为-188px）。单击该按钮时，它会将该元素的底部设置为0.看起来它们也会对它产生一个很好的缓动效果。

您会对http://api.jquery.com/animate/和http://gsgd.co.uk/sandbox/jquery/easing/

感兴趣

另外，我用google搜索'jQuery slide footer'，第一个结果看起来不错（http://return-true.com/2010/04/jquery-pop-up-footer-version-2/）。我知道当人们告诉你谷歌的东西时很烦人，但说真的，它有效：p

Answer 2

这是一个简单的演示，包含一些JavaScript / CSS / HTML（我为演示制作了一个jsfiddle：http://jsfiddle.net/Xbak7/2/）：

HTML -

<div id="bottom_div">
    Why Hello There
    <span id="hidden_span">I wasn't expecting you...</span>
</div>

CSS -

#bottom_div {
    position: fixed;
    bottom: -35px;
    height: 55px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    background-color: #ccc;
    text-align: center;
}
#hidden_span {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

JavaScript -

$(document).ready(function () {
    $('#bottom_div').bind('mouseenter', function () {
        $(this).stop().animate({bottom: 0}, 750, 'easeInExpo');
    }).bind('mouseleave', function () {
        $(this).stop().animate({bottom: '-35px'}, 750, 'easeOutBounce');
    });
});

一些注释：

jQuery animate（http://api.jquery.com/animate/）可以被赋予一个缓动参数，可以将其设置为使动画像您示例网站中的那样弹跳。您可以在这里获得包含大量缓动类型的缓动插件：http://gsgd.co.uk/sandbox/jquery/easing/
CSS中的left和margin-left分配是以div为中心。
如果调用另一个动画，.stop()函数将停止动画。有效地使动画显得流畅是你鼠标移动并快速鼠标几次div。如果你没有设置.stop()这个鼠标快速过度/完全将导致许多动画按顺序播放并且div将不会停止移动很长时间。

页脚标签滑动DIV

2 个答案: