隐藏在不可见框后面的Javascript功能区

隐藏在不可见框后面的Javascript功能区,javascript,overlay,ribbon,expand,Javascript,Overlay,Ribbon,Expand,所以我有两张图片,一张是丝带的一半,另一张是带有facebook等链接的完整丝带。我需要在页面中间有第一个,所以当你点击它时,它会扩大。我想我需要使用隐藏覆盖或其他东西,但我对javascript一无所知 有人能举个例子或帮助我吗?我试图理解你想要什么,并告诉我这是否是你的意思 您可以将两个图像包装在两个单独的div中,然后将它们包装在具有相对位置的div中 然后给两个div绝对位置 单击第一个div可更改第二个div的左位置或顶部(如果需要垂直效果) 以下是仅包含div的html: <d

所以我有两张图片,一张是丝带的一半,另一张是带有facebook等链接的完整丝带。我需要在页面中间有第一个,所以当你点击它时,它会扩大。我想我需要使用隐藏覆盖或其他东西,但我对javascript一无所知


有人能举个例子或帮助我吗?

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

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

然后给两个div绝对位置

单击第一个div可更改第二个div的左位置或顶部(如果需要垂直效果)

以下是仅包含div的html:

<div style="position: relative">
    <div id="frontDiv">
        aaaaaaaaaaaa
    </div>
    <div id="backDiv">
        bbbbbbbbbbb
    </div>
</div>
这里是jQuery中的javascript:

$("#frontDiv").click(function(){
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});
最后,您可以将包装器div放置在任何需要的位置


这把小提琴的完整例子:

不太清楚,但这有助于我解释我的问题。我的印象是有两张真实的照片。一个需要始终显示,另一个应该在单击第一个时滑出,有点像bb滑出aa。我想在点击第一张图片之前我需要一些东西来掩盖它后面的第二张图片,但我可能错了,谢谢你的尝试我正在添加一张图片来帮助解释:@user2485439我更新了脚本,你能检查一下这是否是你想要的吗?是的,这正是我想要的,非常感谢。我将不得不想出如何使它滑回第二次点击或什么,以及如何使这些链接的标志,但现在我得到了框架。再次感谢!如果你不介意的话,也许你可以告诉我,点击页面上的其他地方,第二张图片会被收回的那一行?
$("#frontDiv").click(function(){
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});