可以通过以下步骤实现:
<div>
元素,并设置其样式为网格布局。例如:<div class="grid-container"></div>
.grid-container {
display: grid;
grid-template-columns: repeat(10, 1fr); /* 定义网格列数 */
grid-template-rows: repeat(10, 1fr); /* 定义网格行数 */
gap: 1px; /* 定义网格间隔 */
width: 500px; /* 定义网格容器宽度 */
height: 500px; /* 定义网格容器高度 */
border: 1px solid #000; /* 定义网格容器边框 */
}
const gridContainer = document.querySelector('.grid-container');
gridContainer.addEventListener('mousemove', function(event) {
const rect = document.createElement('div'); /* 创建矩形元素 */
rect.classList.add('rectangle'); /* 添加矩形样式类名 */
const cellWidth = gridContainer.offsetWidth / 10; /* 计算每个网格单元的宽度 */
const cellHeight = gridContainer.offsetHeight / 10; /* 计算每个网格单元的高度 */
const colIndex = Math.floor(event.offsetX / cellWidth); /* 计算鼠标所在列索引 */
const rowIndex = Math.floor(event.offsetY / cellHeight); /* 计算鼠标所在行索引 */
rect.style.gridColumn = `${colIndex + 1} / span 1`; /* 设置矩形所在列位置 */
rect.style.gridRow = `${rowIndex + 1} / span 1`; /* 设置矩形所在行位置 */
gridContainer.appendChild(rect); /* 将矩形添加到网格容器中 */
});
.rectangle {
background-color: #ff0000; /* 设置矩形背景颜色 */
border: 1px solid #000; /* 设置矩形边框 */
}
这样,当鼠标在网格容器中移动时,会在对应的网格单元中创建一个红色的矩形。
关于mousemove事件、网格布局、矩形创建等相关知识,可以参考以下链接:
领取专属 10元无门槛券
手把手带您无忧上云