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
How to make if judgment in js as smooth as silk
Table of contents Preface Code Implementation Ide...
Detailed explanation of HTML basic tags and structures
1. HTML Overview 1.HTML: Hypertext Markup Languag...
JavaScript realizes the generation and verification of random codes
The generation and verification of random codes i...
Analysis of the use of the MySQL database show processlist command
In actual project development, if we have a lot o...
MySQL deduplication methods
MySQL deduplication methods 【Beginner】There are v...
Practical example of nested routes in vue.js Router
Table of contents Preface Setting up with Vue CLI...
A few front-end practice summaries of Alipay's new homepage
Of course, it also includes some personal experien...
my.cnf parameter configuration to optimize InnoDB engine performance
I have read countless my.cnf configurations on th...
The role and methods of information communication in website visual design (picture and text)
Contemporary web visual design has gone through th...
Web Design Experience: Efficiently Writing Web Code
Originally, this seventh chapter should be a deep ...
More elegant processing of dates in JavaScript based on Day.js
Table of contents Why use day.js Moment.js Day.js...
Make a nice flip login and registration interface based on html+css
Make a nice flip login and registration interface...
Docker nginx + https subdomain configuration detailed tutorial
Today I happened to be helping a friend move his ...
Install and deploy java8 and mysql under centos7
Generally, learning Java and deploying projects a...
An article to quickly understand Angular and Ionic life cycle and hook functions
Table of contents Angular accomplish Calling orde...