JavaScript implements cool mouse tailing effects
|
After watching this, I guarantee that you have hands, and you can make all kinds of beautiful little tails!
The full code is as follows, you can easily understand it by looking at the comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div style*/
#main{
width: auto;height: 1500px;margin: 0;background-color: black;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
//==========Mouse planet tail JS code============
//========Function: Get the current mouse coordinates=========
function getMousePosition(event) {
var x = 0; //x coordinate var y = 0; //y coordinate //documentElement returns the document element of a document.
doc = document.documentElement;
//body returns the body element of the document body = document.body;
//Solve compatibility if (!event) event = window.event;
//Solve the difference between the relative coordinates after the mouse wheel is rolled //pageYoffset is unique to Netscape if (window.pageYoffset) {
x = window.pageXOffset;
y = window.pageYOffset;
} else {//Other browser mouse scroll x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc && doc.clientLeft || body && body.clientLeft || 0);
y = (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc && doc.clientTop || body && body.clientTop || 0);
}
//The obtained x plus the horizontal coordinate of the mouse pointer relative to the browser page (or client area) when the event is triggered x += event.clientX;
//The obtained x plus the vertical coordinate y of the mouse pointer relative to the browser page (or client area) when the event is triggered += event.clientY;
//Return x and y
return {'x': x, 'y': y};
}
//========Function: Get the current mouse coordinates=========
//=====Generate a random number from minNum to maxNum=====
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
default:
return 0;
}
}
//=====Generate a random number from minNum to maxNum======
//======Bind a mouse move event to the entire document======
document.onmousemove = function(event){
// Create a tag on the page (here is to create a custom tag styleImg)
var styleImg = document.createElement("div");
//Get random numbers 1-5 and set the label style according to the random numbers var r = randomNum(1,5);
switch (r) {
case 1:
//Set the path of the image. You can change it to different styles according to different paths styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
break;
case 2:
styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
break;
case 3:
styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
break;
case 4:
styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
break;
case 5:
styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
break;
}
// Since you want to set the animation, set left and top, you must set the positioning styleImg.style.position = 'absolute'
// Set the initial position of the label, that is, the current position of the mouse var x = getMousePosition(event).x;
var y = getMousePosition(event).y;
// Set the coordinates of styleImg styleImg.style.top = y + "px";
styleImg.style.left = x + "px";
//Bind testDiv to the area where the current mouse tail is effective var testDiv = document.getElementById("main");
// Add the new tag to the body tag of the page testDiv.appendChild(styleImg);
// Anything beyond the limit in the document will not be displayed, so try to bind it to the div on the page // Set overflow to hide, to prevent the mouse from triggering the up and down scroll bars during movement testDiv.style.overflow = 'hidden';
//
var count = 0;
//The setInterval() method calls a function or calculates an expression at a specified period (in milliseconds) var time = setInterval(function(){
// Set the timer to modify the corresponding transparency of each generated label within the specified period count += 5;
styleImg.style.opacity = (100-count)/100;
}, 30)
// The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds.
// Set a delay timer, clear the above timer after a certain period of time, so that the created label will no longer change setTimeout(function(){
// Use clearInterval() to stop executing the setInterval function clearInterval(time);
// Delete the created tag testDiv.removeChild(styleImg);
},250)
}
</script>
</body>
</html>
ps: The above code is written by myself after referring to many different documents. I did not write a blog for VC! Finally, I will give you the picture materials. As long as you make simple modifications in the above code, you can realize other styles of small tails.
This is the end of this article about how to achieve cool mouse tail effects with JavaScript. For more relevant JavaScript mouse tail effects content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Issues with locking in MySQL
>>: Example of horizontal arrangement of li tags in HTMl
Recommend
About installing python3.8 image in docker
Docker Hub official website 1. Search for Python ...
Steps to introduce PWA into Vue project
Table of contents 1. Install dependencies 2. Conf...
Mobile front-end adaptation solution (summary)
I searched online and found that many interviews ...
Detailed explanation of the time representation example of the Linux time subsystem
Preface In the Linux kernel, in order to be compa...
Automatically install the Linux system based on cobbler
1. Install components yum install epel-rpm-macros...
How to detect file system integrity based on AIDE in Linux
1. AIDE AIDE (Advanced Intrusion Detection Enviro...
How to view the execution time of SQL statements in MySQL
Table of contents 1. Initial SQL Preparation 2. M...
Vue project realizes paging effect
The paging effect is implemented in the vue proje...
Manually implement js SMS verification code input box
Preface This article records a common SMS verific...
Examples of preview functions for various types of files in vue3
Table of contents Preface 1. Preview of office do...
Detailed explanation of MySQL's MERGE storage engine
The MERGE storage engine treats a group of MyISAM...
Implementation of comparison, sorting and other operations on varchar type dates in MySQL
When using MySQL, dates are generally stored in f...
How to use Dayjs to calculate common dates in Vue
When using vue to develop projects, the front end...
Complete steps to use element in vue3.0
Preface: Use the element framework in vue3.0, bec...
A brief discussion on Vue3 father-son value transfer
Table of contents From father to son: 1. In the s...