Maison > Article > interface Web > Comment implémenter l'effet des coordonnées croisées suivant la souris en JS

Comment implémenter l'effet des coordonnées croisées suivant la souris en JS

亚连original: 2018-06-15 15:54:242033parcourir

Cet article partagera avec vous le code permettant de réaliser l'effet de souris suivant les coordonnées croisées via JS. Les amis dans le besoin peuvent s'y référer.

Cette fois, l'éditeur vous proposera un effet JS, qui peut réaliser l'effet de coordonnées croisées apparaissant en fonction de la taille de la fenêtre du navigateur et suivant le mouvement de la souris. Il peut également calculer les valeurs de coordonnées en temps réel.

Regardons d'abord le rendu après opération :

Voici tout le code après test par l'éditeur :

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

Lors des tests, vous pouvez ajuster le code en JS selon vos besoins X représente l'abscisse et Y représente l'ordonnée.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus