Home > Article > Web Front-end > Detailed example of JS implementation of cross coordinates following mouse effect

Detailed example of JS implementation of cross coordinates following mouse effect

小云云Original: 2017-12-25 16:20:032195browse

This article mainly shares with you the code to realize the effect of cross coordinates following the mouse through JS. It can realize the effect of cross coordinates appearing according to the size of the browser window and following the movement of the mouse. It can also calculate the real-time coordinate number. Friends in need can refer to it. Let’s study. Hope it helps everyone.

Let’s first take a look at the rendering after operation:

The following is all the code after the editor’s test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标跟随十字JS特效代码</title>
</head>
<body style="margin: 0;">
 <p id="html"></p>
 <script type="text/javascript">
 //
 var ox = document.createElement(&#39;p&#39;);
 var oy = document.createElement(&#39;p&#39;);
 ox.style.width = &#39;100%&#39;;
 ox.style.height = &#39;1px&#39;;
 ox.style.backgroundColor = &#39;#ddd&#39;;
 ox.style.position = &#39;fixed&#39;;
 ox.style.left = 0;
 document.body.appendChild(ox);
 oy.style.height = &#39;100%&#39;;
 oy.style.width = &#39;1px&#39;;
 oy.style.backgroundColor = &#39;#ddd&#39;;
 oy.style.position = &#39;fixed&#39;;
 oy.style.top = 0;
 document.body.appendChild(oy);
 document.onmousemove = function(e){
 var e = e || event;
 var x = e.pageX;
 var y = e.pageY;
 ox.style.top = y + &#39;px&#39;;
 oy.style.left = x + &#39;px&#39;;
 document.getElementById(&#39;html&#39;). innerHTML = &#39;x : &#39; + x + &#39;<br/>y : &#39; + y;
 };
 </script>
<p>更多代码请访问：<a href="http://www.jb51.net/" target="_blank">脚本之家</a></p>
</body>
</html>

During testing, you can adjust the code in JS according to your needs. X represents the abscissa and Y represents the ordinate.

Related recommendations:

How to get the current coordinates of the mouse in real time

Javascript events and properties of mouse coordinates

How to get the coordinates of an element with JavaScript

The above is the detailed content of Detailed example of JS implementation of cross coordinates following mouse 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：Detailed explanation of jQuery EasyUI window usage examplesNext article：Detailed explanation of jQuery EasyUI window usage examples

See more

Detailed example of JS implementation of cross coordinates following mouse effect

Related articles