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

The difference between Div and table in HTML (discussed in detail in all aspects)

JavaScript to achieve mouse tailing effect

The difference between Div and table in HTML (discussed in detail in all aspects)

Vue+ElementUI implements paging function-mysql data

MySQL uses inet_aton and inet_ntoa to process IP address data

Solution to the problem that the configuration file my.cnf in MySQL cannot be started due to permission issues

Basic security settings steps for centos7 server

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

nginx automatically generates configuration files in docker container

Explanation of the new feature of Hadoop 2.X, the recycle bin function

JavaScript canvas to load pictures

Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

Recommend

MySQL sharding details

Description of the execution mechanisms of static pages and dynamic pages

Detailed explanation of the difference between IE8 compatibility view (IE7 mode) and standalone IE7

How to represent various MOUSE shapes

Implementation of Nginx configuration Https security authentication

WeChat applet development form validation WxValidate usage

LayUI+Shiro implements a dynamic menu and remembers the example of menu expansion

JavaScript static scope and dynamic scope explained with examples

Detailed explanation of how Tomcat implements asynchronous Servlet

A brief discussion on using Vue to complete the mobile apk project

Summary of pitfalls encountered in installing mysql and mysqlclient on centos7

Tutorial on setting up scheduled tasks to backup the Oracle database under Linux

Why MySQL should avoid large transactions and how to solve them

WeChat applet example of using functions directly in {{ }}

What is table partitioning and partitioning? MySql database partitioning and table partitioning method