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

Linux file/directory permissions and ownership management

JavaScript to achieve mouse tailing effect

Linux file/directory permissions and ownership management

Summary of some points to note when registering Tomcat as a service

MySQL data insertion optimization method concurrent_insert

VPS builds offline download server (post-network disk era)

Node+socket realizes simple chat room function

Detailed explanation of the reasons and solutions for Docker failing to start normally

mysql calculation function details

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

The problem of form elements and prompt text not being aligned

How to use Baidu Map API in vue project

Recommend

Let's learn about JavaScript object-oriented

Screen command and usage in Linux

Decompression, installation, backup and restore of MySQL under Windows environment

Detailed explanation of using echarts map in angular

Docker image import, export, backup and migration operations

26 Commonly Forgotten CSS Tips

Use SWFObject to perfectly solve the browser compatibility problem of inserting Flash into HTML

Vue implements tab label (label exceeds automatic scrolling)

How to view the IP address of the Docker container

Implementation of CSS Fantastic Border Animation Effect

A brief analysis of how to use border and display attributes in CSS

Three ways to implement text color gradient in CSS

Summary of 16 XHTML1.0 and HTML Compatibility Guidelines

CSS pixels and solutions to different mobile screen adaptation issues

Summary of the most commonly used knowledge points about ES6 new features