div块随鼠标移动跟随移动，并随机颜色

最新推荐文章于 2024-11-09 08:46:56 发布

原创最新推荐文章于 2024-11-09 08:46:56 发布 · 973 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

js动画实例专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用JavaScript实现一个功能，当鼠标移动时，div元素跟随鼠标移动，并且每个div块的颜色随机变化。首先创建静态HTML页面和多个重叠的div，然后通过JavaScript获取元素，添加鼠标移入事件，设置定时器，在鼠标移入时显示div，位置由鼠标坐标调整，颜色使用随机数生成。

前言

今天用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})`;
            
        }
    }