logoOpenAI01.net

질문

js点击图片实现查看大图
Here is my html:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- E-Commerce
Author: Ngai Ka Po
Date: 20/11/2024
-->
<title>Final Project Cycle1</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/Shop_logo1.png" type="image/png" sizes="16x16">

<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>

<script>
function process(fm) {
alert("Username length: " + document.querySelector("#username").value.length);
alert("Qty: " + fm.qty.value);

if (document.querySelector("#username").value.length < 1) {
alert("Please enter UserName");
document.querySelector("#username").focus();
return false;
} else {
fm.f_username.value = document.querySelector("#username").value;
}

if (fm.qty.value < 1) {
alert("QTY not selected, please select QTY");
fm.qty.focus();
return false;
}

var url = "http://localhost:3000/add_cart?prod_id=" + fm.prod_id.value + "&qty=" + fm.qty.value + "&price=" + fm.price.value + "&f_username=" + fm.f_username.value;
alert("url: " + url);

/*
alert("Return false, not actually making a call");
return false; // Uncomment and change to return true; to actually make a call
*/

alert("return true: actually call program");
return true;
}

function process_check_out(fm) {
alert("Username length: " + document.querySelector("#username").value.length);
if (document.querySelector("#username").value.length < 1) {
alert("Please enter UserName");
document.querySelector("#username").focus();
return false;
} else {
fm.f_check_out_username.value = document.querySelector("#username").value;
}
var url = "http://localhost:3000/check_out?f_check_out_username=" + fm.f_check_out_username.value;
alert("url: " + url);
/*
alert("Return false, not actually making a call");
return false;
*/
alert("return true: actually call program");
return true;

}

function login(fm) {

alert("Username length: " + document.querySelector("#username").value.length);
alert("Password length: " + document.querySelector("#password").value.length);

if (document.querySelector("#username").value.length < 1) {
alert("Please enter UserName");
document.querySelector("#username").focus();
return false;
}

if (document.querySelector("#password").value.length < 1) {
alert("Please enter Password");
document.querySelector("#password").focus();
return false;
}

var url = "http://localhost:3000/login?username=" + fm.username.value + "&password=" + fm.password.value;
alert("url: " + url);

/*
alert("Return false, not actually making a call");
return false;
*/
alert("return true: actually call program");
return true;

}

</script>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="http://localhost:3000/">Home</a></li>
<li><a href="http://localhost:3000/view_catalog">Shopping Cart</a></li>
</ul>
</nav>
<img src="images/Shop_logo1.png" alt="Shop Logo" width="150" height="100" class="center">
</header>

<main>
<section class="mission">
<article>
<h2>Our Mission</h2>
<p>Our mission is to create a vibrant community for Gunpla enthusiasts.</p>
<p>We strive to offer high-quality products, helpful resources,<br> and a platform for builders to share
their creativity and skills.</p>
<p>All sales Final - No refund or exchange.</p>
<p>Once we received your payment, we will contact you for delivery.</p>
</article>
</section>
<section class="products">
<h1>Items for sale!</h1>
</section>

<!-- Username Field -->
<div class="container">
<form name="f0" id="f0" method="get" target="_blank" action="http://localhost:3000/login"
onsubmit="return login(this)">
<p>
Customer User Name:
<input type="text" name="username" id="username" value="">
</p>
<p>
Password:
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
</div>

<!-- Product 1 Form -->
<form name="f1" id="f1" method="get" target="_blank" action="http://localhost:3000/add_cart"
onsubmit="return process(this)">
<table border="2">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Action</th>
</tr>
<tr>
<td>
<img src="images/prod1.jpg" alt="Strike Freedom Gundam" class="product-image">
<p>MGEX Strike Freedom Gundam</p>
<input type="hidden" name="prod_id" id="prod_id" value="1">
</td>
<td>
<select name="qty" id="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>$170<input type="hidden" name="price" id="price" value="170"></td>
<td><input type="hidden" name="f_username" id="f_username" value="">
<input type="submit" value="Add to shopping cart">
</td>
</tr>
</table>
</form>

<!-- Product 2 Form -->
<form name="f2" id="f2" method="get" target="_blank" action="http://localhost:3000/add_cart"
onsubmit="return process(this)">
<table border="2">
<tr>
<td>
<img src="images/prod2.jpg" alt="Nu Gundam (Ver. Ka)" class="product-image">
<p>MG Nu Gundam (Ver. Ka)</p>
<input type="hidden" name="prod_id" id="prod_id" value="2">
</td>
<td>
<select name="qty" id="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>$85.71<input type="hidden" name="price" id="price" value="85.71"></td>
<td><input type="hidden" name="f_username" id="f_username" value="">
<input type="submit" value="Add to shopping cart">
</td>
</tr>
</table>
</form>

<!-- Product 3 Form -->
<form name="f3" id="f3" method="get" target="_blank" action="http://localhost:3000/add_cart"
onsubmit="return process(this)">
<table border="2">
<tr>
<td>
<img src="images/prod3.jpg" alt="Unicorn Gundam" class="product-image">
<p>RG #25 RX-0 Unicorn Gundam</p>
<input type="hidden" name="prod_id" id="prod_id" value="3">
</td>
<td>
<select name="qty" id="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>$49.08<input type="hidden" name="price" id="price" value="49.08"></td>
<td><input type="hidden" name="f_username" id="f_username" value="">
<input type="submit" value="Add to shopping cart">
</td>
</tr>
</table>
</form>


<br />

<form name="f_checkout" id="f_checkout" method="get" action="http://localhost:3000/check_out"
onsubmit="return process_check_out(this)">
<input type="hidden" name="f_check_out_username" id="f_check_out_username" value="">
<input type="submit" value="Check out - Use Paypal">
</form>

<h1 id="txt1"></h1>

</main>
<footer>
<img src="images/Shop_logo1.png" width="150" height="100">
<h3>Contact Us</h3>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</footer>
</body>

</html>

Here is my CSS:
/* Global Settings for Animation */
* {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* Fade-in animation for header */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-50px);
/* Start 50px above */
}

to {
opacity: 1;
transform: translateY(0);
/* End at its original position */
}
}

header {
background-color: #5F6F52;
height: 100px;
width: 100%;
position: fixed;
animation: fadeIn 1.5s ease-out;
/* Applies the updated fadeIn animation */
top: 0;
left: 0;
z-index: 10;
/* Ensures the header stays on top */
}

header ul {
position: absolute;
right: 5vw;
top: 0;
line-height: 80px;
}

header li {
display: inline;
margin-right: 4vw;
}

header a {
color: rgb(0, 0, 0);
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
/* Smooth transition for color and scale */
}

header a:hover {
color: lightgrey;
text-decoration: underline;
transform: scale(1.1);
/* Slightly enlarges the button on hover */
}

/* Slide-in animation for mission section */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
/* Start above */
}

to {
opacity: 1;
transform: translateY(0);
/* End at its original position */
}
}

.mission {
background-color: rgb(58, 85, 57);
color: white;
height: 95vh;
background-image: url("/images/Background.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
animation: slideIn 1.5s ease-out;
/* Applies the updated slideIn animation */
margin-top: 100px;
/* Adds spacing below the fixed header */
}

.products {
text-align: center;
font-size: 1.5em;
padding: 20px;
}

.products a {
color: #5F6F52;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
}

.products a:hover {
color: lightgrey;
text-decoration: underline;
transform: scale(1.1);
}

.container {
text-align: center;
margin: 20px auto;
}

#username,
#password,
input[type="submit"] {
display: block;
margin: 10px auto;
}

#username,
#password {
display: block;
margin: 20px auto;
padding: 12px;
width: 50%;
max-width: 300px;
border: 2px solid #5F6F52;
border-radius: 6px;
text-align: center;
font-size: 16px;
font-weight: bold;
background-color: #f9f9f9;
box-shadow: grey 0px 0px 3px;
transition: border-color 0.3s;
}

/* Style for the shopping cart table */
table {
width: 80%;
margin: 20px auto;
border-collapse: separate;
font-family: Arial, sans-serif;
font-size: 16px;
table-layout: fixed;
border: none;
border-radius: 10px;
overflow: hidden;
box-shadow: grey 0px 0px 3px;
border-spacing: 0; /* Ensures no gaps between cells */
}

th,
td {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #ddd;
width: 25%;
}

th {
background-color: #5F6F52;
color: white;
}

/* Add rounded corners to the first and last th */
th:first-child {
border-top-left-radius: 10px;
}

th:last-child {
border-top-right-radius: 10px;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #f1f1f1;
}

/* Image styling */
.product-image {
display: block;
margin: 0 auto;
width: 150px; /* Adjust width as needed */
height: auto;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Center align text below the image */
td p {
margin: 10px 0 0 0;
text-align: center;
font-weight: bold;
font-size: 14px;
}



/* Style for the checkout button */
input[type="submit"] {
display: block;
margin: 10px auto;
background-color: #5F6F52;
color: white;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-top: 10px;
box-shadow: grey 0px 0px 3px;
}

input[type="submit"]:hover {
background-color: #4b5e43;
transform: scale(1.05);
}

/* Center the footer logo and contact information */
footer {
background-color: #5F6F52;
color: white;
text-align: center;
padding: 20px;
position: relative;
}

footer img {
display: block;
margin: 0 auto 10px auto;
width: 100px;
height: auto;
}

footer h3,
footer p {
margin: 5px 0;
font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {

#username,
#password {
width: 80%;
font-size: 14px;
}

table {
width: 100%;
font-size: 14px;
}

th,
td {
padding: 10px;
}

input[type="submit"] {
font-size: 12px;
padding: 6px 12px;
}
}

사고

查看大图实现

开始时，用户描述了要实现的功能：点击图片查看大图。然后，用户提供了他们的HTML和CSS代码，目标是通过JavaScript实现点击图片以显示较大图像的功能。

查找图片

我正在审查HTML和CSS代码，以找到图片的位置。接下来，我将研究如何使用JavaScript来实现点击图片查看更大版本的功能。

添加事件监听器

我在查看 "product-image" 类的所有图片，每当这些图片被点击时，就会显示一个更大的版本。可以通过 JavaScript 实现这一点。

🌟 创建图像查看器

添加模态结构

我正在向HTML页面添加一个模态结构，以确保它在页面加载时可见。这让我想起了模态窗口的作用。

创建一个模态框显示图片时，首先定义结构，没有显示时默认隐藏。接着，通过CSS样式使其固定在屏幕上，设置背景颜色为半透黑色和适应图片大小。

捕捉点击事件

我正在设置一个JavaScript监听点击事件，以显示模态窗口，展示点击的图片及其标题，并添加关闭按钮功能。通过DOMContentLoaded事件确保DOM元素已加载完成。

为模态添加页面覆盖背景

CSS样式表调整图片集模态框的背景，使其半透明并覆盖整个屏幕。JavaScript为每张具有product-image类的图片添加事件监听器。

确保 modal 显示正确

我在布局的脚本中确保点击图片时，modal 能正常显示对应图像和字幕。测试时，我检查大图显示和关闭功能是否正常运作。

답변

要实现点击图片查看大图的功能，您可以使用 JavaScript 来创建一个模态窗口（Modal）来显示被点击的图片。以下是如何修改您的代码来实现这个功能。

步骤 1：在您的 HTML 中添加模态结构

在关闭的 </body> 标签之前添加以下 HTML 代码。这将创建一个模态，用于显示您点击的图片。

<!-- 模态结构 -->
<div id="modal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="modal-image">
    <div id="caption"></div>
</div>

步骤 2：更新您的 CSS

在您的 CSS 文件中添加以下样式，以美化模态窗口。

/* 模态背景 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 100; /* 置于顶层 */
    padding-top: 60px; /* 内容距离顶部的距离 */
    left: 0;
    top: 0;
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    overflow: auto; /* 如果内容过多，启用滚动条 */
    background-color: rgba(0,0,0,0.9); /* 黑色背景，透明度为0.9 */
}

/* 模态内容（图片） */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* 模态图片的描述文字 */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

/* 添加动画效果 */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* 关闭按钮 */
.close {
    position: absolute;
    top: 30px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

步骤 3：添加处理模态的 JavaScript

在您的 <head> 标签内的 <script> 中添加以下 JavaScript 代码，或者将其放入单独的 JS 文件中。

// 处理图片点击和模态显示的 JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // 获取模态元素
    var modal = document.getElementById('modal');

    // 获取模态中的图片和描述文字
    var modalImg = document.getElementById('modal-image');
    var captionText = document.getElementById('caption');

    // 获取所有带有 'product-image' 类的图片
    var images = document.querySelectorAll('.product-image');

    images.forEach(function(img) {
        img.onclick = function() {
            modal.style.display = 'block';
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        };
    });

    // 获取关闭按钮
    var closeBtn = document.querySelector('.modal .close');

    // 当用户点击关闭按钮时，隐藏模态
    closeBtn.onclick = function() {
        modal.style.display = 'none';
    };

    // 当用户点击模态背景时，关闭模态
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    };
});

步骤 4：测试您的实现

  1. 在浏览器中打开您的网页。
  2. 点击任何产品图片。
  3. 模态窗口应出现，显示被点击的图片和描述文字。
  4. 点击关闭按钮（&times;）或模态外部区域，关闭模态。

注意事项：

  • 图片质量：确保您的图片（如 prod1.jpg、prod2.jpg 等）有足够的分辨率，以便在大图中显示清晰。
  • 路径调整：如果图片路径有变化，请相应调整 JavaScript 中的 src 属性获取方式。

示例：更新后的图片元素（无需更改）

您的 HTML 图片元素已经包含了 product-image 类，因此无需修改。

<img src="images/prod1.jpg" alt="Strike Freedom Gundam" class="product-image">

通过以上步骤，您应该能够成功实现点击图片查看大图的功能。如果您有任何疑问或需要进一步的帮助，请随时提问。

이 Q&A 공유하기