记得上下班打卡 | git大法好，push需谨慎

Skip to content

L
liquidnet-bus-v1
Commit f87cf397 authored by wangyifan's avatar wangyifan
Browse files
Options

添加图片放大功能

parent 14e5e382
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 2 deletions
liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/kylin/artist/detail.html
View file @ f87cf397
...@@ -146,6 +146,53 @@ ...@@ -146,6 +146,53 @@
color: #999; color: #999;
font-style: italic; font-style: italic;
} }
/* Lightbox */
.img-zoomable {
cursor: zoom-in;
}
#artist-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 99999;
align-items: center;
justify-content: center;
}
#artist-lightbox.active {
display: flex;
}
#artist-lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
transition: transform 0.2s;
}
#artist-lightbox-close {
position: fixed;
top: 20px;
right: 28px;
font-size: 36px;
color: #fff;
cursor: pointer;
line-height: 1;
user-select: none;
opacity: 0.85;
}
#artist-lightbox-close:hover {
opacity: 1;
}
</style> </style>
</head> </head>
<body class="white-bg"> <body class="white-bg">
...@@ -177,7 +224,7 @@ ...@@ -177,7 +224,7 @@
<div class="info-label">艺人头像：</div> <div class="info-label">艺人头像：</div>
<div class="info-value"> <div class="info-value">
<div style="width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;"> <div style="width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
<img th:src="*{avatarUrl}" alt="艺人头像" style="max-width: 100%; max-height: 100%;"> <img th:src="*{avatarUrl}" alt="艺人头像" style="max-width: 100%; max-height: 100%;" class="img-zoomable" onclick="artistLightboxOpen(this.src, this.alt)">
</div> </div>
</div> </div>
</div> </div>
...@@ -197,7 +244,7 @@ ...@@ -197,7 +244,7 @@
<div class="album-gallery"> <div class="album-gallery">
<th:block th:each="img, iterStat : ${ArtistVo.albumImages}"> <th:block th:each="img, iterStat : ${ArtistVo.albumImages}">
<div class="album-item"> <div class="album-item">
<img th:src="${img}" th:alt="'相册图片' + ${iterStat.index + 1}"> <img th:src="${img}" th:alt="'相册图片' + ${iterStat.index + 1}" class="img-zoomable" onclick="artistLightboxOpen(this.src, this.alt)">
</div> </div>
</th:block> </th:block>
</div> </div>
...@@ -287,6 +334,34 @@ ...@@ -287,6 +334,34 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 图片放大灯箱 -->
<div id="artist-lightbox" onclick="artistLightboxClose()">
<span id="artist-lightbox-close" onclick="artistLightboxClose()">&times;</span>
<img id="artist-lightbox-img" src="" alt="" onclick="event.stopPropagation()">
</div>
<script>
function artistLightboxOpen(src, alt) {
var lb = document.getElementById('artist-lightbox');
var img = document.getElementById('artist-lightbox-img');
img.src = src;
img.alt = alt || '';
lb.classList.add('active');
document.body.style.overflow = 'hidden';
}
function artistLightboxClose() {
var lb = document.getElementById('artist-lightbox');
lb.classList.remove('active');
document.getElementById('artist-lightbox-img').src = '';
document.body.style.overflow = '';
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') { artistLightboxClose(); }
});
</script>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment