JavaScript to achieve mouse tailing effect

Mouse effects require the use of setTimeout to generate nodes at fixed times, delete nodes, and assign random widths, heights, and colors to the generated nodes, so that each effect node looks different.

Note: The generated node needs to be absolutely positioned so that it is out of the document flow and does not affect the position of other elements on the page.

Code example:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Effects</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #9df;
            overflow: hidden;
            height: 100vh;
        }
        
        span {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            box-shadow: 10px 10px 30px #45f, -10px -10px 30px #d80;
            animation: box 5s linear infinite;
            z-index: 3;
        }
        
        @keyframes box {
            0% {
                transform: translate(-50%, -50%);
                opacity: 1;
                filter: hue-rotate(0deg);
            }
            100% {
                transform: translate(-50%, -1000%);
                opacity: 1;
                filter: hue-rotate(720deg);
            }
        }
    </style>
</head>
 
<body>
 
</body>
 
</html>
<script>
    document.addEventListener("mousemove", function(e) {
        var body = document.querySelector("body");
        var span = document.createElement("span");
        var x = e.offsetX
        var y = e.offsetY
        span.style.left = x + "px"
        span.style.top = y + "px";
 
        console.log(x + ">>>" + y)
        var a = Math.random() * 30;
        span.style.width = 30 + a + "px";
        span.style.height = 30 + a + "px";
        body.appendChild(span);
        setTimeout(function() {
            span.remove();
            // console.log("ok")
        }, 4500)
    })
</script>

Running results:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Common array operations in JavaScript
A simple and in-depth study of async and await in JavaScript
JavaScript implementation of classic snake game
Javascript basics about built-in objects
Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop
Comparison between Python coroutines and JavaScript coroutines
JavaScript to achieve simple drag effect
Detailed explanation of JavaScript array deduplication
JavaScript to implement the aircraft war game
JavaScript setinterval delay one second solution
Detailed explanation of JavaScript upload file limit parameter case
A brief talk about JavaScript variable promotion
In-depth understanding of JavaScript event execution mechanism
8 essential JavaScript code snippets for your project

<<: Analysis of Linux Zabbix custom monitoring and alarm implementation process

>>: How to solve the mysql insert garbled problem