3

我的决赛遇到了一些麻烦。我所有的 img 都设置为 0 不透明度并在单击时更改（不透明度 1）。我的设计要求单击按钮时，我会在其顶部显示一个额外的图像，延迟 1 秒。IE 描述显示的每一层/图像。当用户点击关闭时，他们都使用它并出现一张新幻灯片，然后延迟 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/

无论是点击还是延迟，我只是在第二个 img/description 中尝试图层。有任何想法吗？

4

2 回答 2

1

要使图像重叠，您可能需要position: relativeor position: absolute，以及zindex在 css 中。

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-09T02:01:39.410 回答
1

对于减少代码长度的问题，我总是包含一个带有短名称的函数来替换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-09T03:02:12.007 回答