suchen

Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel für die JS-Implementierung von Kreuzkoordinaten nach dem Mauseffekt

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

小云云
小云云Original
2017-12-25 16:20:032269Durchsuche

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>

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!

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：Detaillierte Erläuterung der Anwendungsbeispiele für jQuery EasyUI-FensterNächster Artikel：Detaillierte Erläuterung der Anwendungsbeispiele für jQuery EasyUI-Fenster

In Verbindung stehende Artikel

Mehr sehen