Home > Article > Web Front-end > Implementation of JavaScript mouse following effect

Implementation of JavaScript mouse following effect

黄舟Original: 2017-11-18 13:22:142122browse

In our daily development work, we will often use JavaScript to achieve the mouse following effect. Many friends may not know much about mouse following. Today we will introduce JavaScript to achieve the mouse following effect. The method involves JavaScript mouse events, coordinate acquisition and other related techniques!

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 passes a parameter to the event function. This The parameters represent event objects.

Point 2:

document.onmousemove = function(evt)

Mouse following is what happens when the mouse moves.

Point three:

document.documentElement.scrollTop || document.body.scrollTop;

This is to be compatible 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>
<p id="to_top">鼠标跟随</p>
</body>
</html>

Summary:

I believe that by studying this article, my friends will be able to implement mouse in JavaScript Follow to have a better understanding, I hope it will be helpful to your work!

Related recommendations:

The text change effect following the mouse

A simple mouse following prompt effect based on JQuery

Mouse following code implemented by JS (cartoon hand click effect)

The above is the detailed content of Implementation of JavaScript mouse following effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implement rich text editor using javascriptNext article：Implement rich text editor using javascript

See more

Implementation of JavaScript mouse following effect

Related articles