在圖片上顯示圖片

我在決賽中遇到了一些麻煩。我所有的img被設置爲0不透明度並在點擊時改變（不透明度1）。我的設計要求點擊按鈕時，我會有一個額外的圖像，以1秒的延遲顯示它的頂部。 IE描述每個圖層/ img顯示。當用戶點擊關閉時，它們都會隨之出現，並出現新的幻燈片，然後在1秒內顯示該層的新描述。在圖片上顯示圖片

這裏是我當前的js代碼：

window.onload = intialize; 
function intialize(){ 
    var suit = document.getElementById("man").getElementsByTagName("img")[0]; 
    var undies = document.getElementById("man").getElementsByTagName("img")[1]; 
    var naked = document.getElementById("man").getElementsByTagName("img")[2]; 

    var suit = document.getElementById("layernav").getElementsByTagName("a")[0]; 
    var undies = document.getElementById("layernav").getElementsByTagName("a")[1]; 
    var naked = document.getElementById("layernav").getElementsByTagName("a")[2]; 

//initial load suit 
    showSuit(); 

    suit.onclick = showSuit; 
    undies.onclick = showUndies; 
    naked.onclick = showNaked; 
} 


function showSuit(){ 
    var suit = document.getElementById("man").getElementsByTagName("img")[0]; 
    var undies = document.getElementById("man").getElementsByTagName("img")[1]; 
    var naked = document.getElementById("man").getElementsByTagName("img")[2]; 

    suit.style.opacity = "1"; 
    undies.style.opacity ="0"; 
    fbnaked.style.opacity ="0"; 
} 

function showUndies(){ 
    var suit = document.getElementById("man").getElementsByTagName("img")[0]; 
    var undies = document.getElementById("man").getElementsByTagName("img")[1]; 
    var naked = document.getElementById("man").getElementsByTagName("img")[2]; 

    suit.style.opacity = "0"; 
    undies.style.opacity ="1"; 
    naked.style.opacity ="0"; 
} 

function showNaked(){ 
    var suit = document.getElementById("man").getElementsByTagName("img")[0]; 
    var undies = document.getElementById("man").getElementsByTagName("img")[1]; 
    var naked = document.getElementById("man").getElementsByTagName("img")[2]; 

    suit.style.opacity = "0"; 
    undies.style.opacity ="0"; 
    naked.style.opacity ="1"; 
}

兩個問題，一是這怎麼可能添加到這個代碼。其次，這個不斷增長的JS有沒有簡短的手段，因爲我的圖層現在變得冗長了。

預先感謝您，我真的筋疲力盡，它靠近做得好或根本沒有。

乾杯！

我覺得它可能是這個樣子也一樣，我只是不能一塊吧：

http://jsfiddle.net/gtU56/2/

點擊還是在第二張圖片/描述的延遲，即時通訊只是想層。有任何想法嗎？

來源

2012-12-09 Collin Greenleaf

初始化函數看起來有點不對 - 爲什麼西裝，內衣，裸體都定義了兩次？ – Stuart

我不明白你的第一個問題。你能解釋一下代碼的問題 - 它不是你想要做什麼的？ – Stuart

爲了使圖像重疊，您可能需要position: relative或position: absolute以及css中的zindex。

http://www.w3schools.com/css/css_positioning.asp

速記，我建議你只需創建做整個document.getElementById("man").getElementsByTagName("img")部位的功能。或者，如果你可以，只是使用jQuery，可以很容易地與

var suit = $("#man img")[0];

http://jquery.com/

做要做到1秒的延遲使用setTimeout

http://www.w3schools.com/js/js_timing.asp

來源

2012-12-09 02:01:39 luiges90

該CSS正在下降。我需要的是第二張圖片出現在第一張圖片上。因此，一個PNG看起來像「西裝」，另一個PNG出現在延遲上，並且是「描述」PNG。一旦你在另一張幻燈片上離開相同的senario。 –

對於這個問題上減少了代碼長度，我總是用一個短名稱包含一個函數來代替document.getElementById，如：

function E(i) {return document.getElementById(i)}

像jquery這樣的框架已經提供。使用額外的函數可以輕鬆地減少當前的代碼，以避免一些重複。

function E(i) { 
    return document.getElementById(i) 
} 
window.onload = intialize; 

function intialize() { 
    var n = E('layernav').getElementsByTagName('a'); 
    showSuit(); 
    n[0].onclick = showSuit; 
    n[1].onclick = showUndies; 
    n[2].onclick = showNaked; 
} 

function setManOpacity(op0, op1, op2) { 
    var i = E('man').getElementsByTagName('img'); 
    i[0].style.opacity = op0; 
    i[1].style.opacity = op1; 
    i[2].style.opacity = op2; 
} 

function showSuit() { 
    setManOpacity(1, 0, 0); 
} 

function showUndies() { 
    setManOpacity(0, 1, 0); 
} 

function showNaked() { 
    setManOpacity(0, 0, 1); 
}

來源

2012-12-09 03:02:12 Stuart

有些事情是關閉的，我無法看到它。 –

也許把它放在http://jsfiddle.net與HTML和CSS一起？ – Stuart

如果你想做同樣的事情，但有很多層，你應該使用循環，例如像這樣http://jsfiddle.net/T6VqY/ – Stuart

在圖片上顯示圖片

回答

相關問題