Home > Article > Web Front-end > How to implement mouse following in JavaScript
How to implement mouse following in JavaScript
- 藏色散人Original
- 2021-06-27 10:18:022826browse
How to implement mouse following in JavaScript: 1. Set "evt || window.event;"; 2. Create "function(evt)"; 3. Create "document.body.scrollTop;"; 4. Just assign the current position of the mouse to the position value of the element.
The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.
How to implement mouse following in JavaScript?
JS method to realize simple mouse following effect
JS method to realize simple mouse following effect. The specific analysis is as follows:
Mouse following, as the name suggests, means that when the mouse moves, there is an animation that follows the mouse.
Point 1:
var oEvent = evt || window.event;
This is written to be compatible with ie and ff. Under ie, window.event represents the event object, while under ff, it is for events. The function passes a parameter, which represents the event object.
Point 2:
document.onmousemove = function(evt)
Mouse following is what happens when the mouse moves.
Point 3:
document.documentElement.scrollTop || document.body.scrollTop;
This is for compatibility with chrome and other browsers. The distance between the scroll bar and the top scrolling. Chrome uses the latter one, and other browsers use the front one. .
Point 4:
oTop.style.top=oEvent.clientY+scrolltop+10+"px";
Assign the current position of the mouse to the position value of the element when the mouse moves.
oEvent.clientY is the current Y coordinate position of the mouse. The distance added to scrolltop is written so that when scrolling to a screen other than the first screen, the mouse following effect remains unchanged.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<div id="to_top">鼠标跟随</div>
</body>
</html>[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to implement mouse following in JavaScript. For more information, please follow other related articles on the PHP Chinese website!