JavaScript 基础
深入数据和类型
函数进阶
运算符
浏览器存储
Document
Web API
事件
工具与规范
实例
练习
$$demo <img src="/诸葛亮.jpg" class="img preview" /> <img src="/jinji.jpg" class="img preview" /> <img src="/jinji-2.jpg" class="img preview" />
<script> for (let img of document.querySelectorAll(".preview")) { // 知识点:DOM 操作 // https://3yya.com/courseware/chapter/162
img.onclick = function () {
let container = document.createElement("div")
container.classList.add("preview-container")
container.onclick = function () {
container.remove()
}
let innerImg = document.createElement("img")
innerImg.classList.add("image")
innerImg.src = img.src
container.onwheel = function (event) {
const width = getComputedStyle(innerImg).width.slice(0, -2)
const height = getComputedStyle(innerImg).height.slice(0, -2)
if (event.deltaY > 0) {
innerImg.style.width = width * 1.2 + "px"
innerImg.style.height = height * 1.2 + "px"
} else if (event.deltaY < 0) {
innerImg.style.width = width * 0.8 + "px"
innerImg.style.height = height * 0.8 + "px"
}
}
container.append(innerImg)
document.body.append(container)
}
}
</script> <style> body { min-height: 600px; } .img { width: 200px; height: 200px;
border: 1px solid black;
object-fit: contain;
}
.preview {
cursor: pointer;
}
.preview-container {
background-color: rgba(0, 0, 0, 0.6);
/* 占满整个屏幕 */
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
/* 子元素水平上下居中 */
display: flex;
justify-content: center;
align-items: center;
}
.preview-container .image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
}
</style> $$