Home > Article > Web Front-end > javascript changes mouse position
javascript changes mouse position
- WBOYOriginal
- 2023-05-22 09:11:071303browse
JavaScript is a widely used scripting language that can be used in various situations such as web page interaction and dynamic effects. Among them, changing the mouse position through JavaScript is a common technique that can help achieve various interesting interactive effects.
There are many ways to change the mouse position in JavaScript. The common methods are as follows:
1. Using JavaScript’s window.scrollTo() method
window.scrollTo The () method allows the web page to jump to a specified location, in which the x and y coordinates of the scroll bar of the web page can be set. Therefore, this method can be used to change the mouse position and achieve the mouse following effect.
The following is a simple sample code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
#pointer {
position: absolute;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
opacity: 0.7;
transition: all 0.2s ease-in-out;
}
</style>
<script>
function movePointer(event) {
var pointer = document.getElementById("pointer");
var x = event.clientX;
var y = event.clientY;
window.scrollTo(x, y);
pointer.style.left = x + "px";
pointer.style.top = y + "px";
}
</script>
</head>
<body onmousemove="movePointer(event)">
<div id="pointer"></div>
<p>移动鼠标以查看效果</p>
</body>
</html>In the above code, a div element with the ID "pointer" is defined and set to a red circle through CSS styles. Then, a "movePointer" function is defined in JavaScript, which is called when the mouse moves and changes the scroll bar of the web page through the "window.scrollTo" method to achieve the effect of mouse following.
2. Use JavaScript’s document.elementFromPoint() method
The document.elementFromPoint() method can get the element at the specified coordinates, so you can get the element where the mouse is located through this method, and let The element follows the mouse movement.
The following is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
#pointer {
position: absolute;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
opacity: 0.7;
transition: all 0.2s ease-in-out;
}
</style>
<script>
function movePointer(event) {
var pointer = document.getElementById("pointer");
var x = event.clientX;
var y = event.clientY;
var element = document.elementFromPoint(x, y);
if (element) {
pointer.style.left = x + "px";
pointer.style.top = y + "px";
element.appendChild(pointer);
}
}
</script>
</head>
<body onmousemove="movePointer(event)">
<p>移动鼠标以查看效果</p>
<div><span>元素1</span></div>
<div><span>元素2</span></div>
<div><span>元素3</span></div>
<div><span>元素4</span></div>
<div><span>元素5</span></div>
<div><span>元素6</span></div>
<div><span>元素7</span></div>
<div><span>元素8</span></div>
<div><span>元素9</span></div>
<div><span>元素10</span></div>
<div><span>元素11</span></div>
<div><span>元素12</span></div>
<div><span>元素13</span></div>
<div><span>元素14</span></div>
<div><span>元素15</span></div>
<div><span>元素16</span></div>
<div><span>元素17</span></div>
<div><span>元素18</span></div>
<div><span>元素19</span></div>
<div><span>元素20</span></div>
</body>
</html>In the above code, a div element with the ID "pointer" is defined, and a "movePointer" function is defined in JavaScript. This function gets the element the mouse is on by using the document.elementFromPoint() method and adds the "pointer" element to that element.
3. Use CSS styles to change the shape of the mouse
In addition to changing the mouse position, you can also change the shape of the mouse through CSS styles, which can also achieve interesting interactive effects to a certain extent.
The following is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
body {
cursor: url('https://www.w3schools.com/js/pic_move.png'), auto;
}
</style>
</head>
<body>
<p>移动鼠标查看效果。</p>
</body>
</html>In the above code, the shape of the mouse is changed to the "pic_move.png" image through CSS styles, thereby achieving interesting mouse interaction effects.
In short, changing the mouse position through JavaScript is one of the important techniques to achieve dynamic interactive effects. Developers can choose the appropriate method to achieve the corresponding effect based on actual needs.
The above is the detailed content of javascript changes mouse position. For more information, please follow other related articles on the PHP Chinese website!