How to implement the effect of cross coordinates following the mouse in JS-JS Tutorial-php.cn

How to implement the effect of cross coordinates following the mouse in JS

亚连

Release： 2018-06-15 15:54:24

Original

2039 people have browsed it

This article will share with you the code for realizing the effect of cross coordinates following the mouse through JS. Friends in need can refer to it.

This time the editor will bring you a JS effect, which can realize the effect of cross coordinates appearing according to the browser window size and following the movement of the mouse. It can also calculate real-time coordinate values.

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="//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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to load external web pages or server data using the MUI framework

Detailed explanation of Karma Mocha in Vue unit testing

How to use Nprogress.js progress bar in vue

How to implement server rendering Nuxt in Vue

Detailed interpretation of page life cycle in WeChat mini program (detailed tutorial)

The above is the detailed content of How to implement the effect of cross coordinates following the mouse in JS. For more information, please follow other related articles on the PHP Chinese website!