Heim > Artikel > Web-Frontend > So implementieren Sie den Effekt von Kreuzkoordinaten, die der Maus in JS folgen

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

亚连Original: 2018-06-15 15:54:242039Durchsuche

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>

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!

JS 微信小程序

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren Sie die Methode zur Kollisionsbestimmung über JS!Nächster Artikel：Implementieren Sie die Methode zur Kollisionsbestimmung über JS!

In Verbindung stehende Artikel

Mehr sehen