3

決勝戦で困っています。私のすべての画像は不透明度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";   
}

2 つの質問があります。1 つは、このコードに add を追加する方法です。第二に、私のレイヤーが長くなってきているので、この成長している JS の省略形はありますか?

事前に感謝します。私は本当に疲れ果てており、うまくいくか、まったくうまくいかないところです。

乾杯！

私はそれもこのように見えるかもしれないと感じています。

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

クリックでも遅延でも、2番目の画像/説明でレイヤーを試しているだけです。何か案は？

4

2 に答える 2

1

画像をオーバーラップさせるには、position: relativeまたはcssが必要になる可能性があります。position: absolutezindex

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 に答える