Detailed example of JS implementation of cross coordinates following mouse effect-JS Tutorial-php.cn

Detailed example of JS implementation of cross coordinates following mouse effect

小云云

Release： 2017-12-25 16:20:03

Original

2179 people have browsed it

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>

Copy after login

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!