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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


前言

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值