实现效果
鼠标移动到图标,选框跟随移动,如下图:
实现思路
-
使用css变量设置选框位置和样式
.pointer { --l: 30px; /* 线框长度*/ --t: 3px; /* 线框粗细 */ --g: 16px; /* 线框与图片的间隙 */ --w: 350px; /* 图片大小 */ --h: 200px; /* 图片大小 */ --x: -600px; --y: 24px; /* 线框左上角纵坐标 */ display: none; position: absolute; width: calc(var(--w) + var(--g) * 2); height: calc(var(--h) + var(--g) * 2); border: var(--t) solid #fff; left: calc(var(--x) - var(--g)); top: calc(var(--y) - var(--g)); }
-
使用css 的 mask属性绘制选框边缘
.pointer { mask: conic-gradient( at var(--l) var(--l), transparent 75%, blue 75% 100% ) 0 0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat; }
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片选框跟随鼠标移动</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #000;
padding: 50px;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
position: relative;
}
.item {
width: 100%;
padding: 24px;
}
.item img {
width: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.pointer {
--l: 30px; /* 线框长度*/
--t: 3px; /* 线框粗细 */
--g: 16px; /* 线框与图片的间隙 */
--w: 350px; /* 图片大小 */
--h: 200px; /* 图片大小 */
--x: -600px;
--y: 24px; /* 线框左上角纵坐标 */
display: none;
position: absolute;
width: calc(var(--w) + var(--g) * 2);
height: calc(var(--h) + var(--g) * 2);
border: var(--t) solid #fff;
left: calc(var(--x) - var(--g));
top: calc(var(--y) - var(--g));
transition: 0.2s;
mask: conic-gradient(
at var(--l) var(--l),
transparent 75%,
blue 75% 100%
)
0 0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="item"><img src="./out/1 (1).jpg" alt="" /></div>
<div class="item"><img src="./out/1 (2).jpg" alt="" /></div>
<div class="item"><img src="./out/1 (3).jpg" alt="" /></div>
<div class="item"><img src="./out/1 (4).jpg" alt="" /></div>
<div class="item"><img src="./out/1 (5).jpg" alt="" /></div>
<div class="item"><img src="./out/1 (6).jpg" alt="" /></div>
<div class="pointer"></div>
</div>
</body>
<script>
const images = document.querySelectorAll(".container img");
const pointer = document.querySelector(".pointer");
for (const img of images) {
img.onmouseenter = () => {
pointer.style.display = "block";
pointer.style.setProperty("--w", `${img.offsetWidth}px`);
pointer.style.setProperty("--h", `${img.offsetHeight}px`);
pointer.style.setProperty("--x", `${img.offsetLeft}px`);
pointer.style.setProperty("--y", `${img.offsetTop}px`);
console.log("pointer", pointer);
};
}
</script>
</html>