Home > Article > Web Front-end > How to implement the effect of cross coordinates following the mouse in JS

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

亚连Original: 2018-06-15 15:54:242059browse

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>

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!

JS 微信小程序

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：Implement the method of determining collision through JS!Next article：Implement the method of determining collision through JS!

See more

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

Related articles