So implementieren Sie den Effekt von Kreuzkoordinaten, die der Maus in JS folgen-js-Tutorial-php.cn

So implementieren Sie den Effekt von Kreuzkoordinaten, die der Maus in JS folgen

亚连

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

Original

1989 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie den Kreuzkoordinaten-Mauseffekt über JS realisieren. Bedürftige Freunde können sich darauf beziehen.

Dieses Mal bringt Ihnen der Editor einen JS-Effekt, der den Effekt von Kreuzkoordinaten realisieren kann, die entsprechend der Größe des Browserfensters angezeigt werden und der Bewegung der Maus folgen. Außerdem können Koordinatenwerte in Echtzeit berechnet werden.

Werfen wir zunächst einen Blick auf das Rendering nach der Operation:

Das Folgende ist der gesamte Code nach dem Testen durch den Editor:

<!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>

Nach dem Login kopieren

Während des Testens können Sie den Code in JS entsprechend Ihren Anforderungen anpassen. X stellt die Abszisse und Y die Ordinate dar.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So laden Sie externe Webseiten oder Serverdaten mithilfe des MUI-Frameworks

Ausführliche Erklärung von Karma+Mocha in Vue-Unit-Tests

So verwenden Sie den Nprogress.js-Fortschrittsbalken in Vue

So implementieren Sie das Server-Rendering von Nuxt in Vue

Detaillierte Interpretation des Seitenlebenszyklus im WeChat-Miniprogramm (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Effekt von Kreuzkoordinaten, die der Maus in JS folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!