javascript - 隐藏在隐形框后面的 Javascript 功能区

Question

所以我有两张图片，一张是半条丝带，第二张是一条完整的丝带，上面有 facebook 等链接。我需要将第一个放在页面中间，所以当你点击它时它会展开。我想我需要使用隐藏覆盖或其他东西，但我对 javascript 完全陌生。

有人可以提供一个例子或帮助我吗？

Answer 1

我试图理解你想要什么，并告诉我这是否是你的意思。

您可以将两个图像包装在两个单独的 div 中，然后将它们包装在具有相对位置的 div 中。

然后你给两个div绝对位置。

在单击第一个 div 时，您可以更改第二个 div 的左侧位置（如果您想要垂直效果，则为顶部）。

这是仅包含 div 的 html：

<div style="position: relative">
    <div id="frontDiv">
        aaaaaaaaaaaa
    </div>
    <div id="backDiv">
        bbbbbbbbbbb
    </div>
</div>

这里的CSS：

#frontDiv{
    height: 20px; width: 45px; 
    background: red; position: absolute; 
    z-index: 1; left: 0px; top: 0px;
}

#backDiv{
    height: 20px; width: 30px; 
    background: blue; position: absolute; 
    z-index: 0; left: 0px; top: 0px;
}

这里是javascript（在jQuery中）：

$("#frontDiv").click(function(){
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});

最后，您可以将包装器 div 放置在您想要的任何位置。

这个小提琴的完整例子：http: //jsfiddle.net/w7RVe/