-1

私はJavaScriptを学び、大学で得たいくつかのタスクを実行しています。タスクは次のようになります。

3つの200x150画像と1つの600x450画像が表示されるWebページを作成します。JavaScript関数を追加します。これにより、表示される600x450の画像が、以前にマウスでポイントした200x150の画像の拡大画像になります（onMouseOverで関数を呼び出します）。

2番目のタスクは次のようになります。

タスク1のWebページをある方法で完成させます。小さい画像をクリックすると、同じ画像の大きい画像をクリックすると、新しいウィンドウに表示されます。

最初のタスクのコードは次のようになります。

function bigImg(x)    
{
    x.style.height="600px";
    x.style.width="450px";
}

function normalImg(x)
{
    x.style.height="200px";
    x.style.width="150px";
}

...

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="slika1.jpg" alt="slika1" width="150" height="200">
<img src="slika2.jpg">
<img src="slika3.jpg">

このような2番目のものの場合：

function swipe() 
{
    var largeImage = document.getElementById('Slika1');
    largeImage.style.display = 'block';
    largeImage.style.width=450+"px";

    // enter code here

    var url=largeImage.getAttribute('src');
    window.open(url,'Image','width=largeImage.style.width,height=largeImage.style.height,resizable=1');
}

...

<img src="slika1.jpg" id= "Slika1" onClick="swipe();"/>
<img src="slika2.jpg">
<img src="slika3.jpg">

別の方法で何をすべきですか？

4

1 に答える 1

1 
<script>
function swipe(image) 
{
    newWidth=450+"px";
    newHeight=600+"px";

    var url=image.getAttribute('src');
    myWindow=window.open('','Image','width='+newWidth+',height='+newHeight+',resizable=1');
    myWindow.document.write('<img src="'+url+'" width="'+newWidth+'" height="'+newHeight+'" />');
}
</script>

<img src="slika1.jpg" onClick="swipe(this);"/>
<img src="slika2.jpg" onClick="swipe(this);"/>
<img src="slika3.jpg" onClick="swipe(this);"/>

元のポスターのいくつかの質問に答えるには：

ここでのwindow.open（）関数の最初のパラメーターは''（空の文字列）で、基本的に空白のWebページを作成します。この関数呼び出しの戻り値は、新しく開かれたWebページ（変数myWindowに割り当てられている）です。次に、そのウィンドウオブジェクトにドリルダウンし、そのdocument.write（）関数を呼び出して、目的のHTML（画像）を実際に表示します。元のコードでは、（HTMLページではなく）画像ファイルを参照するウィンドウを開くだけでした。そのため、画像の幅や高さを実際に設定する方法はありません。ウィンドウの幅と高さを設定する（または設定しようとする）だけでした。変数を文字列から切り離さなかったため、ウィンドウの幅と高さの設定はサンプルコードでも機能しませんでした。だからウィンドウで。

width = 450px、height = 600px、resize = 1

しかし、実際に通過していたのは次のとおりです。

width = largeImage.style.width、height = largeImage.style.height、resizable = 1

作成したswipe（）関数は、単一のパラメーター「image」を取ります。imgタグ内のonClickイベントからこの関数を呼び出す場合、キーワード「this」を使用してそれ自体の参照を渡します。基本的に、swipe（）を呼び出したimgオブジェクトのコピーがパラメーターとして渡されます。したがって、関数では、image.getAttribute（'src'）は、それを呼び出したimgオブジェクトの "src"属性を参照します。これは、開いたウィンドウに表示する必要があります。

于 2013-03-07T22:58:39.910 に答える