Question

所以我有两个图像，一个是功能区的一半，第二个是带有facebook等链接的完整功能区。我需要在页面中间放置第一个，所以当你点击它时它会展开。我想我需要使用隐藏的叠加或其他东西，但我在javascript上是全新的。

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

Answer 1

我试着理解你想要什么，告诉我这是不是你的意思。

您可以将两个图像包装在两个sepatare 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/

Javascript功能区隐藏在隐形框后面

1 个答案: