-1

我一直在学习 JavaScript，并且一直在做一些我在大学时完成的任务。任务是这样的：

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

第二个任务是这样的：

以某种方式完成任务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">

对于第二个这样的：

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()函数中的第一个参数是''（空字符串），基本上是创建一个空白网页。该函数调用的返回值是新打开的网页（赋值给变量myWindow）。然后深入到该窗口对象并调用它的 document.write() 函数来实际显示所需的 HTML（图像）。在您的原始代码中，您只是打开一个浏览到图像文件（而不是 HTML 页面）的窗口。既然是这种情况，您就无法实际设置图像的宽度或高度——您只是在设置（或尝试）窗口的宽度和高度。设置窗口的宽度和高度甚至在您的示例代码中都不起作用，因为您没有将变量从字符串中分离出来。于是在窗外。

宽度=450 像素，高度=600 像素，调整大小=1

但你实际上通过的是：

宽度=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 回答