JavaScript任务

我一直在学习JavaScript，我一直在做一些任务，这是我在大学里学到的。 任务如下：

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">

制作一个网页，其中将显示3个200x150图像和一个600x450图像。添加JavaScript函数，该函数将确保显示的600x450图像是200x150图像的放大图像，我们之前用鼠标指向该图像（使用onMouseOver调用该函数）

第二项任务是这样的：

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">

以某种方式完成任务1中的网页，当单击同一图像的较小图像、较大图像时，我们单击的将显示在新窗口中

第一个任务的代码如下所示：

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">

函数bigImg（x）
{
x、 style.height=“600px”；
x、 style.width=“450px”；
}
函数normalImg（x）
{
x、 style.height=“200px”；
x、 style.width=“150px”；
}
...

对于像这样的第二个：

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">

函数滑动（）
{
var largeImage=document.getElementById（'Slika1'）；
largeImage.style.display='block'；
大图像.style.width=450+“px”；
//在这里输入代码
var url=largeImage.getAttribute（'src'）；
打开（url，'Image'，'width=largeImage.style.width，height=largeImage.style.height，resizeable=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);"/>

功能滑动（图像）
{
新宽度=450+“px”；
新高度=600+“像素”；
var url=image.getAttribute（'src'）；
myWindow=window.open（“”，'Image'，'width='+newWidth+'，height='+newHeight+'，resizeable=1'）；
myWindow.document.write（“”）；
}

要回答原始海报中的几个问题：

window.open（）函数中的第一个参数是“”（空字符串），它基本上创建了一个空白网页。此函数调用的返回值是新打开的网页（分配给变量myWindow）。然后深入该窗口对象并调用其document.write（）函数以实际显示所需的HTML（图像）。在原始代码中，您只需打开一个浏览图像文件（而不是HTML页面）的窗口。既然是这样，就没有办法实际设置图像的宽度或高度——您只是在设置（或试图设置）窗口的宽度和高度。在示例代码中设置窗口的宽度和高度甚至不起作用，因为您没有将变量从字符串中分离出来。因此，在window.open（）函数中，需要在第三个参数中传递一个字符串，如下所示：

宽度=450px，高度=600px，大小=1

但你实际上要经过的是：

宽度=大图像。样式。宽度，高度=大图像。样式。高度，可调整大小=1

---

我们创建的swipe（）函数接受一个参数“image”。当我们从img标记内的onClick事件调用此函数时，我们使用关键字“this”传递自身的引用。实际上，名为swipe（）的img对象的副本作为参数传入。因此，在函数中，image.getAttribute（'src'）引用调用它的img对象的“src”属性，您需要在打开的窗口中显示该属性。

。。。你现在的代码有什么问题吗？问题出在任务2中，较大的图像没有出现，所以我需要帮助。那么也许你应该把它放在你的问题中？我们怎么会自动知道这个问题？谢谢你的回答，格雷米奥！这真的很有帮助！我有一个问题：为什么myWindow.document.write在这种情况下非常重要？image.getAttribute做什么？没问题。我编辑了原始答案（太多了，无法包含在一个简单的评论中），试图解决您的问题。