好久没有写文章了，今天咱们来实现一个好玩的鼠标移动效果
1.grid布局
先用grid布局，渲染一定数量的div
<body class="container">
</body>
样式布局
*{
margin: 0;
padding: 0;
}
.container{
box-sizing: border-box;
margin: 0 auto;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background: #7fdbda;
display: grid;
grid-auto-flow: row;
grid-gap: 10px;
grid-template-columns:repeat(36, 1fr);
grid-template-rows:repeat(20, 1fr);
}
.container .item{
background-color: #f08a5d;
transition: 0.5s all;
transform: rotate(var(--deg));
}
const row = 36;
const col = 20;
const container = document.querySelector('.container');
const total = row * col;
for(let i = 0; i < total; i++){
const div = document.createElement('div');
div.classList.add('item');
container.appendChild(div);
}
监听鼠标移动事件
document.onmousemove = function(event){
handleMouseMove(event)
}
function handleMouseMove(event){
var posX = 0, posY = 0;
//标准化事件对象
var e = event || window.event;
//获取鼠标指针的当前坐标值
if (e.pageX || e.pageY) {
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
const divArr = document.querySelectorAll('.item');
const disArr = [];
divArr.forEach(div => {
let offsetTop = div.offsetTop;
let offsetLeft = div.offsetLeft;
var tan = (posY - offsetTop) / (posX - offsetLeft);
var t = Math.atan(tan);
const angle = t/Math.PI * 180;
div.style.transform = `rotate(${angle}deg)`;
var dis = Math.sqrt(Math.pow(posY - offsetTop,2) + Math.pow(posX - offsetLeft,2));
disArr.push({
dom: div,
dis
});
})
//根据距离排序
disArr.sort((a,b) => {
return a.dis - b.dis
})
//设置不透明度
disArr.map((o, i) => {
o.dom.style.opacity = 1 - i / 1500;
})
}
体验下掘金的代码片段
