Home > Article > Web Front-end > js method to achieve simple mouse following effect_javascript skills

js method to achieve simple mouse following effect_javascript skills

WBOYOriginal: 2016-05-16 16:04:581197browse

The example in this article describes how to achieve a simple mouse following effect in js. Share it with everyone for your reference. The specific analysis is as follows:

Mouse follow, 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, a parameter is passed to the event function, and this parameter represents the event object.

Point 2:

document.onmousemove = function(evt)

Mouse following is what happens when the mouse is moving.

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>

I hope this article will be helpful to everyone’s JavaScript programming design.

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：js method to achieve sharing and sliding effects as the page scrolls_javascript skillsNext article：js method to achieve sharing and sliding effects as the page scrolls_javascript skills

See more

js method to achieve simple mouse following effect_javascript skills

Related articles