JavaScript圖像疊加web應用程序

我正在研究HTML/CSS/JavaScript應用程序，並且我有一個功能，其中用戶單擊圖像（不同大小）的幾個選項並單擊「Go！」時應用程序將使用JavaScript將圖像疊加在一起（順序排列，以便最大的圖像位於底部等等）。我環顧四周，我查看的大多數網站都建議使用CSS position:absolute，但我想知道是否有另一種方法可以使用JavaScript來實現，因此它更具互動性。JavaScript圖像疊加web應用程序

有什麼建議嗎？我是一名JavaScript初學者，很抱歉提出一個初級問題。

來源

2013-01-19 user11235

它是交互式的 - 你可以通過JS操作CSS。這是一個常見的方法來做到這一點。 –

您可以使用JavaScript來操縱圖像的位置。爲每個圖像分配一個ID並使用JavaScript getElementById更改位置。

因此，像：

<div id="image1"><img src="image1.png" /></div>

然後你的JavaScript：

document.getElementById("image1").style.position = "absolute"; 
document.getElementById("image1").style.left = "0px"; 
document.getElementById("image1").style.top = "30px";

你可以用多張圖片做到這一點，只是分配給每個圖像的div一個唯一的ID。

來源

2013-01-19 22:51:06 Charles

因爲OP使用術語「疊加」，所以我認爲應該謹慎的做法是添加一個選定圖像的數組，然後使用自定義的高度/寬度比較來對它們進行排序，然後指定一個適當的'style.z-索引'如上。 – joequincy

JavaScript圖像疊加web應用程序

回答

相關問題