Detailliertes Beispiel für die JS-Implementierung von Kreuzkoordinaten nach dem Mauseffekt-js-Tutorial-php.cn

Detailliertes Beispiel für die JS-Implementierung von Kreuzkoordinaten nach dem Mauseffekt

小云云

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

Original

2226 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich den Code mit, um den Effekt von Kreuzkoordinaten zu realisieren, die der Maus über JS folgen kann auch die Echtzeit-Koordinatenzahl berechnen. Freunde in Not können sich darauf beziehen. Ich hoffe, es hilft allen.

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

Verwandte Empfehlungen:

So erhalten Sie die aktuellen Koordinaten der Maus in Echtzeit

Javascript-Ereignisse und Eigenschaften von Mauskoordinaten

Wie kann JavaScript die Koordinaten eines Elements abrufen

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die JS-Implementierung von Kreuzkoordinaten nach dem Mauseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!