在图片上显示图片

我在决赛中遇到了一些麻烦。我所有的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

在图片上显示图片

回答

相关问题