gpt4 book ai didi

javascript - 如何使用 Javascript 在新窗口中放大图像

转载 作者:行者123 更新时间:2023-11-28 19:57:38 24 4
gpt4 key购买 nike

我已经看到很多使用 jQuery 的解决方案,但我只需要使用 Javascript 来完成。我正在尝试编写一个脚本,将 onclick 监听器附加到页面上的每个图像,并使用一个函数在新窗口中以双倍的宽度和高度打开单击的图像。我遇到的问题是,新窗口在页面加载时打开,而不是在单击图像时打开,并且新窗口显示图像源“未定义”,其宽度和高度显示“NaN”。这是我的 .js:

var x = document.images;
var imageWindow;

function magnify() {
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', launchWindow(this), false);
}
}

function launchWindow(img) {
var h = img.height * 2.0;
var w = img.width * 2.0;
imageWindow = window.open();
imageWindow.document.write("<html><head><title>Image</title></head><body><img src=" + img.src + " width=" + w + " height=" + h + " alt='Magnified image'></body></html>");

if(window.focus) {
imageWindow.focus;
}
}

以及我的测试页面的相关 HTML:

最佳答案

分配事件处理程序的循环实际上是在运行事件处理程序,而不是分配它。尝试这样做:

x[i].addEventListener('click', function() { launchWindow(this) }, false);

关于javascript - 如何使用 Javascript 在新窗口中放大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22255630/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com