jquery - 使用 jquery / css 在背景中显示图像

Question

我想实现以下在此页面上找到的演示效果...

http://wscratchpad.websanova.com/

但相反，animate() 一个 div 块（50 像素 x 50 像素）从左到右穿过窗口，以显示背景图像。jQuery 和 animate() 方法可以做到这一点吗？

谢谢

Answer 1

仅 CSS 选项。http://codepen.io/lpoulter/pen/xsywu

那是你追求的吗？

或使用一些 jquery

http://codepen.io/lpoulter/pen/HobfG

Answer 2

http://jsfiddle.net/v3ujy/

给定这样的东西： CSS：

body
{
    background-image:url('http://www.wmeentertainment.com/weezer/imgs/weezer_logo.jpg');
}
#reveal
{
    width:100%;
    height:100%;
    background-color:#000000;
    position:absolute;
    z-index:1;
}
#actualbody
{
    color:#FFFFFF;
    z-index:5000;
    position:relative;
}

HTML：

<div id="reveal">
</div>
<div id="actualbody">
    Actual page body
</div>

您可以设置背景图像并在顶部设置一个 div 以“隐藏”背景图像，然后将其滑到一边，如下所示：

$('#reveal').animate({width:'toggle'});