body {
fontfamily: Arial, sansserif;
margin: 0;
padding: 20px;
}
h1 {
textalign: center;
marginbottom: 30px;
}
.gallery {
display: grid;
gridtemplatecolumns: repeat(autofit, minmax(300px, 1fr));
gridgap: 20px;
margin: 40px 0;
}
img {
width: 100%;
border: 1px solid ddd;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s;
}
.imgtitle {
margintop: 10px;
textalign: center;
color: 666;
}
.active {
opacity: 1;
}
.description {
padding: 10px;
backgroundcolor: f8f8f8;
border: 1px solid ddd;
boxshadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: none;
}
.showdescription {
cursor: pointer;
color: blue;
fontweight: bold;
}
成都国际诗歌周图片精选
function toggleDescription(img) {
const imgIndex = img.dataset.index;
const description = document.querySelector(`.description[dataindex=${imgIndex}]`);
if (description.style.display === 'none') {
description.style.display = 'block';
img.classList.add('showdescription');
} else {
description.style.display = 'none';
img.classList.remove('showdescription');
}
}
document.querySelectorAll('.gallery img').forEach((img, index) => {
img.addEventListener('click', () => {
toggleDescription(img);
});
});