Javascript ribbon隱藏在看不見的盒子後面

所以我有兩個圖像，一個是一個功能區的一半，第二個是帶有facebook等鏈接的完整功能區。我需要在頁面中間放置第一個，所以當你點擊它時，它會展開。我想我需要使用隱藏的覆蓋或什麼，但我是全新的JavaScript。Javascript ribbon隱藏在看不見的盒子後面

有人可以提供一個例子或幫助我嗎？

來源

2013-10-14 Kenksk

我試圖理解你想要什麼，並告訴我，如果這是你的意思。

您可以將兩個圖像包裹在兩個sepatare divs中，然後將它們包裹在一個相對位置的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/

來源

2013-10-14 11:19:42 Jonathan

不完全，但這有助於我解釋我的問題。我的觀點是，有2個實際的圖像。一個需要隨時顯示，另一個應該在第一個點擊時滑出，有點像bb滑出aa。我想我需要一些東西來掩蓋第一張照片背後的第二張照片，但我可能錯了，謝謝你嘗試 – Kenksk

我添加了一張照片來幫助解釋：http://www.upload.ee/image /3640353/ribbons.png – Kenksk

@ user2485439我更新了腳本，你能檢查這是你想要的嗎？ [http://jsfiddle.net/w7RVe/2/](http://jsfiddle.net/w7RVe/2/） – Jonathan

Javascript ribbon隱藏在看不見的盒子後面

回答

相關問題