使用公共api 接口 来模拟异步数据，一个简单demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="background-color: black">
<div>
<div class="imageContainer" id="imageContainer">
<div class="pointer"></div>
<!-- <img src="https://via.placeholder.com/600/92c952" alt="" class="item" />
<img src="https://via.placeholder.com/600/92c952" alt="" class="item" />
<img src="https://via.placeholder.com/600/92c952" alt="" class="item" />
<img src="https://via.placeholder.com/600/92c952" alt="" class="item" />
<img src="https://via.placeholder.com/600/92c952" alt="" class="item" />
<img src="https://via.placeholder.com/600/92c952" alt="" class="item" /> -->
</div>
</div>
</body>
<style>
.item {
width: 200px;
height: 200px;
margin: 30px 30px;
/* 硬件加速 解决卡顿 */
transition: transform 0.5s;
}
.imageContainer {
position: relative;
/* margin: 30px 30px; */
/* margin-top: 20px;
margin-left: 20px; */
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-items: center;
}
.pointer {
position: absolute;
--l: 30px; /* 长度 */
--g: 15px; /* 间隔 */
--t: 3px; /* 粗细 */
--s: 200px; /*框住元素的大小*/
--x: 30px;
--y: 30px;
width: calc(var(--s) + var(--g) * 2);
height: calc(var(--s) + var(--g) * 2);
border: var(--t) solid #fff;
left: calc(var(--x) - var(--g)); /* + var(--g) */
top: calc(var(--y) - var(--g)); /* + var(--g) */
box-sizing: border-box;
transition: 0.5s;
-webkit-mask: conic-gradient(at var(--l) var(--l), transparent 75%, red 75%) 0 0 /* 左上角坐标 */ /
calc(100% - var(--l)) calc(100% - var(--l)); /* 重复尺寸 */
}
</style>
<script>
async function getPictures() {
return window
.fetch("https://jsonplaceholder.typicode.com/photos", {
headers: {
"Content-Type": "application/json"
// 'Content-Type': 'application/x-www-form-urlencoded',
}
// body: JSON.stringify(data) // body data type must match "Content-Type" header
})
.then(response => {
return response.json();
})
.then(data => {
console.log(111, data);
return data;
});
}
function renderImages(images) {
const imageContainer = document.getElementById("imageContainer");
images.forEach(image => {
const imgElement = document.createElement("img");
imgElement.src = image.url;
imgElement.style = "wdith:200px; height:200px; margin: 30px 30px; transition: transform 0.5s;";
imgElement.className = "item";
imageContainer.appendChild(imgElement);
});
}
function getImgs() {
const imgs = document.querySelectorAll(".imageContainer img");
const pointer = document.querySelector(".pointer");
for (const img of imgs) {
img.onmouseenter = () => {
console.log("item", img.offsetLeft, img.offsetTop);
pointer.style.setProperty("--x", img.offsetLeft + "px");
pointer.style.setProperty("--y", img.offsetTop + "px");
pointer.style.setProperty("--s", img.offsetWidth + "px");
};
}
}
getPictures().then(data => {
// 5000太多
renderImages(data.slice(0, 36));
getImgs();
});
// getImgs(); //单独使用
</script>
</html>
