gpt4 book ai didi

javascript - 如何使用弹出窗口在 JavaScript 中构建一个简单的图片库

转载 作者:行者123 更新时间:2023-11-28 08:08:36 25 4
gpt4 key购买 nike

我在互联网上寻找帮助,但我无法让它工作!

有人能给我一个如何编写这样的代码的示例吗?

我会调整图像的大小,并为弹出窗口提供一个缩略图大小的图像和一个更大的图像。我希望用户单击缩略图大小的图像并在弹出窗口中显示完整尺寸的图像。

我是 Javascript 的初学者,我认为代码将涉及 window.open 和 onclick 函数,但除此之外我不知道该怎么做。

最佳答案

9 行 JavaScript 中的图片库。

您所要做的就是创建两个目录,一个用于图像,一个用于缩略图thumbnails 目录应放置在 images 目录中。图像名称应该相同。使用 alt 属性进行图像描述,最后,随意更改 CSS 值。

// HTML
<ul id="gallery">
<li><img src="images/thumbnails/img-01.jpg" alt="desc-01"></li>
<li><img src="images/thumbnails/img-02.jpg" alt="desc-02"></li>
<li><img src="images/thumbnails/img-03.jpg" alt="desc-03"></li>
<li><img src="images/thumbnails/img-04.jpg" alt="desc-04"></li>
</ul>

// CSS
#gallery {
list-style-type:none; background-color: #f0f0f0; overflow: hidden; margin: 0px; padding: 0px;
}

#gallery li {
background-color: #fff; float: left; margin: 5px; padding: 5px;
}

#gallery li img {
width: 120px; height: 120px; margin: 0px; padding: 0px;
}

//
// Image gallery in 9 lines of JavaScript
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function() {
var img = document.getElementById("gallery").getElementsByTagName("IMG"), w, i;
for (i = 0; i < img.length; i++){
(function(i){
img[i].onclick = function() {
w = window.open("","gallery","menubar=0,scrollbars=0");
w.document.write("<img src='" + img[i].src.replace(/thumbnails\//,'') + "' alt='" + img[i].alt + "' /><div>" + img[i].alt + "</div>");
};
}(i));
}
};

15 行 JavaScript 中的图片库。

// HTML
// The same as above

// CSS
// The same as above
//

// Image gallry in 15 lines of Javascript
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function() {
var img = document.getElementById("gallery").getElementsByTagName("IMG"), w, i;
for (i = 0; i < img.length; i++) {
(function(i) {
img[i].onclick = function() {
if (!w || w.closed) {
w = window.open("","gallery","menubar=0,scrollbars=0");
w.document.write("<img src='" + img[i].src.replace(/thumbnails\//,'') + "' alt='' /><div>" + img[i].alt + "</div>");
} else {
w.document.getElementsByTagName('IMG')[0].src = img[i].src.replace(/thumbnails\//,'');
w.document.getElementsByTagName('DIV')[0].innerHTML = img[i].alt;
}
w.focus();
};
}(i));
}
};

检查firstsecond工作版本。

关于javascript - 如何使用弹出窗口在 JavaScript 中构建一个简单的图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24522439/

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