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
SQL query for users who have logged in for at least n consecutive days
Take 3 consecutive days as an example, using the ...
Detailed explanation of the use of Teleport in Vue3
Table of contents Purpose of Teleport How Telepor...
Use CSS to implement special logos or graphics
1. Introduction Since pictures take up a lot of s...
Detailed explanation of the two modes of Router routing in Vue: hash and history
hash mode (default) Working principle: Monitor th...
Enter the style file for the automatic search suggestion function: suggestion.css
Copy code The code is as follows: .sugLayerDiv{ p...
Detailed explanation of Docker's most commonly used image commands and container commands
This article lists the most commonly used image c...
How MySQL Select Statement is Executed
How is the MySQL Select statement executed? I rec...
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
VMware virtual machine installation Apple Mac OS super detailed tutorial
Table of contents Summarize Sometimes we need to ...
Detailed explanation of how to use join to optimize SQL in MySQL
0. Prepare relevant tables for the following test...
WeChat applet implements a simple handwritten signature component
Table of contents background: need: Effect 1. Ide...
Summary of SQL query optimization knowledge points for MySQL tens of millions of big data
1. To optimize the query, try to avoid full table...
JavaScript manual implementation of instanceof method
1. Usage of instanceof instanceof operator is use...
Detailed explanation of Json format
Table of contents A JSON is built on two structur...
How to use Lottie animation in React Native project
Lottie is an open source animation library for iO...