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:242039parcourir

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 connexes :

Comment charger des pages Web externes ou des données de serveur à l'aide du framework MUI

Explication détaillée de Karma+Mocha dans Tests unitaires Vue

Comment utiliser la barre de progression Nprogress.js dans vue

Comment implémenter le rendu serveur Nuxt dans Vue

Interprétation détaillée du cycle de vie des pages dans le mini programme WeChat (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn