当然可以，以下是一个简单的示例，演示了如何使用 JavaScript 和 CSS 实现
产品颜色和尺寸切换效果：
HTML 代码：
```
<div class="product-colors">
<div class="product-color" data-color="red"></div>
<div class="product-color" data-color="blue"></div>
<div class="product-color" data-color="green"></div>
</div>
<div class="product-sizes">
<div class="product-size" data-size="small">Small</div>
<div class="product-size" data-size="medium">Medium</div>
<div class="product-size" data-size="large">Large</div>
</div>
<div class="product-image">
<img src="product-red-small.jpg" alt="Product Image">
</div>
```
CSS
代码：
```
.product-colors {
display: flex;
}
.product-color {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.product-color[data-color="red"] {
background-color: red;
}
.product-color[data-color="blue"] {
background-color: blue;
}
.product-color[data-color="green"] {
background-color: green;
}
.product-sizes {
display: flex;
margin-top: 20px;
}
.product-size {
padding: 10px;
border: 1px solid black;
margin-right: 10px;
cursor: pointer;
}
.product-size.active {
background-color: black;
color: white;
}
.product-image img {
max-width: 100%;
margin-top: 20px;
}
```
JavaScript
代码：
```
//
产品颜色切换效果
const productColors = document.querySelectorAll('.product-color');
const productImage = document.querySelector('.product-image img');
productColors.forEach((color) => {
color.addEventListener('mouseover', () => {
const productColor = color.dataset.color;
const productSize = document.querySelector('.product-size.active').dataset.size;
productImage.src = `product-${productColor}-${productSize}.jpg`;
});
});
//
产品尺寸切换效果
const productSizes = document.querySelectorAll('.product-size');
productSizes.forEach((size) => {
size.addEventListener('click', () => {
productSizes.forEach((s) => s.classList.remove('active'));
size.classList.add('active');
const productColor = document.querySelector('.product-color:hover').dataset.color;
const productSize = size.dataset.size;
productImage.src = `product-${productColor}-${productSize}.jpg`;
});
});
// 默认选择第一个颜色和第一个尺寸
productColors[0].dispatchEvent(new Event('mouseover'));
productSizes[0].dispatchEvent(new Event('click'));
```
在这个示例
中，我们创建了一个包含所有
产品颜色的容器，并为每个颜色创建了一个 div 元素。我们还创建了一个包含所有
产品尺寸的容器，并为每个尺寸创建了一个 div 元素。我们还创建了一个包含
产品图像的容器。
在 JavaScript
中，我们使用事件监听器来监听颜色和尺寸选项的点击和鼠标移动事件，并根据所选的值更新
产品图像的显示。我们还使用 CSS 来创建颜色和尺寸选项的样式。
你可以根据自己的需求修改这些
代码，以实现你所需的功能。
最低0.47元/天 解锁文章
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
