This commit is contained in:
2025-09-01 10:18:23 +08:00
parent 94c090be16
commit e2f97b7b38

View File

@@ -230,12 +230,44 @@
} }
@keyframes spin { @keyframes spin {
0% { 0% { transform: rotate(0deg); }
transform: rotate(0deg); 100% { transform: rotate(360deg); }
} }
100% {
transform: rotate(360deg); /* 图片模态框样式 */
.modal {
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1001; /* 确保在加载动画之上 */
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
} }
.modal-content {
margin: auto;
display: block;
max-width: 80%;
max-height: 80%;
}
.close-btn {
position: absolute;
top: 20px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.close-btn:hover {
color: #bbb;
} }
</style> </style>
</head> </head>
@@ -254,7 +286,7 @@
<h2>示例公式图片</h2> <h2>示例公式图片</h2>
<div class="example-images"> <div class="example-images">
<div class="example-image-card"> <div class="example-image-card">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg" alt="公式示例1"> <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg" alt="公式示例1" onclick="openModal(this.src)">
<div class="description">数学公式示例</div> <div class="description">数学公式示例</div>
</div> </div>
</div> </div>
@@ -280,7 +312,7 @@
<h2>示例试题图片</h2> <h2>示例试题图片</h2>
<div class="example-images"> <div class="example-images">
<div class="example-image-card"> <div class="example-image-card">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg" alt="试题示例1"> <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg" alt="试题示例1" onclick="openModal(this.src)">
<div class="description">试题示例</div> <div class="description">试题示例</div>
</div> </div>
</div> </div>
@@ -299,8 +331,16 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 图片查看模态框 -->
<div id="imageModal" class="modal">
<span class="close-btn" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modalImage">
</div> </div>
</body>
</html>
<script> <script>
// MathJax 配置 // MathJax 配置
window.MathJax = { window.MathJax = {
@@ -479,6 +519,16 @@
div.textContent = text; div.textContent = text;
return div.innerHTML; return div.innerHTML;
} }
// 图片模态框控制函数
function openModal(imageSrc) {
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
modal.style.display = 'block';
modalImg.src = imageSrc;
}
function closeModal() {
document.getElementById('imageModal').style.display = 'none';
}
</script> </script>
</body>
</html>