js 实现鼠标拖尾特效

废话不说，直接上代码。

mousemove.js

let isDivCreated = false;
let num = 0

document.head.insertAdjacentHTML('beforeend', `
    <style>
        .icon-div {
            position: absolute;
            pointer-events: none;
            transition: all 1s ease;
            width: 15px;
            z-index: 9999;
        }
        .icon-div img {
            width: 100%;
        }
    </style>
`);

document.onmousemove = function (e) {
    if (isDivCreated) {
        return;
    }
    let div = document.createElement('div');
    div.classList.add('icon-div');
    let img = document.createElement('img');
    div.appendChild(img);
    let img1 = require('../assets/img/mouse/icon.png')
    let img2 = require('../assets/img/mouse/icon1.png')
    let img3 = require('../assets/img/mouse/icon2.png')
    const imagePaths = [img1, img2, img3];
    img.src = imagePaths[num]
    num++
    if (num > 2) num = 0
    document.body.appendChild(div);

    let x = e.clientX;
    let y = e.clientY;
    div.style.left = x + 'px';
    div.style.top = y + 'px';
    div.style.transition = 'all 1s ease'

    setTimeout(function () {
        div.style.transform = 'scale(2.5)';
        div.style.left = x + Math.floor(Math.random() * (401)) - 200 + 'px';
        div.style.top = y + Math.floor(Math.random() * (101)) - 100 + 'px';
    }, 50);
    setTimeout(function () {
        document.body.removeChild(div)
    }, 800);
    isDivCreated = true
    setTimeout(() => {
        isDivCreated = false
    }, 50)
}

我这里用的是vue在App.vue直接引入，整个系统全局生效