前言
今天用js实现一个小功能,div块随鼠标移动而跟随移动,并且每个div块都随机颜色
效果如下
一、思路
首先要创建一个静态页面,以及大量的div块,由于需要鼠标移动时每个div块在不同时间间隔后跟随移动,所以要将块设置绝对定位,使其重叠,静态页面完成后获取元素,对整个页面添加鼠标移入事件,创建一个定时器,最开始时div块隐藏,移入时显示,div块的位置是由鼠标的位置减去图片宽度或者高度的一半,这样就可以实现鼠标在图片正中间,并用随机数的方式随机颜色
二、详细代码
1.静态代码
代码如下(示例):
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
div {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
/* background-color: coral; */
display: none;
}
2.js代码
代码如下(示例):
var divArr = document.getElementsByTagName('div')
// console.log(divArr);
document.onmousemove = function (event) {
var event = event || window.event
var i = 0
var timer = setInterval(function () {
i++
if (i < divArr.length) {
divArr[i].style.display = 'block'
divArr[i].style.backgroundColor = changColor()
divArr[i].style.left = event.clientX - divArr[i].clientWidth / 2 + 'px'
divArr[i].style.top = event.clientY - divArr[i].clientHeight / 2 + 'px'
} else {
clearInterval(timer)
}
}, 100)
function changColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return `rgb(${r},${g},${b})`;
}
}